@rango-dev/widget-embedded 0.17.1-next.1 → 0.17.1-next.11

package/src/components/TokenList/TokenList.styles.ts

@@ -1,4 +1,4 @@
-import { styled, Typography } from '@rango-dev/ui';
+import { darkTheme, styled, Typography } from '@rango-dev/ui';
 
 export const Container = styled('div', {
   display: 'flex',
@@ -40,7 +40,11 @@ export const List = styled('ul', {
         '& a': {
           fontSize: '$12',
           lineHeight: '$16',
-          color: '$neutral600',
+          $$color: '$colors$neutral600',
+          [`.${darkTheme} &`]: {
+            $$color: '$colors$neutral700',
+          },
+          color: '$$color',
           textDecoration: 'none',
         },
       },
@@ -92,6 +96,14 @@ export const TagTitle = styled(Typography, {});
 
 export const BalanceContainer = styled('div', {
   textAlign: 'right',
+
+  '.usd-value': {
+    $$color: '$colors$neutral600',
+    [`.${darkTheme} &`]: {
+      $$color: '$colors$neutral700',
+    },
+    color: '$$color',
+  },
 });
 
 export const End = styled('ul', {

package/src/components/TokenList/TokenList.tsx

@@ -21,8 +21,7 @@ import {
 } from '@rango-dev/ui';
 import React, { forwardRef, useEffect, useState } from 'react';
 
-import { useAppStore } from '../../store/app';
-import { useMetaStore } from '../../store/meta';
+import { useAppStore } from '../../store/AppStore';
 import { useWalletsStore } from '../../store/wallets';
 import { generateRangeColors } from '../../utils/colors';
 
@@ -87,10 +86,10 @@ export function TokenList(props: PropTypes) {
   const { list, searchedFor = '', onChange, selectedBlockchain } = props;
 
   const [tokens, setTokens] = useState<TokenWithBalance[]>(list);
-  const loadingStatus = useMetaStore.use.loadingStatus();
+  const fetchStatus = useAppStore().fetchStatus;
+  const blockchains = useAppStore().blockchains();
   const [hasNextPage, setHasNextPage] = useState<boolean>(true);
   const loadingWallet = useWalletsStore.use.loading();
-  const { blockchains } = useMetaStore.use.meta();
   const { isTokenPinned } = useAppStore();
 
   // eslint-disable-next-line react/display-name
@@ -239,7 +238,7 @@ export function TokenList(props: PropTypes) {
                         {token.balance?.usdValue && (
                           <Typography
                             variant="body"
-                            color="neutral600"
+                            className="usd-value"
                             size="xsmall">
                             {`$${token.balance?.usdValue}`}
                           </Typography>
@@ -268,8 +267,8 @@ export function TokenList(props: PropTypes) {
         {i18n.t('Select Token')}
       </Typography>
       <Divider size={4} />
-      {loadingStatus === 'loading' && <LoadingTokenList size={PAGE_SIZE} />}
-      {loadingStatus === 'success' && <List>{renderList()}</List>}
+      {fetchStatus === 'loading' && <LoadingTokenList size={PAGE_SIZE} />}
+      {fetchStatus === 'success' && <List>{renderList()}</List>}
     </Container>
   );
 }

package/src/components/UpdateUrl.tsx

@@ -1,5 +1,3 @@
-import type { WidgetConfig } from '../types';
-
 import { useEffect, useRef } from 'react';
 import {
   createSearchParams,
@@ -10,33 +8,32 @@ import {
 import { navigationRoutes } from '../constants/navigationRoutes';
 import { SearchParams } from '../constants/searchParams';
 import { useSyncStoresWithConfig } from '../hooks/useSyncStoresWithConfig';
-import { useBestRouteStore } from '../store/bestRoute';
-import { useMetaStore } from '../store/meta';
+import { useAppStore } from '../store/AppStore';
+import { useQuoteStore } from '../store/quote';
 import { useUiStore } from '../store/ui';
-import { searchParamsToToken } from '../utils/routing';
-
-type Props = { config: WidgetConfig | undefined };
+import { searchParamsToToken } from '../utils/quote';
 
-export function UpdateUrl(props: Props) {
+export function UpdateUrl() {
   const firstRender = useRef(true);
   const [searchParams, setSearchParams] = useSearchParams();
   const location = useLocation();
   const firstRenderSearchParams = useRef(location.search);
   const searchParamsRef = useRef<Record<string, string>>({});
-  const fromBlockchain = useBestRouteStore.use.fromBlockchain();
-  const toBlockchain = useBestRouteStore.use.toBlockchain();
-  const fromToken = useBestRouteStore.use.fromToken();
-  const toToken = useBestRouteStore.use.toToken();
-  const setFromBlockchain = useBestRouteStore.use.setFromBlockchain();
-  const setFromToken = useBestRouteStore.use.setFromToken();
-  const setToBlockchain = useBestRouteStore.use.setToBlockchain();
-  const setToToken = useBestRouteStore.use.setToToken();
-  const inputAmount = useBestRouteStore.use.inputAmount();
-  const setInputAmount = useBestRouteStore.use.setInputAmount();
-  const loadingStatus = useMetaStore.use.loadingStatus();
-  const { blockchains, tokens } = useMetaStore.use.meta();
+  const fromBlockchain = useQuoteStore.use.fromBlockchain();
+  const toBlockchain = useQuoteStore.use.toBlockchain();
+  const fromToken = useQuoteStore.use.fromToken();
+  const toToken = useQuoteStore.use.toToken();
+  const setFromBlockchain = useQuoteStore.use.setFromBlockchain();
+  const setFromToken = useQuoteStore.use.setFromToken();
+  const setToBlockchain = useQuoteStore.use.setToBlockchain();
+  const setToToken = useQuoteStore.use.setToToken();
+  const inputAmount = useQuoteStore.use.inputAmount();
+  const setInputAmount = useQuoteStore.use.setInputAmount();
+  const fetchMetaStatus = useAppStore().fetchStatus;
+  const blockchains = useAppStore().blockchains();
+  const tokens = useAppStore().tokens();
   const setSelectedSwap = useUiStore.use.setSelectedSwap();
-  useSyncStoresWithConfig(props.config);
+  useSyncStoresWithConfig();
 
   useEffect(() => {
     const params: Record<string, string> = {};
@@ -60,7 +57,8 @@ export function UpdateUrl(props: Props) {
         toChainString = '',
         toTokenString = '',
         fromAmount = '';
-      if (loadingStatus !== 'success') {
+      const autoConnect = searchParamsRef.current[SearchParams.AUTO_CONNECT];
+      if (fetchMetaStatus !== 'success') {
         fromChainString = searchParamsRef.current[SearchParams.FROM_CHAIN];
         fromTokenString = searchParamsRef.current[SearchParams.FROM_TOKEN];
         toChainString = searchParamsRef.current[SearchParams.TO_CHAIN];
@@ -94,6 +92,9 @@ export function UpdateUrl(props: Props) {
           ...(fromAmount && {
             [SearchParams.FROM_AMOUNT]: fromAmount.toString(),
           }),
+          ...(autoConnect && {
+            [SearchParams.AUTO_CONNECT]: autoConnect,
+          }),
         },
         { replace: true }
       );
@@ -109,7 +110,7 @@ export function UpdateUrl(props: Props) {
   ]);
 
   useEffect(() => {
-    if (loadingStatus === 'success') {
+    if (fetchMetaStatus === 'success') {
       const fromChainString = searchParams.get(SearchParams.FROM_CHAIN);
       const fromTokenString = searchParams.get(SearchParams.FROM_TOKEN);
       const toChainString = searchParams.get(SearchParams.TO_CHAIN);
@@ -134,20 +135,29 @@ export function UpdateUrl(props: Props) {
       if (!!fromBlockchain) {
         setFromBlockchain(fromBlockchain);
         if (!!fromToken) {
-          setFromToken(fromToken);
+          setFromToken({
+            token: fromToken,
+            meta: {
+              blockchains: blockchains,
+              tokens: tokens,
+            },
+          });
         }
       }
       if (!!toBlockchain) {
         setToBlockchain(toBlockchain);
         if (!!toToken) {
-          setToToken(toToken);
+          setToToken({
+            token: toToken,
+            meta: { blockchains: blockchains, tokens: tokens },
+          });
         }
       }
       if (fromAmount) {
         setInputAmount(fromAmount);
       }
     }
-  }, [loadingStatus]);
+  }, [fetchMetaStatus]);
 
   return null;
 }

package/src/components/WidgetEvents.tsx

@@ -8,11 +8,13 @@ import {
 } from '@rango-dev/queue-manager-rango-preset';
 import { useEffect } from 'react';
 
+import { useAppStore } from '../store/AppStore';
 import { useNotificationStore } from '../store/notification';
 import { useWalletsStore } from '../store/wallets';
 import { validBlockedStatuses } from '../types/notification';
 
 export function WidgetEvents() {
+  const tokens = useAppStore().tokens();
   const connectedWallets = useWalletsStore.use.connectedWallets();
   const getWalletsDetails = useWalletsStore.use.getWalletsDetails();
   const setNotification = useNotificationStore.use.setNotification();
@@ -38,8 +40,8 @@ export function WidgetEvents() {
             (wallet) => wallet.chain === step?.toBlockchain
           );
 
-        fromAccount && getWalletsDetails([fromAccount]);
-        toAccount && getWalletsDetails([toAccount]);
+        fromAccount && getWalletsDetails([fromAccount], tokens);
+        toAccount && getWalletsDetails([toAccount], tokens);
       }
       if (
         (event.type === StepEventType.TX_EXECUTION_BLOCKED &&

package/src/constants/errors.ts

@@ -1,8 +1,8 @@
-import type { ConfirmSwapError } from '../types';
+import type { QuoteError } from '../types';
 
 import { i18n } from '@lingui/core';
 
-import { ConfirmSwapErrorTypes } from '../types';
+import { QuoteErrorType } from '../types';
 
 export const errorMessages = () => {
   return {
@@ -13,7 +13,7 @@ export const errorMessages = () => {
         'You have limited the liquidity sources and this might result in Rango finding no routes. Please consider resetting your liquidity sources'
       ),
     },
-    noRoutesError: {
+    noResultError: {
       title: i18n.t('No Routes Found'),
       description: i18n.t(
         "Reasons why Rango couldn't find a route: low liquidity on token, very low input amount or no routes available for the selected input/output token combination."
@@ -31,7 +31,7 @@ export const errorMessages = () => {
       ),
       confirmMessage: i18n.t('Confirm High price impact'),
     },
-    routeUpdatedWithHighValueLoss: {
+    quoteUpdatedWithHighValueLoss: {
       title: i18n.t(
         'Route updated and price impact is too high, try again later!'
       ),
@@ -47,14 +47,12 @@ export const errorMessages = () => {
   };
 };
 
-export function getConfirmSwapErrorMessage(error: ConfirmSwapError) {
+export function getQuoteErrorMessage(error: QuoteError) {
   switch (error.type) {
-    case ConfirmSwapErrorTypes.NO_ROUTE:
-      return error.diagnosisMessage ?? errorMessages().noRoutesError.title;
-    case ConfirmSwapErrorTypes.REQUEST_FAILED:
+    case QuoteErrorType.NO_RESULT:
+      return error.diagnosisMessage ?? errorMessages().noResultError.title;
+    case QuoteErrorType.REQUEST_FAILED:
       return errorMessages().genericServerError;
-    case ConfirmSwapErrorTypes.ROUTE_UPDATED_WITH_HIGH_VALUE_LOSS:
-      return errorMessages().routeUpdatedWithHighValueLoss.title;
     default:
       return '';
   }

package/src/constants/messages.ts

@@ -5,6 +5,6 @@ export const swapButtonTitles = () => {
     connectWallet: i18n.t('Connect Wallet'),
     swap: i18n.t('Swap'),
     swapAnyway: i18n.t('Swap anyway'),
-    ethRouteWarning: i18n.t('The route goes through Ethereum. Continue?'),
+    ethWarning: i18n.t('The route goes through Ethereum. Continue?'),
   };
 };

package/src/constants/searchParams.ts

@@ -4,4 +4,5 @@ export enum SearchParams {
   'TO_CHAIN' = 'toBlockchain',
   'TO_TOKEN' = 'toToken',
   'FROM_AMOUNT' = 'fromAmount',
+  'AUTO_CONNECT' = 'autoConnect',
 }

package/src/constants/warnings.ts

@@ -1,14 +1,14 @@
-import type { RouteWarning } from '../types';
+import type { QuoteUpdateWarning } from '../types';
 
 import { i18n } from '@lingui/core';
 
-import { RouteWarningType } from '../types';
+import { QuoteUpdateType } from '../types';
 
-export function getRouteWarningMessage(warning: RouteWarning) {
+export function getQuoteUpdateWarningMessage(warning: QuoteUpdateWarning) {
   switch (warning.type) {
-    case RouteWarningType.ROUTE_UPDATED:
+    case QuoteUpdateType.QUOTE_UPDATED:
       return i18n.t('Route has been updated.');
-    case RouteWarningType.ROUTE_AND_OUTPUT_AMOUNT_UPDATED:
+    case QuoteUpdateType.QUOTE_AND_OUTPUT_AMOUNT_UPDATED:
       return i18n.t(
         'Output amount changed to {newOutputAmount} ({percentageChange}% change).',
         {
@@ -16,9 +16,9 @@ export function getRouteWarningMessage(warning: RouteWarning) {
           percentageChange: warning.percentageChange,
         }
       );
-    case RouteWarningType.ROUTE_SWAPPERS_UPDATED:
+    case QuoteUpdateType.QUOTE_SWAPPERS_UPDATED:
       return i18n.t('Route swappers has been updated.');
-    case RouteWarningType.ROUTE_COINS_UPDATED:
+    case QuoteUpdateType.QUOTE_COINS_UPDATED:
       return i18n.t('Route internal coins has been updated.');
     default:
       return '';

package/src/containers/App/App.styles.ts

@@ -0,0 +1,18 @@
+import { styled } from '@rango-dev/ui';
+
+export const MainContainer = styled('div', {
+  width: '100%',
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  fontFamily: '$widget',
+  boxSizing: 'border-box',
+  '& *, *::before, *::after': {
+    boxSizing: 'inherit',
+    listStyleType: 'none',
+  },
+  '& *:focus-visible': {
+    outlineColor: '$info500',
+    transition: 'none',
+  },
+});

package/src/containers/App/App.tsx

@@ -0,0 +1,65 @@
+import type { WalletType } from '@rango-dev/wallets-shared';
+
+import { I18nManager } from '@rango-dev/ui';
+import React, { useContext, useEffect, useMemo, useState } from 'react';
+
+import { AppRouter } from '../../components/AppRouter';
+import { AppRoutes } from '../../components/AppRoutes';
+import { WidgetEvents } from '../../components/WidgetEvents';
+import { globalFont } from '../../globalStyles';
+import { useLanguage } from '../../hooks/useLanguage';
+import { useTheme } from '../../hooks/useTheme';
+import { useAppStore } from '../../store/AppStore';
+import { useNotificationStore } from '../../store/notification';
+import { useSettingsStore } from '../../store/settings';
+import { initConfig } from '../../utils/configs';
+import { WidgetContext } from '../Wallets';
+
+import { MainContainer } from './App.styles';
+
+export function Main() {
+  globalFont();
+
+  const { fetch: fetchMeta, config } = useAppStore();
+  const { activeTheme } = useTheme(config?.theme || {});
+  const { activeLanguage, changeLanguage } = useLanguage();
+  const [lastConnectedWalletWithNetwork, setLastConnectedWalletWithNetwork] =
+    useState<string>('');
+  const [disconnectedWallet, setDisconnectedWallet] = useState<WalletType>();
+  const widgetContext = useContext(WidgetContext);
+
+  useMemo(() => {
+    if (config?.apiKey) {
+      initConfig({
+        API_KEY: config?.apiKey,
+      });
+    }
+  }, [config]);
+  useEffect(() => {
+    void fetchMeta().catch();
+    void useSettingsStore.persist.rehydrate();
+    void useNotificationStore.persist.rehydrate();
+    widgetContext.onConnectWallet(setLastConnectedWalletWithNetwork);
+  }, []);
+  useEffect(() => {
+    if (config?.language) {
+      changeLanguage(config.language);
+    }
+  }, [config?.language]);
+
+  return (
+    <I18nManager language={activeLanguage}>
+      <MainContainer id="swap-container" className={activeTheme()}>
+        <WidgetEvents />
+        <AppRouter
+          lastConnectedWallet={lastConnectedWalletWithNetwork}
+          disconnectedWallet={disconnectedWallet}
+          clearDisconnectedWallet={() => {
+            setDisconnectedWallet(undefined);
+          }}>
+          <AppRoutes />
+        </AppRouter>
+      </MainContainer>
+    </I18nManager>
+  );
+}

package/src/containers/App/index.ts

@@ -0,0 +1 @@
+export { Main } from './App';

package/src/containers/QuoteInfo/QuoteInfo.styles.ts

@@ -0,0 +1,15 @@
+import { styled } from '@rango-dev/ui';
+
+export const QuoteContainer = styled('div', {
+  width: '100%',
+  paddingTop: '$2',
+});
+
+export const FooterStepAlarm = styled('div', {
+  paddingBottom: '$15',
+});
+
+export const FooterAlert = styled('div', {
+  width: '100%',
+  display: 'flex',
+});

package/src/containers/QuoteInfo/QuoteInfo.tsx

@@ -0,0 +1,97 @@
+import type { PropTypes } from './QuoteInfo.types';
+
+import { Divider } from '@rango-dev/ui';
+import React from 'react';
+
+import { Quote, QuoteSkeleton } from '../../components/Quote';
+import { QuoteWarningsAndErrors } from '../../components/QuoteWarningsAndErrors';
+import {
+  TOKEN_AMOUNT_MAX_DECIMALS,
+  TOKEN_AMOUNT_MIN_DECIMALS,
+  USD_VALUE_MAX_DECIMALS,
+  USD_VALUE_MIN_DECIMALS,
+} from '../../constants/routing';
+import { useQuoteStore } from '../../store/quote';
+import { numberToString } from '../../utils/numbers';
+
+import { QuoteContainer } from './QuoteInfo.styles';
+
+export function QuoteInfo(props: PropTypes) {
+  const {
+    quote,
+    type,
+    loading,
+    error,
+    warning,
+    refetchQuote,
+    showWarningModal,
+    onOpenWarningModal,
+    onCloseWarningModal,
+    onConfirmWarningModal,
+    expanded = false,
+  } = props;
+  const { inputAmount, inputUsdValue, outputUsdValue, outputAmount } =
+    useQuoteStore();
+
+  const showQuote = quote && quote.result && !loading;
+  return (
+    <>
+      {loading && (
+        <QuoteContainer>
+          <QuoteSkeleton type={type} expanded={expanded} />
+        </QuoteContainer>
+      )}
+      {showQuote ? (
+        <QuoteContainer>
+          <Quote
+            quote={quote}
+            error={error}
+            warning={warning}
+            type={type}
+            expanded={expanded}
+            recommended={true}
+            input={{
+              value: numberToString(
+                inputAmount,
+                TOKEN_AMOUNT_MIN_DECIMALS,
+                TOKEN_AMOUNT_MAX_DECIMALS
+              ),
+              usdValue: numberToString(
+                inputUsdValue,
+                USD_VALUE_MIN_DECIMALS,
+                USD_VALUE_MAX_DECIMALS
+              ),
+            }}
+            output={{
+              value: numberToString(
+                outputAmount,
+                TOKEN_AMOUNT_MIN_DECIMALS,
+                TOKEN_AMOUNT_MAX_DECIMALS
+              ),
+              usdValue: numberToString(
+                outputUsdValue,
+                USD_VALUE_MIN_DECIMALS,
+                USD_VALUE_MAX_DECIMALS
+              ),
+            }}
+          />
+        </QuoteContainer>
+      ) : null}
+
+      {!warning && !error && <Divider size={16} />}
+
+      {(warning || error) && (
+        <QuoteWarningsAndErrors
+          warning={warning}
+          error={error}
+          loading={loading}
+          refetchQuote={refetchQuote}
+          showWarningModal={showWarningModal}
+          onOpenWarningModal={onOpenWarningModal}
+          onCloseWarningModal={onCloseWarningModal}
+          onConfirmWarningModal={onConfirmWarningModal}
+        />
+      )}
+    </>
+  );
+}

package/src/containers/QuoteInfo/QuoteInfo.types.ts

@@ -0,0 +1,17 @@
+import type { QuoteProps } from '../../components/Quote/Quote.types';
+import type { QuoteError, QuoteWarning } from '../../types';
+import type { BestRouteResponse } from 'rango-sdk';
+
+export type PropTypes = {
+  quote: BestRouteResponse | null;
+  type: QuoteProps['type'];
+  loading: boolean;
+  error: QuoteError | null;
+  warning: QuoteWarning | null;
+  expanded?: boolean;
+  refetchQuote: () => void;
+  showWarningModal: boolean;
+  onOpenWarningModal: () => void;
+  onCloseWarningModal: () => void;
+  onConfirmWarningModal: () => void;
+};

package/src/containers/QuoteInfo/index.ts

@@ -0,0 +1 @@
+export { QuoteInfo } from './QuoteInfo';

package/src/{Wallets.tsx → containers/Wallets/Wallets.tsx}

@@ -1,25 +1,24 @@
-import type { WidgetConfig } from './types';
-import type { ProvidersOptions } from './utils/providers';
+import type {
+  OnConnectHandler,
+  PropTypes,
+  WidgetContextInterface,
+} from './Wallets.types';
+import type { ProvidersOptions } from '../../utils/providers';
 import type { EventHandler } from '@rango-dev/wallets-react';
 import type { Network } from '@rango-dev/wallets-shared';
 import type { PropsWithChildren } from 'react';
 
 import { Events, Provider } from '@rango-dev/wallets-react';
 import { isEvmBlockchain } from 'rango-sdk';
-import React, { createContext, useRef } from 'react';
+import React, { createContext, useEffect, useRef } from 'react';
 
-import { useWalletProviders } from './hooks/useWalletProviders';
-import { useMetaStore } from './store/meta';
-import { useWalletsStore } from './store/wallets';
+import { useWalletProviders } from '../../hooks/useWalletProviders';
+import { AppStoreProvider, useAppStore } from '../../store/AppStore';
+import { useWalletsStore } from '../../store/wallets';
 import {
   prepareAccountsForWalletStore,
   walletAndSupportedChainsNames,
-} from './utils/wallets';
-
-type OnConnectHandler = (key: string) => void;
-interface WidgetContextInterface {
-  onConnectWallet(handler: OnConnectHandler): void;
-}
+} from '../../utils/wallets';
 
 export const WidgetContext = createContext<WidgetContextInterface>({
   onConnectWallet: () => {
@@ -27,41 +26,41 @@ 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, props?.options);
+function Main(props: PropsWithChildren<PropTypes>) {
+  const updateConfig = useAppStore().updateConfig;
+  const blockchains = useAppStore().blockchains();
+  const tokens = useAppStore().tokens();
+  const walletOptions: ProvidersOptions = {
+    walletConnectProjectId: props.config?.walletConnectProjectId,
+  };
+  const { providers } = useWalletProviders(props.config.wallets, walletOptions);
   const disconnectWallet = useWalletsStore.use.disconnectWallet();
   const connectWallet = useWalletsStore.use.connectWallet();
   const onConnectWalletHandler = useRef<OnConnectHandler>();
 
+  useEffect(() => {
+    if (props.config) {
+      updateConfig(props.config);
+    }
+  }, [props.config]);
+
   const evmBasedChainNames = blockchains
     .filter(isEvmBlockchain)
     .map((chain) => chain.name);
 
-  const onUpdateState: EventHandler = (
-    type,
-    event,
-    value,
-    state,
-    supportedBlockchains
-  ) => {
+  const onUpdateState: EventHandler = (type, event, value, state, meta) => {
     if (event === Events.ACCOUNTS) {
       if (value) {
         const supportedChainNames: Network[] | null =
-          walletAndSupportedChainsNames(supportedBlockchains);
+          walletAndSupportedChainsNames(meta.supportedBlockchains);
         const data = prepareAccountsForWalletStore(
           type,
           value,
           evmBasedChainNames,
-          supportedChainNames
+          supportedChainNames,
+          meta.isContractWallet
         );
-        connectWallet(data);
+        connectWallet(data, tokens);
       } else {
         disconnectWallet(type);
       }
@@ -91,7 +90,7 @@ export function WidgetWallets(
 
     // propagate updates for Dapps using external wallets
     if (props.onUpdateState) {
-      props.onUpdateState(type, event, value, state, supportedBlockchains);
+      props.onUpdateState(type, event, value, state, meta);
     }
   };
   return (
@@ -112,3 +111,12 @@ export function WidgetWallets(
     </WidgetContext.Provider>
   );
 }
+
+export function WidgetWallets(props: PropsWithChildren<PropTypes>) {
+  const { config, ...otherProps } = props;
+  return (
+    <AppStoreProvider config={config}>
+      <Main {...otherProps} config={config} />
+    </AppStoreProvider>
+  );
+}

package/src/containers/Wallets/Wallets.types.ts

@@ -0,0 +1,12 @@
+import type { WidgetConfig } from '../../types';
+import type { EventHandler } from '@rango-dev/wallets-react';
+
+export type OnConnectHandler = (key: string) => void;
+export interface WidgetContextInterface {
+  onConnectWallet(handler: OnConnectHandler): void;
+}
+
+export interface PropTypes {
+  onUpdateState?: EventHandler;
+  config: WidgetConfig;
+}