[NO-CHANGELOG][Checkout Widgets] fix: Prevent passing provider as pro…

…p to framer motion children (#2101)
immutable · Aug 21, 2024 · a60950c · a60950c
1 parent c32a4c9
commit a60950c
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 25 deletions.
diff --git a/packages/checkout/widgets-lib/src/components/WalletDrawer/WalletDrawer.tsx b/packages/checkout/widgets-lib/src/components/WalletDrawer/WalletDrawer.tsx
@@ -119,8 +119,8 @@ export function WalletDrawer({
             key={providerDetail.info.rdns}
             testId={testId}
             loading={walletItemLoading}
-            providerDetail={providerDetail}
-            onWalletItemClick={handleWalletItemClick}
+            providerInfo={providerDetail.info}
+            onWalletItemClick={() => handleWalletItemClick(providerDetail)}
             rc={(
               <motion.div variants={listItemVariants} custom={index} />
             )}

diff --git a/packages/checkout/widgets-lib/src/components/WalletDrawer/WalletItem.tsx b/packages/checkout/widgets-lib/src/components/WalletDrawer/WalletItem.tsx
@@ -1,15 +1,15 @@
 import { MenuItem } from '@biom3/react';
 import { cloneElement, ReactElement, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { EIP6963ProviderDetail } from '@imtbl/checkout-sdk';
+import { EIP6963ProviderInfo } from '@imtbl/checkout-sdk';
 import { RawImage } from '../RawImage/RawImage';
 
 export interface WalletItemProps<RC extends ReactElement | undefined = undefined> {
   loading?: boolean;
   recommended?: boolean;
   testId: string;
-  providerDetail: EIP6963ProviderDetail;
-  onWalletItemClick: (providerDetail: EIP6963ProviderDetail) => Promise<void>;
+  providerInfo: EIP6963ProviderInfo;
+  onWalletItemClick: () => void;
   rc?: RC;
 }
 
@@ -20,7 +20,7 @@ export function WalletItem<
   testId,
   loading = false,
   recommended = false,
-  providerDetail,
+  providerInfo,
   onWalletItemClick,
 }: WalletItemProps<RC>) {
   const { t } = useTranslation();
@@ -34,27 +34,27 @@ export function WalletItem<
           setBusy(true);
           // let the parent handle errors
           try {
-            await onWalletItemClick(providerDetail);
+            await onWalletItemClick();
           } finally {
             setBusy(false);
           }
         },
       })}
-      testId={`${testId}-wallet-list-${providerDetail.info.rdns}`}
+      testId={`${testId}-wallet-list-${providerInfo.rdns}`}
       size="medium"
       emphasized
       sx={{ position: 'relative' }}
     >
       <RawImage
-        src={providerDetail.info.icon}
-        alt={providerDetail.info.name}
+        src={providerInfo.icon}
+        alt={providerInfo.name}
         sx={{
           position: 'absolute',
           left: 'base.spacing.x3',
         }}
       />
       <MenuItem.Label size="medium" sx={{ marginLeft: '65px' }}>
-        {providerDetail.info.name}
+        {providerInfo.name}
       </MenuItem.Label>
       {((recommended || busy) && (
         <MenuItem.Badge

diff --git a/packages/checkout/widgets-lib/src/widgets/connect/components/WalletItem.tsx b/packages/checkout/widgets-lib/src/widgets/connect/components/WalletItem.tsx
@@ -1,16 +1,16 @@
 import { Badge, Box, MenuItem } from '@biom3/react';
 import { useTranslation } from 'react-i18next';
 import { cloneElement, ReactElement, useState } from 'react';
-import { EIP6963ProviderDetail, WalletProviderName } from '@imtbl/checkout-sdk';
+import { EIP6963ProviderInfo, WalletProviderName } from '@imtbl/checkout-sdk';
 import { RawImage } from '../../../components/RawImage/RawImage';
 import { getProviderSlugFromRdns } from '../../../lib/provider';
 import useIsSmallScreen from '../../../lib/hooks/useIsSmallScreen';
 
 export interface WalletProps<RC extends ReactElement | undefined = undefined> {
   loading?: boolean;
   recommended?: boolean;
-  onWalletItemClick: (providerDetail: EIP6963ProviderDetail) => void;
-  providerDetail: EIP6963ProviderDetail;
+  onWalletItemClick: () => void;
+  providerInfo: EIP6963ProviderInfo;
   rc?: RC;
 }
 
@@ -20,13 +20,13 @@ export function WalletItem<
   rc = <span />,
   loading = false,
   recommended = false,
-  providerDetail,
+  providerInfo,
   onWalletItemClick,
 }: WalletProps<RC>) {
   const { t } = useTranslation();
   const { isSmallScreenMode } = useIsSmallScreen();
   const [busy, setBusy] = useState(false);
-  const providerSlug = getProviderSlugFromRdns(providerDetail.info.rdns);
+  const providerSlug = getProviderSlugFromRdns(providerInfo.rdns);
   const isPassport = providerSlug === WalletProviderName.PASSPORT;
   const isPassportOrMetamask = isPassport || providerSlug === WalletProviderName.METAMASK;
   const offsetStyles = { marginLeft: '65px' };
@@ -39,13 +39,13 @@ export function WalletItem<
           setBusy(true);
           // let the parent handle errors
           try {
-            await onWalletItemClick(providerDetail);
+            await onWalletItemClick();
           } finally {
             setBusy(false);
           }
         },
       })}
-      testId={`wallet-list-${providerDetail.info.rdns}`}
+      testId={`wallet-list-${providerInfo.rdns}`}
       size="medium"
       emphasized
       sx={{
@@ -54,8 +54,8 @@ export function WalletItem<
       }}
     >
       <RawImage
-        src={providerDetail.info.icon}
-        alt={providerDetail.info.name}
+        src={providerInfo.icon}
+        alt={providerInfo.name}
         sx={{
           position: 'absolute',
           left: 'base.spacing.x3',
@@ -80,7 +80,7 @@ export function WalletItem<
             }}
           />
         ))}
-        <Box>{providerDetail.info.name}</Box>
+        <Box>{providerInfo.name}</Box>
       </MenuItem.Label>
       {(!busy && <MenuItem.IntentIcon />)}
       <MenuItem.Caption sx={{ ...offsetStyles }}>

diff --git a/packages/checkout/widgets-lib/src/widgets/connect/components/WalletList.tsx b/packages/checkout/widgets-lib/src/widgets/connect/components/WalletList.tsx
@@ -372,8 +372,8 @@ export function WalletList(props: WalletListProps) {
         <WalletItem
           recommended
           key={passportProviderDetail.info.rdns}
-          onWalletItemClick={handleWalletItemClick}
-          providerDetail={passportProviderDetail}
+          onWalletItemClick={() => handleWalletItemClick(passportProviderDetail)}
+          providerInfo={passportProviderDetail.info}
           rc={(
             <motion.div
               variants={listItemVariants}
@@ -386,8 +386,8 @@ export function WalletList(props: WalletListProps) {
       {filteredProviders.length === 1 && (
         <WalletItem
           key={filteredProviders[0].info.rdns}
-          onWalletItemClick={handleWalletItemClick}
-          providerDetail={filteredProviders[0]}
+          onWalletItemClick={() => handleWalletItemClick(filteredProviders[0])}
+          providerInfo={filteredProviders[0].info}
           rc={(
             <motion.div
               variants={listItemVariants}