@rango-dev/widget-embedded 0.5.1-next.0 → 0.5.1-next.10

package/src/pages/WalletsPage.tsx

@@ -22,9 +22,11 @@ import { useTranslation } from 'react-i18next';
 import { useMetaStore } from '../store/meta';
 import { Spinner } from '@rango-dev/ui';
 import { LoadingFailedAlert } from '@rango-dev/ui';
+import { WidgetConfig } from '../types';
+import { configWalletsToWalletName } from '../utils/providers';
 
 interface PropTypes {
-  supportedWallets?: WalletType[];
+  supportedWallets: WidgetConfig['wallets'];
   multiWallets: boolean;
 }
 
@@ -48,13 +50,16 @@ const LoaderContainer = styled('div', {
 const AlertContainer = styled('div', {
   paddingBottom: '$16',
 });
+
+const ALL_SUPPORTED_WALLETS = Object.values(WalletTypes);
+
 export function WalletsPage({ supportedWallets, multiWallets }: PropTypes) {
   const { navigateBackFrom } = useNavigateBack();
   const { state, disconnect, getWalletInfo, connect } = useWallets();
   const wallets = getlistWallet(
     state,
     getWalletInfo,
-    supportedWallets || Object.values(WalletTypes)
+    configWalletsToWalletName(supportedWallets) || ALL_SUPPORTED_WALLETS
   );
   const walletsRef = useRef<WalletInfo[]>();
 
@@ -112,8 +117,7 @@ export function WalletsPage({ supportedWallets, multiWallets }: PropTypes) {
     <SecondaryPage
       title={t('Select Wallet') || ''}
       textField={false}
-      onBack={navigateBackFrom.bind(null, navigationRoutes.wallets)}
-    >
+      onBack={navigateBackFrom.bind(null, navigationRoutes.wallets)}>
       <>
         {walletErrorMessage && (
           <AlertContainer>

package/src/store/wallets.ts

@@ -134,11 +134,10 @@ export const useWalletsStore = createSelectors(
       getOneOfWalletsDetails: async (account: Wallet) => {
         const tokens = useMetaStore.getState().meta.tokens;
         set((state) => ({
-          connectedWallets: state.connectedWallets.map((balance) => {
-            return balance.address === account.address &&
-              balance.chain === account.chain
-              ? { ...balance, loading: true }
-              : balance;
+          connectedWallets: state.connectedWallets.map((wallet) => {
+            return isAccountAndWalletMatched(account, wallet)
+              ? { ...wallet, loading: true }
+              : wallet;
           }),
         }));
         try {

package/src/types/config.ts

@@ -1,5 +1,6 @@
 import { Asset } from 'rango-sdk';
 import { WalletType } from '@rango-dev/wallets-shared';
+import { ProviderInterface } from '@rango-dev/wallets-core';
 
 /**
  * The above type defines a set of optional color properties for a widget.
@@ -100,6 +101,9 @@ export type BlockchainAndTokenConfig = {
  * @property {WidgetTheme} theme - The `theme` property is a part of the `WidgetConfig` type and is
  * used to specify the visual theme of the widget. It is of type `WidgetTheme`, which is an interface
  * that defines the various properties of the theme, such as colors, fonts, and others.
+ * @property {boolean} externalWallets
+ * If `externalWallets` is `true`, you should add `WidgetWallets` to your app.
+
  */
 export type WidgetConfig = {
   apiKey: string;
@@ -108,9 +112,10 @@ export type WidgetConfig = {
   from?: BlockchainAndTokenConfig;
   to?: BlockchainAndTokenConfig;
   liquiditySources?: string[];
-  wallets?: WalletType[];
+  wallets?: (WalletType | ProviderInterface)[];
   multiWallets?: boolean;
   customDestination?: boolean;
   language?: string;
   theme?: WidgetTheme;
+  externalWallets?: boolean;
 };

package/src/utils/providers.ts

@@ -0,0 +1,53 @@
+import { allProviders } from '@rango-dev/provider-all';
+import { ProviderInterface } from '@rango-dev/wallets-core';
+import { WidgetConfig } from '../types';
+
+/**
+ *
+ * Generate a list of providers by passing a provider name (e.g. metamask) or a custom provider which implemented ProviderInterface.
+ * @returns ProviderInterface[] a list of ProviderInterface
+ *
+ */
+export function matchAndGenerateProviders(
+  providers: WidgetConfig['wallets']
+): ProviderInterface[] {
+  const all = allProviders();
+
+  if (providers) {
+    const selectedProviders: ProviderInterface[] = [];
+
+    providers.forEach((requestedProvider) => {
+      // There are two types of provider we get, the first one is only passing the wallet name
+      // then we will match the wallet name with our providers (@rango-dev/provider-*).
+      // The second way is passing a custom provider which implemented ProviderInterface.
+      if (typeof requestedProvider === 'string') {
+        const result: ProviderInterface | undefined = all.find((provider) => {
+          return provider.config.type === requestedProvider;
+        });
+        if (result) {
+          selectedProviders.push(result);
+        } else {
+          console.warn(
+            `Couldn't find ${requestedProvider} provider. Please make sure you are passing the correct name.`
+          );
+        }
+      } else {
+        // It's a custom provider so we directly push it to the list.
+        selectedProviders.push(requestedProvider);
+      }
+    });
+    return selectedProviders;
+  }
+
+  return all;
+}
+
+export function configWalletsToWalletName(
+  config: WidgetConfig['wallets']
+): string[] {
+  const providers = matchAndGenerateProviders(config);
+  const names = providers.map((provider) => {
+    return provider.config.type;
+  });
+  return names;
+}

package/src/utils/wallets.ts

@@ -8,6 +8,7 @@ import {
   detectInstallLink,
   WalletInfo,
   WalletTypes,
+  Networks,
 } from '@rango-dev/wallets-shared';
 
 import {
@@ -77,7 +78,7 @@ export function walletAndSupportedChainsNames(
   if (!supportedChains) return null;
   let walletAndSupportedChainsNames: Network[] = [];
   walletAndSupportedChainsNames = supportedChains.map(
-    (blockchainMeta) => blockchainMeta.name as Network
+    (blockchainMeta) => blockchainMeta.name
   );
 
   return walletAndSupportedChainsNames;
@@ -92,13 +93,18 @@ export function prepareAccountsForWalletStore(
   const result: Wallet[] = [];
 
   function addAccount(network: Network, address: string) {
-    const newAccount: Wallet = {
-      address,
-      chain: network,
-      walletType: wallet,
-    };
+    const accountForChainAlreadyExists = !!result.find(
+      (account) => account.chain === network
+    );
+    if (!accountForChainAlreadyExists) {
+      const newAccount: Wallet = {
+        address,
+        chain: network,
+        walletType: wallet,
+      };
 
-    result.push(newAccount);
+      result.push(newAccount);
+    }
   }
 
   const supportedChains = supportedChainNames || [];
@@ -108,7 +114,7 @@ export function prepareAccountsForWalletStore(
 
     const hasLimitation = supportedChains.length > 0;
     const isSupported = supportedChains.includes(network);
-    const isUnknown = network === Network.Unknown;
+    const isUnknown = network === Networks.Unknown;
     const notSupportedNetworkByWallet =
       hasLimitation && !isSupported && !isUnknown;
 
@@ -121,7 +127,7 @@ export function prepareAccountsForWalletStore(
     // Example: showing our evm compatible netwrok when the uknown network is evem.
     // Otherwise, we stop executing this function.
     const isUknownAndEvmBased =
-      network === Network.Unknown && isEvmAddress(address);
+      network === Networks.Unknown && isEvmAddress(address);
     if (isUnknown && !isUknownAndEvmBased) return;
 
     const isEvmBasedChain = evmBasedChains.includes(network);
@@ -233,7 +239,8 @@ export function isAccountAndWalletMatched(
 ) {
   return (
     account.address === connectedWallet.address &&
-    account.chain === connectedWallet.chain
+    account.chain === connectedWallet.chain &&
+    account.walletType === connectedWallet.walletType
   );
 }
 

package/dist/mockData/pendingSwap.d.ts

@@ -1,2 +0,0 @@
-export declare const pendingSwap: any;
-//# sourceMappingURL=pendingSwap.d.ts.map

package/dist/mockData/pendingSwap.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"pendingSwap.d.ts","sourceRoot":"","sources":["../../src/mockData/pendingSwap.ts"],"names":[],"mappings":"AACA,eAAO,MAAM,WAAW,EAAE,GA6lBzB,CAAC"}