From 82c4bcbceaab3b8b0aeee2ad19811ab03d48cc8e Mon Sep 17 00:00:00 2001
From: Malik Zulqurnain <malikzulqurnain2121@gmail.com>
Date: Mon, 9 Dec 2024 21:34:26 +0500
Subject: [PATCH] Moved uniswap logic to dedicated hook

---
 .../UniswapTradeModal/UniswapTradeModal.tsx   | 24 ++-------
 .../UniswapTradeModal/types.ts                |  5 ++
 .../UniswapTradeModal/useUniswapTradeModal.ts | 49 +++++++++++++++++++
 3 files changed, 58 insertions(+), 20 deletions(-)
 create mode 100644 packages/commonwealth/client/scripts/views/modals/TradeTokenModel/UniswapTradeModal/types.ts
 create mode 100644 packages/commonwealth/client/scripts/views/modals/TradeTokenModel/UniswapTradeModal/useUniswapTradeModal.ts

diff --git a/packages/commonwealth/client/scripts/views/modals/TradeTokenModel/UniswapTradeModal/UniswapTradeModal.tsx b/packages/commonwealth/client/scripts/views/modals/TradeTokenModel/UniswapTradeModal/UniswapTradeModal.tsx
index fe35520b42a..cc8720f1e94 100644
--- a/packages/commonwealth/client/scripts/views/modals/TradeTokenModel/UniswapTradeModal/UniswapTradeModal.tsx
+++ b/packages/commonwealth/client/scripts/views/modals/TradeTokenModel/UniswapTradeModal/UniswapTradeModal.tsx
@@ -1,9 +1,6 @@
-import { ChainBase } from '@hicommonwealth/shared';
 import { SwapWidget, Theme } from '@uniswap/widgets';
 import '@uniswap/widgets/fonts.css';
-import WebWalletController from 'client/scripts/controllers/app/web_wallets';
-import { ethers } from 'ethers';
-import React, { useEffect, useState } from 'react';
+import React from 'react';
 import { CWText } from 'views/components/component_kit/cw_text';
 import {
   CWModal,
@@ -14,6 +11,7 @@ import {
 import TokenIcon from '../TokenIcon';
 import { TradeTokenModalProps } from '../types';
 import './UniswapTradeModal.scss';
+import useUniswapTradeModal from './useUniswapTradeModal';
 
 // By default the widget uses https://gateway.ipfs.io/ipns/tokens.uniswap.org for tokens
 // list, but it doesn't work (DNS_PROBE_FINISHED_NXDOMAIN) for me (@malik). The original
@@ -40,21 +38,7 @@ const UniswapTradeModal = ({
   onModalClose,
   tradeConfig,
 }: TradeTokenModalProps) => {
-  const [provider, setProvider] = useState<any>();
-  useEffect(() => {
-    const handleAsync = async () => {
-      const wallet = WebWalletController.Instance.availableWallets(
-        ChainBase.Ethereum,
-      );
-      const selectedWallet = wallet[0];
-      await selectedWallet.enable('8453'); // TODO: make dynamic
-      const tempProvider = new ethers.providers.Web3Provider(
-        selectedWallet.api.givenProvider,
-      );
-      setProvider(tempProvider);
-    };
-    handleAsync();
-  }, []);
+  const { uniswapProvider } = useUniswapTradeModal({ tradeConfig });
 
   return (
     <CWModal
@@ -84,7 +68,7 @@ const UniswapTradeModal = ({
                 defaultInputTokenAddress="NATIVE"
                 defaultOutputTokenAddress={tradeConfig.token.token_address}
                 hideConnectionUI={true}
-                {...(provider && { provider })}
+                {...(uniswapProvider && { provider: uniswapProvider })}
               />
             </div>
           </CWModalBody>
diff --git a/packages/commonwealth/client/scripts/views/modals/TradeTokenModel/UniswapTradeModal/types.ts b/packages/commonwealth/client/scripts/views/modals/TradeTokenModel/UniswapTradeModal/types.ts
new file mode 100644
index 00000000000..bac309ef3bd
--- /dev/null
+++ b/packages/commonwealth/client/scripts/views/modals/TradeTokenModel/UniswapTradeModal/types.ts
@@ -0,0 +1,5 @@
+import { TradingConfig } from '../types';
+
+export type UseUniswapTradeModalProps = {
+  tradeConfig: TradingConfig;
+};
diff --git a/packages/commonwealth/client/scripts/views/modals/TradeTokenModel/UniswapTradeModal/useUniswapTradeModal.ts b/packages/commonwealth/client/scripts/views/modals/TradeTokenModel/UniswapTradeModal/useUniswapTradeModal.ts
new file mode 100644
index 00000000000..b4b7abb38c9
--- /dev/null
+++ b/packages/commonwealth/client/scripts/views/modals/TradeTokenModel/UniswapTradeModal/useUniswapTradeModal.ts
@@ -0,0 +1,49 @@
+import { commonProtocol } from '@hicommonwealth/evm-protocols';
+import { ChainBase } from '@hicommonwealth/shared';
+import WebWalletController from 'controllers/app/web_wallets';
+import { ethers } from 'ethers';
+import useRunOnceOnCondition from 'hooks/useRunOnceOnCondition';
+import NodeInfo from 'models/NodeInfo';
+import { useState } from 'react';
+import { fetchCachedNodes } from 'state/api/nodes';
+import { UseUniswapTradeModalProps } from './types';
+
+const useUniswapTradeModal = ({ tradeConfig }: UseUniswapTradeModalProps) => {
+  const [uniswapProvider, setUniswapProvider] =
+    useState<ethers.providers.Web3Provider>();
+
+  // base chain node info
+  const nodes = fetchCachedNodes();
+  const baseNode = nodes?.find(
+    (n) => n.ethChainId === commonProtocol.ValidChains.SepoliaBase,
+  ) as NodeInfo; // this is expected to exist
+
+  useRunOnceOnCondition({
+    callback: () => {
+      const handleAsync = async () => {
+        // adding this to avoid ts issues
+        if (!baseNode?.ethChainId) return;
+
+        const wallet = WebWalletController.Instance.availableWallets(
+          ChainBase.Ethereum,
+        );
+        const selectedWallet = wallet[0];
+        await selectedWallet.enable(`${baseNode.ethChainId}`);
+        const tempProvider = new ethers.providers.Web3Provider(
+          selectedWallet.api.givenProvider,
+        );
+        setUniswapProvider(tempProvider);
+      };
+      handleAsync().catch(console.error);
+    },
+    shouldRun: !!baseNode.ethChainId,
+  });
+
+  return {
+    uniswapProvider,
+    // TODO: only export what's needed
+    tradeConfig,
+  };
+};
+
+export default useUniswapTradeModal;