@rango-dev/widget-embedded 0.8.1-next.12 → 0.8.1-next.13

package/dist/pages/WalletsPage.d.ts

@@ -3,7 +3,8 @@ import { WidgetConfig } from '../types';
 interface PropTypes {
     supportedWallets: WidgetConfig['wallets'];
     multiWallets: boolean;
+    config?: WidgetConfig;
 }
-export declare function WalletsPage({ supportedWallets, multiWallets }: PropTypes): JSX.Element;
+export declare function WalletsPage({ supportedWallets, multiWallets, config, }: PropTypes): JSX.Element;
 export {};
 //# sourceMappingURL=WalletsPage.d.ts.map

package/dist/pages/WalletsPage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"WalletsPage.d.ts","sourceRoot":"","sources":["../../src/pages/WalletsPage.tsx"],"names":[],"mappings":";AAwBA,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAGxC,UAAU,SAAS;IACjB,gBAAgB,EAAE,YAAY,CAAC,SAAS,CAAC,CAAC;IAC1C,YAAY,EAAE,OAAO,CAAC;CACvB;AAyBD,wBAAgB,WAAW,CAAC,EAAE,gBAAgB,EAAE,YAAY,EAAE,EAAE,SAAS,eAyFxE"}
+{"version":3,"file":"WalletsPage.d.ts","sourceRoot":"","sources":["../../src/pages/WalletsPage.tsx"],"names":[],"mappings":";AAwBA,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAGxC,UAAU,SAAS;IACjB,gBAAgB,EAAE,YAAY,CAAC,SAAS,CAAC,CAAC;IAC1C,YAAY,EAAE,OAAO,CAAC;IACtB,MAAM,CAAC,EAAE,YAAY,CAAC;CACvB;AAyBD,wBAAgB,WAAW,CAAC,EAC1B,gBAAgB,EAChB,YAAY,EACZ,MAAM,GACP,EAAE,SAAS,eA2FX"}

package/dist/types/config.d.ts

@@ -125,6 +125,7 @@ export type BlockchainAndTokenConfig = {
  */
 export type WidgetConfig = {
     apiKey: string;
+    walletConnectProjectId?: string;
     affiliate?: WidgeAffiliate;
     amount?: number;
     from?: BlockchainAndTokenConfig;

package/dist/types/config.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"config.d.ts","sourceRoot":"","sources":["../../src/types/config.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,WAAW,CAAC;AAClC,OAAO,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AACvD,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAC5D,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAEzC;;;;;;;;;;;GAWG;AACH,MAAM,MAAM,YAAY,GAAG;IACzB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF;;;;;;;;;;;;;;;GAeG;AACH,MAAM,MAAM,WAAW,GAAG;IACxB,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,MAAM,CAAC;IACjC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,MAAM,CAAC,EAAE;QAAE,KAAK,EAAE,YAAY,CAAC;QAAC,IAAI,EAAE,YAAY,CAAA;KAAE,CAAC;IACrD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC;AAEF;;;;;;;;;;GAUG;AACH,MAAM,MAAM,cAAc,GAAG;IAC3B,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE,CAAC;CACrC,CAAC;AAEF;;;;;;;;;;GAUG;AACH,MAAM,MAAM,wBAAwB,GAAG;IACrC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,EAAE,CAAC;IACvB,MAAM,CAAC,EAAE,KAAK,EAAE,CAAC;CAClB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AACH,MAAM,MAAM,YAAY,GAAG;IACzB,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,cAAc,CAAC;IAC3B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,wBAAwB,CAAC;IAChC,EAAE,CAAC,EAAE,wBAAwB,CAAC;IAC9B,gBAAgB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC5B,OAAO,CAAC,EAAE,CAAC,UAAU,GAAG,iBAAiB,CAAC,EAAE,CAAC;IAC7C,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B,CAAC"}
+{"version":3,"file":"config.d.ts","sourceRoot":"","sources":["../../src/types/config.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,WAAW,CAAC;AAClC,OAAO,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AACvD,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAC5D,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAEzC;;;;;;;;;;;GAWG;AACH,MAAM,MAAM,YAAY,GAAG;IACzB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF;;;;;;;;;;;;;;;GAeG;AACH,MAAM,MAAM,WAAW,GAAG;IACxB,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,MAAM,CAAC;IACjC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,MAAM,CAAC,EAAE;QAAE,KAAK,EAAE,YAAY,CAAC;QAAC,IAAI,EAAE,YAAY,CAAA;KAAE,CAAC;IACrD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC;AAEF;;;;;;;;;;GAUG;AACH,MAAM,MAAM,cAAc,GAAG;IAC3B,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE,CAAC;CACrC,CAAC;AAEF;;;;;;;;;;GAUG;AACH,MAAM,MAAM,wBAAwB,GAAG;IACrC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,EAAE,CAAC;IACvB,MAAM,CAAC,EAAE,KAAK,EAAE,CAAC;CAClB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AACH,MAAM,MAAM,YAAY,GAAG;IACzB,MAAM,EAAE,MAAM,CAAC;IACf,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,SAAS,CAAC,EAAE,cAAc,CAAC;IAC3B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,wBAAwB,CAAC;IAChC,EAAE,CAAC,EAAE,wBAAwB,CAAC;IAC9B,gBAAgB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC5B,OAAO,CAAC,EAAE,CAAC,UAAU,GAAG,iBAAiB,CAAC,EAAE,CAAC;IAC7C,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B,CAAC"}

package/dist/utils/providers.d.ts

@@ -1,11 +1,14 @@
 import { ProviderInterface } from '@rango-dev/wallets-core';
 import { WidgetConfig } from '../types';
+export interface ProvidersOptions {
+    walletConnectProjectId?: WidgetConfig['walletConnectProjectId'];
+}
 /**
  *
  * 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 declare function matchAndGenerateProviders(providers: WidgetConfig['wallets']): ProviderInterface[];
-export declare function configWalletsToWalletName(config: WidgetConfig['wallets']): string[];
+export declare function matchAndGenerateProviders(providers: WidgetConfig['wallets'], options?: ProvidersOptions): ProviderInterface[];
+export declare function configWalletsToWalletName(config: WidgetConfig['wallets'], options?: ProvidersOptions): string[];
 //# sourceMappingURL=providers.d.ts.map

package/dist/utils/providers.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"providers.d.ts","sourceRoot":"","sources":["../../src/utils/providers.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAE5D,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAExC;;;;;GAKG;AACH,wBAAgB,yBAAyB,CACvC,SAAS,EAAE,YAAY,CAAC,SAAS,CAAC,GACjC,iBAAiB,EAAE,CAkCrB;AAED,wBAAgB,yBAAyB,CACvC,MAAM,EAAE,YAAY,CAAC,SAAS,CAAC,GAC9B,MAAM,EAAE,CAMV"}
+{"version":3,"file":"providers.d.ts","sourceRoot":"","sources":["../../src/utils/providers.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAC5D,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAExC,MAAM,WAAW,gBAAgB;IAC/B,sBAAsB,CAAC,EAAE,YAAY,CAAC,wBAAwB,CAAC,CAAC;CACjE;AAED;;;;;GAKG;AACH,wBAAgB,yBAAyB,CACvC,SAAS,EAAE,YAAY,CAAC,SAAS,CAAC,EAClC,OAAO,CAAC,EAAE,gBAAgB,GACzB,iBAAiB,EAAE,CAkCrB;AAED,wBAAgB,yBAAyB,CACvC,MAAM,EAAE,YAAY,CAAC,SAAS,CAAC,EAC/B,OAAO,CAAC,EAAE,gBAAgB,GACzB,MAAM,EAAE,CAMV"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/widget-embedded",
-  "version": "0.8.1-next.12",
+  "version": "0.8.1-next.13",
   "license": "MIT",
   "type": "module",
   "main": "dist/index.js",
@@ -19,11 +19,11 @@
   "dependencies": {
     "@lingui/core": "4.2.1",
     "@lingui/react": "4.2.1",
-    "@rango-dev/provider-all": "^0.8.1-next.6",
+    "@rango-dev/provider-all": "^0.8.1-next.7",
     "@rango-dev/queue-manager-core": "^0.8.1-next.6",
-    "@rango-dev/queue-manager-rango-preset": "^0.8.1-next.12",
+    "@rango-dev/queue-manager-rango-preset": "^0.8.1-next.13",
     "@rango-dev/queue-manager-react": "^0.8.1-next.8",
-    "@rango-dev/ui": "^0.8.1-next.13",
+    "@rango-dev/ui": "^0.8.1-next.14",
     "@rango-dev/wallets-core": "^0.8.1-next.6",
     "@rango-dev/wallets-shared": "^0.8.1-next.7",
     "bignumber.js": "^9.1.1",

package/src/Wallets.tsx

@@ -12,6 +12,7 @@ import { isEvmBlockchain } from 'rango-sdk';
 import { useWalletProviders } from './hooks/useWalletProviders';
 import { WidgetConfig } from './types';
 import { createContext, useRef } from 'react';
+import { ProvidersOptions } from './utils/providers';
 
 type OnConnectHandler = (key: string) => void;
 interface WidgetContextInterface {
@@ -27,11 +28,12 @@ export const WidgetContext = createContext<WidgetContextInterface>({
 export function WidgetWallets(
   props: PropsWithChildren<{
     providers: WidgetConfig['wallets'];
+    options?: ProvidersOptions;
     onUpdateState?: EventHandler;
   }>
 ) {
   const { blockchains } = useMetaStore.use.meta();
-  const { providers } = useWalletProviders(props.providers);
+  const { providers } = useWalletProviders(props.providers, props?.options);
   const disconnectWallet = useWalletsStore.use.disconnectWallet();
   const connectWallet = useWalletsStore.use.connectWallet();
   const onConnectWalletHandler = useRef<OnConnectHandler>();

package/src/Widget.tsx

@@ -77,7 +77,11 @@ export function Main(props: PropsWithChildren<WidgetProps>) {
 export function Widget(props: PropsWithChildren<WidgetProps>) {
   if (!props.config?.externalWallets) {
     return (
-      <WidgetWallets providers={props.config?.wallets}>
+      <WidgetWallets
+        providers={props.config?.wallets}
+        options={{
+          walletConnectProjectId: props.config?.walletConnectProjectId,
+        }}>
         <Main {...props} />
       </WidgetWallets>
     );

package/src/components/AppRoutes.tsx

@@ -55,7 +55,12 @@ export function AppRoutes(props: PropTypes) {
     },
     {
       path: navigationRoutes.settings,
-      element: <SettingsPage singleTheme= {config?.theme?.singleTheme} supportedSwappers={config?.liquiditySources} />,
+      element: (
+        <SettingsPage
+          singleTheme={config?.theme?.singleTheme}
+          supportedSwappers={config?.liquiditySources}
+        />
+      ),
     },
     {
       path: navigationRoutes.liquiditySources,
@@ -78,12 +83,15 @@ export function AppRoutes(props: PropTypes) {
               ? true
               : config.multiWallets
           }
+          config={config}
         />
       ),
     },
     {
       path: getAbsolutePath(navigationRoutes.confirmSwap),
-      element: <ConfirmSwapPage  customDestinationEnabled={config?.customDestination}/>,
+      element: (
+        <ConfirmSwapPage customDestinationEnabled={config?.customDestination} />
+      ),
     },
   ]);
 }

package/src/hooks/useWalletProviders.ts

@@ -2,16 +2,26 @@ import { ProviderInterface } from '@rango-dev/wallets-core';
 import { useEffect } from 'react';
 import { useWalletsStore } from '../store/wallets';
 import { WidgetConfig } from '../types';
-import { matchAndGenerateProviders } from '../utils/providers';
+import {
+  matchAndGenerateProviders,
+  ProvidersOptions,
+} from '../utils/providers';
 
-export function useWalletProviders(providers: WidgetConfig['wallets']) {
+export function useWalletProviders(
+  providers: WidgetConfig['wallets'],
+  options?: ProvidersOptions
+) {
   const clearConnectedWallet = useWalletsStore.use.clearConnectedWallet();
-  let generateProviders: ProviderInterface[] =
-    matchAndGenerateProviders(undefined);
+  let generateProviders: ProviderInterface[] = matchAndGenerateProviders(
+    undefined,
+    options
+  );
 
   useEffect(() => {
     clearConnectedWallet();
-    generateProviders = matchAndGenerateProviders(providers);
+    generateProviders = matchAndGenerateProviders(providers, {
+      walletConnectProjectId: options?.walletConnectProjectId,
+    });
   }, [providers]);
 
   return {

package/src/pages/WalletsPage.tsx

@@ -28,6 +28,7 @@ import { configWalletsToWalletName } from '../utils/providers';
 interface PropTypes {
   supportedWallets: WidgetConfig['wallets'];
   multiWallets: boolean;
+  config?: WidgetConfig;
 }
 
 const ListContainer = styled('div', {
@@ -53,13 +54,19 @@ const AlertContainer = styled('div', {
 
 const ALL_SUPPORTED_WALLETS = Object.values(WalletTypes);
 
-export function WalletsPage({ supportedWallets, multiWallets }: PropTypes) {
+export function WalletsPage({
+  supportedWallets,
+  multiWallets,
+  config,
+}: PropTypes) {
   const { navigateBackFrom } = useNavigateBack();
   const { state, disconnect, getWalletInfo, connect } = useWallets();
   const wallets = getlistWallet(
     state,
     getWalletInfo,
-    configWalletsToWalletName(supportedWallets) || ALL_SUPPORTED_WALLETS
+    configWalletsToWalletName(supportedWallets, {
+      walletConnectProjectId: config?.walletConnectProjectId,
+    }) || ALL_SUPPORTED_WALLETS
   );
   const walletsRef = useRef<WalletInfo[]>();
 

package/src/types/config.ts

@@ -125,6 +125,7 @@ export type BlockchainAndTokenConfig = {
  */
 export type WidgetConfig = {
   apiKey: string;
+  walletConnectProjectId?: string;
   affiliate?: WidgeAffiliate;
   amount?: number;
   from?: BlockchainAndTokenConfig;

package/src/utils/providers.ts

@@ -1,8 +1,11 @@
 import { allProviders } from '@rango-dev/provider-all';
 import { ProviderInterface } from '@rango-dev/wallets-core';
-import { WC_PROJECT_ID } from '../constants/widget';
 import { WidgetConfig } from '../types';
 
+export interface ProvidersOptions {
+  walletConnectProjectId?: WidgetConfig['walletConnectProjectId'];
+}
+
 /**
  *
  * Generate a list of providers by passing a provider name (e.g. metamask) or a custom provider which implemented ProviderInterface.
@@ -10,11 +13,12 @@ import { WidgetConfig } from '../types';
  *
  */
 export function matchAndGenerateProviders(
-  providers: WidgetConfig['wallets']
+  providers: WidgetConfig['wallets'],
+  options?: ProvidersOptions
 ): ProviderInterface[] {
   const all = allProviders({
     walletconnect2: {
-      WC_PROJECT_ID: WC_PROJECT_ID,
+      WC_PROJECT_ID: options?.walletConnectProjectId || '',
     },
   });
 
@@ -48,9 +52,10 @@ export function matchAndGenerateProviders(
 }
 
 export function configWalletsToWalletName(
-  config: WidgetConfig['wallets']
+  config: WidgetConfig['wallets'],
+  options?: ProvidersOptions
 ): string[] {
-  const providers = matchAndGenerateProviders(config);
+  const providers = matchAndGenerateProviders(config, options);
   const names = providers.map((provider) => {
     return provider.config.type;
   });

package/dist/constants/widget.d.ts

@@ -1,2 +0,0 @@
-export declare const WC_PROJECT_ID = "f5196d081862c6f2b81c04520ea9301c";
-//# sourceMappingURL=widget.d.ts.map

package/dist/constants/widget.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"widget.d.ts","sourceRoot":"","sources":["../../src/constants/widget.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,aAAa,qCAAqC,CAAC"}

package/src/constants/widget.ts

@@ -1 +0,0 @@
-export const WC_PROJECT_ID = 'f5196d081862c6f2b81c04520ea9301c';