prime sdk updated, add function getSupportedAssets()

etherspot · May 17, 2024 · a21b057 · a21b057
1 parent bc5d46f
commit a21b057
Show file tree

Hide file tree

Showing 6 changed files with 107 additions and 55 deletions.
diff --git a/__tests__/hooks/useEtherspotAssets.test.js b/__tests__/hooks/useEtherspotAssets.test.js
@@ -8,27 +8,51 @@ const ethersProvider = new ethers.providers.JsonRpcProvider('http://localhost:85
 const provider = new ethers.Wallet.createRandom().connect(ethersProvider);
 
 describe('useEtherspotAssets()', () => {
-  it('returns assets', async () => {
-    const wrapper = ({ children }) => (
-      <EtherspotTransactionKit provider={provider}>
-        {children}
-      </EtherspotTransactionKit>
-    );
-
-    const { result, rerender } = renderHook(({ chainId }) => useEtherspotAssets(chainId), {
-      initialProps: { chainId: 1 },
-      wrapper,
+  describe('getAssets()', () => {
+    it('returns assets', async () => {
+      const wrapper = ({ children }) => (
+        <EtherspotTransactionKit provider={provider}>
+          {children}
+        </EtherspotTransactionKit>
+      );
+
+      const { result, rerender } = renderHook(({ chainId }) => useEtherspotAssets(chainId), {
+        initialProps: { chainId: 1 },
+        wrapper,
+      });
+
+      // wait for assets to be fetched for chain ID 1
+      await waitFor(() => expect(result.current).not.toBeNull());
+      const assetsMainnet = await result.current.getAssets();
+      expect(assetsMainnet.length).toEqual(3);
+
+      // rerender with different chain ID 137
+      rerender({ chainId: 137 });
+
+      const assetsPolygon = await result.current.getAssets();
+      expect(assetsPolygon.length).toEqual(1);
     });
+  })
 
-    // wait for assets to be fetched for chain ID 1
-    await waitFor(() => expect(result.current).not.toBeNull());
-    const assetsMainnet = await result.current.getAssets();
-    expect(assetsMainnet.length).toEqual(3);
+  describe('getSupportedAssets()', () => {
+    it('returns all supported assets for chain ID 1', async () => {
+      const wrapper = ({ children }) => (
+        <EtherspotTransactionKit provider={provider}>
+          {children}
+        </EtherspotTransactionKit>
+      );
 
-    // rerender with different chain ID 137
-    rerender({ chainId: 137 });
+      const { result } = renderHook(({ chainId }) => useEtherspotAssets(chainId), {
+        initialProps: { chainId: 1 },
+        wrapper,
+      });
 
-    const assetsPolygon = await result.current.getAssets();
-    expect(assetsPolygon.length).toEqual(1);
+      // wait for assets to be fetched for chain ID 1
+      await waitFor(() => expect(result.current).not.toBeNull());
+      const assetsMainnet = await result.current.getSupportedAssets(1);
+      expect(assetsMainnet.length).toBeGreaterThanOrEqual(1);
+
+    });
   });
-})
+
+});
diff --git a/example/package-lock.json b/example/package-lock.json
diff --git a/example/src/App.tsx b/example/src/App.tsx
@@ -6,6 +6,7 @@ import {
   IEstimatedBatches, ISentBatches,
   SentBatch,
   useEtherspot,
+  // useEtherspotAssets,
   useEtherspotTransactions,
   useWalletAddress,
 } from '@etherspot/transaction-kit';
@@ -77,7 +78,8 @@ const exampleCode = {
 const App = () => {
   const [activeTab, setActiveTab] = useState(tabs.SINGLE_TRANSACTION);
   const { batches, estimate, send } = useEtherspotTransactions();
-  const { getSdk } = useEtherspot();
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const { getDataService, chainId: etherspotChainId } = useEtherspot();
   const [balancePerAddress, setBalancePerAddress] = useState({
     [walletAddressByName.Alice]: '',
     [walletAddressByName.Bob]: '',
@@ -89,6 +91,11 @@ const App = () => {
   const [isSending, setIsSending] = useState(false);
   const etherspotPrimeAddress = useWalletAddress();
 
+  // // TO REMOVE - for testing purposes
+  // const { getSupportedAssets } = useEtherspotAssets();
+  // const allSupportedAssets = getSupportedAssets();
+  // console.log(allSupportedAssets)
+
   const batchesTreeView = batches.map((batchGroup, id1) => ({
     ...batchGroup,
     treeNodeId: `batch-group-${batchGroup.id ?? id1}`,
@@ -119,6 +126,7 @@ const App = () => {
 
   useEffect(() => {
     setExpanded(batchesTreeViewExpandedIds);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [batches]);
 
   const handleToggle = (event: React.SyntheticEvent, nodeIds: string[]) => setExpanded(nodeIds);
@@ -155,7 +163,7 @@ const App = () => {
     let expired = false;
 
     const refreshBalances = async () => {
-      const sdk = await getSdk(+(process.env.REACT_APP_CHAIN_ID as string));
+      const dataServices = getDataService()
 
       const updatedBalances = {
         [walletAddressByName.Alice]: 'N/A',
@@ -168,7 +176,10 @@ const App = () => {
       }
 
       await Promise.all(Object.keys(updatedBalances).map(async (address) => {
-        const balances = await sdk?.getAccountBalances({ account: address });
+        const balances = await dataServices.getAccountBalances({
+          account: address,
+          chainId: +(process.env.REACT_APP_CHAIN_ID as string)
+        });
         const balance = balances && balances.items.find(({ token }) => token === null);
         if (balance) updatedBalances[address] = ethers.utils.formatEther(balance.balance);
       }));
@@ -183,7 +194,8 @@ const App = () => {
     return () => {
       expired = true;
     }
-  }, [getSdk, etherspotPrimeAddress]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [etherspotPrimeAddress]);
 
   const estimationFailed = estimated?.some((
     estimatedGroup,
@@ -197,18 +209,17 @@ const App = () => {
         </Typography>
         <Chip
           label={
-            `My balance: ${
-              etherspotPrimeAddress && balancePerAddress[etherspotPrimeAddress]
-                ? `${balancePerAddress[etherspotPrimeAddress]} MATIC`
-                : 'Loading...'
+            `My balance: ${etherspotPrimeAddress && balancePerAddress[etherspotPrimeAddress]
+              ? `${Number(balancePerAddress[etherspotPrimeAddress]).toFixed(4)} ETH`
+              : 'Loading...'
             }`
           }
           variant={'outlined'}
           style={{ marginRight: 10, marginTop: 10 }}
         />
         {Object.keys(walletAddressByName).map((addressName: string) => {
           const address = walletAddressByName[addressName as keyof typeof walletAddressByName];
-          const balancePart = `balance: ${balancePerAddress[address] ? `${balancePerAddress[address]} MATIC` : 'Loading...'}`;
+          const balancePart = `balance: ${balancePerAddress[address] ? `${Number(balancePerAddress[address]).toFixed(4)} ETH` : 'Loading...'}`;
           const chipLabel = `${addressName} ${balancePart}`;
           return (
             <Chip

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -22,7 +22,7 @@
   "homepage": "https://github.com/etherspot/transaction-kit#readme",
   "dependencies": {
     "@etherspot/eip1271-verification-util": "0.1.2",
-    "@etherspot/prime-sdk": "1.6.4",
+    "@etherspot/prime-sdk": "^1.8.1",
     "buffer": "^6.0.3",
     "ethers": "^5.6.9",
     "lodash": "^4.17.21"
@@ -42,7 +42,7 @@
     "@lifi/types": "^9.2.0",
     "@rollup/plugin-replace": "^5.0.2",
     "@rollup/plugin-typescript": "^8.3.3",
-    "@testing-library/react": "^14.0.0",
+    "@testing-library/react": "^14.3.1",
     "@types/jest": "^29.2.5",
     "@types/lodash.uniq": "^4.5.7",
     "@types/react": "^18.0.15",
@@ -54,11 +54,11 @@
     "react": "^18.2.0",
     "react-test-renderer": "^18.2.0",
     "rimraf": "^5.0.1",
-    "rollup": "^2.76.0",
+    "rollup": "^2.79.1",
     "rollup-plugin-dts": "^4.2.3",
     "typescript": "^4.7.4"
   },
   "peerDependencies": {
     "react": ">=16.13.0"
   }
-}
+}
diff --git a/src/hooks/useEtherspotAssets.ts b/src/hooks/useEtherspotAssets.ts
@@ -1,11 +1,12 @@
 import { useMemo } from 'react';
-import { TokenListToken } from '@etherspot/prime-sdk/dist/sdk/data';
+import { BridgingProvider, Token, TokenListToken } from '@etherspot/prime-sdk/dist/sdk/data';
 
 // hooks
 import useEtherspot from './useEtherspot';
 
 interface IEtherspotAssetsHook {
   getAssets: (chainId?: number) => Promise<TokenListToken[]>;
+  getSupportedAssets: (chainId?: number, bridgingProvider?: BridgingProvider) => Promise<Token[]>
 }
 
 /**
@@ -44,8 +45,26 @@ const useEtherspotAssets = (chainId?: number): IEtherspotAssetsHook => {
     return assets;
   };
 
+  const getSupportedAssets = async (chainId?: number, bridgingProvider?: BridgingProvider): Promise<Token[]> => {
+    let supportedAssets: Token[] = [];
+
+    try {
+      const dataService = getDataService();
+      supportedAssets = await dataService.getSupportedAssets({ chainId, provider: bridgingProvider });
+    } catch (e) {
+      console.warn(
+        `Sorry, an error occurred whilst trying to fetch supported Etherspot assets.`
+        + ` Please try again. Error:`,
+        e,
+      );
+    }
+
+    return supportedAssets;
+  };
+
   return ({
     getAssets,
+    getSupportedAssets,
   });
 };