@imtbl/checkout-widgets 2.7.4 → 2.7.5-alpha.0

package/dist/types/widgets/connect/views/ConnectWallet.d.ts

@@ -3,9 +3,10 @@ export interface ConnectWalletProps {
     targetWalletRdns?: string;
     targetChainId: ChainId;
     allowedChains: ChainId[];
-    blocklistWalletRdns?: string[];
+    allowlistWalletRdns?: string[];
+    blocklistWalletRdns: string[];
     checkNetwork: boolean;
     showBackButton?: boolean;
     onBackButtonClick?: () => void;
 }
-export declare function ConnectWallet({ targetWalletRdns, targetChainId, allowedChains, blocklistWalletRdns, checkNetwork, showBackButton, onBackButtonClick, }: ConnectWalletProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare function ConnectWallet({ targetWalletRdns, targetChainId, allowedChains, allowlistWalletRdns, blocklistWalletRdns, checkNetwork, showBackButton, onBackButtonClick, }: ConnectWalletProps): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/types/widgets/immutable-commerce/CommerceWidgetRoot.d.ts

@@ -9,6 +9,7 @@ export declare class CommerceWidgetRoot extends Base<WidgetType.IMMUTABLE_COMMER
         targetChainId?: import("@imtbl/checkout-sdk").ChainId;
         targetWalletRdns?: string | import("@imtbl/checkout-sdk").WalletProviderRdns;
         blocklistWalletRdns?: string[];
+        allowlistWalletRdns?: string[];
     };
     protected getValidWalletFlowParams(params: CommerceWidgetWalletFlowParams): CommerceWidgetWalletFlowParams;
     protected getValidSaleFlowParams(params: CommerceWidgetSaleFlowParams): {

package/dist/types/widgets/immutable-commerce/functions/getConnectLoaderParams.d.ts

@@ -1,7 +1,7 @@
-import { Checkout, WrappedBrowserProvider } from '@imtbl/checkout-sdk';
+import { Checkout, CommerceWidgetConfiguration, WrappedBrowserProvider } from '@imtbl/checkout-sdk';
 import { ConnectLoaderParams } from '../../../components/ConnectLoader/ConnectLoader';
 import { View } from '../../../context/view-context/ViewContext';
 /**
  * Get the connect loader params for the widget
  */
-export declare function getConnectLoaderParams(view: View, checkout: Checkout, browserProvider: WrappedBrowserProvider | undefined): ConnectLoaderParams;
+export declare function getConnectLoaderParams(view: View, flowConfig: CommerceWidgetConfiguration, checkout: Checkout, browserProvider: WrappedBrowserProvider | undefined): ConnectLoaderParams;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@imtbl/checkout-widgets",
-  "version": "2.7.4",
+  "version": "2.7.5-alpha.0",
   "browserslist": {
     "production": [
       ">0.2%",
@@ -18,12 +18,12 @@
     "@biom3/design-tokens": "^0.4.5",
     "@biom3/react": "^0.29.4",
     "@emotion/react": "^11.11.3",
-    "@imtbl/bridge-sdk": "2.7.4",
-    "@imtbl/checkout-sdk": "2.7.4",
-    "@imtbl/config": "2.7.4",
-    "@imtbl/cryptofiat": "2.7.4",
-    "@imtbl/dex-sdk": "2.7.4",
-    "@imtbl/passport": "2.7.4",
+    "@imtbl/bridge-sdk": "2.7.5-alpha.0",
+    "@imtbl/checkout-sdk": "2.7.5-alpha.0",
+    "@imtbl/config": "2.7.5-alpha.0",
+    "@imtbl/cryptofiat": "2.7.5-alpha.0",
+    "@imtbl/dex-sdk": "2.7.5-alpha.0",
+    "@imtbl/passport": "2.7.5-alpha.0",
     "@imtbl/react-analytics": "0.3.4-alpha",
     "@rive-app/react-canvas-lite": "^4.9.0",
     "@walletconnect/ethereum-provider": "^2.11.1",

package/src/components/ConnectLoader/ConnectLoader.tsx

@@ -37,11 +37,12 @@ export interface ConnectLoaderProps {
 
 export interface ConnectLoaderParams {
   targetChainId: ChainId;
-  walletProviderName?: WalletProviderName;
-  browserProvider?: WrappedBrowserProvider;
+  walletProviderName: WalletProviderName | undefined;
+  browserProvider: WrappedBrowserProvider | undefined;
   checkout: Checkout;
   allowedChains: ChainId[];
   isCheckNetworkEnabled?: boolean;
+  allowlistWalletRdns: string[] | undefined;
 }
 
 export function ConnectLoader({
@@ -60,6 +61,7 @@ export function ConnectLoader({
     allowedChains,
     browserProvider,
     isCheckNetworkEnabled,
+    allowlistWalletRdns,
   } = params;
 
   const { t } = useTranslation();
@@ -253,6 +255,7 @@ export function ConnectLoader({
                     <ConnectWidget
                       config={widgetConfig}
                       targetChainId={targetChainId}
+                      allowlistWalletRdns={allowlistWalletRdns}
                       browserProvider={provider}
                       checkout={checkout}
                       deepLink={deepLink}

package/src/widgets/connect/ConnectWidget.tsx

@@ -80,6 +80,7 @@ export default function ConnectWidget({
   targetWalletRdns,
   targetChainId,
   allowedChains,
+  allowlistWalletRdns,
   blocklistWalletRdns,
   deepLink = ConnectWidgetViews.CONNECT_WALLET,
   isCheckNetworkEnabled,
@@ -219,7 +220,8 @@ export default function ConnectWidget({
               targetWalletRdns={targetWalletRdns}
               targetChainId={targetChain}
               allowedChains={allowedChains ?? [targetChain]}
-              blocklistWalletRdns={blocklistWalletRdns}
+              allowlistWalletRdns={allowlistWalletRdns}
+              blocklistWalletRdns={blocklistWalletRdns ?? []}
               checkNetwork={isCheckNetworkEnabled ?? true}
               showBackButton={showBackButton}
               onBackButtonClick={sendGoBackEventOverride}

package/src/widgets/connect/components/WalletList.tsx

@@ -55,10 +55,17 @@ export interface WalletListProps {
   targetWalletRdns?: string;
   targetChainId: ChainId;
   allowedChains: ChainId[];
-  blocklistWalletRdns?: string[];
+  allowlistWalletRdns?: string[];
+  blocklistWalletRdns: string[];
   isCheckNetworkEnabled: boolean;
 }
 
+// eslint-disable-next-line max-len
+const getAllowedProviders = (providers: EIP6963ProviderDetail[], allowlist: string[] | undefined, blocklist: string[]) =>
+  (allowlist ?
+    providers.filter((provider) => !blocklist.includes(provider.info.rdns) && allowlist.includes(provider.info.rdns)) :
+    providers.filter((provider) => !blocklist.includes(provider.info.rdns)));
+
 export function WalletList(props: WalletListProps) {
   const { t } = useTranslation();
   const {
@@ -66,8 +73,9 @@ export function WalletList(props: WalletListProps) {
     targetChainId,
     allowedChains,
     isCheckNetworkEnabled,
+    allowlistWalletRdns,
+    blocklistWalletRdns,
   } = props;
-  const blocklistWalletRdns = props?.blocklistWalletRdns || [];
   const {
     connectDispatch,
     connectState: { checkout },
@@ -83,24 +91,25 @@ export function WalletList(props: WalletListProps) {
   const [showNonPassportWarning, setShowNonPassportWarning] = useState(false);
   const [chosenProviderDetail, setChosenProviderDetail] = useState<EIP6963ProviderDetail>();
 
+  const allowedProviders = useMemo(
+    () => getAllowedProviders(providers, allowlistWalletRdns, blocklistWalletRdns),
+    [providers, allowlistWalletRdns, blocklistWalletRdns],
+  );
+
   const filteredProviders = useMemo(
-    () => providers
+    () => allowedProviders
       .filter(
         (provider) => !(provider.info.rdns === WalletProviderRdns.PASSPORT),
-      )
-      .filter(
-        (provider) => !blocklistWalletRdns.includes(provider.info.rdns),
       ),
-    [providers],
+    [allowedProviders],
   );
 
   // Don't allow Passport if targetChainId is L1
   const passportProviderDetail = useMemo(
     () => targetChainId !== checkout!.config.l1ChainId
-      && providers
-        .filter((provider) => !blocklistWalletRdns.includes(provider.info.rdns))
+      && allowedProviders
         .find((provider) => provider.info.rdns === WalletProviderRdns.PASSPORT),
-    [providers, checkout],
+    [allowedProviders, checkout, targetChainId],
   );
 
   const selectBrowserProvider = useCallback(

package/src/widgets/connect/views/ConnectWallet.tsx

@@ -13,7 +13,8 @@ export interface ConnectWalletProps {
   targetWalletRdns?: string,
   targetChainId: ChainId;
   allowedChains: ChainId[];
-  blocklistWalletRdns?: string[];
+  allowlistWalletRdns?: string[];
+  blocklistWalletRdns: string[];
   checkNetwork: boolean;
   showBackButton?: boolean;
   onBackButtonClick?: () => void;
@@ -23,6 +24,7 @@ export function ConnectWallet({
   targetWalletRdns,
   targetChainId,
   allowedChains,
+  allowlistWalletRdns,
   blocklistWalletRdns,
   checkNetwork,
   showBackButton,
@@ -86,6 +88,7 @@ export function ConnectWallet({
           targetWalletRdns={targetWalletRdns}
           targetChainId={targetChainId}
           allowedChains={allowedChains}
+          allowlistWalletRdns={allowlistWalletRdns}
           blocklistWalletRdns={blocklistWalletRdns}
           isCheckNetworkEnabled={checkNetwork}
         />

package/src/widgets/immutable-commerce/CommerceWidget.tsx

@@ -80,8 +80,8 @@ export default function CommerceWidget(props: CommerceWidgetInputs) {
   const { provider } = commerceState;
 
   const connectLoaderParams = useMemo(
-    () => getConnectLoaderParams(view, checkout, provider || browserProvider),
-    [view, checkout, provider, browserProvider],
+    () => getConnectLoaderParams(view, flowConfig, checkout, provider || browserProvider),
+    [view, flowConfig, checkout, provider, browserProvider],
   );
 
   const connectLoaderSuccessEvent = (

package/src/widgets/immutable-commerce/functions/getConnectLoaderParams.ts

@@ -1,5 +1,5 @@
 import {
-  Checkout, CommerceFlowType, WrappedBrowserProvider,
+  Checkout, CommerceFlowType, CommerceWidgetConfiguration, WrappedBrowserProvider,
 } from '@imtbl/checkout-sdk';
 import { ConnectLoaderParams } from '../../../components/ConnectLoader/ConnectLoader';
 import { View } from '../../../context/view-context/ViewContext';
@@ -9,6 +9,7 @@ import { View } from '../../../context/view-context/ViewContext';
  */
 export function getConnectLoaderParams(
   view: View,
+  flowConfig: CommerceWidgetConfiguration,
   checkout: Checkout,
   browserProvider: WrappedBrowserProvider | undefined,
 ): ConnectLoaderParams {
@@ -24,6 +25,8 @@ export function getConnectLoaderParams(
           checkout.config.l1ChainId,
           checkout.config.l2ChainId,
         ],
+        allowlistWalletRdns: flowConfig.CONNECT?.allowlistWalletRdns,
+        walletProviderName: undefined,
       };
     case CommerceFlowType.ONRAMP:
     case CommerceFlowType.ADD_TOKENS:
@@ -35,6 +38,8 @@ export function getConnectLoaderParams(
           checkout.config.l1ChainId,
           checkout.config.l2ChainId,
         ],
+        allowlistWalletRdns: flowConfig.CONNECT?.allowlistWalletRdns,
+        walletProviderName: undefined,
       };
     case CommerceFlowType.SALE:
     case CommerceFlowType.SWAP:
@@ -44,6 +49,8 @@ export function getConnectLoaderParams(
         browserProvider,
         targetChainId: checkout.config.l2ChainId,
         allowedChains: [checkout.config.l2ChainId],
+        allowlistWalletRdns: flowConfig.CONNECT?.allowlistWalletRdns,
+        walletProviderName: undefined,
       };
     default:
       return {} as ConnectLoaderParams;

package/src/widgets/on-ramp/OnRampWidgetRoot.tsx

@@ -82,6 +82,7 @@ export class OnRamp extends Base<WidgetType.ONRAMP> {
       browserProvider: this.browserProvider,
       checkout: this.checkout,
       allowedChains: [this.checkout.config.l1ChainId, this.checkout.config.l2ChainId],
+      allowlistWalletRdns: undefined,
     };
 
     this.reactRoot.render(

package/src/widgets/sale/SaleWidgetRoot.tsx

@@ -124,6 +124,8 @@ export class Sale extends Base<WidgetType.SALE> {
       browserProvider: this.browserProvider,
       checkout: this.checkout,
       allowedChains: [this.checkout.config.l2ChainId],
+      allowlistWalletRdns: undefined,
+      walletProviderName: undefined,
     };
     const config = this.strongConfig();
 

package/src/widgets/swap/SwapWidgetRoot.tsx

@@ -84,6 +84,7 @@ export class Swap extends Base<WidgetType.SWAP> {
       browserProvider: this.browserProvider,
       checkout: this.checkout,
       allowedChains: [this.checkout.config.l2ChainId],
+      allowlistWalletRdns: undefined,
     };
 
     this.reactRoot!.render(

package/src/widgets/wallet/WalletWidgetRoot.tsx

@@ -74,6 +74,7 @@ export class Wallet extends Base<WidgetType.WALLET> {
       browserProvider: this.browserProvider,
       checkout: this.checkout,
       allowedChains: [this.checkout.config.l1ChainId, this.checkout.config.l2ChainId],
+      allowlistWalletRdns: undefined,
     };
 
     this.reactRoot.render(