@rango-dev/widget-embedded 0.12.0 → 0.12.1-next.1

package/src/pages/Home.tsx

@@ -1,20 +1,8 @@
-import {
-  Alert,
-  BestRoute,
-  BottomLogo,
-  Button,
-  styled,
-  Typography,
-  VerticalSwapIcon,
-  Header,
-  HeaderButtons,
-} from '@rango-dev/ui';
-import React, { useEffect, useState } from 'react';
-import { i18n } from '@lingui/core';
-import { useInRouterContext, useNavigate } from 'react-router-dom';
-import { TokenInfo } from '../components/TokenInfo';
+import React, { useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { HomePanel } from '@rango-dev/ui';
 import { fetchBestRoute, useBestRouteStore } from '../store/bestRoute';
-import { SwithFromAndTo } from '../components/SwitchFromAndTo';
+import { SwithFromAndToButton } from '../components/SwitchFromAndTo';
 import { navigationRoutes } from '../constants/navigationRoutes';
 import { useMetaStore } from '../store/meta';
 import { useWalletsStore } from '../store/wallets';
@@ -28,54 +16,20 @@ import {
   LimitErrorMessage,
   getTotalFeeInUsd,
   hasHighFee,
+  getPercentageChange,
 } from '../utils/swap';
+import { useUiStore } from '../store/ui';
 import {
   numberToString,
   secondsToString,
   totalArrivalTime,
 } from '../utils/numbers';
-import BigNumber from 'bignumber.js';
-import { useUiStore } from '../store/ui';
+import { getBalanceFromWallet } from '../utils/wallets';
 import { getFormatedBestRoute } from '../utils/routing';
-
-const Container = styled('div', {
-  display: 'flex',
-  flexDirection: 'column',
-});
-
-const FromContainer = styled('div', {
-  position: 'relative',
-  paddingBottom: '$12',
-});
-
-const SwitchButtonContainer = styled('div', {
-  position: 'absolute',
-  bottom: '-12px',
-  left: '50%',
-  transform: 'translate(-50%, 10%)',
-});
-
-const BestRouteContainer = styled('div', {
-  width: '100%',
-  paddingTop: '$16',
-});
-
-const Alerts = styled('div', {
-  width: '100%',
-  paddingTop: '$16',
-});
-
-const Footer = styled('div', {
-  display: 'flex',
-  flexDirection: 'column',
-  width: '100%',
-  paddingTop: '$16',
-});
+import BigNumber from 'bignumber.js';
 
 export function Home() {
-  const isRouterInContext = useInRouterContext();
   const navigate = useNavigate();
-  const [count, setCount] = useState(0);
   const fromChain = useBestRouteStore.use.fromChain();
   const fromToken = useBestRouteStore.use.fromToken();
   const toChain = useBestRouteStore.use.toChain();
@@ -92,7 +46,6 @@ export function Home() {
   const loadingMetaStatus = useMetaStore.use.loadingStatus();
   const connectedWallets = useWalletsStore.use.connectedWallets();
   const setCurrentPage = useUiStore.use.setCurrentPage();
-  const switchFromAndTo = useBestRouteStore.use.switchFromAndTo();
 
   const errorMessage =
     loadingMetaStatus === 'failed'
@@ -102,7 +55,7 @@ export function Home() {
   const needsToWarnEthOnPath = false;
 
   const showBestRoute =
-    inputAmount && (!!bestRoute || fetchingBestRoute || bestRouteError);
+    !!inputAmount && (!!bestRoute || fetchingBestRoute || !!bestRouteError);
 
   const outToInRatio = getOutputRatio(inputUsdValue, outputUsdValue);
 
@@ -134,101 +87,105 @@ export function Home() {
 
   const highFee = hasHighFee(totalFeeInUsd);
 
+  const tokenBalance =
+    !!fromChain && !!fromToken
+      ? numberToString(
+          getBalanceFromWallet(
+            connectedWallets,
+            fromChain?.name,
+            fromToken?.symbol,
+            fromToken?.address
+          )?.amount || '0',
+          8
+        )
+      : '0';
+
+  const tokenBalanceReal =
+    !!fromChain && !!fromToken
+      ? numberToString(
+          getBalanceFromWallet(
+            connectedWallets,
+            fromChain?.name,
+            fromToken?.symbol,
+            fromToken?.address
+          )?.amount || '0',
+          getBalanceFromWallet(
+            connectedWallets,
+            fromChain?.name,
+            fromToken?.symbol,
+            fromToken?.address
+          )?.decimal
+        )
+      : '0';
+
   useEffect(() => {
     setCurrentPage(navigationRoutes.home);
 
     return setCurrentPage.bind(null, '');
   }, []);
 
+  const percentageChange =
+    !inputUsdValue || !outputUsdValue || !outputUsdValue.gt(0)
+      ? null
+      : getPercentageChange(
+          inputUsdValue.toNumber(),
+          outputUsdValue.toNumber()
+        );
+
   return (
-    <Container>
-      <Header
-        title={i18n.t('SWAP')}
-        suffix={
-          <HeaderButtons
-            onClickRefresh={
-              !!bestRoute || bestRouteError ? fetchBestRoute : undefined
-            }
-            onClickHistory={() => navigate(navigationRoutes.swaps)}
-            onClickSettings={() => navigate(navigationRoutes.settings)}
-          />
-        }
-      />
-      <FromContainer>
-        <TokenInfo
-          type="From"
-          chain={fromChain}
-          token={fromToken}
-          onAmountChange={setInputAmount}
-          inputAmount={inputAmount}
-        />
-        <SwitchButtonContainer>
-          <Button
-            variant="ghost"
-            onClick={() => {
-              switchFromAndTo();
-              setCount((prev) => prev + 1);
-            }}>
-            <VerticalSwapIcon size={32} />
-            {isRouterInContext && <SwithFromAndTo count={count} />}
-          </Button>
-        </SwitchButtonContainer>
-      </FromContainer>
-      <TokenInfo
-        type="To"
-        chain={toChain}
-        token={toToken}
-        outputAmount={
-          outputAmount ? new BigNumber(outputAmount) : new BigNumber(0)
+    <HomePanel
+      bestRoute={bestRoute}
+      bestRouteError={bestRouteError}
+      fetchBestRoute={fetchBestRoute}
+      onClickHistory={() => navigate(navigationRoutes.swaps)}
+      onClickSettings={() => navigate(navigationRoutes.settings)}
+      setInputAmount={setInputAmount}
+      fromChain={fromChain}
+      toChain={toChain}
+      fromToken={fromToken}
+      toToken={toToken}
+      outputAmount={
+        outputAmount
+          ? numberToString(new BigNumber(outputAmount))
+          : numberToString(new BigNumber(0))
+      }
+      inputAmount={inputAmount}
+      loadingStatus={loadingMetaStatus}
+      showBestRoute={showBestRoute}
+      fetchingBestRoute={fetchingBestRoute}
+      outputUsdValue={numberToString(outputUsdValue)}
+      inputUsdValue={numberToString(inputUsdValue)}
+      swapButtonTitle={swapButtonState.title}
+      swapButtonDisabled={swapButtonState.disabled}
+      swapButtonClick={() => {
+        if (swapButtonState.title === 'Connect Wallet')
+          navigate(navigationRoutes.wallets);
+        else {
+          navigate(navigationRoutes.confirmSwap, { replace: true });
         }
-        outputUsdValue={outputUsdValue}
-      />
-      {showBestRoute && (
-        <BestRouteContainer>
-          <BestRoute
-            error={bestRouteError}
-            loading={fetchingBestRoute}
-            data={getFormatedBestRoute(bestRoute)}
-            totalFee={numberToString(totalFeeInUsd, 0, 2)}
-            feeWarning={highFee}
-            totalTime={secondsToString(totalArrivalTime(bestRoute))}
-          />
-        </BestRouteContainer>
-      )}
-      {(errorMessage || hasLimitError(bestRoute)) && (
-        <Alerts>
-          {errorMessage && <Alert type="error">{errorMessage}</Alert>}
-          {hasLimitError(bestRoute) && (
-            <Alert type="error" title={`${swap?.swapperId} Limit`}>
-              <>
-                <Typography variant="body2">
-                  {`${fromAmountRangeError}, Yours: ${numberToString(
-                    swap?.fromAmount || null
-                  )} ${swap?.from.symbol}`}
-                </Typography>
-                <Typography variant="body2">{recommendation}</Typography>
-              </>
-            </Alert>
-          )}
-        </Alerts>
-      )}
-      <Footer>
-        <Button
-          type="primary"
-          align="grow"
-          size="large"
-          disabled={swapButtonState.disabled}
-          onClick={() => {
-            if (swapButtonState.title === 'Connect Wallet')
-              navigate(navigationRoutes.wallets);
-            else {
-              navigate(navigationRoutes.confirmSwap, { replace: true });
-            }
-          }}>
-          {swapButtonState.title}
-        </Button>
-        <BottomLogo />
-      </Footer>
-    </Container>
+      }}
+      onChainClick={(route) => {
+        navigate(route);
+      }}
+      onTokenClick={(route) => {
+        navigate(route);
+      }}
+      highFee={highFee}
+      errorMessage={errorMessage}
+      hasLimitError={hasLimitError}
+      swap={swap}
+      fromAmountRangeError={fromAmountRangeError}
+      recommendation={recommendation}
+      totalFeeInUsd={numberToString(totalFeeInUsd, 0, 2)}
+      swithFromAndToComponent={<SwithFromAndToButton />}
+      connectedWallets={connectedWallets}
+      percentageChange={numberToString(percentageChange, 0, 2)}
+      showPercentageChange={!!percentageChange?.lt(0)}
+      tokenBalanceReal={tokenBalanceReal}
+      tokenBalance={tokenBalance}
+      totalTime={secondsToString(totalArrivalTime(bestRoute))}
+      bestRouteData={getFormatedBestRoute(bestRoute)}
+      swapFromAmount={numberToString(swap?.fromAmount || null)}
+    />
   );
 }

package/src/pages/SwapDetailsPage.tsx

@@ -3,13 +3,17 @@ import { navigationRoutes } from '../constants/navigationRoutes';
 import { useManager } from '@rango-dev/queue-manager-react';
 import { useNavigateBack } from '../hooks/useNavigateBack';
 import { getPendingSwaps } from '../utils/queue';
-import { SwapHistory, useCopyToClipboard } from '@rango-dev/ui';
+import {
+  SwapHistory,
+  useCopyToClipboard,
+  SwapDetailsPlaceholder,
+} from '@rango-dev/ui';
 import { useUiStore } from '../store/ui';
 import {
   cancelSwap,
   PendingSwapNetworkStatus,
 } from '@rango-dev/queue-manager-rango-preset';
-import { useWallets } from '@rango-dev/wallets-core';
+import { useWallets } from '@rango-dev/wallets-react';
 import {
   getCurrentBlockchainOfOrNull,
   getCurrentStep,
@@ -24,7 +28,6 @@ import {
   isNetworkStatusInWarningState,
   shouldRetrySwap,
 } from '../utils/swap';
-import { SwapDetailsPlaceholder } from '../components/SwapDetailsPlaceholder';
 import { getFormatedPendingSwap } from '../utils/routing';
 
 export function SwapDetailsPage() {

package/src/pages/WalletsPage.tsx

@@ -13,7 +13,7 @@ import {
   WalletTypes,
   detectMobileScreens,
 } from '@rango-dev/wallets-shared';
-import { useWallets } from '@rango-dev/wallets-core';
+import { useWallets } from '@rango-dev/wallets-react';
 
 import { useUiStore } from '../store/ui';
 import { useNavigateBack } from '../hooks/useNavigateBack';

package/src/store/settings.ts

@@ -102,6 +102,7 @@ export const useSettingsStore = createSelectors(
       })),
       {
         name: 'user-settings',
+        skipHydration: true,
       }
     )
   )

package/src/types/config.ts

@@ -1,6 +1,6 @@
 import { Asset } from 'rango-sdk';
 import { WalletType } from '@rango-dev/wallets-shared';
-import { ProviderInterface } from '@rango-dev/wallets-core';
+import { ProviderInterface } from '@rango-dev/wallets-react';
 import { Language } from '@rango-dev/ui';
 
 /**

package/src/utils/numbers.ts

@@ -3,6 +3,7 @@ import { BestRouteResponse } from 'rango-sdk';
 
 export const percentToString = (p: number, fractions = 0): string =>
   (p * 100).toFixed(fractions);
+
 export const secondsToString = (s: number): string => {
   const seconds = (s % 60).toString().padStart(2, '0');
   const minutes = parseInt((s / 60).toString())
@@ -87,6 +88,7 @@ export const convertBigNumberToHex = (
 
 export const uint8ArrayToHex = (buffer: Uint8Array): string => {
   // buffer is an ArrayBuffer
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
   // @ts-ignore
   return [...buffer].map((x) => x.toString(16).padStart(2, '0')).join('');
 };

package/src/utils/providers.ts

@@ -1,5 +1,5 @@
 import { allProviders } from '@rango-dev/provider-all';
-import { ProviderInterface } from '@rango-dev/wallets-core';
+import { ProviderInterface } from '@rango-dev/wallets-react';
 import { WidgetConfig } from '../types';
 
 export interface ProvidersOptions {

package/src/utils/wallets.ts

@@ -23,7 +23,7 @@ import {
   WalletDetail,
 } from 'rango-sdk';
 import { isCosmosBlockchain } from 'rango-types';
-import { readAccountAddress } from '@rango-dev/wallets-core';
+import { readAccountAddress } from '@rango-dev/wallets-react';
 import { ConnectedWallet, TokenBalance } from '../store/wallets';
 import { numberToString } from './numbers';
 import BigNumber from 'bignumber.js';

package/dist/components/PercentageChange.d.ts

@@ -1,9 +0,0 @@
-import BigNumber from 'bignumber.js';
-import React from 'react';
-interface PropTypes {
-    inputUsdValue: BigNumber | null;
-    outputUsdValue: BigNumber | null;
-}
-export declare function PercentageChange(props: PropTypes): React.JSX.Element | null;
-export {};
-//# sourceMappingURL=PercentageChange.d.ts.map

package/dist/components/PercentageChange.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"PercentageChange.d.ts","sourceRoot":"","sources":["../../src/components/PercentageChange.tsx"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,cAAc,CAAC;AACrC,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,UAAU,SAAS;IACjB,aAAa,EAAE,SAAS,GAAG,IAAI,CAAC;IAChC,cAAc,EAAE,SAAS,GAAG,IAAI,CAAC;CAClC;AAED,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,SAAS,4BAqBhD"}

package/dist/components/RoutesOverview.d.ts

@@ -1,120 +0,0 @@
-import React from 'react';
-import { BestRouteResponse } from 'rango-sdk';
-export declare const Container: import("@stitches/react/types/styled-component").StyledComponent<"div", {}, {
-    sm: string;
-    md: string;
-    lg: string;
-}, import("@stitches/react/types/css-util").CSS<{
-    sm: string;
-    md: string;
-    lg: string;
-}, {
-    colors: {
-        primary: string;
-        primary100: string;
-        primary200: string;
-        primary300: string;
-        primary400: string;
-        primary500: string;
-        primary600: string;
-        primary700: string;
-        primary800: string;
-        primary900: string;
-        surface: string;
-        neutral100: string;
-        neutral200: string;
-        neutral300: string;
-        neutral400: string;
-        neutral500: string;
-        neutral600: string;
-        neutral700: string;
-        neutral800: string;
-        neutral900: string;
-        background: string;
-        foreground: string;
-        success: string;
-        success100: string;
-        success300: string;
-        success500: string;
-        success700: string;
-        warning: string;
-        warning100: string;
-        warning300: string;
-        warning500: string;
-        warning700: string;
-        error: string;
-        error100: string;
-        error300: string;
-        error500: string;
-        error700: string;
-        white: string;
-    };
-    space: {
-        2: string;
-        4: string;
-        6: string;
-        8: string;
-        10: string;
-        12: string;
-        16: string;
-        20: string;
-        24: string;
-        28: string;
-        30: string;
-        32: string;
-    };
-    fontSizes: {
-        10: string;
-        12: string;
-        14: string;
-        16: string;
-        18: string;
-        20: string;
-        24: string;
-        32: string;
-        36: string;
-        40: string;
-        48: string;
-    };
-    fonts: {};
-    fontWeights: {
-        400: string;
-        500: string;
-        600: string;
-        700: string;
-    };
-    lineHeights: {};
-    letterSpacings: {};
-    sizes: {
-        4: string;
-        6: string;
-        8: string;
-        12: string;
-        16: string;
-        20: string;
-        24: string;
-        28: string;
-        32: string;
-        36: string;
-        40: string;
-        48: string;
-    };
-    borderWidths: {};
-    borderStyles: {};
-    radii: {
-        5: string;
-        10: string;
-    };
-    shadows: {
-        s: string;
-    };
-    zIndices: {};
-    transitions: {};
-}, import("@stitches/react/types/config").DefaultThemeMap, {}>>;
-interface PropTypes {
-    routes: BestRouteResponse | null;
-    totalFee?: string;
-}
-declare function RoutesOverview(props: PropTypes): React.JSX.Element | null;
-export default RoutesOverview;
-//# sourceMappingURL=RoutesOverview.d.ts.map

package/dist/components/RoutesOverview.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"RoutesOverview.d.ts","sourceRoot":"","sources":["../../src/components/RoutesOverview.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,iBAAiB,EAAE,MAAM,WAAW,CAAC;AAE9C,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAkBpB,CAAC;AAEH,UAAU,SAAS;IACjB,MAAM,EAAE,iBAAiB,GAAG,IAAI,CAAC;IACjC,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AACD,iBAAS,cAAc,CAAC,KAAK,EAAE,SAAS,4BA0BvC;AAED,eAAe,cAAc,CAAC"}

package/dist/components/SwapDetailsPlaceholder.d.ts

@@ -1,120 +0,0 @@
-import React from 'react';
-export declare const LoaderContainer: import("@stitches/react/types/styled-component").StyledComponent<"div", {}, {
-    sm: string;
-    md: string;
-    lg: string;
-}, import("@stitches/react/types/css-util").CSS<{
-    sm: string;
-    md: string;
-    lg: string;
-}, {
-    colors: {
-        primary: string;
-        primary100: string;
-        primary200: string;
-        primary300: string;
-        primary400: string;
-        primary500: string;
-        primary600: string;
-        primary700: string;
-        primary800: string;
-        primary900: string;
-        surface: string;
-        neutral100: string;
-        neutral200: string;
-        neutral300: string;
-        neutral400: string;
-        neutral500: string;
-        neutral600: string;
-        neutral700: string;
-        neutral800: string;
-        neutral900: string;
-        background: string;
-        foreground: string;
-        success: string;
-        success100: string;
-        success300: string;
-        success500: string;
-        success700: string;
-        warning: string;
-        warning100: string;
-        warning300: string;
-        warning500: string;
-        warning700: string;
-        error: string;
-        error100: string;
-        error300: string;
-        error500: string;
-        error700: string;
-        white: string;
-    };
-    space: {
-        2: string;
-        4: string;
-        6: string;
-        8: string;
-        10: string;
-        12: string;
-        16: string;
-        20: string;
-        24: string;
-        28: string;
-        30: string;
-        32: string;
-    };
-    fontSizes: {
-        10: string;
-        12: string;
-        14: string;
-        16: string;
-        18: string;
-        20: string;
-        24: string;
-        32: string;
-        36: string;
-        40: string;
-        48: string;
-    };
-    fonts: {};
-    fontWeights: {
-        400: string;
-        500: string;
-        600: string;
-        700: string;
-    };
-    lineHeights: {};
-    letterSpacings: {};
-    sizes: {
-        4: string;
-        6: string;
-        8: string;
-        12: string;
-        16: string;
-        20: string;
-        24: string;
-        28: string;
-        32: string;
-        36: string;
-        40: string;
-        48: string;
-    };
-    borderWidths: {};
-    borderStyles: {};
-    radii: {
-        5: string;
-        10: string;
-    };
-    shadows: {
-        s: string;
-    };
-    zIndices: {};
-    transitions: {};
-}, import("@stitches/react/types/config").DefaultThemeMap, {}>>;
-interface PropTypes {
-    requestId: string;
-    loading: boolean;
-    onBack: () => void;
-}
-export declare function SwapDetailsPlaceholder(props: PropTypes): React.JSX.Element;
-export {};
-//# sourceMappingURL=SwapDetailsPlaceholder.d.ts.map

package/dist/components/SwapDetailsPlaceholder.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"SwapDetailsPlaceholder.d.ts","sourceRoot":"","sources":["../../src/components/SwapDetailsPlaceholder.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAM1B,CAAC;AAEH,UAAU,SAAS;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,OAAO,CAAC;IACjB,MAAM,EAAE,MAAM,IAAI,CAAC;CACpB;AAED,wBAAgB,sBAAsB,CAAC,KAAK,EAAE,SAAS,qBA0BtD"}

package/dist/components/TokenInfo.d.ts

@@ -1,18 +0,0 @@
-import React from 'react';
-import { BlockchainMeta, Token } from 'rango-sdk';
-import BigNumber from 'bignumber.js';
-type PropTypes = ({
-    type: 'From';
-    inputAmount: string;
-    onAmountChange: (amount: string) => void;
-} | {
-    type: 'To';
-    outputAmount: BigNumber | null;
-    outputUsdValue: BigNumber | null;
-}) & {
-    chain: BlockchainMeta | null;
-    token: Token | null;
-};
-export declare function TokenInfo(props: PropTypes): React.JSX.Element;
-export {};
-//# sourceMappingURL=TokenInfo.d.ts.map

package/dist/components/TokenInfo.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"TokenInfo.d.ts","sourceRoot":"","sources":["../../src/components/TokenInfo.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAY1B,OAAO,EAAE,cAAc,EAAE,KAAK,EAAE,MAAM,WAAW,CAAC;AAIlD,OAAO,SAAS,MAAM,cAAc,CAAC;AAOrC,KAAK,SAAS,GAAG,CACb;IACE,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,EAAE,MAAM,CAAC;IACpB,cAAc,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;CAC1C,GACD;IACE,IAAI,EAAE,IAAI,CAAC;IACX,YAAY,EAAE,SAAS,GAAG,IAAI,CAAC;IAC/B,cAAc,EAAE,SAAS,GAAG,IAAI,CAAC;CAClC,CACJ,GAAG;IAAE,KAAK,EAAE,cAAc,GAAG,IAAI,CAAC;IAAC,KAAK,EAAE,KAAK,GAAG,IAAI,CAAA;CAAE,CAAC;AA4F1D,wBAAgB,SAAS,CAAC,KAAK,EAAE,SAAS,qBA0MzC"}