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

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

@@ -93,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 || [];
@@ -234,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"}