Use QuillContext in Confirm dialog

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<string | null>();
-  const [actions, setActions] = useState<SendTransactionParams[]>([]);
+  const quill = useQuill();
+
+  const id = new URL(window.location.href).searchParams.get('id');
+  const transactions = useCell(quill.cells.transactions);
+
   const [current, setCurrent] = useState<number>(0);
 
-  useEffect(() => {
-    const params = new URL(window.location.href).searchParams;
-    const txid = params.get('id');
-    setId(txid);
+  if (transactions === undefined) {
+    return <Loading />;
+  }
 
-    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 = () => {
 
         <div className="mt-4">AppName is making requests to your wallet</div>
 
-        {actions.length > 1 && (
+        {tx.actions.length > 1 && (
           <div className="mt-4 flex justify-end text-body self-center gap-3">
-            {current + 1} of {actions?.length}
+            {current + 1} of {tx.actions?.length}
             <div
               className="bg-grey-400 rounded-md p-1 hover:bg-grey-500 cursor-pointer"
               {...onAction(prevTx)}
@@ -92,14 +92,16 @@ const Confirm: FunctionComponent = () => {
 
         <div className="flex flex-col">
           <div className="mt-4">
-            {actions[current] && <TransactionCard {...actions[current]} />}
+            {tx.actions[current] && (
+              <TransactionCard {...tx.actions[current]} />
+            )}
           </div>
 
           <div className="mt-4 p-4 bg-grey-300 rounded-md flex justify-between h-20">
             <div className="">Total Transaction Fees</div>
             <div className="text-right">
               <div className="font-bold">USD $0.0</div>
-              <div className="">{calculateTotal(actions)} ETH</div>
+              <div className="">{calculateTotal(tx.actions)} ETH</div>
             </div>
           </div>
         </div>

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(<Confirm />, document.getElementById('confirm-root'));
+ReactDOM.render(
+  <QuillContextProvider>
+    <Confirm />
+  </QuillContextProvider>,
+  document.getElementById('confirm-root'),
+);

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';
 

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();

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;

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();

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();

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();

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();

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();

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();

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<{

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<{

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';

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';
 

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';
 

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';
 

extension/source/Home/QuillContext.tsx → 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<typeof getQuillContextValue>;
 

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 {