Merge pull request #67 from map3xyz/phil/map-108-add-the-following-fi…

…elds-to feat: add userId to Map3InitConfig
map3xyz · Jan 8, 2023 · 26370ed · 26370ed
2 parents 4b33f8d + f697b8e
commit 26370ed
Show file tree

Hide file tree

Showing 24 changed files with 314 additions and 285 deletions.
diff --git a/README.md b/README.md
@@ -22,7 +22,7 @@ enabling cross-chain deposits and increasing volumes.
         const map3 = initMap3Sdk({
           theme: 'dark',
           anonKey: '<ANON_KEY>',
-          generateDepositAddress: async (coin, network, memoEnabled) => {
+          generateDepositAddress: async (coin, network) => {
             await new Promise((resolve) => setTimeout(resolve, 1000));
 
             return {address: '0x0000000000000000000000000000000000000000'};

diff --git a/jest/__mocks__/mockConfig.ts b/jest/__mocks__/mockConfig.ts
@@ -0,0 +1,8 @@
+export const mockConfig = {
+  anonKey: process.env.CONSOLE_ANON_KEY || '',
+  generateDepositAddress: async () => {
+    return { address: '0x0000000000000000000000000000000000000000' };
+  },
+  theme: 'dark' as const,
+  userId: 'test',
+};
diff --git a/jest/__mocks__/web3Mock.ts b/jest/__mocks__/web3Mock.ts
@@ -0,0 +1,10 @@
+export const web3Mock = {
+  addChain: jest.fn(),
+  authorizeTransactionProxy: jest.fn(),
+  getBalance: jest.fn(),
+  getChainId: jest.fn(),
+  providers: {},
+  sendTransaction: jest.fn(),
+  switchChain: jest.fn(),
+  waitForTransaction: jest.fn(),
+};
diff --git a/src/App.test.tsx b/src/App.test.tsx
@@ -1,21 +1,11 @@
+import { mockConfig } from '~/jest/__mocks__/mockConfig';
 import { render, screen } from '~/jest/test-utils';
 
 import App from './App';
 
 describe('App', () => {
   it('renders', async () => {
-    render(
-      <App
-        config={{
-          anonKey: process.env.CONSOLE_ANON_KEY || '',
-          generateDepositAddress: async () => {
-            return { address: '0x0000000000000000000000000000000000000000' };
-          },
-          theme: 'dark',
-        }}
-        onClose={() => {}}
-      />
-    );
+    render(<App config={mockConfig} onClose={() => {}} />);
 
     expect(await screen.findByText('Loading...')).toBeInTheDocument();
     const assetSelection = await screen.findByText('Select Asset');
@@ -26,12 +16,8 @@ describe('App', () => {
     render(
       <App
         config={{
-          anonKey: process.env.CONSOLE_ANON_KEY || '',
+          ...mockConfig,
           assetId: 'satoshi123',
-          generateDepositAddress: async () => {
-            return { address: '0x0000000000000000000000000000000000000000' };
-          },
-          theme: 'dark',
         }}
         onClose={() => {}}
       />
@@ -48,13 +34,9 @@ describe('App', () => {
     render(
       <App
         config={{
+          ...mockConfig,
           address: '0xf61B443A155b07D2b2cAeA2d99715dC84E839EEf',
-          anonKey: process.env.CONSOLE_ANON_KEY || '',
-          generateDepositAddress: async () => {
-            return { address: '0x0000000000000000000000000000000000000000' };
-          },
           networkCode: 'ethereum',
-          theme: 'dark',
         }}
         onClose={() => {}}
       />
@@ -71,12 +53,8 @@ describe('App', () => {
     render(
       <App
         config={{
-          anonKey: process.env.CONSOLE_ANON_KEY || '',
-          generateDepositAddress: async () => {
-            return { address: '0x0000000000000000000000000000000000000000' };
-          },
+          ...mockConfig,
           networkCode: 'bitcoin',
-          theme: 'dark',
         }}
         onClose={() => {}}
       />
@@ -93,15 +71,11 @@ describe('App', () => {
     render(
       <App
         config={{
-          anonKey: process.env.CONSOLE_ANON_KEY || '',
+          ...mockConfig,
           authorizeTransaction: async () => {
             return true;
           },
-          generateDepositAddress: async () => {
-            return { address: '0x0000000000000000000000000000000000000000' };
-          },
           rainbowRoad: true,
-          theme: 'dark',
         }}
         onClose={() => {}}
       />
@@ -115,18 +89,7 @@ describe('App', () => {
     jest.useFakeTimers();
     const closeMock = jest.fn();
 
-    render(
-      <App
-        config={{
-          anonKey: process.env.CONSOLE_ANON_KEY || '',
-          generateDepositAddress: async () => {
-            return { address: '0x000' };
-          },
-          theme: 'dark',
-        }}
-        onClose={closeMock}
-      />
-    );
+    render(<App config={mockConfig} onClose={closeMock} />);
 
     const closeButton = await screen.findByLabelText('Close');
     expect(closeButton).toBeInTheDocument();

diff --git a/src/hooks/tests/useWeb3.test.tsx b/src/hooks/tests/useWeb3.test.tsx
@@ -1,5 +1,6 @@
 import { generateTestingUtils } from 'eth-testing';
 
+import { mockConfig } from '~/jest/__mocks__/mockConfig';
 import { act, fireEvent, render, screen } from '~/jest/test-utils';
 
 import App from '../../App';
@@ -9,11 +10,10 @@ describe('useWeb3', () => {
     render(
       <App
         config={{
-          anonKey: process.env.CONSOLE_ANON_KEY || '',
+          ...mockConfig,
           generateDepositAddress: async () => {
             throw 'Error generating deposit address.';
           },
-          theme: 'dark',
         }}
         onClose={() => {}}
       />

diff --git a/src/hooks/useDepositAddress.tsx b/src/hooks/useDepositAddress.tsx
@@ -5,9 +5,10 @@ import { Context } from '../providers/Store';
 export const useDepositAddress = () => {
   const [state, dispatch, { generateDepositAddress }] = useContext(Context);
 
-  const getDepositAddress = async (
-    memoEnabled: boolean
-  ): Promise<{ address: string; memo?: string }> => {
+  const getDepositAddress = async (): Promise<{
+    address: string;
+    memo?: string;
+  }> => {
     try {
       if (
         state.depositAddress.status === 'success' &&
@@ -16,17 +17,16 @@ export const useDepositAddress = () => {
         return state.depositAddress.data;
       }
       dispatch({ type: 'GENERATE_DEPOSIT_ADDRESS_LOADING' });
-      const { address, memo } = await generateDepositAddress(
+      const { address } = await generateDepositAddress(
         state.asset?.symbol as string,
-        state.network?.symbol as string,
-        memoEnabled
+        state.network?.symbol as string
       );
       dispatch({
-        payload: { address, memo },
+        payload: { address },
         type: 'GENERATE_DEPOSIT_ADDRESS_SUCCESS',
       });
 
-      return { address, memo };
+      return { address };
     } catch (e) {
       dispatch({ type: 'GENERATE_DEPOSIT_ADDRESS_ERROR' });
       throw new Error('Error generating a deposit address.');

diff --git a/src/hooks/usePrebuildTx.tsx b/src/hooks/usePrebuildTx.tsx
@@ -22,16 +22,13 @@ export const usePrebuildTx = () => {
 
       dispatch({ type: 'SET_PREBUILT_TX_LOADING' });
       const { assetBalance, chainBalance } = await getBalance(assetContract);
-      const { address, memo } = await getDepositAddress(
-        state.method?.flags?.memo || false
-      );
+      const { address } = await getDepositAddress();
       const tx = buildTx({
         address,
         amount,
         assetContract,
         decimals,
         from: state.account.data,
-        memo,
       });
       let estimatedGas = BigNumber.from(0);
       if (assetContract) {

diff --git a/src/hooks/useWeb3.tsx b/src/hooks/useWeb3.tsx
@@ -4,13 +4,13 @@ import { useContext, useEffect, useState } from 'react';
 import { isMobile } from 'react-device-detect';
 
 import { CONSOLE_API_URL } from '../constants';
-import { Context, Steps } from '../providers/Store';
+import { Context } from '../providers/Store';
 import { erc20Abi } from '../utils/abis/erc20';
 import { toHex } from '../utils/toHex';
 import { buildTx } from '../utils/transactions/evm';
 
 export const useWeb3 = () => {
-  const [state, dispatch, { authorizeTransaction }] = useContext(Context);
+  const [state, _, { authorizeTransaction }] = useContext(Context);
   const [providers, setProviders] = useState<{
     [key in string]: boolean;
   }>({});
@@ -129,14 +129,9 @@ export const useWeb3 = () => {
       throw new Error('No account');
     }
 
-    // @ts-ignore
-    if (!isMobile && !state.method?.value === 'isWalletConnect') {
-      dispatch({ type: 'SET_TRANSACTION_LOADING' });
-    }
     let hash;
 
     const decimals = state.asset?.decimals;
-    const memo = state.depositAddress.data?.memo;
 
     if (!decimals) {
       throw new Error('No decimals.');
@@ -152,7 +147,6 @@ export const useWeb3 = () => {
       assetContract,
       decimals,
       from: state.account.data,
-      memo,
     });
 
     try {
@@ -170,14 +164,22 @@ export const useWeb3 = () => {
         throw new Error('No transaction hash.');
       }
 
-      dispatch({ type: 'SET_TRANSACTION_LOADING' });
-      dispatch({ payload: Steps.Result, type: 'SET_STEP' });
-      await state.provider?.data?.waitForTransaction(hash, 1);
+      return hash;
     } catch (e: any) {
-      dispatch({ payload: e.message, type: 'SET_TRANSACTION_ERROR' });
       throw e;
     }
-    dispatch({ payload: hash, type: 'SET_TRANSACTION_SUCCESS' });
+  };
+
+  const waitForTransaction = async (hash: string, confirmations: number) => {
+    if (!state.provider?.data) {
+      throw new Error('No provider.');
+    }
+
+    const tx = await state.provider?.data?.waitForTransaction(
+      hash,
+      confirmations
+    );
+    return tx;
   };
 
   return {
@@ -188,5 +190,6 @@ export const useWeb3 = () => {
     providers,
     sendTransaction,
     switchChain,
+    waitForTransaction,
   };
 };
diff --git a/src/index.test.tsx b/src/index.test.tsx
@@ -12,6 +12,7 @@ describe('Map3Sdk', () => {
         await new Promise((resolve) => setTimeout(resolve, 1000));
         return { address: '0x0000000000000000000000000000000000000000' };
       },
+      userId: 'test',
     });
     await act(async () => {
       map3.open();
@@ -31,6 +32,7 @@ describe('Map3Sdk', () => {
         return { address: '0x0000000000000000000000000000000000000000' };
       },
       theme: 'dark',
+      userId: 'test',
     });
     await act(async () => {
       map3.open();
@@ -46,6 +48,7 @@ describe('Map3Sdk', () => {
           await new Promise((resolve) => setTimeout(resolve, 1000));
           return { address: '0x0000000000000000000000000000000000000000' };
         },
+        userId: 'test',
       });
     expect(initFn).not.toThrow();
   });
@@ -57,6 +60,7 @@ describe('Map3Sdk', () => {
         anonKey: 'test',
         fiat: 'USD',
         generateDepositAddress: async () => ({ address: '0x000000' }),
+        userId: 'test',
       });
     expect(initFn).not.toThrow();
     expect(warnSpy).toBeCalledWith(
@@ -66,7 +70,7 @@ describe('Map3Sdk', () => {
   it('should throw if no generateDepositAddress function is passed', () => {
     // @ts-expect-error
     const initFn = () => initMap3Sdk({});
-    expect(initFn).toThrow('generateDepositAddress is required');
+    expect(initFn).toThrow('generateDepositAddress is required.');
   });
   it('should throw if no anonKey is passed', () => {
     const initFn = () =>
@@ -77,7 +81,19 @@ describe('Map3Sdk', () => {
           return { address: '0x0000000000000000000000000000000000000000' };
         },
       });
-    expect(initFn).toThrow('anonKey is required');
+    expect(initFn).toThrow('anonKey is required.');
+  });
+  it('should throw if no userId is passed', () => {
+    const initFn = () =>
+      // @ts-expect-error
+      initMap3Sdk({
+        anonKey: 'test',
+        generateDepositAddress: async () => {
+          await new Promise((resolve) => setTimeout(resolve, 1000));
+          return { address: '0x0000000000000000000000000000000000000000' };
+        },
+      });
+    expect(initFn).toThrow('userId is required.');
   });
   it('should allow optional rainbowRoad config', () => {
     const initFn = () =>
@@ -88,6 +104,46 @@ describe('Map3Sdk', () => {
           return { address: '0x0000000000000000000000000000000000000000' };
         },
         rainbowRoad: true,
+        userId: 'test',
+      });
+    expect(initFn).not.toThrow();
+  });
+  it('should allow optional onClose', () => {
+    const initFn = () =>
+      initMap3Sdk({
+        anonKey: 'test',
+        generateDepositAddress: async () => {
+          await new Promise((resolve) => setTimeout(resolve, 1000));
+          return { address: '0x0000000000000000000000000000000000000000' };
+        },
+        onClose: () => {},
+        userId: 'test',
+      });
+    expect(initFn).not.toThrow();
+  });
+  it('should allow optional onFailure', () => {
+    const initFn = () =>
+      initMap3Sdk({
+        anonKey: 'test',
+        generateDepositAddress: async () => {
+          await new Promise((resolve) => setTimeout(resolve, 1000));
+          return { address: '0x0000000000000000000000000000000000000000' };
+        },
+        onFailure: () => {},
+        userId: 'test',
+      });
+    expect(initFn).not.toThrow();
+  });
+  it('should allow optional onSuccess', () => {
+    const initFn = () =>
+      initMap3Sdk({
+        anonKey: 'test',
+        generateDepositAddress: async () => {
+          await new Promise((resolve) => setTimeout(resolve, 1000));
+          return { address: '0x0000000000000000000000000000000000000000' };
+        },
+        onSuccess: () => {},
+        userId: 'test',
       });
     expect(initFn).not.toThrow();
   });