@rango-dev/widget-embedded 0.1.11-next.11 → 0.1.11-next.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/widget-embedded",
-  "version": "0.1.11-next.11",
+  "version": "0.1.11-next.14",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -11,7 +11,7 @@
   "browserslist": "> 0.5%, last 2 versions, not dead",
   "scripts": {
     "watch-tsc": "tsc --watch --noEmit",
-    "dev": "parcel public/index.html -p 3001 --cache-dir=.parcel-cache",
+    "dev": "parcel public/index.html -p 3001 --no-cache",
     "dev-tsc": "npm-run-all --parallel watch-tsc dev",
     "build:app": "parcel build --cache-dir=.parcel-cache",
     "build": "tsdx build --entry ./src/lib.tsx"

package/src/components/ConfirmSwapErrors.tsx

@@ -1,38 +1,30 @@
 import React from 'react';
-import { Typography } from '@rango-dev/ui';
 import { ConfirmSwapError, ConfirmSwapErrorTypes } from '../types';
 import { MinRequiredSlippage } from './warnings/MinRequiredSlippage';
+import { BalanceErrors } from './warnings/BalanceErrors';
 
 export function ConfirmSwapErrors(errors: ConfirmSwapError[]) {
   return errors.flatMap((error) => {
     switch (error.type) {
       case ConfirmSwapErrorTypes.NO_ROUTE:
-        return (
-          <Typography variant="body2">
-            No routes found. Please try again later.
-          </Typography>
-        );
+        return "No routes found. Please try again later."
       case ConfirmSwapErrorTypes.REQUEST_FAILED:
-        return (
-          <Typography variant="body2">{`Failed to confirm swap ${
+        return `Failed to confirm swap ${
             error.status ? `'status': ${error.status})` : ''
-          }, please try again.`}</Typography>
-        );
+          }, please try again.`
 
       case ConfirmSwapErrorTypes.ROUTE_UPDATED_WITH_HIGH_VALUE_LOSS:
-        return (
-          <Typography variant="body2">
-            Route updated and price impact is too high, try again later!
-          </Typography>
-        );
+        return "Route updated and price impact is too high, try again later!"
       case ConfirmSwapErrorTypes.INSUFFICIENT_SLIPPAGE:
         return (
           <MinRequiredSlippage
             minRequiredSlippage={error.minRequiredSlippage}
           />
         );
+      case ConfirmSwapErrorTypes.INSUFFICIENT_BALANCE:
+        return <BalanceErrors messages={error.messages} />;
       default:
         return [];
     }
   });
-}
+}

package/src/components/ConfirmSwapWarnings.tsx

@@ -1,35 +1,25 @@
-import React from 'react';
-import { Typography } from '@rango-dev/ui';
 import { ConfirmSwapWarningTypes, ConfirmSwapWarnings } from '../types';
-import { BalanceWarnings } from './warnings/BalanceWarnings';
 
 export function ConfirmSwapWarnings(warnings: ConfirmSwapWarnings[]) {
   return warnings.flatMap((warning) => {
     switch (warning.type) {
       case ConfirmSwapWarningTypes.ROUTE_UPDATED:
-        return <Typography variant="body2">Route has been updated.</Typography>;
+        return "Route has been updated.";
       case ConfirmSwapWarningTypes.ROUTE_AND_OUTPUT_AMOUNT_UPDATED:
         return (
-          <Typography variant="body2">{`Output amount changed to ${warning.newOutputAmount} 
-      (${warning.percentageChange}% change).`}</Typography>
+          `Output amount changed to ${warning.newOutputAmount} (${warning.percentageChange}% change).`
         );
 
       case ConfirmSwapWarningTypes.ROUTE_SWAPPERS_UPDATED:
         return (
-          <Typography variant="body2">
-            Route swappers has been updated.
-          </Typography>
+          "Route swappers has been updated."
         );
       case ConfirmSwapWarningTypes.ROUTE_COINS_UPDATED:
         return (
-          <Typography variant="body2">
-            Route internal coins has been updated.
-          </Typography>
+          "Route internal coins has been updated."
         );
-      case ConfirmSwapWarningTypes.INSUFFICIENT_BALANCE:
-        return <BalanceWarnings messages={warning.messages} />;
       default:
         return [];
     }
   });
-}
+}

package/src/components/warnings/BalanceErrors.tsx

@@ -0,0 +1,45 @@
+import { Spacer, styled, Typography } from '@rango-dev/ui';
+import React from 'react';
+
+interface PropTypes {
+  messages: string[];
+}
+
+const List = styled('ul', {
+  variants: {
+    showListStyle: {
+      true: { paddingLeft: '$24' },
+    },
+  },
+});
+
+const ListItem = styled('li', {
+  variants: {
+    showListStyle: {
+      true: { listStyleType: 'disc', listStylePosition: 'outside' },
+    },
+  },
+});
+
+const Message = styled(Typography, {
+  display: 'block',
+});
+
+export function BalanceErrors({ messages }: PropTypes) {
+  const showListStyle = messages.length > 1;
+  return (
+    <>
+      <Typography className="title" variant="title" color={'error'}>
+        Insufficent Balance:
+      </Typography>
+      <Spacer size={8} direction="vertical" />
+      <List showListStyle={showListStyle}>
+        {messages.map((warning) => (
+          <ListItem showListStyle={showListStyle}>
+            <Message variant="body3">- {warning}</Message>
+          </ListItem>
+        ))}
+      </List>
+    </>
+  );
+}

package/src/hooks/useConfirmSwap.ts

@@ -198,8 +198,8 @@ export function useConfirmSwap(): ConfirmSwap {
       const enoughBalance = balanceWarnings.length === 0;
 
       if (!enoughBalance)
-        confirmSwapState.warnings.push({
-          type: ConfirmSwapWarningTypes.INSUFFICIENT_BALANCE,
+        confirmSwapState.errors.push({
+          type: ConfirmSwapErrorTypes.INSUFFICIENT_BALANCE,
           messages: balanceWarnings,
         });
 

package/src/pages/ConfirmSwapPage.tsx

@@ -112,7 +112,9 @@ export function ConfirmSwapPage() {
             navigate(navigationRoutes.swaps + `/${swap.requestId}`, {
               replace: true,
             });
-            setInputAmount('');
+            setTimeout(() => {
+              setInputAmount('');
+            }, 0);
           }
         });
       }}

package/src/pages/Home.tsx

@@ -36,6 +36,7 @@ import {
 import BigNumber from 'bignumber.js';
 import { HeaderButtons } from '../components/HeaderButtons';
 import { useUiStore } from '../store/ui';
+import { getFormatedBestRoute } from '../utils/routing';
 
 const Container = styled('div', {
   display: 'flex',
@@ -177,7 +178,7 @@ export function Home() {
           <BestRoute
             error={bestRouteError}
             loading={fetchingBestRoute}
-            data={bestRoute}
+            data={getFormatedBestRoute(bestRoute)}
             totalFee={numberToString(totalFeeInUsd, 0, 2)}
             feeWarning={highFee}
             totalTime={secondsToString(totalArrivalTime(bestRoute))}
@@ -190,14 +191,11 @@ export function Home() {
           {hasLimitError(bestRoute) && (
             <Alert type="error" title={`${swap?.swapperId} Limit`}>
               <>
-                <Typography variant="body2">{fromAmountRangeError}</Typography>
-                <br />
-                <Typography variant="body2">
-                  Yours: {numberToString(swap?.fromAmount || null)}
-                  {swap?.from.symbol}
+                <Typography variant="body3">
+                  {fromAmountRangeError}, Yours: {numberToString(swap?.fromAmount || null)}
+                  &nbsp;{swap?.from.symbol}
                 </Typography>
-                <br />
-                <Typography variant="body2">{recommendation}</Typography>
+                <Typography variant="body3">{recommendation}</Typography>
               </>
             </Alert>
           )}

package/src/pages/SwapDetailsPage.tsx

@@ -4,7 +4,7 @@ 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, Spacer } from '@rango-dev/ui';
+import { SwapHistory } from '@rango-dev/ui';
 import { useUiStore } from '../store/ui';
 import {
   cancelSwap,
@@ -25,11 +25,10 @@ import {
   isNetworkStatusInWarningState,
   shouldRetrySwap,
 } from '../utils/swap';
-import { TokenPreview } from '../components/TokenPreview';
-import { numberToString } from '../utils/numbers';
 //@ts-ignore
 import { t } from 'i18next';
 import { SwapDetailsPlaceholder } from '../components/SwapDetailsPlaceholder';
+import { getFormatedPendingSwap } from '../utils/routing';
 
 export function SwapDetailsPage() {
   const selectedSwapRequestId = useUiStore.use.selectedSwapRequestId();
@@ -45,7 +44,7 @@ export function SwapDetailsPage() {
   useEffect(() => {
     setTimeout(() => {
       setLoading(false);
-    }, 5000);
+    }, 5_000);
   }, []);
 
   const pendingSwaps = getPendingSwaps(manager);
@@ -68,11 +67,6 @@ export function SwapDetailsPage() {
       />
     );
 
-  const firstStep = swap.steps[0];
-  const lastStep = swap.steps[swap.steps.length - 1];
-  const fromAmount = numberToString(swap.inputAmount);
-  const toAmount = numberToString(swap.simulationResult.outputAmount);
-
   const currentStep = getCurrentStep(swap);
 
   const currentStepBlockchain = currentStep
@@ -106,12 +100,13 @@ export function SwapDetailsPage() {
   return (
     <SwapHistory
       onBack={navigateBackFrom.bind(null, navigationRoutes.swapDetails)}
+      /* TODO: It was temporarily removed to find a better solution*/
+      /*
       previewInputs={
         <>
           <TokenPreview
             chain={{
               displayName: firstStep?.fromBlockchain || '',
-              // @ts-ignore
               logo: firstStep?.fromBlockchainLogo || '',
             }}
             token={{
@@ -126,7 +121,6 @@ export function SwapDetailsPage() {
           <TokenPreview
             chain={{
               displayName: lastStep?.toBlockchain || '',
-              //@ts-ignore
               logo: lastStep?.toBlockchainLogo || '',
             }}
             token={{
@@ -139,8 +133,8 @@ export function SwapDetailsPage() {
           />
         </>
       }
-      //todo: move PendingSwap type to rango-types
-      pendingSwap={swap}
+      */
+      pendingSwap={getFormatedPendingSwap(swap)}
       onCopy={handleCopy}
       isCopied={isCopied}
       onCancel={onCancel}

package/src/pages/WalletsPage.tsx

@@ -113,7 +113,7 @@ export function WalletsPage({ supportedWallets, multiWallets }: PropTypes) {
       <>
         {walletErrorMessage && (
           <AlertContainer>
-            <Alert type="error">{walletErrorMessage}</Alert>
+            <Alert type="error" title={walletErrorMessage}/>
           </AlertContainer>
         )}
         {loadingMetaStatus === 'loading' && (

package/src/store/bestRoute.ts

@@ -22,6 +22,8 @@ import { useWalletsStore } from './wallets';
 import { TokenWithBalance } from '../pages/SelectTokenPage';
 import { PendingSwap } from '@rango-dev/queue-manager-rango-preset/dist/shared';
 import { debounce } from '../utils/common';
+import { isPositiveNumber } from '../utils/numbers';
+
 const getUsdValue = (token: Token | null, amount: string) =>
   new BigNumber(amount || ZERO).multipliedBy(token?.usdPrice || 0);
 
@@ -72,7 +74,7 @@ export const useBestRouteStore = createSelectors(
         set((state) => {
           let outputAmount: BigNumber | null = null;
           let outputUsdValue: BigNumber = ZERO;
-          if (!state.inputAmount || state.inputAmount === '0') return {};
+          if (!isPositiveNumber(state.inputAmount)) return {};
           if (!!bestRoute) {
             outputAmount = !!bestRoute.result?.outputAmount
               ? new BigNumber(bestRoute.result?.outputAmount)
@@ -251,7 +253,7 @@ const bestRoute = (
     const { fromToken, toToken, inputAmount } = bestRouteStore.getState();
     const { slippage, customSlippage, disabledLiquiditySources, affiliateRef } =
       settingsStore.getState();
-    if (!fromToken || !toToken || !inputAmount || inputAmount === '0') return;
+    if (!fromToken || !toToken || !isPositiveNumber(inputAmount)) return;
     abortController?.abort();
     abortController = new AbortController();
     const userSlippage = !!customSlippage ? customSlippage : slippage;
@@ -296,7 +298,7 @@ const bestRoute = (
   const bestRouteParamsListener = () => {
     const { fromToken, toToken, inputAmount, inputUsdValue } =
       useBestRouteStore.getState();
-    if (!inputAmount || inputAmount === '0' || inputUsdValue.eq(0))
+    if (!isPositiveNumber(inputAmount) || inputUsdValue.eq(0))
       return bestRouteStore.setState({ loading: false });
 
     if (tokensAreEqual(fromToken, toToken))

package/src/types/routing.ts

@@ -33,6 +33,7 @@ export enum ConfirmSwapErrorTypes {
   ROUTE_UPDATED_WITH_HIGH_VALUE_LOSS,
   REQUEST_FAILED,
   INSUFFICIENT_SLIPPAGE,
+  INSUFFICIENT_BALANCE,
 }
 
 export type ConfirmSwapError =
@@ -44,11 +45,13 @@ export type ConfirmSwapError =
       type: ConfirmSwapErrorTypes.INSUFFICIENT_SLIPPAGE;
       minRequiredSlippage: string | null;
     }
+  | { type: ConfirmSwapErrorTypes.INSUFFICIENT_BALANCE; messages: string[] }
   | {
       type: Exclude<
         ConfirmSwapErrorTypes,
         | ConfirmSwapErrorTypes.REQUEST_FAILED
         | ConfirmSwapErrorTypes.INSUFFICIENT_SLIPPAGE
+        | ConfirmSwapErrorTypes.INSUFFICIENT_BALANCE
       >;
     };
 
@@ -58,12 +61,10 @@ export type ConfirmSwapWarnings =
       newOutputAmount: string;
       percentageChange: string;
     }
-  | { type: ConfirmSwapWarningTypes.INSUFFICIENT_BALANCE; messages: string[] }
   | {
       type: Exclude<
         ConfirmSwapWarningTypes,
-        | ConfirmSwapWarningTypes.ROUTE_AND_OUTPUT_AMOUNT_UPDATED
-        | ConfirmSwapWarningTypes.INSUFFICIENT_BALANCE
+        ConfirmSwapWarningTypes.ROUTE_AND_OUTPUT_AMOUNT_UPDATED
       >;
     };
 
@@ -72,5 +73,4 @@ export enum ConfirmSwapWarningTypes {
   ROUTE_SWAPPERS_UPDATED,
   ROUTE_COINS_UPDATED,
   ROUTE_AND_OUTPUT_AMOUNT_UPDATED,
-  INSUFFICIENT_BALANCE,
 }

package/src/utils/numbers.ts

@@ -131,3 +131,7 @@ export const decimalNumber = (number = '0', toFixed: number) =>
 
 export const containsText = (text: string, searchText: string) =>
   text.toLowerCase().indexOf(searchText.toLowerCase()) > -1;
+
+export const isPositiveNumber = (text?: string) =>
+  !!text && parseFloat(text) > 0;
+10;

package/src/utils/routing.ts

@@ -7,10 +7,8 @@ import { BestRouteResponse, BlockchainMeta, Token } from 'rango-sdk';
 import { areEqual } from './common';
 import { SelectedWallet } from './wallets';
 import { BestRouteEqualityParams } from '../types';
-import { TokenMeta } from '@rango-dev/ui/dist/types/meta';
 import { numberToString } from './numbers';
-import { getUsdFeeOfStep } from './swap';
-import { BestRouteWithFee } from '@rango-dev/ui';
+import { PendingSwap } from '@rango-dev/queue-manager-rango-preset';
 
 export function searchParamsToToken(
   tokens: Token[],
@@ -142,19 +140,41 @@ export function isRouteParametersChanged(params: BestRouteEqualityParams) {
   return false;
 }
 
-export function getBestRouteWithCalculatedFees(
-  bestRoute: BestRouteResponse | null,
-  tokens: TokenMeta[]
-): BestRouteWithFee | null {
-  if (!bestRoute || !bestRoute.result) return null;
-  const swapsWithFee = (bestRoute?.result?.swaps || []).map((swap) => ({
+export function getFormatedBestRoute(
+  bestRoute: BestRouteResponse | null
+): BestRouteResponse | null {
+  if (!bestRoute) return null;
+
+  const formatedSwaps = (bestRoute.result?.swaps || []).map((swap) => ({
     ...swap,
-    feeInUsd: numberToString(getUsdFeeOfStep(swap, tokens), 0, 2),
+    fromAmount: numberToString(swap.fromAmount, 6, 6),
+    toAmount: numberToString(swap.toAmount, 6, 6),
   }));
 
   return {
     ...bestRoute,
-    result: { ...bestRoute.result, swaps: swapsWithFee },
+    ...(bestRoute.result && {
+      result: { ...bestRoute.result, swaps: formatedSwaps },
+    }),
+  };
+}
+
+export function getFormatedPendingSwap(pendingSwap: PendingSwap): PendingSwap {
+  const formatedSteps = pendingSwap.steps.map((step) => ({
+    ...step,
+    feeInUsd: numberToString(step.feeInUsd, 4, 4),
+    outputAmount: numberToString(step.outputAmount, 6, 6),
+    expectedOutputAmountHumanReadable: numberToString(
+      step.expectedOutputAmountHumanReadable,
+      6,
+      6
+    ),
+  }));
+
+  return {
+    ...pendingSwap,
+    inputAmount: numberToString(pendingSwap.inputAmount, 6, 6),
+    steps: formatedSteps,
   };
 }
 

package/src/utils/time.ts

@@ -41,12 +41,6 @@ export function timeSince(timeMillis: number): string {
 
 export function getSwapDate(pendingSwap: PendingSwap) {
   return pendingSwap.finishTime
-    ? `Finished ${timeSince(parseInt(pendingSwap.finishTime))} ago @ ${new Date(
-        parseInt(pendingSwap.finishTime)
-      ).toLocaleString()}`
-    : `Started ${timeSince(
-        parseInt(pendingSwap.creationTime)
-      )} ago @ ${new Date(
-        parseInt(pendingSwap.creationTime)
-      ).toLocaleString()}`;
+    ? `${timeSince(parseInt(pendingSwap.finishTime))} ago`
+    : `${timeSince(parseInt(pendingSwap.creationTime))} ago`;
 }

package/dist/components/warnings/BalanceWarnings.d.ts

@@ -1,7 +0,0 @@
-/// <reference types="react" />
-interface PropTypes {
-    messages: string[];
-}
-export declare function BalanceWarnings({ messages }: PropTypes): JSX.Element;
-export {};
-//# sourceMappingURL=BalanceWarnings.d.ts.map

package/dist/components/warnings/BalanceWarnings.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"BalanceWarnings.d.ts","sourceRoot":"","sources":["../../src/components/warnings/BalanceWarnings.tsx"],"names":[],"mappings":";AAGA,UAAU,SAAS;IACjB,QAAQ,EAAE,MAAM,EAAE,CAAC;CACpB;AAuBD,wBAAgB,eAAe,CAAC,EAAE,QAAQ,EAAE,EAAE,SAAS,eAWtD"}

package/src/components/warnings/BalanceWarnings.tsx

@@ -1,40 +0,0 @@
-import { styled, Typography } from '@rango-dev/ui';
-import React from 'react';
-
-interface PropTypes {
-  messages: string[];
-}
-
-const List = styled('ul', {
-  variants: {
-    showListStyle: {
-      true: { paddingLeft: '$24' },
-    },
-  },
-});
-
-const ListItem = styled('li', {
-  variants: {
-    showListStyle: {
-      true: { listStyleType: 'disc', listStylePosition: 'outside' },
-    },
-  },
-});
-
-const Message = styled(Typography, {
-  display: 'block',
-  color: '$warning500 !important',
-});
-
-export function BalanceWarnings({ messages }: PropTypes) {
-  const showListStyle = messages.length > 1;
-  return (
-    <List showListStyle={showListStyle}>
-      {messages.map((warning) => (
-        <ListItem showListStyle={showListStyle}>
-          <Message variant="body2">{warning}</Message>
-        </ListItem>
-      ))}
-    </List>
-  );
-}