Merge branch 'main' into feat/ID-3321

Author: keithbro-imx

.github/CODEOWNERS

@@ -17,7 +17,7 @@ package.json @immutable/passport
 /packages/passport @immutable/passport
 /packages/x-provider @immutable/passport
 /packages/checkout @immutable/passport
-/packages/checkout/widgets-lib @immutable/passport
+/packages/checkout/widgets-lib @immutable/gamefi
 /packages/blockchain-data @immutable/activation
 /packages/minting-backend @shineli1984
 /packages/webhook @shineli1984

packages/checkout/widgets-lib/rollup.config.js

@@ -10,54 +10,37 @@ const PRODUCTION = 'production';
 
 const isProduction = process.env.NODE_ENV === PRODUCTION
 
-const defaultPlugins = [
-  json(),
-  replace({
-    preventAssignment: true,
-    'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || PRODUCTION),
-  }),
-]
-
-const productionPlugins = [
-  commonjs(),
-]
-
-const getPlugins = () => {
-  if (process.env.NODE_ENV !== PRODUCTION) {
-    return defaultPlugins;
-  }
-
-  return [
-    ...defaultPlugins,
-    ...productionPlugins
-  ];
-}
-
 /**
- * @type {import('rollup').RollupOptions[]}
+ * @type {import('rollup').RollupOptions}
  */
-export default [
+export default 
   // browser bundle
   {
     input: 'src/index.ts',
     treeshake: 'smallest',
     output: {
       dir: 'dist/browser',
       format: 'es',
-      inlineDynamicImports: !isProduction,
+      inlineDynamicImports: true,
     },
     plugins: [
        isProduction ? typescript({customConditions: ["default"], declaration: false, outDir: 'dist/browser'}) 
          : swc.rollup({ jsc: { 
          transform: { react: { development: true, runtime: 'automatic' }},
        } }),
-      resolve({
-        browser: true,
-        dedupe: ['react', 'react-dom'],
-        exportConditions: ['default', 'browser'],
-      }),
+      ...(isProduction ? [
+        resolve({
+          browser: true,
+          dedupe: ['react', 'react-dom'],
+          exportConditions: ['default', 'browser'],
+        })
+      ] : []),
       nodePolyfills(),
-      ...getPlugins(),
+      json(),
+      replace({
+        preventAssignment: true,
+        'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || PRODUCTION),
+      }),
+      commonjs(),
     ],
-  },
-]
+  }

packages/checkout/widgets-lib/src/widgets/swap/components/SwapForm.tsx

@@ -3,7 +3,7 @@ import {
   useContext, useEffect, useMemo, useState,
 } from 'react';
 import {
-  Box, ButtCon, Heading, Icon, OptionKey, Tooltip,
+  Box, ButtCon, Heading, Icon, OptionKey, Tooltip, Body,
 } from '@biom3/react';
 import { isAddressSanctioned, TokenInfo, WidgetTheme } from '@imtbl/checkout-sdk';
 
@@ -42,7 +42,6 @@ import { CoinSelectorOptionProps } from '../../../components/CoinSelector/CoinSe
 import { useInterval } from '../../../lib/hooks/useInterval';
 import { NotEnoughImx } from '../../../components/NotEnoughImx/NotEnoughImx';
 import { SharedViews, ViewActions, ViewContext } from '../../../context/view-context/ViewContext';
-import { UnableToSwap } from './UnableToSwap';
 import { ConnectLoaderContext } from '../../../context/connect-loader-context/ConnectLoaderContext';
 import useDebounce from '../../../lib/hooks/useDebounce';
 import { CancellablePromise } from '../../../lib/async/cancellablePromise';
@@ -122,6 +121,7 @@ export function SwapForm({ data, theme, cancelAutoProceed }: SwapFromProps) {
 
   // Quote
   const [quote, setQuote] = useState<TransactionResponse | null>(null);
+  const [quoteError, setQuoteError] = useState<string>('');
   const [gasFeeValue, setGasFeeValue] = useState<string>('');
   const [gasFeeToken, setGasFeeToken] = useState<TokenInfo | undefined>(undefined);
   const [gasFeeFiatValue, setGasFeeFiatValue] = useState<string>('');
@@ -148,7 +148,6 @@ export function SwapForm({ data, theme, cancelAutoProceed }: SwapFromProps) {
 
   // Drawers
   const [showNotEnoughImxDrawer, setShowNotEnoughImxDrawer] = useState(false);
-  const [showUnableToSwapDrawer, setShowUnableToSwapDrawer] = useState(false);
   const [showNetworkSwitchDrawer, setShowNetworkSwitchDrawer] = useState(false);
 
   const [showTxnRejectedState, setShowTxnRejectedState] = useState(false);
@@ -217,9 +216,8 @@ export function SwapForm({ data, theme, cancelAutoProceed }: SwapFromProps) {
     network,
   ]);
 
-  const openUnableToSwapDrawer = useCallback((error: any) => {
-    setShowNotEnoughImxDrawer(false);
-    setShowUnableToSwapDrawer(true);
+  const onQuoteError = useCallback((error: any) => {
+    setQuoteError(error.message);
     track({
       userJourney: UserJourney.SWAP,
       screen: 'SwapCoins',
@@ -262,6 +260,7 @@ export function SwapForm({ data, theme, cancelAutoProceed }: SwapFromProps) {
     setFromTokenError('');
     setToAmountError('');
     setToTokenError('');
+    setQuoteError('');
   };
 
   const resetQuote = () => {
@@ -349,7 +348,7 @@ export function SwapForm({ data, theme, cancelAutoProceed }: SwapFromProps) {
         console.error('Error fetching quote.', error);
 
         resetQuote();
-        openUnableToSwapDrawer(error);
+        onQuoteError(error);
       }
     }
 
@@ -425,7 +424,7 @@ export function SwapForm({ data, theme, cancelAutoProceed }: SwapFromProps) {
     } catch (error: any) {
       if (!error.cancelled) {
         resetQuote();
-        openUnableToSwapDrawer(error);
+        onQuoteError(error);
       }
     }
 
@@ -741,7 +740,6 @@ export function SwapForm({ data, theme, cancelAutoProceed }: SwapFromProps) {
   };
 
   const openNotEnoughImxDrawer = () => {
-    setShowUnableToSwapDrawer(false);
     setShowNotEnoughImxDrawer(true);
   };
 
@@ -766,7 +764,8 @@ export function SwapForm({ data, theme, cancelAutoProceed }: SwapFromProps) {
     if (validateToTokenError) setToTokenError(validateToTokenError);
     let isSwapFormValid = true;
     if (
-      validateFromTokenError
+      quoteError
+      || validateFromTokenError
       || validateToTokenError
       || (validateFromAmountError && direction === SwapDirection.FROM)
       || (validateToAmountError && direction === SwapDirection.TO)) isSwapFormValid = false;
@@ -1083,6 +1082,27 @@ export function SwapForm({ data, theme, cancelAutoProceed }: SwapFromProps) {
         />
         )}
       </Box>
+      {quoteError && (
+        <Box sx={{
+          paddingX: 'base.spacing.x4',
+          pt: 'base.spacing.x3',
+        }}
+        >
+          <Body
+            size="xSmall"
+            weight="bold"
+            sx={{
+              color: 'base.color.text.status.fatal.primary',
+            }}
+            rc={<div />}
+          >
+            Unable to swap this token
+          </Body>
+          <Body size="xxSmall">
+            This token pairing isn&apos;t available to swap right now. Try another selection.
+          </Body>
+        </Box>
+      )}
       {!autoProceed && (
         <SwapButton
           validator={SwapFormValidator}
@@ -1121,16 +1141,6 @@ export function SwapForm({ data, theme, cancelAutoProceed }: SwapFromProps) {
         }}
         onCloseDrawer={() => setShowNotEnoughImxDrawer(false)}
       />
-      <UnableToSwap
-        visible={showUnableToSwapDrawer}
-        onCloseDrawer={() => {
-          setShowUnableToSwapDrawer(false);
-          setFromToken(undefined);
-          setFromAmount('');
-          setToToken(undefined);
-          setToAmount('');
-        }}
-      />
       <NetworkSwitchDrawer
         visible={showNetworkSwitchDrawer}
         targetChainId={getL2ChainId(checkout?.config!)}

packages/checkout/widgets-lib/src/widgets/swap/components/UnableToSwap.tsx

@@ -107,5 +107,17 @@ describe('MagicProviderProxyFactory', () => {
 
       await expect(proxy.request!(params)).rejects.toThrow('ProviderProxy: Test error');
     });
+
+    it('should convert eth_requestAccounts to eth_accounts to avoid Magic overlay', async () => {
+      const proxy = factory.createProxy(mockMagicClient);
+      const params = { method: 'eth_requestAccounts' };
+      (mockMagicClient.user.isLoggedIn as jest.Mock).mockResolvedValue(true);
+
+      await proxy.request!(params);
+
+      expect(mockMagicClient.user.isLoggedIn).toHaveBeenCalled();
+      expect(mockRpcProvider.request).toHaveBeenCalledWith({ method: 'eth_accounts' });
+      expect(mockRpcProvider.request).not.toHaveBeenCalledWith(params);
+    });
   });
 });

packages/passport/sdk/src/magic/magicProviderProxyFactory.test.ts

@@ -8,7 +8,15 @@ const shouldCheckMagicSession = (args: any[]): boolean => (
   && typeof args[0] === 'object'
     && 'method' in args[0]
     && typeof args[0].method === 'string'
-    && ['personal_sign', 'eth_accounts'].includes(args[0].method)
+    && ['personal_sign', 'eth_accounts', 'eth_requestAccounts'].includes(args[0].method)
+);
+
+const isEthRequestAccountsCall = (args: any[]): boolean => (
+  args?.length > 0
+  && typeof args[0] === 'object'
+  && 'method' in args[0]
+  && typeof args[0].method === 'string'
+  && args[0].method === 'eth_requestAccounts'
 );
 
 /**
@@ -47,6 +55,12 @@ export class MagicProviderProxyFactory {
                     providerId: this.config.magicProviderId,
                   });
                 }
+
+                if (isEthRequestAccountsCall(args)) {
+                  // @ts-ignore - Calling eth_requestAccounts on the Magic RPC provider displays an overlay, so this
+                  // should be avoided - call eth_accounts instead.
+                  return target.request!({ method: 'eth_accounts' });
+                }
               }
 
               // @ts-ignore - Invoke the request method with the provided arguments