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

package/src/index.tsx

@@ -1,14 +1,144 @@
-import React from 'react';
-import { createRoot } from 'react-dom/client';
-import { BrowserRouter } from 'react-router-dom';
-import { App } from './App';
-
-const container = document.getElementById('app')!;
-const root = createRoot(container);
-root.render(
-  <BrowserRouter>
-    <App />,
-  </BrowserRouter>
-);
-
-export { Widget } from './lib';
+import { SwapContainer } from '@rango-dev/ui';
+import React, { useEffect, useMemo, useState } from 'react';
+import { AppRouter } from './components/AppRouter';
+import { useMetaStore } from './store/meta';
+import { Events, Provider } from '@rango-dev/wallets-core';
+import { allProviders } from '@rango-dev/provider-all';
+import { EventHandler } from '@rango-dev/wallets-core/dist/wallet';
+import { Network, WalletType } from '@rango-dev/wallets-shared';
+import {
+  prepareAccountsForWalletStore,
+  walletAndSupportedChainsNames,
+} from './utils/wallets';
+import { useWalletsStore } from './store/wallets';
+import { Layout } from './components/Layout';
+import { globalFont } from './globalStyles';
+import { useTheme } from './hooks/useTheme';
+import { isEvmBlockchain } from 'rango-sdk';
+import {
+  WidgetTheme,
+  WidgetConfig,
+  WidgetColors,
+  BlockchainAndTokenConfig,
+} from './types';
+import useSelectLanguage from './hooks/useSelectLanguage';
+import './i18n';
+import QueueManager from './QueueManager';
+import { useUiStore } from './store/ui';
+import { navigationRoutes } from './constants/navigationRoutes';
+import { initConfig } from './utils/configs';
+
+export {
+  WidgetConfig,
+  WalletType,
+  WidgetTheme,
+  WidgetColors,
+  BlockchainAndTokenConfig,
+};
+
+export type WidgetProps = {
+  config?: WidgetConfig;
+};
+
+export const Widget: React.FC<WidgetProps> = ({ config }) => {
+  globalFont(config?.theme?.fontFamily || 'Roboto');
+
+  const { activeTheme } = useTheme({ ...config?.theme });
+  const { blockchains } = useMetaStore.use.meta();
+  const disconnectWallet = useWalletsStore.use.disconnectWallet();
+  const connectWallet = useWalletsStore.use.connectWallet();
+  const { changeLanguage } = useSelectLanguage();
+  const clearConnectedWallet = useWalletsStore.use.clearConnectedWallet();
+  const [lastConnectedWalletWithNetwork, setLastConnectedWalletWithNetwork] =
+    useState<string>('');
+  const [disconnectedWallet, setDisconnectedWallet] = useState<WalletType>();
+  const currentPage = useUiStore.use.currentPage();
+
+  const evmBasedChainNames = blockchains
+    .filter(isEvmBlockchain)
+    .map((chain) => chain.name);
+
+  useMemo(() => {
+    if (config?.apiKey) {
+      initConfig({
+        API_KEY: config?.apiKey,
+      });
+    }
+  }, [config]);
+
+  const onUpdateState: EventHandler = (
+    type,
+    event,
+    value,
+    state,
+    supportedChains
+  ) => {
+    if (event === Events.ACCOUNTS) {
+      if (value) {
+        const supportedChainNames: Network[] | null =
+          walletAndSupportedChainsNames(supportedChains);
+        const data = prepareAccountsForWalletStore(
+          type,
+          value,
+          evmBasedChainNames,
+          supportedChainNames
+        );
+        connectWallet(data);
+      } else {
+        disconnectWallet(type);
+      }
+    }
+    if (event === Events.ACCOUNTS && state.connected) {
+      const key = `${type}-${state.network}-${value}`;
+
+      if (state.connected) {
+        setLastConnectedWalletWithNetwork(key);
+      }
+    }
+
+    if (event === Events.NETWORK && state.network) {
+      const key = `${type}-${state.network}`;
+      setLastConnectedWalletWithNetwork(key);
+    }
+  };
+  let providers = allProviders();
+
+  useEffect(() => {
+    const wallets = config?.wallets;
+    clearConnectedWallet();
+    providers = !wallets
+      ? allProviders()
+      : allProviders().filter((provider) => {
+          const type = provider.config.type;
+          return wallets.find((w) => w === type);
+        });
+  }, [config?.wallets]);
+
+  useEffect(() => {
+    changeLanguage(config?.language || 'en');
+  }, [config?.language]);
+
+  return (
+    <Provider
+      allBlockChains={blockchains}
+      providers={providers}
+      onUpdateState={onUpdateState}
+    >
+      <div id="swap-container" className={activeTheme}>
+        <QueueManager>
+          <SwapContainer fixedHeight={currentPage !== navigationRoutes.home}>
+            <AppRouter
+              lastConnectedWallet={lastConnectedWalletWithNetwork}
+              disconnectedWallet={disconnectedWallet}
+              clearDisconnectedWallet={() => {
+                setDisconnectedWallet(undefined);
+              }}
+            >
+              <Layout config={config} />
+            </AppRouter>
+          </SwapContainer>
+        </QueueManager>
+      </div>
+    </Provider>
+  );
+};

package/src/pages/ConfirmSwapPage.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { useBestRouteStore } from '../store/bestRoute';
 import { useWalletsStore } from '../store/wallets';
@@ -40,7 +40,7 @@ export function ConfirmSwapPage() {
   const setSelectedSwap = useUiStore.use.setSelectedSwap();
   const { blockchains, tokens } = useMetaStore.use.meta();
   const loadingMetaStatus = useMetaStore.use.loadingStatus();
-  const accounts = useWalletsStore.use.accounts();
+  const connectedWallets = useWalletsStore.use.connectedWallets();
   const selectedWallets = useWalletsStore.use.selectedWallets();
   const initSelectedWallets = useWalletsStore.use.initSelectedWallets();
   const setSelectedWallet = useWalletsStore.use.setSelectedWallet();
@@ -49,7 +49,7 @@ export function ConfirmSwapPage() {
   const inputUsdValue = useBestRouteStore.use.inputUsdValue();
   const outputUsdValue = useBestRouteStore.use.outputUsdValue();
   const setInputAmount = useBestRouteStore.use.setInputAmount();
-
+  const [dbErrorMessage, setDbErrorMessage] = useState<string>('');
   const bestRouteloadingStatus = getBestRouteStatus(
     fetchingBestRoute,
     !!fetchingBestRouteError
@@ -87,7 +87,7 @@ export function ConfirmSwapPage() {
   }, []);
 
   const selectableWallets = getSelectableWallets(
-    accounts,
+    connectedWallets,
     selectedWallets,
     getWalletInfo
   );
@@ -106,21 +106,25 @@ export function ConfirmSwapPage() {
       requiredWallets={getRequiredChains(bestRoute)}
       selectableWallets={selectableWallets}
       onBack={navigateBackFrom.bind(null, navigationRoutes.confirmSwap)}
-      onConfirm={() => {
-        confirmSwap?.().then((swap) => {
+      onConfirm={async () => {
+        confirmSwap?.().then(async (swap) => {
           if (swap) {
-            manager?.create(
-              'swap',
-              { swapDetails: swap },
-              { id: swap.requestId }
-            );
-            setSelectedSwap(swap.requestId);
-            navigate('/' + navigationRoutes.swaps + `/${swap.requestId}`, {
-              replace: true,
-            });
-            setTimeout(() => {
-              setInputAmount('');
-            }, 0);
+            try {
+              await manager?.create(
+                'swap',
+                { swapDetails: swap },
+                { id: swap.requestId }
+              );
+              setSelectedSwap(swap.requestId);
+              navigate('/' + navigationRoutes.swaps + `/${swap.requestId}`, {
+                replace: true,
+              });
+              setTimeout(() => {
+                setInputAmount('');
+              }, 0);
+            } catch (e) {
+              setDbErrorMessage('Error: ' + (e as any)?.message);
+            }
           }
         });
       }}
@@ -186,7 +190,11 @@ export function ConfirmSwapPage() {
         />
       }
       loading={fetchingConfirmedRoute}
-      errors={ConfirmSwapErrors(errors)}
+      errors={
+        dbErrorMessage
+          ? [dbErrorMessage, ...ConfirmSwapErrors(errors)]
+          : ConfirmSwapErrors(errors)
+      }
       warnings={ConfirmSwapWarnings(warnings)}
       extraMessages={
         <>

package/src/pages/Home.tsx

@@ -83,7 +83,7 @@ export function Home() {
   const fetchingBestRoute = useBestRouteStore.use.loading();
   const bestRouteError = useBestRouteStore.use.error();
   const loadingMetaStatus = useMetaStore.use.loadingStatus();
-  const accounts = useWalletsStore.use.accounts();
+  const connectedWallets = useWalletsStore.use.connectedWallets();
   const setCurrentPage = useUiStore.use.setCurrentPage();
   const switchFromAndTo = useBestRouteStore.use.switchFromAndTo();
 
@@ -113,7 +113,7 @@ export function Home() {
 
   const swapButtonState = getSwapButtonState(
     loadingMetaStatus,
-    accounts,
+    connectedWallets,
     fetchingBestRoute,
     bestRoute,
     hasLimitError(bestRoute),
@@ -139,7 +139,9 @@ export function Home() {
         title="SWAP"
         suffix={
           <HeaderButtons
-            onClickRefresh={!!bestRoute || bestRouteError ? fetchBestRoute : undefined}
+            onClickRefresh={
+              !!bestRoute || bestRouteError ? fetchBestRoute : undefined
+            }
           />
         }
       />

package/src/pages/SettingsPage.tsx

@@ -13,8 +13,9 @@ import {
 import { useNavigateBack } from '../hooks/useNavigateBack';
 interface PropTypes {
   supportedSwappers?: string[];
+  singleTheme?: boolean;
 }
-export function SettingsPage({ supportedSwappers }: PropTypes) {
+export function SettingsPage({ supportedSwappers, singleTheme }: PropTypes) {
   const slippage = useSettingsStore.use.slippage();
   const setSlippage = useSettingsStore.use.setSlippage();
   const disabledLiquiditySources =
@@ -77,6 +78,7 @@ export function SettingsPage({ supportedSwappers }: PropTypes) {
       selectedLiquiditySources={supportedUniqueSwappersGroups.filter(
         (s) => s.selected
       )}
+      singleTheme={singleTheme}
       customSlippage={customSlippage || NaN}
       onCustomSlippageChange={setCustomSlippage}
       minSlippage={MIN_SLIPPGAE}

package/src/store/bestRoute.ts

@@ -105,11 +105,11 @@ export const useBestRouteStore = createSelectors(
         set((state) => {
           if (state.fromChain?.name === chain?.name) return {};
           const tokens = useMetaStore.getState().meta.tokens;
-          const balances = useWalletsStore.getState().balances;
+          const connectedWallets = useWalletsStore.getState().connectedWallets;
           const sortedTokens = getSortedTokens(
             chain,
             tokens,
-            balances,
+            connectedWallets,
             state.destinationTokens
           );
           const fromToken = getDefaultToken(sortedTokens, state.toToken);
@@ -136,11 +136,11 @@ export const useBestRouteStore = createSelectors(
         set((state) => {
           if (state.toChain?.name === chain?.name) return {};
           const tokens = useMetaStore.getState().meta.tokens;
-          const balances = useWalletsStore.getState().balances;
+          const connectedWallets = useWalletsStore.getState().connectedWallets;
           const sortedTokens = getSortedTokens(
             chain,
             tokens,
-            balances,
+            connectedWallets,
             state.destinationTokens
           );
 
@@ -173,7 +173,7 @@ export const useBestRouteStore = createSelectors(
       },
       retry: (pendingSwap) => {
         const { tokens, blockchains } = useMetaStore.getState().meta;
-        const balances = useWalletsStore.getState().balances;
+        const connectedWallets = useWalletsStore.getState().connectedWallets;
         const failedIndex =
           pendingSwap.status === 'failed'
             ? pendingSwap.steps.findIndex((s) => s.status === 'failed')
@@ -210,13 +210,13 @@ export const useBestRouteStore = createSelectors(
         const sortedSourceTokens = getSortedTokens(
           fromChain,
           tokens,
-          balances,
+          connectedWallets,
           []
         );
         const sortedDestinationTokens = getSortedTokens(
           toChain,
           tokens,
-          balances,
+          connectedWallets,
           []
         );
         const inputAmount = pendingSwap.inputAmount;

package/src/store/wallets.ts

@@ -2,26 +2,20 @@ import { SelectableWallet } from '@rango-dev/ui';
 import { WalletType } from '@rango-dev/wallets-shared';
 import { create } from 'zustand';
 import { subscribeWithSelector } from 'zustand/middleware';
+import { shallow } from 'zustand/shallow';
 import { httpService } from '../services/httpService';
 import {
   getRequiredChains,
   getTokensWithBalance,
-  isAccountAndBalanceMatched,
+  isAccountAndWalletMatched,
   makeBalanceFor,
-  resetBalanceState,
-  SelectedWallet,
+  resetConnectedWalletState,
   sortTokens,
 } from '../utils/wallets';
 import { useBestRouteStore } from './bestRoute';
 import { useMetaStore } from './meta';
 import createSelectors from './selectors';
-import { shallow } from 'zustand/shallow';
-
-export interface Account {
-  chain: string;
-  address: string;
-  walletType: WalletType;
-}
+import { Wallet } from '../types';
 
 export type TokenBalance = {
   chain: string;
@@ -35,39 +29,33 @@ export type TokenBalance = {
   usdPrice: number | null;
 };
 
-export interface Balance {
+export interface ConnectedWallet extends Wallet {
   balances: TokenBalance[] | null;
-  address: string;
-  chain: string;
   loading: boolean;
-  walletType: WalletType;
   error: boolean;
   explorerUrl: string | null;
 }
 
 interface WalletsStore {
-  accounts: Account[];
-  balances: Balance[];
-  selectedWallets: SelectedWallet[];
-  connectWallet: (accounts: Account[]) => void;
+  connectedWallets: ConnectedWallet[];
+  selectedWallets: Wallet[];
+  connectWallet: (accounts: Wallet[]) => void;
   disconnectWallet: (walletType: WalletType) => void;
   initSelectedWallets: () => void;
   setSelectedWallet: (wallet: SelectableWallet) => void;
   clearConnectedWallet: () => void;
-  getOneOfWalletsDetails: (account: Account) => void;
+  getOneOfWalletsDetails: (account: Wallet) => void;
 }
 
 export const useWalletsStore = createSelectors(
   create<WalletsStore>()(
     subscribeWithSelector((set, get) => ({
-      accounts: [],
-      balances: [],
+      connectedWallets: [],
       selectedWallets: [],
       connectWallet: (accounts) => {
         const getOneOfWalletsDetails = get().getOneOfWalletsDetails;
         set((state) => ({
-          accounts: state.accounts.concat(accounts),
-          balances: state.balances.concat(
+          connectedWallets: state.connectedWallets.concat(
             accounts.map((account) => ({
               balances: [],
               address: account.address,
@@ -83,10 +71,7 @@ export const useWalletsStore = createSelectors(
       },
       disconnectWallet: (walletType) => {
         set((state) => ({
-          accounts: state.accounts.filter(
-            (account) => account.walletType !== walletType
-          ),
-          balances: state.balances.filter(
+          connectedWallets: state.connectedWallets.filter(
             (balance) => balance.walletType !== walletType
           ),
           selectedWallets: state.selectedWallets.filter(
@@ -99,8 +84,8 @@ export const useWalletsStore = createSelectors(
           const requiredChains = getRequiredChains(
             useBestRouteStore.getState().bestRoute
           );
-          const connectedWallets = state.accounts;
-          const selectedWallets: SelectedWallet[] = [];
+          const connectedWallets = state.connectedWallets;
+          const selectedWallets: Wallet[] = [];
           requiredChains.forEach((chain) => {
             const anyWalletSelected = !!state.selectedWallets.find(
               (wallet) => wallet.chain === chain
@@ -134,14 +119,13 @@ export const useWalletsStore = createSelectors(
 
       clearConnectedWallet: () =>
         set(() => ({
-          accounts: [],
-          balances: [],
+          connectedWallets: [],
           selectedWallets: [],
         })),
-      getOneOfWalletsDetails: async (account: Account) => {
+      getOneOfWalletsDetails: async (account: Wallet) => {
         const tokens = useMetaStore.getState().meta.tokens;
         set((state) => ({
-          balances: state.balances.map((balance) => {
+          connectedWallets: state.connectedWallets.map((balance) => {
             return balance.address === account.address &&
               balance.chain === account.chain
               ? { ...balance, loading: true }
@@ -155,18 +139,20 @@ export const useWalletsStore = createSelectors(
           const retrivedBalance = response.wallets[0];
           if (retrivedBalance) {
             set((state) => ({
-              balances: state.balances.map((balance) => {
-                return isAccountAndBalanceMatched(account, balance)
-                  ? makeBalanceFor(account, retrivedBalance, tokens)
-                  : balance;
-              }),
+              connectedWallets: state.connectedWallets.map(
+                (connectedWallet) => {
+                  return isAccountAndWalletMatched(account, connectedWallet)
+                    ? makeBalanceFor(account, retrivedBalance, tokens)
+                    : connectedWallet;
+                }
+              ),
             }));
           } else throw new Error('Wallet not found');
         } catch (error) {
           set((state) => ({
-            balances: state.balances.map((balance) => {
-              return isAccountAndBalanceMatched(account, balance)
-                ? resetBalanceState(balance)
+            connectedWallets: state.connectedWallets.map((balance) => {
+              return isAccountAndWalletMatched(account, balance)
+                ? resetConnectedWalletState(balance)
                 : balance;
             }),
           }));
@@ -177,16 +163,16 @@ export const useWalletsStore = createSelectors(
 );
 
 useWalletsStore.subscribe(
-  (state) => state.balances,
-  (balances) => {
+  (state) => state.connectedWallets,
+  (connectedWallets) => {
     useBestRouteStore.setState(({ sourceTokens, destinationTokens }) => {
       const sourceTokensWithBalance = getTokensWithBalance(
         sourceTokens,
-        balances
+        connectedWallets
       );
       const destinationTokensWithBalance = getTokensWithBalance(
         destinationTokens,
-        balances
+        connectedWallets
       );
       return {
         sourceTokens: sortTokens(sourceTokensWithBalance),
@@ -200,4 +186,4 @@ useWalletsStore.subscribe(
 );
 
 export const fetchingBalanceSelector = (state: WalletsStore) =>
-  !!state.balances.find((wallet) => wallet.loading);
+  !!state.connectedWallets.find((wallet) => wallet.loading);

package/src/types/config.ts

@@ -9,6 +9,9 @@ import { WalletType } from '@rango-dev/wallets-shared';
  * @property {string} success
  * @property {string} error
  * @property {string} warning
+ * @property {string} surface
+ * @property {string} neutral
+
  */
 export type WidgetColors = {
   background?: string;
@@ -17,6 +20,8 @@ export type WidgetColors = {
   success?: string;
   error?: string;
   warning?: string;
+  surface?: string;
+  neutral?: string;
 };
 
 /**
@@ -33,14 +38,16 @@ export type WidgetColors = {
  * specifies the radius of the corners of a widget.
  * @property {number} width - The `width` property is a number that represents the width of the widget.
  * @property {number} height - The `height` property is a number that specifies the height of the widget.
+ * @property {boolean} singleTheme - The `singleTheme` property is a boolean that specifies the theme is support dark and light or only light.
  */
 export type WidgetTheme = {
   mode?: 'auto' | 'light' | 'dark';
   fontFamily?: string;
-  colors?: WidgetColors;
+  colors?: { light: WidgetColors; dark: WidgetColors };
   borderRadius?: number;
   width?: number;
   height?: number;
+  singleTheme?: boolean;
 };
 
 /**

package/src/types/index.ts

@@ -1,3 +1,4 @@
 export * from './swap';
 export * from './config';
 export * from './routing';
+export * from './wallets';

package/src/types/wallets.ts

@@ -0,0 +1,7 @@
+import { WalletType } from '@rango-dev/wallets-shared';
+
+export interface Wallet {
+  chain: string;
+  address: string;
+  walletType: WalletType;
+}

package/src/utils/common.ts

@@ -10,29 +10,8 @@ export function areEqual(
     array1.length === array2.length && array1.every((v, i) => v === array2[i])
   );
 }
-export function shadeColor(color: string, percent: number) {
-  var R = parseInt(color.substring(1, 3), 16);
-  var G = parseInt(color.substring(3, 5), 16);
-  var B = parseInt(color.substring(5, 7), 16);
 
-  R = (R * (100 + percent)) / 100;
-  G = (G * (100 + percent)) / 100;
-  B = (B * (100 + percent)) / 100;
 
-  R = R < 255 ? R : 255;
-  G = G < 255 ? G : 255;
-  B = B < 255 ? B : 255;
-
-  R = Math.round(R);
-  G = Math.round(G);
-  B = Math.round(B);
-
-  var RR = R.toString(16).length == 1 ? '0' + R.toString(16) : R.toString(16);
-  var GG = G.toString(16).length == 1 ? '0' + G.toString(16) : G.toString(16);
-  var BB = B.toString(16).length == 1 ? '0' + B.toString(16) : B.toString(16);
-
-  return '#' + RR + GG + BB;
-}
 
 export function debounce(fn: Function, time: number) {
   let timeoutId: ReturnType<typeof setTimeout> | null;

package/src/utils/routing.ts

@@ -5,8 +5,7 @@ import {
 import BigNumber from 'bignumber.js';
 import { BestRouteResponse, BlockchainMeta, Token } from 'rango-sdk';
 import { areEqual } from './common';
-import { SelectedWallet } from './wallets';
-import { BestRouteEqualityParams } from '../types';
+import { BestRouteEqualityParams, Wallet } from '../types';
 import { numberToString } from './numbers';
 import { PendingSwap } from '@rango-dev/queue-manager-rango-preset';
 
@@ -96,7 +95,7 @@ export function outToRatioHasWarning(
 }
 
 export function getRequiredBalanceOfWallet(
-  selectedWallet: SelectedWallet,
+  selectedWallet: Wallet,
   fee: SimulationValidationStatus[] | null
 ): SimulationAssetAndAmount[] | null {
   if (fee === null) return null;