From 676471b3fea437dae96f9bb2257bbc0cfc715885 Mon Sep 17 00:00:00 2001 From: Andrew Morris Date: Tue, 12 Jul 2022 11:54:02 +1000 Subject: [PATCH] Use QuillContext in Confirm dialog --- extension/source/Confirm/Confirm.tsx | 48 ++++++++++--------- extension/source/Confirm/index.tsx | 20 ++++++-- extension/source/Home/Home.tsx | 2 +- extension/source/Home/LoadingPage.tsx | 2 +- .../Onboarding/ReviewSecretPhrasePanel.tsx | 2 +- extension/source/Home/Theme.tsx | 2 +- .../Wallet/Settings/DeveloperSettings.tsx | 2 +- .../Home/Wallet/Settings/GeneralSettings.tsx | 2 +- .../Home/Wallet/Settings/NetworkSettings.tsx | 2 +- .../source/Home/Wallet/Wallets/Balance.tsx | 2 +- .../Home/Wallet/Wallets/DisplayNonce.tsx | 2 +- .../Wallets/SendDetail/AssetSelector.tsx | 2 +- .../Wallets/SendDetail/RecipientSelector.tsx | 2 +- .../Wallet/Wallets/SendDetail/SendDetail.tsx | 2 +- .../Wallets/SendDetail/SendProgress.tsx | 2 +- .../Home/Wallet/Wallets/WalletDetail.tsx | 2 +- .../Home/Wallet/Wallets/WalletWrapper.tsx | 2 +- extension/source/{Home => }/QuillContext.tsx | 20 ++++---- extension/source/types/window.d.ts | 2 +- 19 files changed, 68 insertions(+), 52 deletions(-) rename extension/source/{Home => }/QuillContext.tsx (80%) diff --git a/extension/source/Confirm/Confirm.tsx b/extension/source/Confirm/Confirm.tsx index 41cd925b..e95de5e9 100644 --- a/extension/source/Confirm/Confirm.tsx +++ b/extension/source/Confirm/Confirm.tsx @@ -1,5 +1,5 @@ -import { FunctionComponent, useEffect, useState } from 'react'; -import { runtime, storage } from 'webextension-polyfill'; +import { FunctionComponent, useState } from 'react'; +import { runtime } from 'webextension-polyfill'; // components, styles and UI import { Check, X, CaretLeft, CaretRight } from 'phosphor-react'; @@ -12,37 +12,37 @@ import { } from '../types/Rpc'; import TransactionCard from './TransactionCard'; import onAction from '../helpers/onAction'; +import { useQuill } from '../QuillContext'; +import useCell from '../cells/useCell'; +import Loading from '../components/Loading'; const Confirm: FunctionComponent = () => { - const [id, setId] = useState(); - const [actions, setActions] = useState([]); + const quill = useQuill(); + + const id = new URL(window.location.href).searchParams.get('id'); + const transactions = useCell(quill.cells.transactions); + const [current, setCurrent] = useState(0); - useEffect(() => { - const params = new URL(window.location.href).searchParams; - const txid = params.get('id'); - setId(txid); + if (transactions === undefined) { + return ; + } - const fetchTx = async () => { - const data = await storage.local.get('transactions'); - const tx = data.transactions.value.outgoing.find( - (t: any) => t.id === txid, - ); - setActions(tx.actions); - }; + const tx = transactions.outgoing.find((t) => t.id === id); - fetchTx(); - }, []); + if (tx === undefined) { + return <>Error: Tx not found; + } const respondTx = (result: PromptMessage['result']) => { runtime.sendMessage(undefined, { id, result }); }; const nextTx = () => { - setCurrent((current + 1) % actions.length); + setCurrent((current + 1) % tx.actions.length); }; const prevTx = () => { - setCurrent((current - 1) % actions.length); + setCurrent((current - 1) % tx.actions.length); }; const calculateTotal = (allActions: SendTransactionParams[]) => { @@ -72,9 +72,9 @@ const Confirm: FunctionComponent = () => {
AppName is making requests to your wallet
- {actions.length > 1 && ( + {tx.actions.length > 1 && (
- {current + 1} of {actions?.length} + {current + 1} of {tx.actions?.length}
{
- {actions[current] && } + {tx.actions[current] && ( + + )}
Total Transaction Fees
USD $0.0
-
{calculateTotal(actions)} ETH
+
{calculateTotal(tx.actions)} ETH
diff --git a/extension/source/Confirm/index.tsx b/extension/source/Confirm/index.tsx index 772dc947..e496de06 100644 --- a/extension/source/Confirm/index.tsx +++ b/extension/source/Confirm/index.tsx @@ -1,7 +1,21 @@ +import '../styles/index.scss'; +import './styles.scss'; + import ReactDOM from 'react-dom'; +import Browser from 'webextension-polyfill'; +import QuillEthereumProvider from '../QuillEthereumProvider'; import Confirm from './Confirm'; -import '../styles/index.scss'; -import './styles.scss'; +import { QuillContextProvider } from '../QuillContext'; + +window.ethereum = new QuillEthereumProvider(true); + +window.debug ??= {}; +window.debug.Browser = Browser; -ReactDOM.render(, document.getElementById('confirm-root')); +ReactDOM.render( + + + , + document.getElementById('confirm-root'), +); diff --git a/extension/source/Home/Home.tsx b/extension/source/Home/Home.tsx index 21b83d0c..74f8a866 100644 --- a/extension/source/Home/Home.tsx +++ b/extension/source/Home/Home.tsx @@ -3,7 +3,7 @@ import { HashRouter, Route, Routes } from 'react-router-dom'; import OnboardingPage from './Onboarding/OnboardingPage'; import { WalletsPage } from './Wallet/WalletsPage'; -import { QuillContextProvider } from './QuillContext'; +import { QuillContextProvider } from '../QuillContext'; import Theme from './Theme'; import LoadingPage from './LoadingPage'; diff --git a/extension/source/Home/LoadingPage.tsx b/extension/source/Home/LoadingPage.tsx index cb83fd1c..ba2f9d23 100644 --- a/extension/source/Home/LoadingPage.tsx +++ b/extension/source/Home/LoadingPage.tsx @@ -2,7 +2,7 @@ import { FunctionComponent, useEffect } from 'react'; import { useNavigate } from 'react-router-dom'; import Loading from '../components/Loading'; -import { useQuill } from './QuillContext'; +import { useQuill } from '../QuillContext'; const LoadingPage: FunctionComponent = () => { const navigate = useNavigate(); diff --git a/extension/source/Home/Onboarding/ReviewSecretPhrasePanel.tsx b/extension/source/Home/Onboarding/ReviewSecretPhrasePanel.tsx index d654cf78..752ada81 100644 --- a/extension/source/Home/Onboarding/ReviewSecretPhrasePanel.tsx +++ b/extension/source/Home/Onboarding/ReviewSecretPhrasePanel.tsx @@ -4,7 +4,7 @@ import { ArrowRight } from 'phosphor-react'; import { useNavigate } from 'react-router-dom'; import Button from '../../components/Button'; import Range from '../../helpers/Range'; -import { useQuill } from '../QuillContext'; +import { useQuill } from '../../QuillContext'; const WordInReview: FunctionComponent<{ index: number; diff --git a/extension/source/Home/Theme.tsx b/extension/source/Home/Theme.tsx index eb3528c0..e2f306af 100644 --- a/extension/source/Home/Theme.tsx +++ b/extension/source/Home/Theme.tsx @@ -1,6 +1,6 @@ import { FunctionComponent } from 'react'; import useCell from '../cells/useCell'; -import { useQuill } from './QuillContext'; +import { useQuill } from '../QuillContext'; const Theme: FunctionComponent = ({ children }) => { const quill = useQuill(); diff --git a/extension/source/Home/Wallet/Settings/DeveloperSettings.tsx b/extension/source/Home/Wallet/Settings/DeveloperSettings.tsx index a13e1e2a..56748156 100644 --- a/extension/source/Home/Wallet/Settings/DeveloperSettings.tsx +++ b/extension/source/Home/Wallet/Settings/DeveloperSettings.tsx @@ -1,6 +1,6 @@ import { FunctionComponent } from 'react'; import CheckBox from '../../../cells/components/CheckBox'; -import { useQuill } from '../../QuillContext'; +import { useQuill } from '../../../QuillContext'; const DeveloperSettings: FunctionComponent = () => { const { cells } = useQuill(); diff --git a/extension/source/Home/Wallet/Settings/GeneralSettings.tsx b/extension/source/Home/Wallet/Settings/GeneralSettings.tsx index 4cf7c65a..9bfacb05 100644 --- a/extension/source/Home/Wallet/Settings/GeneralSettings.tsx +++ b/extension/source/Home/Wallet/Settings/GeneralSettings.tsx @@ -1,6 +1,6 @@ import { FunctionComponent } from 'react'; import Display from '../../../cells/components/Display'; -import { useQuill } from '../../QuillContext'; +import { useQuill } from '../../../QuillContext'; const GeneralSettings: FunctionComponent = () => { const { cells } = useQuill(); diff --git a/extension/source/Home/Wallet/Settings/NetworkSettings.tsx b/extension/source/Home/Wallet/Settings/NetworkSettings.tsx index 95cbc0bc..00b81de9 100644 --- a/extension/source/Home/Wallet/Settings/NetworkSettings.tsx +++ b/extension/source/Home/Wallet/Settings/NetworkSettings.tsx @@ -1,6 +1,6 @@ import { FunctionComponent } from 'react'; import Display from '../../../cells/components/Display'; -import { useQuill } from '../../QuillContext'; +import { useQuill } from '../../../QuillContext'; const NetworkSettings: FunctionComponent = () => { const { cells } = useQuill(); diff --git a/extension/source/Home/Wallet/Wallets/Balance.tsx b/extension/source/Home/Wallet/Wallets/Balance.tsx index dcfd5fe8..00a1d04d 100644 --- a/extension/source/Home/Wallet/Wallets/Balance.tsx +++ b/extension/source/Home/Wallet/Wallets/Balance.tsx @@ -8,7 +8,7 @@ import { IReadableCell } from '../../../cells/ICell'; import useCell from '../../../cells/useCell'; import Loading from '../../../components/Loading'; import assert from '../../../helpers/assert'; -import { useQuill } from '../../QuillContext'; +import { useQuill } from '../../../QuillContext'; const Balance: FunctionComponent<{ address: string }> = ({ address }) => { const quill = useQuill(); diff --git a/extension/source/Home/Wallet/Wallets/DisplayNonce.tsx b/extension/source/Home/Wallet/Wallets/DisplayNonce.tsx index f140fbc2..1f9cdff6 100644 --- a/extension/source/Home/Wallet/Wallets/DisplayNonce.tsx +++ b/extension/source/Home/Wallet/Wallets/DisplayNonce.tsx @@ -3,7 +3,7 @@ import { FunctionComponent, useMemo } from 'react'; import { FormulaCell } from '../../../cells/FormulaCell'; import useCell from '../../../cells/useCell'; import { NETWORK_CONFIG } from '../../../env'; -import { useQuill } from '../../QuillContext'; +import { useQuill } from '../../../QuillContext'; const DisplayNonce: FunctionComponent<{ address: string }> = ({ address }) => { const quill = useQuill(); diff --git a/extension/source/Home/Wallet/Wallets/SendDetail/AssetSelector.tsx b/extension/source/Home/Wallet/Wallets/SendDetail/AssetSelector.tsx index 42fa32b9..63193704 100644 --- a/extension/source/Home/Wallet/Wallets/SendDetail/AssetSelector.tsx +++ b/extension/source/Home/Wallet/Wallets/SendDetail/AssetSelector.tsx @@ -5,7 +5,7 @@ import ICell from '../../../../cells/ICell'; import useCell from '../../../../cells/useCell'; import Loading from '../../../../components/Loading'; import onAction from '../../../../helpers/onAction'; -import { useQuill } from '../../../QuillContext'; +import { useQuill } from '../../../../QuillContext'; import Balance from '../Balance'; const AssetSelector: FunctionComponent<{ diff --git a/extension/source/Home/Wallet/Wallets/SendDetail/RecipientSelector.tsx b/extension/source/Home/Wallet/Wallets/SendDetail/RecipientSelector.tsx index 3c02aae8..f025c02f 100644 --- a/extension/source/Home/Wallet/Wallets/SendDetail/RecipientSelector.tsx +++ b/extension/source/Home/Wallet/Wallets/SendDetail/RecipientSelector.tsx @@ -9,7 +9,7 @@ import MemoryCell from '../../../../cells/MemoryCell'; import useCell from '../../../../cells/useCell'; import Loading from '../../../../components/Loading'; import onAction from '../../../../helpers/onAction'; -import { useQuill } from '../../../QuillContext'; +import { useQuill } from '../../../../QuillContext'; import Balance from '../Balance'; const RecipientSelector: FunctionComponent<{ diff --git a/extension/source/Home/Wallet/Wallets/SendDetail/SendDetail.tsx b/extension/source/Home/Wallet/Wallets/SendDetail/SendDetail.tsx index a9295a47..4893cbba 100644 --- a/extension/source/Home/Wallet/Wallets/SendDetail/SendDetail.tsx +++ b/extension/source/Home/Wallet/Wallets/SendDetail/SendDetail.tsx @@ -6,7 +6,7 @@ import MemoryCell from '../../../../cells/MemoryCell'; import assert from '../../../../helpers/assert'; import AsyncReturnType from '../../../../types/AsyncReturnType'; import { RpcClient } from '../../../../types/Rpc'; -import { QuillContextValue, useQuill } from '../../../QuillContext'; +import { QuillContextValue, useQuill } from '../../../../QuillContext'; import BigSendButton from './BigSendButton'; import SendDetailSelectors from './SendDetailSelectors'; diff --git a/extension/source/Home/Wallet/Wallets/SendDetail/SendProgress.tsx b/extension/source/Home/Wallet/Wallets/SendDetail/SendProgress.tsx index e66c97fe..e9bbd6d4 100644 --- a/extension/source/Home/Wallet/Wallets/SendDetail/SendProgress.tsx +++ b/extension/source/Home/Wallet/Wallets/SendDetail/SendProgress.tsx @@ -4,7 +4,7 @@ import { useNavigate } from 'react-router-dom'; import useCell from '../../../../cells/useCell'; import Button from '../../../../components/Button'; -import { useQuill } from '../../../QuillContext'; +import { useQuill } from '../../../../QuillContext'; import type { SendState } from './SendDetail'; diff --git a/extension/source/Home/Wallet/Wallets/WalletDetail.tsx b/extension/source/Home/Wallet/Wallets/WalletDetail.tsx index bd30e469..9e85a948 100644 --- a/extension/source/Home/Wallet/Wallets/WalletDetail.tsx +++ b/extension/source/Home/Wallet/Wallets/WalletDetail.tsx @@ -3,7 +3,7 @@ import ICell from '../../../cells/ICell'; import MemoryCell from '../../../cells/MemoryCell'; import useCell from '../../../cells/useCell'; import onAction from '../../../helpers/onAction'; -import { useQuill } from '../../QuillContext'; +import { useQuill } from '../../../QuillContext'; import DisplayNonce from './DisplayNonce'; // import { AssetsTable } from './AssetsTable'; diff --git a/extension/source/Home/Wallet/Wallets/WalletWrapper.tsx b/extension/source/Home/Wallet/Wallets/WalletWrapper.tsx index af37c1ae..47d113f9 100644 --- a/extension/source/Home/Wallet/Wallets/WalletWrapper.tsx +++ b/extension/source/Home/Wallet/Wallets/WalletWrapper.tsx @@ -1,7 +1,7 @@ import { FunctionComponent } from 'react'; import useCell from '../../../cells/useCell'; import Button from '../../../components/Button'; -import { useQuill } from '../../QuillContext'; +import { useQuill } from '../../../QuillContext'; /* eslint import/no-cycle: "warn" -- TODO (merge-ok) Fix import cycle */ import { WalletSummary } from './WalletSummary'; diff --git a/extension/source/Home/QuillContext.tsx b/extension/source/QuillContext.tsx similarity index 80% rename from extension/source/Home/QuillContext.tsx rename to extension/source/QuillContext.tsx index f4fec0cf..77e4a93d 100644 --- a/extension/source/Home/QuillContext.tsx +++ b/extension/source/QuillContext.tsx @@ -1,15 +1,15 @@ import React, { useMemo } from 'react'; -import elcc from '../cells/extensionLocalCellCollection'; -import assert from '../helpers/assert'; -import QuillStorageCells from '../QuillStorageCells'; -import QuillEthereumProvider from '../QuillEthereumProvider'; -import EthersProvider from '../EthersProvider'; -import CellCollection from '../cells/CellCollection'; -import { FormulaCell } from '../cells/FormulaCell'; -import QuillLongPollingCell from '../QuillLongPollingCell'; -import TransformCell from '../cells/TransformCell'; -import forEach from '../cells/forEach'; +import elcc from './cells/extensionLocalCellCollection'; +import assert from './helpers/assert'; +import QuillStorageCells from './QuillStorageCells'; +import QuillEthereumProvider from './QuillEthereumProvider'; +import EthersProvider from './EthersProvider'; +import CellCollection from './cells/CellCollection'; +import { FormulaCell } from './cells/FormulaCell'; +import QuillLongPollingCell from './QuillLongPollingCell'; +import TransformCell from './cells/TransformCell'; +import forEach from './cells/forEach'; export type QuillContextValue = ReturnType; diff --git a/extension/source/types/window.d.ts b/extension/source/types/window.d.ts index ecddc9af..0078e695 100644 --- a/extension/source/types/window.d.ts +++ b/extension/source/types/window.d.ts @@ -1,7 +1,7 @@ import type { providers } from 'ethers'; import type { Browser } from 'webextension-polyfill'; import type QuillEthereumProvider from '../QuillEthereumProvider'; -import type { QuillContextValue } from '../Home/QuillContext'; +import type { QuillContextValue } from '../QuillContext'; import QuillStorageCells from '../QuillStorageCells'; declare global {