Merge pull request #179 from map3xyz/phil/map-254-back-button-min-step

fix(back): when method is required set min step to prevent back stepping
map3xyz · Mar 31, 2023 · 40548f2 · 40548f2
2 parents 93a507d + a405df3
commit 40548f2
Show file tree

Hide file tree

Showing 9 changed files with 180 additions and 4 deletions.
diff --git a/jest/__mocks__/assets/index.ts b/jest/__mocks__/assets/index.ts
@@ -168,6 +168,29 @@ export const assetsForOrganizationMockResult = [
     symbol: 'AAVE',
     type: 'asset',
   },
+  {
+    __typename: 'Asset',
+    address: '0x514910771af9ca656af840dff83e8264ecf986ca',
+    config: {
+      mappedAssetId: 'polygon123',
+    },
+    decimals: 18,
+    id: 'polygon123',
+    logo: {
+      png:
+        'https://raw.githubusercontent.com/map3xyz/assets/master/networks/polygon/logo.png',
+      svg:
+        'https://raw.githubusercontent.com/map3xyz/assets/master/networks/polygon/logo.svg',
+    },
+    name: 'Polygon',
+    networkCode: 'polygon',
+    networks: {
+      name: 'Polygon',
+      networkCode: 'polygon',
+    },
+    symbol: 'MATIC',
+    type: 'asset',
+  },
 ];
 
 export const getAssetsForOrgMock = (

diff --git a/jest/__mocks__/gqlMocks.ts b/jest/__mocks__/gqlMocks.ts
@@ -41,6 +41,16 @@ export const mocks: MockedResponse[] = [
     networkCode: 'ethereum',
   }),
   searchAssetsMock(),
+  addWatchedAddressMock({
+    address: '0x0000000000000000000000000000000000000000',
+    assetId: 'polygon123',
+    confirmationsToWatch: 3,
+  }),
+  addWatchedAddressMock({
+    address: '1A1zP1eP5QGefi2DMPTfTL5SLmv7DivfNa',
+    assetId: 'satoshi123',
+    confirmationsToWatch: 3,
+  }),
   addWatchedAddressMock({
     address: '0x0000000000000000000000000000000000000000',
     assetId: 'satoshi123',
@@ -61,6 +71,7 @@ export const mocks: MockedResponse[] = [
   getMappedNetworksForOrgMock({ assetId: 'elon123' }),
   getMappedNetworksForOrgMock({ assetId: 'satoshi123' }),
   getMappedNetworksForOrgMock({ assetId: 'ethereum123' }),
+  getMappedNetworksForOrgMock({ assetId: 'polygon123' }),
   getNetworkByChainIdMock(1),
   getNetworkByChainIdMock(137),
   getNetworksMock(),

diff --git a/jest/__mocks__/networks/index.ts b/jest/__mocks__/networks/index.ts
@@ -124,6 +124,8 @@ export const getMappedNetworksForOrgMock = (
           ? bitcoinNetwork
           : variables.assetId === 'ethereum123'
           ? [networksForAssetMockResult[0]]
+          : variables.assetId === 'polygon123'
+          ? [networksForAssetMockResult[1]]
           : networksForAssetMockResult,
     },
   },

diff --git a/jest/__mocks__/payment-methods/index.ts b/jest/__mocks__/payment-methods/index.ts
@@ -4,7 +4,61 @@ import {
 } from '../../../src/generated/apollo-gql';
 
 export const getMethodsMock = (variables: GetPaymentMethodsQueryVariables) =>
-  variables.chainId
+  variables.chainId === 137
+    ? {
+        request: {
+          query: GetPaymentMethodsDocument,
+          variables,
+        },
+        result: {
+          data: {
+            methodsForNetwork: [
+              {
+                flags: {
+                  enabled: true,
+                  memo: false,
+                },
+                icon: 'fa fa-qrcode',
+                links: {
+                  brave: null,
+                  chrome: null,
+                  edge: null,
+                  firefox: null,
+                  opera: null,
+                },
+                logo: '',
+                name: 'Show Address',
+                value: 'show-address',
+                walletConnect: null,
+              },
+              {
+                flags: {
+                  enabled: true,
+                  memo: true,
+                },
+                icon: 'metamask',
+                links: {
+                  brave:
+                    'https://chrome.google.com/webstore/detail/metamask/nkbihfbeogaeaoehlefnkodbefgpgknn',
+                  chrome:
+                    'https://chrome.google.com/webstore/detail/metamask/nkbihfbeogaeaoehlefnkodbefgpgknn',
+                  edge:
+                    'https://microsoftedge.microsoft.com/addons/detail/metamask/ejbalbakoplchlghecdalmeeeajnimhm',
+                  firefox:
+                    'https://addons.mozilla.org/en-US/firefox/addon/ether-metamask',
+                  opera:
+                    'https://addons.opera.com/en-gb/extensions/details/metamask-10',
+                },
+                logo: '',
+                name: 'MetaMask',
+                value: 'isMetaMask',
+                walletConnect: null,
+              },
+            ],
+          },
+        },
+      }
+    : variables.chainId
     ? {
         request: {
           query: GetPaymentMethodsDocument,

diff --git a/src/preview.tsx b/src/preview.tsx
@@ -22,7 +22,8 @@ root.render(
             },
             selection: {
               // BUSD
-              assetId: '6b562c23-d79f-4a34-a47f-cc7b28726821',
+              assetId: 'da5eb9b1-7e2b-4976-a260-07a3eab89618',
+              // paymentMethod: 'binance-pay',
             },
             style: {
               colors: {

diff --git a/src/providers/Store/index.tsx b/src/providers/Store/index.tsx
@@ -136,6 +136,7 @@ type Action =
   | { payload: number; type: 'SET_STEP' }
   | { payload: number; type: 'SET_STEP_IN_VIEW' }
   | { payload: (keyof typeof Steps)[]; type: 'SET_STEPS' }
+  | { payload: number; type: 'SET_MIN_STEP' }
   | {
       payload: {
         id: string;
@@ -377,6 +378,13 @@ export const Store: React.FC<
         case 'SET_STEPS': {
           return { ...state, prevSteps: state.steps, steps: action.payload };
         }
+        case 'SET_MIN_STEP':
+          return {
+            ...state,
+            minStep: state.steps.indexOf(
+              Steps[action.payload] as keyof typeof Steps
+            ),
+          };
         case 'SET_PAYMENT_METHOD':
           return { ...state, method: action.payload };
         case 'GENERATE_DEPOSIT_ADDRESS_SUCCESS':

diff --git a/src/steps/BinancePay/BinancePay.test.tsx b/src/steps/BinancePay/BinancePay.test.tsx
@@ -91,6 +91,55 @@ describe.skip('Binance Pay > Mobile', () => {
     const button2 = await screen.findByTestId('binance-pay-button');
     fireEvent.click(button2);
   });
+  it('sets min step to Enter Amount if binance-pay is required method', async () => {
+    jest.clearAllMocks();
+    render(
+      <App
+        config={{
+          ...mockConfig,
+          options: {
+            selection: {
+              paymentMethod: 'binance-pay',
+            },
+          },
+        }}
+        onClose={() => {}}
+      />
+    );
+    const ethereum = await screen.findByText('Ether');
+    fireEvent.click(ethereum);
+    const binancePay = await screen.findByText('Binance Pay');
+    expect(binancePay).toBeInTheDocument();
+  });
+});
+
+describe('BinancePay > Required', () => {
+  beforeEach(() => {
+    render(
+      <App
+        config={{
+          ...mockConfig,
+          options: {
+            ...mockConfig.options,
+            selection: {
+              ...mockConfig.options?.selection,
+              paymentMethod: 'binance-pay',
+            },
+          },
+        }}
+        onClose={() => {}}
+      />
+    );
+  });
+
+  it('sets min step to Enter Amount', async () => {
+    const ethereum = await screen.findByText('Ether');
+    fireEvent.click(ethereum);
+    const enterAmount = await screen.findByText('Enter Amount');
+    expect(enterAmount).toBeInTheDocument();
+    const back = await screen.findByLabelText('Back');
+    expect(back).toHaveClass('invisible');
+  });
 });
 
 describe('BinancePay Error', () => {

diff --git a/src/steps/PaymentMethod/PaymentMethod.test.tsx b/src/steps/PaymentMethod/PaymentMethod.test.tsx
@@ -134,10 +134,37 @@ describe('Payment Selection', () => {
     Object.defineProperties(reactDeviceDetect, {
       isMobile: { get: () => true },
     });
+    const polygon = await screen.findByText('Polygon');
+    fireEvent.click(polygon);
+    const showAddr = await screen.findByText('Pay to Address');
+    expect(showAddr).toBeInTheDocument();
+  });
+});
+
+describe('Payment Selection', () => {
+  beforeEach(() => {
+    render(
+      <App
+        config={{
+          ...mockConfig,
+          options: {
+            ...mockConfig.options,
+            selection: {
+              ...mockConfig.options?.selection,
+              paymentMethod: 'binance-pay',
+            },
+          },
+        }}
+        onClose={() => {}}
+      />
+    );
+  });
+
+  it('skips the payment selection step if method is required and present', async () => {
     const ethereum = await screen.findByText('Ether');
     fireEvent.click(ethereum);
-    const paymentSelection = await screen.findByText('Payment Method');
-    expect(paymentSelection).toBeInTheDocument();
+    const enterAmount = await screen.findByText('Enter Amount');
+    expect(enterAmount).toBeInTheDocument();
   });
 });
 

diff --git a/src/steps/PaymentMethod/index.tsx b/src/steps/PaymentMethod/index.tsx
@@ -193,6 +193,7 @@ const PaymentMethod: React.FC<Props> = () => {
         dispatch({ payload: Steps.AssetSelection, type: 'SET_STEP' });
       } else {
         selectMethod(method);
+        dispatch({ payload: Steps.EnterAmount, type: 'SET_MIN_STEP' });
       }
     }
   }, [methodsForNetwork.length]);