@rango-dev/widget-embedded 0.1.15 → 0.1.16-next.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/widget-embedded",
-  "version": "0.1.15",
+  "version": "0.1.16-next.1",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

package/src/QueueManager.tsx

@@ -34,13 +34,12 @@ function QueueManager(props: PropsWithChildren<{}>) {
     });
   }, []);
   const getOneOfWalletsDetails = useWalletsStore.use.getOneOfWalletsDetails();
-  const accounts = useWalletsStore.use.accounts();
 
   const { blockchains } = useMetaStore.use.meta();
-  const balances = useWalletsStore.use.balances();
+  const connectedWallets = useWalletsStore.use.connectedWallets();
 
   const wallets = {
-    blockchains: balances.map((wallet) => ({
+    blockchains: connectedWallets.map((wallet) => ({
       accounts: [wallet],
       name: wallet.chain,
     })),
@@ -79,12 +78,12 @@ function QueueManager(props: PropsWithChildren<{}>) {
         lastStep?.id !== data.step?.id) ||
       !!outputAmount
     ) {
-      const fromAccount = accounts.find(
+      const fromAccount = connectedWallets.find(
         (account) => account.chain === step?.fromBlockchain
       );
       const toAccount =
         step?.fromBlockchain !== step?.toBlockchain &&
-        accounts.find((account) => account.chain === step?.toBlockchain);
+        connectedWallets.find((wallet) => wallet.chain === step?.toBlockchain);
 
       fromAccount && getOneOfWalletsDetails(fromAccount);
       toAccount && getOneOfWalletsDetails(toAccount);

package/src/components/Layout.tsx

@@ -39,7 +39,7 @@ const WalletImageContainer = styled('div', {
   marginRight: '$6',
   '& img': {
     borderRadius: '50%',
-  }
+  },
 });
 
 export type LayoutProps = {
@@ -48,10 +48,10 @@ export type LayoutProps = {
 
 export function Layout({ config }: LayoutProps) {
   const navigate = useNavigate();
-  const { balances, accounts, selectedWallets } = useWalletsStore();
+  const { connectedWallets, selectedWallets } = useWalletsStore();
   const { getWalletInfo } = useWallets();
   const connectedWalletsImages = removeDuplicateFrom(
-    getSelectableWallets(accounts, selectedWallets, getWalletInfo).map(
+    getSelectableWallets(connectedWallets, selectedWallets, getWalletInfo).map(
       (w) => w.image
     )
   );
@@ -63,7 +63,7 @@ export function Layout({ config }: LayoutProps) {
   const setInputAmount = useBestRouteStore.use.setInputAmount();
   const setAffiliateRef = useSettingsStore.use.setAffiliateRef();
 
-  const totalBalance = calculateWalletUsdValue(balances);
+  const totalBalance = calculateWalletUsdValue(connectedWallets);
   const connectWalletsButtonDisabled =
     useUiStore.use.connectWalletsButtonDisabled();
   const loadingMetaStatus = useMetaStore.use.loadingStatus();
@@ -126,7 +126,7 @@ export function Layout({ config }: LayoutProps) {
           )}
           <div className="balance">
             <Typography variant="body2">
-              {!accounts?.length
+              {!connectedWallets?.length
                 ? t('Connect Wallet')
                 : `$${totalBalance || 0}`}
             </Typography>

package/src/components/RoutesOverview.tsx

@@ -1,9 +1,6 @@
 import React from 'react';
-import { styled } from '@rango-dev/ui';
+import { styled, ChevronRightIcon, GasIcon, Spacer } from '@rango-dev/ui';
 import { BestRouteResponse } from 'rango-sdk';
-import { ChevronRightIcon } from '@rango-dev/ui';
-import { GasIcon } from '@rango-dev/ui';
-import { Spacer } from '@rango-dev/ui';
 
 export const Container = styled('div', {
   display: 'flex',

package/src/components/TokenInfo.tsx

@@ -37,7 +37,7 @@ const Box = styled('div', {
   display: 'flex',
   flexDirection: 'column',
   width: '100%',
-  overflow: 'hidden'
+  overflow: 'hidden',
 });
 
 const Container = styled('div', {
@@ -132,7 +132,7 @@ export function TokenInfo(props: PropTypes) {
   const setInputAmount = useBestRouteStore.use.setInputAmount();
   const bestRoute = useBestRouteStore.use.bestRoute();
   const inputAmount = useBestRouteStore.use.inputAmount();
-  const balances = useWalletsStore.use.balances();
+  const connectedWallets = useWalletsStore.use.connectedWallets();
   const fetchingBestRoute = useBestRouteStore.use.loading();
   const navigate = useNavigate();
   const { t } = useTranslation();
@@ -141,7 +141,7 @@ export function TokenInfo(props: PropTypes) {
     !!fromChain && !!fromToken
       ? numberToString(
           getBalanceFromWallet(
-            balances,
+            connectedWallets,
             fromChain?.name,
             fromToken?.symbol,
             fromToken?.address
@@ -154,13 +154,13 @@ export function TokenInfo(props: PropTypes) {
     !!fromChain && !!fromToken
       ? numberToString(
           getBalanceFromWallet(
-            balances,
+            connectedWallets,
             fromChain?.name,
             fromToken?.symbol,
             fromToken?.address
           )?.amount || '0',
           getBalanceFromWallet(
-            balances,
+            connectedWallets,
             fromChain?.name,
             fromToken?.symbol,
             fromToken?.address

package/src/components/TokenPreview.tsx

@@ -1,11 +1,16 @@
 import React, { ReactNode } from 'react';
-import { Button, InfoCircleIcon, styled, Typography } from '@rango-dev/ui';
+import {
+  Button,
+  InfoCircleIcon,
+  styled,
+  Typography,
+  Spacer,
+  Image,
+} from '@rango-dev/ui';
 import { LoadingStatus } from '../store/meta';
 import { useTranslation } from 'react-i18next';
-import { Spacer } from '@rango-dev/ui';
 import BigNumber from 'bignumber.js';
 import { numberToString } from '../utils/numbers';
-import { Image } from '@rango-dev/ui';
 
 const Box = styled('div', {
   display: 'flex',

package/src/hooks/useConfirmSwap.ts

@@ -51,7 +51,7 @@ export function useConfirmSwap(): ConfirmSwap {
   const inputUsdValue = useBestRouteStore.use.inputUsdValue();
   const affiliateRef = useSettingsStore.use.affiliateRef();
 
-  const accounts = useWalletsStore.use.accounts();
+  const connectedWallets = useWalletsStore.use.connectedWallets();
   const selectedWallets = useWalletsStore.use.selectedWallets();
   const meta = useMetaStore.use.meta();
   const customSlippage = useSettingsStore.use.customSlippage();
@@ -108,7 +108,7 @@ export function useConfirmSwap(): ConfirmSwap {
       fromToken,
       toToken,
       inputAmount,
-      accounts,
+      connectedWallets,
       selectedWallets,
       disabledLiquiditySources,
       userSlippage,

package/src/pages/ConfirmSwapPage.tsx

@@ -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();
@@ -87,7 +87,7 @@ export function ConfirmSwapPage() {
   }, []);
 
   const selectableWallets = getSelectableWallets(
-    accounts,
+    connectedWallets,
     selectedWallets,
     getWalletInfo
   );

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/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/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/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;

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);