Merge pull request #177 from map3xyz/fix/skip-show-addr-and-flickr

fix(show addr): should skip if 1 method for network or device
map3xyz · Mar 30, 2023 · fa3bfd9 · fa3bfd9
2 parents 04f36d8 + 873b1c9
commit fa3bfd9
Show file tree

Hide file tree

Showing 4 changed files with 84 additions and 63 deletions.
diff --git a/src/preview.tsx b/src/preview.tsx
@@ -13,18 +13,22 @@ root.render(
         const supercharge = initMap3Supercharge({
           anonKey: process.env.CONSOLE_ANON_KEY || '',
           options: {
+            callbacks: {
+              onAddressRequested: () => {
+                return {
+                  address: '0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48',
+                };
+              },
+            },
             selection: {
               // BUSD
               assetId: '6b562c23-d79f-4a34-a47f-cc7b28726821',
-              paymentMethod: 'binance-pay',
-              shortcutAmounts: [10, 50, 100],
             },
             style: {
               colors: {
                 accent: '#dfff86',
                 primary: '#0e1523',
               },
-              locale: 'es',
             },
           },
           userId: 'preview-user-id',

diff --git a/src/steps/PaymentMethod/PaymentMethod.test.tsx b/src/steps/PaymentMethod/PaymentMethod.test.tsx
@@ -130,6 +130,15 @@ describe('Payment Selection', () => {
     const payToAddress = await screen.findByText('Pay to Address');
     expect(payToAddress).toBeInTheDocument();
   });
+  it('skips the payment selection step if there is only one payment method due to mobile', async () => {
+    Object.defineProperties(reactDeviceDetect, {
+      isMobile: { get: () => true },
+    });
+    const ethereum = await screen.findByText('Ether');
+    fireEvent.click(ethereum);
+    const paymentSelection = await screen.findByText('Payment Method');
+    expect(paymentSelection).toBeInTheDocument();
+  });
 });
 
 describe('Payment Method Errors', () => {

diff --git a/src/steps/PaymentMethod/index.tsx b/src/steps/PaymentMethod/index.tsx
@@ -21,13 +21,70 @@ const PaymentMethod: React.FC<Props> = () => {
   const { t } = useTranslation();
   const [state, dispatch, { onAddressRequested }] = useContext(Context);
   const [formValue, setFormValue] = useState<FormData>();
+  const [methodsForNetwork, setMethodsForNetwork] = useState<
+    (PaymentMethod | null)[]
+  >([]);
   const formRef = useRef<HTMLFormElement>(null);
   const chainId = state.network?.identifiers?.chainId;
   const { providers } = useWeb3();
   const { data, error, loading, refetch } = useGetPaymentMethodsQuery({
     variables: { chainId },
   });
 
+  useEffect(() => {
+    const methodsForNetwork = data?.methodsForNetwork?.filter((method) => {
+      if (
+        method?.value !== 'binance-pay' &&
+        typeof onAddressRequested !== 'function'
+      ) {
+        return false;
+      }
+
+      const supportsChain =
+        method?.walletConnect?.chains?.includes('eip155:' + chainId) ||
+        method?.walletConnect?.chains?.length === 0;
+
+      if (isMobile) {
+        // if mobile filter out extensions and walletconnect
+        if (
+          method?.value === 'isMetaMask' ||
+          method?.value === 'isCoinbaseWallet' ||
+          method?.value === 'isWalletConnect'
+        )
+          return false;
+
+        // TODO: support walletconnect on mobile
+        // if (method?.walletConnect && !supportsChain) return false;
+
+        // if (method?.walletConnect) {
+        //   let app: string | null | undefined = null;
+        //   if (isIOS) {
+        //     app = method?.walletConnect?.app?.ios;
+        //   }
+        //   if (isAndroid) {
+        //     app = method?.walletConnect?.app?.android;
+        //   }
+        //   const hasAppOrUniversal = !!(
+        //     app || method?.walletConnect?.mobile?.universal
+        //   );
+
+        //   if (!hasAppOrUniversal) return false;
+        // }
+
+        return true;
+      }
+
+      return (
+        !method?.walletConnect ||
+        (method.walletConnect &&
+          supportsChain &&
+          method?.walletConnect?.mobile?.native)
+      );
+    });
+
+    setMethodsForNetwork(methodsForNetwork || []);
+  }, [data?.methodsForNetwork?.length]);
+
   const selectMethod = (method: PaymentMethod) => {
     if (!method.flags?.enabled) {
       return;
@@ -127,7 +184,7 @@ const PaymentMethod: React.FC<Props> = () => {
   }, []);
 
   useEffect(() => {
-    const method = data?.methodsForNetwork?.find(
+    const method = methodsForNetwork?.find(
       (method) => method?.value === state.requiredPaymentMethod
     );
     if (state.requiredPaymentMethod && method) {
@@ -138,10 +195,10 @@ const PaymentMethod: React.FC<Props> = () => {
         selectMethod(method);
       }
     }
-  }, [data?.methodsForNetwork?.length]);
+  }, [methodsForNetwork.length]);
 
   useEffect(() => {
-    if (data?.methodsForNetwork?.[0] && data?.methodsForNetwork?.length === 1) {
+    if (methodsForNetwork?.[0] && methodsForNetwork?.length === 1) {
       if (
         // @ts-ignore
         state.prevStep >= state.steps.indexOf(Steps[Steps.PaymentMethod]) &&
@@ -150,14 +207,14 @@ const PaymentMethod: React.FC<Props> = () => {
       ) {
         dispatch({ payload: Steps.AssetSelection, type: 'SET_STEP' });
       } else {
-        selectMethod(data.methodsForNetwork[0]);
+        selectMethod(methodsForNetwork[0]);
       }
     }
-  }, [data?.methodsForNetwork?.length]);
+  }, [methodsForNetwork.length]);
 
   if (
     state.requiredPaymentMethod &&
-    data?.methodsForNetwork?.find(
+    methodsForNetwork.find(
       (method) => method?.value === state.requiredPaymentMethod
     )
   )
@@ -185,56 +242,6 @@ const PaymentMethod: React.FC<Props> = () => {
       />
     );
 
-  const methodsForNetwork = data?.methodsForNetwork?.filter((method) => {
-    if (
-      method?.value !== 'binance-pay' &&
-      typeof onAddressRequested !== 'function'
-    ) {
-      return false;
-    }
-
-    const supportsChain =
-      method?.walletConnect?.chains?.includes('eip155:' + chainId) ||
-      method?.walletConnect?.chains?.length === 0;
-
-    if (isMobile) {
-      // if mobile filter out extensions and walletconnect
-      if (
-        method?.value === 'isMetaMask' ||
-        method?.value === 'isCoinbaseWallet' ||
-        method?.value === 'isWalletConnect'
-      )
-        return false;
-
-      // TODO: support walletconnect on mobile
-      // if (method?.walletConnect && !supportsChain) return false;
-
-      // if (method?.walletConnect) {
-      //   let app: string | null | undefined = null;
-      //   if (isIOS) {
-      //     app = method?.walletConnect?.app?.ios;
-      //   }
-      //   if (isAndroid) {
-      //     app = method?.walletConnect?.app?.android;
-      //   }
-      //   const hasAppOrUniversal = !!(
-      //     app || method?.walletConnect?.mobile?.universal
-      //   );
-
-      //   if (!hasAppOrUniversal) return false;
-      // }
-
-      return true;
-    }
-
-    return (
-      !method?.walletConnect ||
-      (method.walletConnect &&
-        supportsChain &&
-        method?.walletConnect?.mobile?.native)
-    );
-  });
-
   const methodsForSearch = methodsForNetwork?.filter((method) => {
     const searchMatch = formValue?.get('method-search')
       ? method?.name

diff --git a/src/steps/ShowAddress/index.tsx b/src/steps/ShowAddress/index.tsx
@@ -192,10 +192,10 @@ const ShowAddress: React.FC<Props> = () => {
         />
       )}
       <InnerWrapper className="h-full">
-        {(state.depositAddress.status === 'loading' || loading) && (
+        {state.depositAddress.status === 'loading' || loading ? (
           <LoadingWrapper message="Generating Address..." />
-        )}
-        {state.depositAddress.status === 'success' &&
+        ) : (
+          state.depositAddress.status === 'success' &&
           state.depositAddress.data &&
           qrValue && (
             <div className="flex h-full w-full flex-col items-center justify-between gap-2 text-sm">
@@ -285,7 +285,8 @@ const ShowAddress: React.FC<Props> = () => {
                 />
               </div>
             </div>
-          )}
+          )
+        )}
       </InnerWrapper>
     </div>
   );