feat: refactor ethereum hooks

DLC-link · Mar 15, 2024 · 217217e · 217217e
1 parent 7cbfe8a
commit 217217e
Show file tree

Hide file tree

Showing 22 changed files with 489 additions and 518 deletions.
diff --git a/src/app/app.tsx b/src/app/app.tsx
@@ -4,25 +4,28 @@ import { AppLayout } from '@components/app.layout';
 import { MyVaults } from '@pages/my-vaults/my-vaults';
 import { ProofOfReservePage } from '@pages/proof-of-reserve/proof-of-reserve-page';
 import { BalanceContextProvider } from '@providers/balance-context-provider';
+import { EthereumObserverProvider } from '@providers/ethereum-observer-provider';
 
 import { About } from './pages/about/about';
 import { Dashboard } from './pages/dashboard/dashboard';
-import { EthereumContextProvider } from './providers/blockchain-context-provider';
+import { EthereumContextProvider } from './providers/ethereum-context-provider';
 import { VaultContextProvider } from './providers/vault-context-provider';
 
 export function App(): React.JSX.Element {
   return (
     <EthereumContextProvider>
-      <VaultContextProvider>
-        <BalanceContextProvider>
-          <AppLayout>
-            <Route path="/" element={<Dashboard />} />
-            <Route path="/my-vaults" element={<MyVaults />} />
-            <Route path="/how-it-works" element={<About />} />
-            <Route path="/proof-of-reserve" element={<ProofOfReservePage />} />
-          </AppLayout>
-        </BalanceContextProvider>
-      </VaultContextProvider>
+      <EthereumObserverProvider>
+        <VaultContextProvider>
+          <BalanceContextProvider>
+            <AppLayout>
+              <Route path="/" element={<Dashboard />} />
+              <Route path="/my-vaults" element={<MyVaults />} />
+              <Route path="/how-it-works" element={<About />} />
+              <Route path="/proof-of-reserve" element={<ProofOfReservePage />} />
+            </AppLayout>
+          </BalanceContextProvider>
+        </VaultContextProvider>
+      </EthereumObserverProvider>
     </EthereumContextProvider>
   );
 }
diff --git a/src/app/components/mint-unmint/components/lock-screen/lock-screen.tsx b/src/app/components/mint-unmint/components/lock-screen/lock-screen.tsx
@@ -3,9 +3,9 @@ import { useDispatch } from 'react-redux';
 
 import { Button, VStack, useToast } from '@chakra-ui/react';
 import { VaultCard } from '@components/vault/vault-card';
-import { UseBitcoinReturnType, useBitcoin } from '@hooks/use-bitcoin';
-import { UseEthereumReturnType, useEthereum } from '@hooks/use-ethereum';
-import { UseSignPSBTReturnType } from '@hooks/use-psbt';
+import { useBitcoin } from '@hooks/use-bitcoin';
+import { useEthereum } from '@hooks/use-ethereum';
+import { usePSBT } from '@hooks/use-psbt';
 import { useVaults } from '@hooks/use-vaults';
 import { BitcoinError } from '@models/error-types';
 import { Vault } from '@models/vault';
@@ -21,14 +21,10 @@ export function LockScreen({ currentStep }: LockScreenProps): React.JSX.Element
   const toast = useToast();
   const dispatch = useDispatch();
 
-  const bitcoinHandler = useBitcoin();
-  const ethereumHandler = useEthereum();
-
+  const { bitcoinPrice } = useBitcoin();
+  const { getProtocolFee } = useEthereum();
   const { readyVaults } = useVaults();
-
-  const { bitcoinPrice } = bitcoinHandler;
-  const { getProtocolFee } = ethereumHandler;
-  const { handleSignFundingTransaction } = psbtHandler;
+  const { handleSignFundingTransaction } = usePSBT();
 
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [protocolFeePercentage, setProtocolFeePercentage] = useState<number | undefined>(undefined);

diff --git a/src/app/components/modals/select-wallet-modal/select-wallet-modal.tsx b/src/app/components/modals/select-wallet-modal/select-wallet-modal.tsx
@@ -6,17 +6,18 @@ import { ModalComponentProps } from '@components/modals/components/modal-contain
 import { ModalLayout } from '@components/modals/components/modal.layout';
 import { SelectWalletMenu } from '@components/modals/select-wallet-modal/components/select-wallet-menu';
 import { SelectNetworkButton } from '@components/select-network-button/select-network-button';
-import { useEthereumAccount } from '@hooks/use-ethereum copy';
-import { Network } from '@models/network';
+import { useEthereumAccount } from '@hooks/use-ethereum-account';
+import { Network } from '@models/ethereum-network';
 import { WalletType, ethereumWallets } from '@models/wallet';
 
 export function SelectWalletModal({ isOpen, handleClose }: ModalComponentProps): React.JSX.Element {
   const ethereumAccountHandler = useEthereumAccount();
+
   const [currentNetwork, setCurrentNetwork] = useState<Network | undefined>(undefined);
 
   async function handleLogin(walletType: WalletType) {
     if (!currentNetwork) throw new Error('No network selected');
-    await ethereumAccountHandler?.connectEthereumAccount(currentNetwork, walletType);
+    await ethereumAccountHandler?.connectEthereumAccount(walletType, currentNetwork);
     setCurrentNetwork(undefined);
     handleClose();
   }
@@ -44,7 +45,7 @@ export function SelectWalletModal({ isOpen, handleClose }: ModalComponentProps):
               <SelectWalletMenu
                 key={wallet.name}
                 wallet={wallet}
-                handleClick={() => handleLogin(WalletType.Metamask)}
+                handleClick={() => handleLogin(wallet.id)}
               />
             ))}
           </VStack>

diff --git a/src/app/components/select-network-button/select-network-button.tsx b/src/app/components/select-network-button/select-network-button.tsx
@@ -1,6 +1,6 @@
 import { ChevronDownIcon } from '@chakra-ui/icons';
 import { HStack, Menu, MenuButton, MenuItem, MenuList, Text } from '@chakra-ui/react';
-import { Network, ethereumNetworks } from '@models/network';
+import { Network, ethereumNetworks } from '@models/ethereum-network';
 
 interface SelectNetworkButtonProps {
   handleClick: (network: Network) => void;

diff --git a/src/app/hooks/use-blockchain-context.ts b/src/app/hooks/use-blockchain-context.ts
diff --git a/src/app/hooks/use-endpoints.ts b/src/app/hooks/use-endpoints.ts
@@ -2,7 +2,7 @@ import { useEffect, useState } from 'react';
 import { useSelector } from 'react-redux';
 
 import { BitcoinNetwork, bitcoin, regtest, testnet } from '@models/bitcoin-network';
-import { EthereumNetwork } from '@models/network';
+import { EthereumNetworkID } from '@models/ethereum-network';
 import { RootState } from '@store/index';
 
 interface NetworkEndpoints {
@@ -57,23 +57,23 @@ export function useEndpoints(): NetworkEndpoints {
     }
 
     switch (network?.id) {
-      case EthereumNetwork.Sepolia:
+      case EthereumNetworkID.Sepolia:
         return {
           attestorAPIURLs,
           ethereumExplorerAPIURL: 'https://sepolia.etherscan.io/tx/',
           bitcoinExplorerAPIURL: 'http://devnet.dlc.link/electrs/tx/',
           bitcoinBlockchainAPIURL: 'https://devnet.dlc.link/electrs',
           bitcoinNetwork,
         };
-      case EthereumNetwork.Goerli:
+      case EthereumNetworkID.Goerli:
         return {
           attestorAPIURLs,
           ethereumExplorerAPIURL: 'https://goerli.etherscan.io/tx/',
           bitcoinExplorerAPIURL: 'https://blockstream.info/testnet/tx/',
           bitcoinBlockchainAPIURL: 'https://devnet.dlc.link/electrs',
           bitcoinNetwork,
         };
-      case EthereumNetwork.X1Testnet:
+      case EthereumNetworkID.X1Testnet:
         return {
           attestorAPIURLs,
           ethereumExplorerAPIURL: 'https://www.oklink.com/x1-test/tx/',

diff --git a/src/app/hooks/use-ethereum copy.ts b/src/app/hooks/use-ethereum copy.ts