@rango-dev/widget-embedded 0.1.12 → 0.1.13-next.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/widget-embedded",
-  "version": "0.1.12",
+  "version": "0.1.13-next.4",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -28,12 +28,12 @@
     "trailingComma": "es5"
   },
   "dependencies": {
-    "@rango-dev/provider-all": "^0.1.11",
-    "@rango-dev/queue-manager-core": "^0.1.11",
-    "@rango-dev/queue-manager-rango-preset": "^0.1.11",
-    "@rango-dev/queue-manager-react": "^0.1.10",
-    "@rango-dev/ui": "^0.1.11",
-    "@rango-dev/wallets-core": "^0.1.11",
+    "@rango-dev/provider-all": "^0.1.12",
+    "@rango-dev/queue-manager-core": "^0.1.12-next.0",
+    "@rango-dev/queue-manager-rango-preset": "^0.1.12-next.4",
+    "@rango-dev/queue-manager-react": "^0.1.11-next.0",
+    "@rango-dev/ui": "^0.1.13-next.2",
+    "@rango-dev/wallets-core": "^0.1.12",
     "@rango-dev/wallets-shared": "^0.1.11",
     "bignumber.js": "^9.1.1",
     "copy-to-clipboard": "^3.3.3",

package/src/App.tsx

@@ -13,7 +13,7 @@ import {
 } from './utils/wallets';
 import { useWalletsStore } from './store/wallets';
 import { Layout } from './components/Layout';
-import { globalFont, globalStyles } from './globalStyles';
+import { globalFont } from './globalStyles';
 import { useTheme } from './hooks/useTheme';
 import QueueManager from './QueueManager';
 import { isEvmBlockchain } from 'rango-sdk';
@@ -30,7 +30,6 @@ export type WidgetProps = {
 };
 
 export function App({ config }: WidgetProps) {
-  globalStyles();
   globalFont(config?.theme?.fontFamily || 'Roboto');
   const { activeTheme } = useTheme({ ...config?.theme });
   useMemo(() => {

package/src/QueueManager.tsx

@@ -4,6 +4,7 @@ import {
   makeQueueDefinition,
   SwapQueueContext,
   checkWaitingForNetworkChange,
+  SwapProgressNotification,
 } from '@rango-dev/queue-manager-rango-preset';
 import { useWallets } from '@rango-dev/wallets-core';
 import {
@@ -32,6 +33,9 @@ function QueueManager(props: PropsWithChildren<{}>) {
       API_KEY: getConfig('API_KEY'),
     });
   }, []);
+  const getOneOfWalletsDetails = useWalletsStore.use.getOneOfWalletsDetails();
+  const accounts = useWalletsStore.use.accounts();
+
   const { blockchains } = useMetaStore.use.meta();
   const balances = useWalletsStore.use.balances();
 
@@ -64,6 +68,29 @@ function QueueManager(props: PropsWithChildren<{}>) {
     return walletAndSupportedChainsNames(supportedChains);
   };
   const allProviders = providers();
+  const notifier = (data: SwapProgressNotification) => {
+    const lastStep = data.swap?.steps[data.swap.steps.length - 1];
+    const outputAmount = data.step?.outputAmount || '';
+    const step = data.step || lastStep;
+
+    if (
+      data.eventType === 'task_completed' ||
+      (data.eventType === 'step_completed_with_output' &&
+        lastStep?.id !== data.step?.id) ||
+      !!outputAmount
+    ) {
+      const fromAccount = accounts.find(
+        (account) => account.chain === step?.fromBlockchain
+      );
+      const toAccount =
+        step?.fromBlockchain !== step?.toBlockchain &&
+        accounts.find((account) => account.chain === step?.toBlockchain);
+
+      fromAccount && getOneOfWalletsDetails(fromAccount);
+      toAccount && getOneOfWalletsDetails(toAccount);
+    }
+  };
+
   const context: SwapQueueContext = {
     meta: {
       blockchains: allBlockchains,
@@ -80,9 +107,7 @@ function QueueManager(props: PropsWithChildren<{}>) {
     switchNetwork,
     connect,
     state,
-    notifier: (message) => {
-      console.log('[notifier]', message);
-    },
+    notifier,
   };
 
   return (

package/src/components/BottomLogo.tsx

@@ -29,7 +29,7 @@ export function BottomLogo() {
 
   return (
     <Container>
-      <Typography variant="caption">{t('Powered By')}</Typography>
+      <Typography variant="caption" color='$neutrals600'>{t('Powered By')}</Typography>
       <StyledAnchor href="https://rango.exchange" target="_blank">
         <Logo xmlns="http://www.w3.org/2000/svg" viewBox="0 0 33.68 29">
           <defs></defs>

package/src/components/Layout.tsx

@@ -37,7 +37,9 @@ const Header = styled('div', {
 const WalletImageContainer = styled('div', {
   marginLeft: -15,
   marginRight: '$6',
-  borderRadius: '99999px',
+  '& img': {
+    borderRadius: '50%',
+  }
 });
 
 export type LayoutProps = {

package/src/components/RoutesOverview.tsx

@@ -39,11 +39,11 @@ function RoutesOverview(props: PropTypes) {
         {swaps?.map((swap, idx) => {
           const isLast = idx + 1 == swaps.length;
           return (
-            <>
+            <React.Fragment key={idx}>
               <div className="route">{swap.from.symbol}</div>
               <ChevronRightIcon size={12} />
               {isLast ? <div className="route">{swap.to.symbol}</div> : null}
-            </>
+            </React.Fragment>
           );
         })}
       </div>

package/src/components/TokenInfo.tsx

@@ -37,6 +37,7 @@ const Box = styled('div', {
   display: 'flex',
   flexDirection: 'column',
   width: '100%',
+  overflow: 'hidden'
 });
 
 const Container = styled('div', {

package/src/components/TokenPreview.tsx

@@ -11,6 +11,7 @@ const Box = styled('div', {
   display: 'flex',
   flexDirection: 'column',
   width: '100%',
+  overflow: 'hidden',
 });
 
 const Container = styled('div', {

package/src/components/warnings/BalanceErrors.tsx

@@ -6,6 +6,8 @@ interface PropTypes {
 }
 
 const List = styled('ul', {
+  padding: 0,
+  margin: 0,
   variants: {
     showListStyle: {
       true: { paddingLeft: '$24' },

package/src/globalStyles.ts

@@ -1,24 +1,5 @@
 import { globalCss } from '@rango-dev/ui';
 
-export const globalStyles = globalCss({
-  '*': {
-    boxSizing: 'border-box',
-    margin: 0,
-    padding: 0,
-    listStyleType: 'none',
-    '&::-webkit-scrollbar': { width: '$8', height: '$8' },
-    '&::-webkit-scrollbar-thumb': {
-      backgroundColor: '$neutrals400',
-      borderRadius: '$10',
-    },
-    '&::-webkit-scrollbar-thumb:hover': {
-      backgroundColor: '$neutrals500',
-    },
-    '&::-webkit-scrollbar-track': {
-      backgroundColor: '$neutrals300',
-    },
-  },
-});
 export const globalFont = (fontFamily: string) =>
   globalCss({
     '@import': [

package/src/index.tsx

@@ -11,4 +11,4 @@ root.render(
   </BrowserRouter>
 );
 
-export { Widget } from './lib';
+export { Widget } from './lib';

package/src/lib.tsx

@@ -12,7 +12,7 @@ import {
 } from './utils/wallets';
 import { useWalletsStore } from './store/wallets';
 import { Layout } from './components/Layout';
-import { globalFont, globalStyles } from './globalStyles';
+import { globalFont } from './globalStyles';
 import { useTheme } from './hooks/useTheme';
 import { isEvmBlockchain } from 'rango-sdk';
 import { WidgetTheme, WidgetConfig, WidgetColors, BlockchainAndTokenConfig } from './types';
@@ -31,7 +31,6 @@ export type WidgetProps = {
 };
 
 export const Widget: React.FC<WidgetProps> = ({ config }) => {
-  globalStyles();
   globalFont(config?.theme?.fontFamily || 'Roboto');
 
   const { activeTheme } = useTheme({ ...config?.theme });
@@ -115,7 +114,7 @@ export const Widget: React.FC<WidgetProps> = ({ config }) => {
       providers={providers}
       onUpdateState={onUpdateState}
     >
-      <div id="pageContainer" className={activeTheme}>
+      <div className={activeTheme}>
         <QueueManager>
           <SwapContainer
             fixedHeight={currentPage !== navigationRoutes.home}>

package/src/pages/ConfirmSwapPage.tsx

@@ -11,7 +11,7 @@ import {
   isExperimentalChain,
 } from '../utils/wallets';
 import { getTotalFeeInUsd, requiredWallets } from '../utils/swap';
-import { decimalNumber, numberToString } from '../utils/numbers';
+import { numberToString } from '../utils/numbers';
 import { useMetaStore } from '../store/meta';
 import { Network, WalletType } from '@rango-dev/wallets-shared';
 import { useNavigateBack } from '../hooks/useNavigateBack';
@@ -74,8 +74,8 @@ export function ConfirmSwapPage() {
   const lastStep =
     bestRoute?.result?.swaps[bestRoute?.result?.swaps.length - 1];
 
-  const fromAmount = decimalNumber(firstStep?.fromAmount, 3);
-  const toAmount = decimalNumber(lastStep?.toAmount, 3);
+  const fromAmount = numberToString(firstStep?.fromAmount, 4, 6);
+  const toAmount = numberToString(lastStep?.toAmount, 4, 6);
   useEffect(() => {
     initSelectedWallets();
   }, []);

package/src/pages/HistoryPage.tsx

@@ -12,10 +12,10 @@ export function HistoryPage() {
   const setSelectedSwap = useUiStore.use.setSelectedSwap();
   const navigate = useNavigate();
   const { navigateBackFrom } = useNavigateBack();
-  const { manager } = useManager();
+  const { manager, state } = useManager();
   const pendingSwaps = getPendingSwaps(manager).map(({ swap }) => swap);
 
-  const loading = !manager?.isLoaded();
+  const loading = !state.loadedFromPersistor;
 
   return (
     <History

package/src/pages/Home.tsx

@@ -139,7 +139,7 @@ export function Home() {
         title="SWAP"
         suffix={
           <HeaderButtons
-            onClickRefresh={!!bestRoute ? fetchBestRoute : undefined}
+            onClickRefresh={!!bestRoute || bestRouteError ? fetchBestRoute : undefined}
           />
         }
       />

package/src/pages/SwapDetailsPage.tsx

@@ -1,10 +1,9 @@
 import React from 'react';
 import { navigationRoutes } from '../constants/navigationRoutes';
-import useCopyToClipboard from '../hooks/useCopyToClipboard';
 import { useManager } from '@rango-dev/queue-manager-react';
 import { useNavigateBack } from '../hooks/useNavigateBack';
 import { getPendingSwaps } from '../utils/queue';
-import { SwapHistory } from '@rango-dev/ui';
+import { SwapHistory, useCopyToClipboard } from '@rango-dev/ui';
 import { useUiStore } from '../store/ui';
 import {
   cancelSwap,
@@ -37,7 +36,7 @@ export function SwapDetailsPage() {
   const navigate = useNavigate();
   const { navigateBackFrom } = useNavigateBack();
   const [isCopied, handleCopy] = useCopyToClipboard(2000);
-  const { manager } = useManager();
+  const { manager, state } = useManager();
 
   const pendingSwaps = getPendingSwaps(manager);
   const selectedSwap = pendingSwaps.find(
@@ -49,7 +48,7 @@ export function SwapDetailsPage() {
     if (swap) cancelSwap(swap);
   };
   const swap = selectedSwap?.swap;
-  const loading = !manager?.isLoaded();
+  const loading = !state.loadedFromPersistor;
 
   if (!swap)
     return (

package/src/store/bestRoute.ts

@@ -40,6 +40,7 @@ export interface RouteState {
   error: string;
   sourceTokens: Token[];
   destinationTokens: Token[];
+  resetRoute: () => void;
   setFromChain: (
     chain: BlockchainMeta | null,
     setDefaultToken?: boolean
@@ -92,6 +93,14 @@ export const useBestRouteStore = createSelectors(
             }),
           };
         }),
+      resetRoute: () =>
+        set(() => ({
+          loading: true,
+          error: '',
+          bestRoute: null,
+          outputAmount: null,
+          outputUsdValue: new BigNumber(0),
+        })),
       setFromChain: (chain, setDefaultToken) => {
         set((state) => {
           if (state.fromChain?.name === chain?.name) return {};
@@ -155,6 +164,7 @@ export const useBestRouteStore = createSelectors(
             outputAmount: new BigNumber(0),
             outputUsdValue: new BigNumber(0),
             bestRoute: null,
+            error: '',
           }),
           ...(!!state.fromToken && {
             inputUsdValue: getUsdValue(state.fromToken, amount),
@@ -250,7 +260,8 @@ const bestRoute = (
 ) => {
   let abortController: AbortController | null = null;
   const fetchBestRoute = () => {
-    const { fromToken, toToken, inputAmount } = bestRouteStore.getState();
+    const { fromToken, toToken, inputAmount, resetRoute } =
+      bestRouteStore.getState();
     const { slippage, customSlippage, disabledLiquiditySources, affiliateRef } =
       settingsStore.getState();
     if (!fromToken || !toToken || !isPositiveNumber(inputAmount)) return;
@@ -267,13 +278,10 @@ const bestRoute = (
       userSlippage,
       affiliateRef
     );
-    if (!bestRouteStore.getState().loading)
-      bestRouteStore.setState({
-        loading: true,
-        bestRoute: null,
-        outputAmount: null,
-        outputUsdValue: new BigNumber(0),
-      });
+
+    if (!bestRouteStore.getState().loading) {
+      resetRoute();
+    }
     httpService()
       .getBestRoute(requestBody, {
         signal: abortController.signal,
@@ -296,7 +304,7 @@ const bestRoute = (
   const debouncedFetchBestRoute = debounce(fetchBestRoute, 600);
 
   const bestRouteParamsListener = () => {
-    const { fromToken, toToken, inputAmount, inputUsdValue } =
+    const { fromToken, toToken, inputAmount, inputUsdValue, resetRoute } =
       useBestRouteStore.getState();
     if (!isPositiveNumber(inputAmount) || inputUsdValue.eq(0))
       return bestRouteStore.setState({ loading: false });
@@ -309,13 +317,7 @@ const bestRoute = (
         outputUsdValue: inputUsdValue,
       });
 
-    if (!bestRouteStore.getState().loading)
-      bestRouteStore.setState({
-        loading: true,
-        bestRoute: null,
-        outputAmount: null,
-        outputUsdValue: new BigNumber(0),
-      });
+    if (!bestRouteStore.getState().loading) resetRoute();
     debouncedFetchBestRoute();
   };
 

package/src/store/wallets.ts

@@ -54,17 +54,17 @@ interface WalletsStore {
   initSelectedWallets: () => void;
   setSelectedWallet: (wallet: SelectableWallet) => void;
   clearConnectedWallet: () => void;
+  getOneOfWalletsDetails: (account: Account) => void;
 }
 
 export const useWalletsStore = createSelectors(
   create<WalletsStore>()(
-    subscribeWithSelector((set) => ({
+    subscribeWithSelector((set, get) => ({
       accounts: [],
       balances: [],
       selectedWallets: [],
       connectWallet: (accounts) => {
-        const tokens = useMetaStore.getState().meta.tokens;
-
+        const getOneOfWalletsDetails = get().getOneOfWalletsDetails;
         set((state) => ({
           accounts: state.accounts.concat(accounts),
           balances: state.balances.concat(
@@ -79,31 +79,7 @@ export const useWalletsStore = createSelectors(
             }))
           ),
         }));
-        accounts.forEach(async (account) => {
-          try {
-            const response = await httpService().getWalletsDetails([
-              { address: account.address, blockchain: account.chain },
-            ]);
-            const retrivedBalance = response.wallets[0];
-            if (retrivedBalance) {
-              set((state) => ({
-                balances: state.balances.map((balance) => {
-                  return isAccountAndBalanceMatched(account, balance)
-                    ? makeBalanceFor(account, retrivedBalance, tokens)
-                    : balance;
-                }),
-              }));
-            } else throw new Error('Wallet not found');
-          } catch (error) {
-            set((state) => ({
-              balances: state.balances.map((balance) => {
-                return isAccountAndBalanceMatched(account, balance)
-                  ? resetBalanceState(balance)
-                  : balance;
-              }),
-            }));
-          }
-        });
+        accounts.forEach(async (account) => getOneOfWalletsDetails(account));
       },
       disconnectWallet: (walletType) => {
         set((state) => ({
@@ -162,6 +138,40 @@ export const useWalletsStore = createSelectors(
           balances: [],
           selectedWallets: [],
         })),
+      getOneOfWalletsDetails: async (account: Account) => {
+        const tokens = useMetaStore.getState().meta.tokens;
+        set((state) => ({
+          balances: state.balances.map((balance) => {
+            return balance.address === account.address &&
+              balance.chain === account.chain
+              ? { ...balance, loading: true }
+              : balance;
+          }),
+        }));
+        try {
+          const response = await httpService().getWalletsDetails([
+            { address: account.address, blockchain: account.chain },
+          ]);
+          const retrivedBalance = response.wallets[0];
+          if (retrivedBalance) {
+            set((state) => ({
+              balances: state.balances.map((balance) => {
+                return isAccountAndBalanceMatched(account, balance)
+                  ? makeBalanceFor(account, retrivedBalance, tokens)
+                  : balance;
+              }),
+            }));
+          } else throw new Error('Wallet not found');
+        } catch (error) {
+          set((state) => ({
+            balances: state.balances.map((balance) => {
+              return isAccountAndBalanceMatched(account, balance)
+                ? resetBalanceState(balance)
+                : balance;
+            }),
+          }));
+        }
+      },
     }))
   )
 );

package/src/utils/numbers.ts

@@ -12,11 +12,11 @@ export const secondsToString = (s: number): string => {
 };
 
 export const numberToString = (
-  number: BigNumber | string | null,
+  number: BigNumber | string | null | undefined,
   minDecimals: number | null = null,
   maxDecimals: number | null = null
 ): string => {
-  if (number === null) return '';
+  if (number === null || number === undefined) return '';
   if (number === '') return '';
   const n = new BigNumber(number);
   const roundingMode = 1;
@@ -126,9 +126,6 @@ export const rawFees = (data: BestRouteResponse): string =>
     .reduce((partialSum, a) => partialSum + parseFloat(a.fee.amount), 0)
     .toFixed(3);
 
-export const decimalNumber = (number = '0', toFixed: number) =>
-  parseFloat(number).toFixed(toFixed);
-
 export const containsText = (text: string, searchText: string) =>
   text.toLowerCase().indexOf(searchText.toLowerCase()) > -1;
 

package/dist/hooks/useCopyToClipboard.d.ts

@@ -1,2 +0,0 @@
-export default function useCopyToClipboard(resetInterval?: number): readonly [boolean, (text: string | number) => void];
-//# sourceMappingURL=useCopyToClipboard.d.ts.map

package/dist/hooks/useCopyToClipboard.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useCopyToClipboard.d.ts","sourceRoot":"","sources":["../src/hooks/useCopyToClipboard.ts"],"names":[],"mappings":"AAGA,MAAM,CAAC,OAAO,UAAU,kBAAkB,CAAC,aAAa,CAAC,EAAE,MAAM,6BAGnB,MAAM,GAAG,MAAM,WAgB5D"}

package/src/hooks/useCopyToClipboard.ts

@@ -1,23 +0,0 @@
-import React from 'react';
-import copy from 'copy-to-clipboard';
-
-export default function useCopyToClipboard(resetInterval?: number) {
-  const [isCopied, setCopied] = React.useState(false);
-
-  const handleCopy = React.useCallback((text: string | number) => {
-    copy(text.toString());
-    setCopied(true);
-  }, []);
-
-  React.useEffect(() => {
-    let timeout: NodeJS.Timeout;
-    if (isCopied && resetInterval) {
-      timeout = setTimeout(() => setCopied(false), resetInterval);
-    }
-    return () => {
-      clearTimeout(timeout);
-    };
-  }, [isCopied, resetInterval]);
-
-  return [isCopied, handleCopy] as const;
-}