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

package/src/utils/swap.ts

@@ -6,14 +6,14 @@ import {
   SwapResult,
   Token,
 } from 'rango-sdk';
-import { Account } from '../store/wallets';
+import { ConnectedWallet } from '../store/wallets';
 import { ZERO } from '../constants/numbers';
 import { numberToString } from './numbers';
 import { WalletType } from '@rango-dev/wallets-shared';
 import { getRequiredBalanceOfWallet } from './routing';
-import { getRequiredChains, SelectedWallet } from './wallets';
+import { getRequiredChains } from './wallets';
 import { LoadingStatus } from '../store/meta';
-import { ConvertedToken, SwapButtonState } from '../types';
+import { ConvertedToken, SwapButtonState, Wallet } from '../types';
 import {
   PendingSwapNetworkStatus,
   PendingSwapStep,
@@ -122,7 +122,7 @@ export function LimitErrorMessage(bestRoute: BestRouteResponse | null): {
 
 export function getSwapButtonState(
   loadingMetaStatus: LoadingStatus,
-  accounts: Account[],
+  connectedWallets: ConnectedWallet[],
   loading: boolean,
   bestRoute: BestRouteResponse | null,
   hasLimitError: boolean,
@@ -133,7 +133,8 @@ export function getSwapButtonState(
 ): SwapButtonState {
   if (loadingMetaStatus !== 'success')
     return { title: 'Connect Wallet', disabled: true };
-  if (accounts.length == 0) return { title: 'Connect Wallet', disabled: false };
+  if (connectedWallets.length == 0)
+    return { title: 'Connect Wallet', disabled: false };
   if (loading) return { title: 'Finding Best Route...', disabled: true };
   else if (!inputAmount || inputAmount === '0')
     return { title: 'Enter an amount', disabled: true };
@@ -276,7 +277,7 @@ export function hasProperSlippage(
 
 export function hasEnoughBalance(
   route: BestRouteResponse,
-  selectedWallets: SelectedWallet[]
+  selectedWallets: Wallet[]
 ) {
   const fee = route.validationStatus;
 
@@ -297,7 +298,7 @@ export function hasEnoughBalance(
 
 export function hasEnoughBalanceAndProperSlippage(
   route: BestRouteResponse,
-  selectedWallets: SelectedWallet[],
+  selectedWallets: Wallet[],
   userSlippage: string,
   minRequiredSlippage: string | null
 ): boolean {
@@ -311,8 +312,8 @@ export function createBestRouteRequestBody(
   fromToken: Token,
   toToken: Token,
   inputAmount: string,
-  wallets: Account[],
-  selectedWallets: SelectedWallet[],
+  wallets: ConnectedWallet[],
+  selectedWallets: Wallet[],
   disabledLiquiditySources: string[],
   slippage: number,
   affiliateRef: string | null,
@@ -379,7 +380,7 @@ export function createBestRouteRequestBody(
   return requestBody;
 }
 
-export function getWalletsForNewSwap(selectedWallets: SelectedWallet[]) {
+export function getWalletsForNewSwap(selectedWallets: Wallet[]) {
   const wallets = selectedWallets.reduce(
     (
       selectedWalletsMap: {
@@ -432,7 +433,7 @@ export function isOutputAmountChangedALot(
 
 export function getBalanceWarnings(
   route: BestRouteResponse,
-  selectedWallets: SelectedWallet[]
+  selectedWallets: Wallet[]
 ) {
   const fee = route.validationStatus;
   const requiredWallets = getRequiredChains(route);

package/src/utils/wallets.ts

@@ -22,11 +22,12 @@ import {
 } from 'rango-sdk';
 import { isCosmosBlockchain } from 'rango-types';
 import { readAccountAddress } from '@rango-dev/wallets-core';
-import { Account, Balance, TokenBalance } from '../store/wallets';
+import { ConnectedWallet, TokenBalance } from '../store/wallets';
 import { numberToString } from './numbers';
 import BigNumber from 'bignumber.js';
 import { TokenWithBalance } from '../pages/SelectTokenPage';
 import { ZERO } from '../constants/numbers';
+import { Wallet } from '../types';
 
 export function getStateWallet(state: WalletState): WalletStatus {
   switch (true) {
@@ -96,11 +97,11 @@ export function prepareAccountsForWalletStore(
   accounts: string[],
   evmBasedChains: string[],
   supportedChainNames: Network[] | null
-): Account[] {
-  const result: Account[] = [];
+): Wallet[] {
+  const result: Wallet[] = [];
 
   function addAccount(network: Network, address: string) {
-    const newAccount: Account = {
+    const newAccount: Wallet = {
       address,
       chain: network,
       walletType: wallet,
@@ -171,56 +172,57 @@ export function getRequiredChains(route: BestRouteResponse | null) {
   return wallets;
 }
 
-export interface SelectedWallet extends Account {}
-type Blockchain = { name: string; accounts: Balance[] };
+type Blockchain = { name: string; accounts: ConnectedWallet[] };
 
 export function getSelectableWallets(
-  accounts: Account[],
-  selectedWallets: SelectedWallet[],
+  connectedWallets: ConnectedWallet[],
+  selectedWallets: Wallet[],
   getWalletInfo: (type: WalletType) => WalletInfo
 ): SelectableWallet[] {
-  const connectedWallets: SelectableWallet[] = accounts.map((account) => ({
-    address: account.address,
-    walletType: account.walletType,
-    chain: account.chain,
-    image: getWalletInfo(account.walletType).img,
-    name: getWalletInfo(account.walletType).name,
-    selected: !!selectedWallets.find(
-      (wallet) =>
-        wallet.chain === account.chain &&
-        wallet.walletType === account.walletType
-    ),
-  }));
-
-  return connectedWallets;
+  const selectableWallets: SelectableWallet[] = connectedWallets.map(
+    (connectedWallet) => ({
+      address: connectedWallet.address,
+      walletType: connectedWallet.walletType,
+      chain: connectedWallet.chain,
+      image: getWalletInfo(connectedWallet.walletType).img,
+      name: getWalletInfo(connectedWallet.walletType).name,
+      selected: !!selectedWallets.find(
+        (selectedWallet) =>
+          selectedWallet.chain === connectedWallet.chain &&
+          selectedWallet.walletType === connectedWallet.walletType
+      ),
+    })
+  );
+
+  return selectableWallets;
 }
 
 export function getBalanceFromWallet(
-  balances: Balance[],
+  connectedWallets: ConnectedWallet[],
   chain: string,
   symbol: string,
   address: string | null
 ): TokenBalance | null {
-  if (balances.length === 0) return null;
+  if (connectedWallets.length === 0) return null;
 
-  const selectedChainBalances = balances.filter(
-    (balance) => balance.chain === chain
+  const selectedChainWallets = connectedWallets.filter(
+    (wallet) => wallet.chain === chain
   );
-  if (selectedChainBalances.length === 0) return null;
+  if (selectedChainWallets.length === 0) return null;
 
   return (
-    selectedChainBalances
+    selectedChainWallets
       .map(
-        (a) =>
-          a.balances?.find(
-            (bl) =>
-              (address !== null && bl.address === address) ||
+        (wallet) =>
+          wallet.balances?.find(
+            (balance) =>
+              (address !== null && balance.address === address) ||
               (address === null &&
-                bl.address === address &&
-                bl.symbol === symbol)
+                balance.address === address &&
+                balance.symbol === symbol)
           ) || null
       )
-      .filter((b) => b !== null)
+      .filter((balance) => balance !== null)
       .sort(
         (a, b) => parseFloat(b?.amount || '0') - parseFloat(a?.amount || '1')
       )
@@ -228,19 +230,22 @@ export function getBalanceFromWallet(
   );
 }
 
-export function isAccountAndBalanceMatched(account: Account, balance: Balance) {
+export function isAccountAndWalletMatched(
+  account: Wallet,
+  connectedWallet: ConnectedWallet
+) {
   return (
-    account.address === balance.address &&
-    account.chain === balance.chain &&
-    account.walletType === balance.walletType
+    account.address === connectedWallet.address &&
+    account.chain === connectedWallet.chain &&
+    account.walletType === connectedWallet.walletType
   );
 }
 
 export function makeBalanceFor(
-  account: Account,
+  wallet: Wallet,
   retrivedBalance: WalletDetail,
   tokens: Token[]
-): Balance {
+): ConnectedWallet {
   const {
     address,
     blockChain: chain,
@@ -253,7 +258,7 @@ export function makeBalanceFor(
     loading: false,
     error: false,
     explorerUrl,
-    walletType: account.walletType,
+    walletType: wallet.walletType,
     balances:
       balances?.map((tokenBalance) => ({
         chain,
@@ -277,14 +282,16 @@ export function makeBalanceFor(
   };
 }
 
-export function resetBalanceState(balance: Balance): Balance {
-  return { ...balance, loading: false, error: true };
+export function resetConnectedWalletState(
+  connectedWallet: ConnectedWallet
+): ConnectedWallet {
+  return { ...connectedWallet, loading: false, error: true };
 }
 
-export const calculateWalletUsdValue = (balance: Balance[]) => {
+export const calculateWalletUsdValue = (connectedWallet: ConnectedWallet[]) => {
   const uniqueAccountAddresses = new Set<string | null>();
-  const uniqueBalane: Balance[] = balance?.reduce(
-    (acc: Balance[], current: Balance) => {
+  const uniqueBalane: ConnectedWallet[] = connectedWallet?.reduce(
+    (acc: ConnectedWallet[], current: ConnectedWallet) => {
       return acc.findIndex(
         (i) => i.address === current.address && i.chain === current.chain
       ) === -1
@@ -391,13 +398,13 @@ export const getKeplrCompatibleConnectedWallets = (
 
 export function getTokensWithBalance(
   tokens: TokenWithBalance[],
-  balances: Balance[]
+  connectedWallets: ConnectedWallet[]
 ): TokenWithBalance[] {
   return tokens.map(({ balance, ...otherProps }) => {
     const tokenAmount = numberToString(
       new BigNumber(
         getBalanceFromWallet(
-          balances,
+          connectedWallets,
           otherProps.blockchain,
           otherProps.symbol,
           otherProps.address
@@ -410,7 +417,7 @@ export function getTokensWithBalance(
       tokenUsdValue = numberToString(
         new BigNumber(
           getBalanceFromWallet(
-            balances,
+            connectedWallets,
             otherProps.blockchain,
             otherProps.symbol,
             otherProps.address
@@ -430,7 +437,7 @@ export function getTokensWithBalance(
 export function getSortedTokens(
   chain: BlockchainMeta | null,
   tokens: Token[],
-  balances: Balance[],
+  connectedWallets: ConnectedWallet[],
   otherChainTokens: TokenWithBalance[]
 ): TokenWithBalance[] {
   const fromChainEqueulsToToChain = chain?.name === otherChainTokens[0]?.name;
@@ -438,7 +445,7 @@ export function getSortedTokens(
   const filteredTokens = tokens.filter(
     (token) => token.blockchain === chain?.name
   );
-  return sortTokens(getTokensWithBalance(filteredTokens, balances));
+  return sortTokens(getTokensWithBalance(filteredTokens, connectedWallets));
 }
 
 export function tokensAreEqual(

package/dist/App.d.ts

@@ -1,9 +0,0 @@
-/// <reference types="react" />
-import './app.css';
-import { WidgetConfig } from './types';
-import './i18n';
-export declare type WidgetProps = {
-    config?: WidgetConfig;
-};
-export declare function App({ config }: WidgetProps): JSX.Element;
-//# sourceMappingURL=App.d.ts.map

package/dist/App.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"App.d.ts","sourceRoot":"","sources":["src/App.tsx"],"names":[],"mappings":";AAIA,OAAO,WAAW,CAAC;AAenB,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AACvC,OAAO,QAAQ,CAAC;AAOhB,oBAAY,WAAW,GAAG;IACxB,MAAM,CAAC,EAAE,YAAY,CAAC;CACvB,CAAC;AAEF,wBAAgB,GAAG,CAAC,EAAE,MAAM,EAAE,EAAE,WAAW,eA2F1C"}

package/dist/lib.d.ts

@@ -1,10 +0,0 @@
-import React from 'react';
-import { WalletType } from '@rango-dev/wallets-shared';
-import { WidgetTheme, WidgetConfig, WidgetColors, BlockchainAndTokenConfig } from './types';
-import './i18n';
-export { WidgetConfig, WalletType, WidgetTheme, WidgetColors, BlockchainAndTokenConfig, };
-export declare type WidgetProps = {
-    config?: WidgetConfig;
-};
-export declare const Widget: React.FC<WidgetProps>;
-//# sourceMappingURL=lib.d.ts.map

package/dist/lib.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"lib.d.ts","sourceRoot":"","sources":["src/lib.tsx"],"names":[],"mappings":"AACA,OAAO,KAAuC,MAAM,OAAO,CAAC;AAM5D,OAAO,EAAW,UAAU,EAAE,MAAM,2BAA2B,CAAC;AAUhE,OAAO,EACL,WAAW,EACX,YAAY,EACZ,YAAY,EACZ,wBAAwB,EACzB,MAAM,SAAS,CAAC;AAEjB,OAAO,QAAQ,CAAC;AAMhB,OAAO,EACL,YAAY,EACZ,UAAU,EACV,WAAW,EACX,YAAY,EACZ,wBAAwB,GACzB,CAAC;AAEF,oBAAY,WAAW,GAAG;IACxB,MAAM,CAAC,EAAE,YAAY,CAAC;CACvB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAqGxC,CAAC"}

package/src/App.tsx

@@ -1,123 +0,0 @@
-import { SwapContainer } from '@rango-dev/ui';
-import React, { useEffect, useMemo, useState } from 'react';
-import { AppRouter } from './components/AppRouter';
-import { useMetaStore } from './store/meta';
-import './app.css';
-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 QueueManager from './QueueManager';
-import { isEvmBlockchain } from 'rango-sdk';
-import { WidgetConfig } from './types';
-import './i18n';
-import { useUiStore } from './store/ui';
-import { navigationRoutes } from './constants/navigationRoutes';
-import { initConfig } from './utils/configs';
-
-const providers = allProviders();
-
-export type WidgetProps = {
-  config?: WidgetConfig;
-};
-
-export function App({ config }: WidgetProps) {
-  globalFont(config?.theme?.fontFamily || 'Roboto');
-  const { activeTheme } = useTheme({ ...config?.theme });
-  useMemo(() => {
-    if (config?.apiKey) {
-      initConfig({
-        API_KEY: config?.apiKey,
-      });
-    }
-  }, [config]);
-
-  const { blockchains } = useMetaStore.use.meta();
-  const disconnectWallet = useWalletsStore.use.disconnectWallet();
-  const connectWallet = useWalletsStore.use.connectWallet();
-  const currentPage = useUiStore.use.currentPage();
-
-  const [lastConnectedWalletWithNetwork, setLastConnectedWalletWithNetwork] =
-    useState<string>('');
-  const [disconnectedWallet, setDisconnectedWallet] = useState<WalletType>();
-
-  const evmBasedChainNames = blockchains
-    .filter(isEvmBlockchain)
-    .map((chain) => chain.name);
-
-  const themeBackground = activeTheme?.colors?.background?.value;
-
-  useEffect(() => {
-    document.body.style.background = themeBackground;
-  }, [themeBackground]);
-
-  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);
-        setDisconnectedWallet(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);
-    }
-  };
-
-  return (
-    <Provider
-      allBlockChains={blockchains}
-      providers={providers}
-      onUpdateState={onUpdateState}
-    >
-      <div id="pageContainer" 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/app.css

@@ -1,12 +0,0 @@
-@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
-
-#app {
-  height: 100vh;
-}
-#pageContainer {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
-  width: 100%;
-}

package/src/lib.tsx

@@ -1,144 +0,0 @@
-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 className={activeTheme}>
-        <QueueManager>
-          <SwapContainer fixedHeight={currentPage !== navigationRoutes.home}>
-            <AppRouter
-              lastConnectedWallet={lastConnectedWalletWithNetwork}
-              disconnectedWallet={disconnectedWallet}
-              clearDisconnectedWallet={() => {
-                setDisconnectedWallet(undefined);
-              }}
-            >
-              <Layout config={config} />
-            </AppRouter>
-          </SwapContainer>
-        </QueueManager>
-      </div>
-    </Provider>
-  );
-};