@rango-dev/widget-embedded 0.1.11-next.12 → 0.1.11-next.15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/widget-embedded",
-  "version": "0.1.11-next.12",
+  "version": "0.1.11-next.15",
   "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"
@@ -30,9 +30,9 @@
   "dependencies": {
     "@rango-dev/provider-all": "^0.1.11-next.84",
     "@rango-dev/queue-manager-core": "^0.1.11-next.0",
-    "@rango-dev/queue-manager-rango-preset": "^0.1.11-next.3",
+    "@rango-dev/queue-manager-rango-preset": "^0.1.11-next.5",
     "@rango-dev/queue-manager-react": "^0.1.10-next.76",
-    "@rango-dev/ui": "^0.1.11-next.4",
+    "@rango-dev/ui": "^0.1.11-next.8",
     "@rango-dev/wallets-core": "^0.1.11-next.88",
     "@rango-dev/wallets-shared": "^0.1.11-next.84",
     "bignumber.js": "^9.1.1",

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/Home.tsx

@@ -191,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

@@ -44,7 +44,7 @@ export function SwapDetailsPage() {
   useEffect(() => {
     setTimeout(() => {
       setLoading(false);
-    }, 5000);
+    }, 5_000);
   }, []);
 
   const pendingSwaps = getPendingSwaps(manager);

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