Merge pull request #122 from map3xyz/phil/map-177-pass-payment-method…

…-in-init feat: payment-method in config
map3xyz · Feb 4, 2023 · 1077e1a · 1077e1a
2 parents 0deb33a + afa63ef
commit 1077e1a
Show file tree

Hide file tree

Showing 4 changed files with 126 additions and 91 deletions.
diff --git a/src/index.tsx b/src/index.tsx
@@ -35,6 +35,7 @@ export interface Map3InitConfig {
   onClose?: () => void;
   onFailure?: (error: string, networkCode: string, address?: string) => void;
   onSuccess?: (txHash: string, networkCode: string, address?: string) => void;
+  paymentMethod?: 'binance-pay' | 'show-address';
   rainbowRoad?: boolean;
   theme?: 'dark' | 'light';
   userId: string;

diff --git a/src/preview.tsx b/src/preview.tsx
@@ -18,6 +18,7 @@ root.render(
               address: '0x67ef9a8d7f4ed931ac63e873b75d8f8dea64cdb2',
             };
           },
+          paymentMethod: 'binance-pay',
           theme: 'dark',
           userId: 'preview-user-id',
         });

diff --git a/src/providers/Store/index.tsx b/src/providers/Store/index.tsx
@@ -79,6 +79,7 @@ type State = {
   };
   providerChainId?: number;
   requiredAmount?: string;
+  requiredPaymentMethod?: 'binance-pay' | 'show-address';
   slug?: string;
   step: number;
   steps: (keyof typeof Steps)[];
@@ -260,6 +261,7 @@ export const Store: React.FC<
     network?: Network;
     onFailure?: (error: string, networkCode: string, address?: string) => void;
     onSuccess?: (txHash: string, networkCode: string, address?: string) => void;
+    paymentMethod?: 'binance-pay' | 'show-address';
     theme?: 'dark' | 'light';
     userId: string;
   }>
@@ -275,6 +277,7 @@ export const Store: React.FC<
   network,
   onFailure,
   onSuccess,
+  paymentMethod,
   theme,
   userId,
 }) => {
@@ -293,6 +296,8 @@ export const Store: React.FC<
     requiredAmount = ethers.utils.formatUnits(amount, asset.decimals);
   }
 
+  const requiredPaymentMethod = paymentMethod;
+
   const [state, dispatch] = useReducer(
     (state: State, action: Action): State => {
       switch (action.type) {
@@ -515,6 +520,7 @@ export const Store: React.FC<
       fiat,
       network,
       requiredAmount,
+      requiredPaymentMethod,
       step,
       theme,
       userId,

diff --git a/src/steps/PaymentMethod/index.tsx b/src/steps/PaymentMethod/index.tsx
@@ -6,7 +6,10 @@ import ErrorWrapper from '../../components/ErrorWrapper';
 import InnerWrapper from '../../components/InnerWrapper';
 import LoadingWrapper from '../../components/LoadingWrapper';
 import MethodIcon from '../../components/MethodIcon';
-import { useGetPaymentMethodsQuery } from '../../generated/apollo-gql';
+import {
+  PaymentMethod,
+  useGetPaymentMethodsQuery,
+} from '../../generated/apollo-gql';
 import { useWeb3 } from '../../hooks/useWeb3';
 import { Context, Steps } from '../../providers/Store';
 
@@ -20,13 +23,126 @@ const PaymentMethod: React.FC<Props> = () => {
     variables: { chainId },
   });
 
+  const selectMethod = (method: PaymentMethod) => {
+    if (!method.flags?.enabled) {
+      return;
+    }
+    dispatch({
+      payload: method,
+      type: 'SET_PAYMENT_METHOD',
+    });
+    if (method.value === 'show-address') {
+      if (state.requiredAmount) {
+        dispatch({
+          payload: [
+            'AssetSelection',
+            'NetworkSelection',
+            'PaymentMethod',
+            'ConfirmRequiredAmount',
+            'ShowAddress',
+            'Result',
+          ],
+          type: 'SET_STEPS',
+        });
+        dispatch({
+          payload: Steps.ConfirmRequiredAmount,
+          type: 'SET_STEP',
+        });
+      } else {
+        dispatch({
+          payload: [
+            'AssetSelection',
+            'NetworkSelection',
+            'PaymentMethod',
+            'ShowAddress',
+            'Result',
+          ],
+          type: 'SET_STEPS',
+        });
+        dispatch({
+          payload: Steps.ShowAddress,
+          type: 'SET_STEP',
+        });
+      }
+    } else if (method.value === 'binance-pay') {
+      dispatch({
+        payload: [
+          'AssetSelection',
+          'NetworkSelection',
+          'PaymentMethod',
+          'EnterAmount',
+          'BinancePay',
+          'Result',
+        ],
+        type: 'SET_STEPS',
+      });
+      dispatch({
+        payload: Steps.EnterAmount,
+        type: 'SET_STEP',
+      });
+    } else if (method.value === 'isWalletConnect') {
+      dispatch({
+        payload: [
+          'AssetSelection',
+          'NetworkSelection',
+          'PaymentMethod',
+          'WalletConnect',
+          'EnterAmount',
+          'Result',
+        ],
+        type: 'SET_STEPS',
+      });
+      dispatch({
+        payload: Steps.WalletConnect,
+        type: 'SET_STEP',
+      });
+    } else {
+      dispatch({
+        payload: [
+          'AssetSelection',
+          'NetworkSelection',
+          'PaymentMethod',
+          'EnterAmount',
+          'Result',
+        ],
+        type: 'SET_STEPS',
+      });
+      dispatch({
+        payload: Steps.EnterAmount,
+        type: 'SET_STEP',
+      });
+    }
+  };
+
   useEffect(() => {
     state.provider?.data?.off?.('network');
     dispatch({ type: 'SET_ACCOUNT_IDLE' });
     dispatch({ type: 'SET_PROVIDER_IDLE' });
     dispatch({ payload: undefined, type: 'SET_PROVIDER_CHAIN_ID' });
   }, []);
 
+  useEffect(() => {
+    const method = data?.methodsForNetwork?.find(
+      (method) => method?.value === state.requiredPaymentMethod
+    );
+    if (state.requiredPaymentMethod && method) {
+      // @ts-ignore
+      if (state.prevStep >= state.steps.indexOf(Steps[Steps.PaymentMethod])) {
+        dispatch({ payload: Steps.AssetSelection, type: 'SET_STEP' });
+      } else {
+        selectMethod(method);
+      }
+    }
+  }, [data?.methodsForNetwork?.length]);
+
+  if (
+    state.requiredPaymentMethod &&
+    data?.methodsForNetwork?.find(
+      (method) => method?.value === state.requiredPaymentMethod
+    )
+  )
+    return null;
+
   if (!state.asset || !state.network) {
     dispatch({ payload: Steps.AssetSelection, type: 'SET_STEP' });
     return null;
@@ -164,96 +280,7 @@ const PaymentMethod: React.FC<Props> = () => {
                       : '!cursor-not-allowed opacity-50 hover:bg-white dark:hover:bg-neutral-900'
                   }`}
                   key={method.name + '-' + method.value}
-                  onClick={() => {
-                    if (!method.flags?.enabled) {
-                      return;
-                    }
-                    dispatch({
-                      payload: method,
-                      type: 'SET_PAYMENT_METHOD',
-                    });
-                    if (method.value === 'show-address') {
-                      if (state.requiredAmount) {
-                        dispatch({
-                          payload: [
-                            'AssetSelection',
-                            'NetworkSelection',
-                            'PaymentMethod',
-                            'ConfirmRequiredAmount',
-                            'ShowAddress',
-                            'Result',
-                          ],
-                          type: 'SET_STEPS',
-                        });
-                        dispatch({
-                          payload: Steps.ConfirmRequiredAmount,
-                          type: 'SET_STEP',
-                        });
-                      } else {
-                        dispatch({
-                          payload: [
-                            'AssetSelection',
-                            'NetworkSelection',
-                            'PaymentMethod',
-                            'ShowAddress',
-                            'Result',
-                          ],
-                          type: 'SET_STEPS',
-                        });
-                        dispatch({
-                          payload: Steps.ShowAddress,
-                          type: 'SET_STEP',
-                        });
-                      }
-                    } else if (method.value === 'binance-pay') {
-                      dispatch({
-                        payload: [
-                          'AssetSelection',
-                          'NetworkSelection',
-                          'PaymentMethod',
-                          'EnterAmount',
-                          'BinancePay',
-                          'Result',
-                        ],
-                        type: 'SET_STEPS',
-                      });
-                      dispatch({
-                        payload: Steps.EnterAmount,
-                        type: 'SET_STEP',
-                      });
-                    } else if (method.value === 'isWalletConnect') {
-                      dispatch({
-                        payload: [
-                          'AssetSelection',
-                          'NetworkSelection',
-                          'PaymentMethod',
-                          'WalletConnect',
-                          'EnterAmount',
-                          'Result',
-                        ],
-                        type: 'SET_STEPS',
-                      });
-                      dispatch({
-                        payload: Steps.WalletConnect,
-                        type: 'SET_STEP',
-                      });
-                    } else {
-                      dispatch({
-                        payload: [
-                          'AssetSelection',
-                          'NetworkSelection',
-                          'PaymentMethod',
-                          'EnterAmount',
-                          'Result',
-                        ],
-                        type: 'SET_STEPS',
-                      });
-                      dispatch({
-                        payload: Steps.EnterAmount,
-                        type: 'SET_STEP',
-                      });
-                    }
-                  }}
+                  onClick={() => selectMethod(method)}
                   role="button"
                 >
                   <div className="flex items-center gap-2">