diff --git a/src/preview.tsx b/src/preview.tsx index ba28f826..583391e9 100644 --- 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 index df869ca4..3ca6620e 100644 --- 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 index 5b596169..839c45f9 100644 --- a/src/steps/PaymentMethod/index.tsx +++ b/src/steps/PaymentMethod/index.tsx @@ -21,6 +21,9 @@ const PaymentMethod: React.FC = () => { const { t } = useTranslation(); const [state, dispatch, { onAddressRequested }] = useContext(Context); const [formValue, setFormValue] = useState(); + const [methodsForNetwork, setMethodsForNetwork] = useState< + (PaymentMethod | null)[] + >([]); const formRef = useRef(null); const chainId = state.network?.identifiers?.chainId; const { providers } = useWeb3(); @@ -28,6 +31,60 @@ const PaymentMethod: React.FC = () => { 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 = () => { }, []); 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 = () => { 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 = () => { ) { 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 = () => { /> ); - 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 index e5c66d62..33e332ae 100644 --- a/src/steps/ShowAddress/index.tsx +++ b/src/steps/ShowAddress/index.tsx @@ -192,10 +192,10 @@ const ShowAddress: React.FC = () => { /> )} - {(state.depositAddress.status === 'loading' || loading) && ( + {state.depositAddress.status === 'loading' || loading ? ( - )} - {state.depositAddress.status === 'success' && + ) : ( + state.depositAddress.status === 'success' && state.depositAddress.data && qrValue && (
@@ -285,7 +285,8 @@ const ShowAddress: React.FC = () => { />
- )} + ) + )}
);