@rango-dev/ui 0.1.10-next.69

package/src/components/index.ts

@@ -0,0 +1,24 @@
+export * from './BestRoute';
+export * from './BlockchainSelector';
+export * from './Button';
+export * from './Checkbox';
+export * from './Chip';
+export * from './ConnectWalletsModal';
+export * from './Icon';
+export * from './LiquiditySourcesSelector';
+export * from './Modal';
+export * from './SecondaryPage';
+export * from './SelectableWalletList';
+export * from './Settings';
+export * from './Spacer';
+export * from './Spinner';
+export * from './StepDetail';
+export * from './SwapContainer';
+export * from './SwapDetail';
+export * from './Switch';
+export * from './TextField';
+export * from './TokenSelector';
+export * from './Tooltip';
+export * from './Typography';
+export * from './Wallet';
+export * from './Alert';

package/src/containers/ConfirmSwap/ConfirmSwap.stories.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { ComponentMeta } from '@storybook/react';
+import { ConfirmSwap, PropTypes } from './ConfirmSwap';
+import { bestRoute } from './mock';
+
+export default {
+  title: 'Containers/ConfirmSwap',
+  component: ConfirmSwap,
+} as ComponentMeta<typeof ConfirmSwap>;
+
+export const Main = (props: PropTypes) => (
+  <ConfirmSwap {...props} bestRoute={bestRoute} />
+);

package/src/containers/ConfirmSwap/ConfirmSwap.tsx

@@ -0,0 +1,154 @@
+import { BestRouteResponse } from 'rango-sdk';
+import React, { PropsWithChildren } from 'react';
+import { Alert } from '../../components/Alert';
+import { Button } from '../../components/Button';
+import { RetryIcon, GasIcon } from '../../components/Icon';
+import { SecondaryPage } from '../../components/SecondaryPage/';
+import { StepDetail } from '../../components/StepDetail';
+import { Typography } from '../../components/Typography';
+import { styled } from '../../theme';
+
+export const Line = styled('div', {
+  width: '0',
+  marginLeft: '$12',
+  height: '36px',
+  border: '1px dashed $foreground',
+  borderRadius: 'inherit',
+});
+export const SwapperContainer = styled('div', {
+  display: 'flex',
+  alignItems: 'center',
+  marginLeft: '6px',
+});
+export const BodyError = styled('div', {
+  height: '100%',
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+});
+export const ErrorMsg = styled(Typography, {
+  color: '$error',
+});
+export const Fee = styled('div', {
+  display: 'flex',
+  alignItems: 'center',
+});
+export const SwapperLogo = styled('img', {
+  width: '$16',
+  height: '$16',
+});
+export const RelativeContainer = styled('div', {
+  position: 'relative',
+});
+
+export const Footer = styled('div', {
+  display: 'flex',
+  alignItems: 'center',
+});
+export const Dot = styled('div', {
+  width: '$8',
+  height: '$8',
+  backgroundColor: '$foreground',
+  borderRadius: '4px',
+  marginLeft: '$8',
+});
+export const ArrowDown = styled('div', {
+  width: '0px',
+  height: '0px',
+  borderLeft: '5px solid transparent',
+  borderRight: '5px solid transparent',
+  borderTop: '5px solid $foreground',
+  marginLeft: '$8',
+});
+export const UpdateIcon = styled(RetryIcon, {
+  position: 'absolute',
+  right: '0',
+});
+export const StyledUpdateIcon = styled(UpdateIcon, {
+  cursor: 'pointer',
+});
+
+const Alerts = styled('div', { paddingBottom: '$16' });
+
+export interface PropTypes {
+  bestRoute: BestRouteResponse | null;
+  onBack: () => void;
+  onConfirm?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+  loading?: boolean;
+  error?: string;
+  warning?: string;
+}
+export function ConfirmSwap({
+  bestRoute,
+  onBack,
+  onConfirm,
+  loading,
+  error,
+  warning,
+}: PropsWithChildren<PropTypes>) {
+  return (
+    <SecondaryPage
+      textField={false}
+      title="Swap"
+      onBack={onBack}
+      Footer={
+        <Footer>
+          <Button
+            type="primary"
+            fullWidth
+            loading={loading}
+            variant="contained"
+            onClick={onConfirm}
+          >
+            Swap
+          </Button>
+        </Footer>
+      }
+      Content={bestRoute?.result?.swaps.map((swap, index) => (
+        <>
+          <Alerts>
+            {error && <Alert description={error} type="error" />}
+            {warning && <Alert description={warning} type="warning" />}
+          </Alerts>
+          {index === 0 && (
+            <RelativeContainer>
+              <StepDetail
+                logo={swap.from.logo}
+                symbol={swap.from.symbol}
+                chainLogo={swap.from.blockchainLogo}
+                blockchain={swap.from.blockchain}
+                amount={swap.fromAmount}
+              />
+              <Dot />
+            </RelativeContainer>
+          )}
+          <Line />
+          <SwapperContainer>
+            <SwapperLogo src={swap.swapperLogo} alt={swap.swapperId} />
+            <div>
+              <Typography ml={4} variant="caption">
+                {swap.swapperType} from {swap.from.symbol} to {swap.to.symbol}{' '}
+                via {swap.swapperId}{' '}
+              </Typography>
+              <Fee>
+                <GasIcon />
+                <Typography ml={4} variant="caption">
+                  {parseFloat(swap.fee[0].amount).toFixed(6)} estimated gas fee
+                </Typography>
+              </Fee>
+            </div>
+          </SwapperContainer>
+          <Line />
+          {index + 1 === bestRoute.result?.swaps.length && <ArrowDown />}
+          <StepDetail
+            logo={swap.to.logo}
+            symbol={swap.to.symbol}
+            chainLogo={swap.to.blockchainLogo}
+            blockchain={swap.to.blockchain}
+            amount={swap.toAmount}
+          />
+        </>
+      ))}
+    />
+  );
+}

package/src/containers/ConfirmSwap/index.ts

@@ -0,0 +1 @@
+export { ConfirmSwap } from './ConfirmSwap';

package/src/containers/ConfirmSwap/mock.ts

@@ -0,0 +1,146 @@
+import { RoutingResultType } from 'rango-sdk';
+import { BestRouteType } from '../../types/swaps';
+
+export const bestRoute: BestRouteType = {
+  from: { blockchain: 'BSC', symbol: 'BNB', address: null },
+  to: { blockchain: 'AVAX_CCHAIN', symbol: 'AVAX', address: null },
+  requestAmount: '0.3',
+  requestId: '228529e3-27d7-4fa9-ab84-bb2b90eade6f',
+  result: {
+    resultType: RoutingResultType.OK,
+    outputAmount: '5.685715974132648891',
+    swaps: [
+      {
+        swapperId: 'AnySwap Aggregator',
+        swapperType: 'AGGREGATOR',
+        swapperLogo: 'https://api.rango.exchange/swappers/multichain.png',
+        from: {
+          symbol: 'BNB',
+          logo: 'https://api.rango.exchange/i/Y3v1KW',
+          blockchainLogo: 'https://api.rango.exchange/blockchains/binance.svg',
+          address: null,
+          blockchain: 'BSC',
+          decimals: 18,
+          usdPrice: 279.2738558274085,
+        },
+        to: {
+          symbol: 'WETH.E',
+          logo: 'https://api.rango.exchange/i/j9xgdC',
+          blockchainLogo:
+            'https://api.rango.exchange/blockchains/avax_cchain.svg',
+          address: '0x49d5c2bdffac6ce2bfdb6640f4f80f226bc10bab',
+          blockchain: 'AVAX_CCHAIN',
+          decimals: 18,
+          usdPrice: 1329.24,
+        },
+        fromAmount: '0.300000000000000000',
+        fromAmountPrecision: null,
+        fromAmountMinValue: '0.047579322466294684272760',
+        fromAmountMaxValue: '79302.26195302606417382090',
+        fromAmountRestrictionType: 'INCLUSIVE',
+        toAmount: '0.062064305934309070',
+        fee: [
+          {
+            asset: { blockchain: 'BSC', symbol: 'BNB', address: null },
+            expenseType: 'FROM_SOURCE_WALLET',
+            amount: '0.001388002000000000',
+            name: 'Network Fee',
+          },
+        ],
+        estimatedTimeInSeconds: 300,
+        swapChainType: 'INTRA_CHAIN',
+        routes: null,
+        recommendedSlippage: null,
+        timeStat: { min: 162, avg: 260, max: 467 },
+        includesDestinationTx: false,
+        maxRequiredSign: 1,
+        warnings: [],
+      },
+      {
+        swapperId: 'PangolinSwap',
+        swapperLogo: 'https://api.rango.exchange/swappers/pangolin.png',
+        swapperType: 'DEX',
+        from: {
+          symbol: 'WETH.E',
+          logo: 'https://api.rango.exchange/i/j9xgdC',
+          address: '0x49d5c2bdffac6ce2bfdb6640f4f80f226bc10bab',
+          blockchain: 'AVAX_CCHAIN',
+          decimals: 18,
+          usdPrice: 1329.24,
+          blockchainLogo:
+            'https://api.rango.exchange/blockchains/avax_cchain.svg',
+        },
+        to: {
+          symbol: 'AVAX',
+          logo: 'https://api.rango.exchange/i/kX4edQ',
+          address: null,
+          blockchain: 'AVAX_CCHAIN',
+          decimals: 18,
+          usdPrice: 12.5,
+          blockchainLogo:
+            'https://api.rango.exchange/blockchains/avax_cchain.svg',
+        },
+        fromAmount: '0.062064305934309070',
+        fromAmountPrecision: null,
+        fromAmountMinValue: null,
+        fromAmountMaxValue: null,
+        fromAmountRestrictionType: 'EXCLUSIVE',
+        toAmount: '5.685715974132648891',
+        fee: [
+          {
+            asset: {
+              blockchain: 'AVAX_CCHAIN',
+              symbol: 'WETH.E',
+              address: '0x49d5c2bdffac6ce2bfdb6640f4f80f226bc10bab',
+            },
+            expenseType: 'DECREASE_FROM_OUTPUT',
+            name: 'Network Fee',
+            amount:
+              '0.00018619291780292721387591870688029381530892436558133340440690517425537109375',
+          },
+          {
+            asset: { blockchain: 'AVAX_CCHAIN', symbol: 'AVAX', address: null },
+            expenseType: 'FROM_SOURCE_WALLET',
+            amount: '0.005370022532678750',
+            name: 'Network Fee',
+          },
+        ],
+        estimatedTimeInSeconds: 45,
+        swapChainType: 'INTER_CHAIN',
+        routes: [
+          {
+            nodes: [
+              {
+                nodes: [
+                  {
+                    marketName: 'PangolinSwap',
+                    marketId: 'PangolinSwap',
+                    percent: 1.0,
+                  },
+                ],
+                from: 'WETH.e',
+                fromLogo: '',
+                fromAddress: '0x49d5c2bdffac6ce2bfdb6640f4f80f226bc10bab',
+                fromBlockchain: 'AVAX_CCHAIN',
+                to: 'WAVAX',
+                toLogo: '',
+                toAddress: '0xb31f66aa3c1e785363f0875a1b74e27b85fd66c7',
+                toBlockchain: 'AVAX_CCHAIN',
+              },
+            ],
+          },
+        ],
+        recommendedSlippage: null,
+        timeStat: { min: 6, avg: 39, max: 317 },
+        includesDestinationTx: false,
+        maxRequiredSign: 1,
+        warnings: [],
+      },
+    ],
+  },
+  validationStatus: null,
+  missingBlockchains: [],
+  diagnosisMessages: [],
+  processingLimitReached: false,
+  walletNotSupportingFromBlockchain: false,
+};

package/src/containers/ConfirmWallets/ConfirmWallets.stories.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { ComponentMeta } from '@storybook/react';
+import { ConfirmWallets, PropTypes } from './ConfirmWallets';
+import { bestRoute, exampleFor5Wallets, wallets } from './mock';
+
+export default {
+  title: 'Containers/ConfirmWallets',
+  component: ConfirmWallets,
+  argTypes: {
+    requiredWallets: {
+      defaultValue: ['BSC', 'OSMOSIS'],
+    },
+  },
+} as ComponentMeta<typeof ConfirmWallets>;
+
+export const Main = (props: PropTypes) => (
+  <ConfirmWallets {...props} swap={bestRoute} selectableWallets={wallets} />
+);
+
+export const With5Wallets = (props: PropTypes) => (
+  <ConfirmWallets
+    {...props}
+    swap={bestRoute}
+    selectableWallets={exampleFor5Wallets}
+  />
+);

package/src/containers/ConfirmWallets/ConfirmWallets.tsx

@@ -0,0 +1,98 @@
+import { BestRouteResponse } from 'rango-sdk';
+import React, { PropsWithChildren } from 'react';
+import { Alert } from '../../components';
+import { Button } from '../../components/Button';
+import { SecondaryPage } from '../../components/SecondaryPage/SecondaryPage';
+import { SelectableWalletList } from '../../components/SelectableWalletList';
+import { Typography } from '../../components/Typography';
+import { decimalNumber } from '../../helper';
+import { styled } from '../../theme';
+import { SelectableWallet } from './types';
+
+const Footer = styled('div', {
+  display: 'flex',
+  alignItems: 'center',
+});
+
+const AlertContainer = styled('div', {
+  padding: '$16 0',
+});
+
+export interface PropTypes {
+  swap: BestRouteResponse;
+  onBack: () => void;
+  onConfirm?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+  confirmDisabled?: boolean;
+  loading?: boolean;
+  requiredWallets: string[];
+  selectableWallets: SelectableWallet[];
+  onChange: (w: SelectableWallet) => void;
+}
+export function ConfirmWallets({
+  onBack,
+  loading,
+  onConfirm,
+  swap,
+  requiredWallets,
+  selectableWallets,
+  onChange,
+  confirmDisabled,
+}: PropsWithChildren<PropTypes>) {
+  const firstStep = swap.result?.swaps[0];
+  const lastStep = swap.result?.swaps[swap.result?.swaps.length - 1];
+
+  const fromAmount = decimalNumber(firstStep?.fromAmount, 3);
+  const toAmount = decimalNumber(lastStep?.toAmount, 3);
+
+  return (
+    <SecondaryPage
+      textField={false}
+      title="Swap"
+      onBack={onBack}
+      Footer={
+        <Footer>
+          <Button
+            fullWidth
+            loading={loading}
+            type="primary"
+            variant="contained"
+            onClick={onConfirm}
+            disabled={confirmDisabled}
+          >
+            Confirm
+          </Button>
+        </Footer>
+      }
+      Content={
+        <>
+          <Typography variant="h6" mb={12}>
+            Confirm swap {fromAmount} {lastStep?.from.symbol} (
+            {firstStep?.from.blockchain}) to {toAmount} {lastStep?.to.symbol}{' '}
+            (on {lastStep?.to.blockchain})
+          </Typography>
+          {requiredWallets.map((wallet, index) => {
+            const list = selectableWallets.filter((w) => wallet === w.chain);
+            return (
+              <div key={index}>
+                <Typography variant="body2" mb={12} mt={12}>
+                  {index + 1}) Your {wallet} Wallet
+                </Typography>
+                {list.length === 0 && (
+                  <AlertContainer>
+                    <Alert
+                      type="error"
+                      description={`You should connect a ${wallet} supported wallet`}
+                    />
+                  </AlertContainer>
+                )}
+                {list.length != 0 && (
+                  <SelectableWalletList list={list} onChange={onChange} />
+                )}
+              </div>
+            );
+          })}
+        </>
+      }
+    />
+  );
+}

package/src/containers/ConfirmWallets/index.ts

@@ -0,0 +1 @@
+export { ConfirmWallets } from './ConfirmWallets';

package/src/containers/ConfirmWallets/mock.ts

@@ -0,0 +1,222 @@
+import { WalletType } from '@rango-dev/wallets-shared';
+import { RoutingResultType } from 'rango-sdk';
+import { BestRouteType } from '../../types/swaps';
+import { SelectableWallet } from './types';
+
+export const bestRoute: BestRouteType = {
+  from: { blockchain: 'BSC', symbol: 'BNB', address: null },
+  to: { blockchain: 'AVAX_CCHAIN', symbol: 'AVAX', address: null },
+  requestAmount: '0.3',
+  requestId: '228529e3-27d7-4fa9-ab84-bb2b90eade6f',
+  result: {
+    resultType: RoutingResultType.OK,
+    outputAmount: '5.685715974132648891',
+    swaps: [
+      {
+        swapperId: 'AnySwap Aggregator',
+        swapperType: 'AGGREGATOR',
+        swapperLogo: 'https://api.rango.exchange/swappers/multichain.png',
+
+        from: {
+          symbol: 'BNB',
+          logo: 'https://api.rango.exchange/i/Y3v1KW',
+          blockchainLogo: 'https://api.rango.exchange/blockchains/binance.svg',
+
+          address: null,
+          blockchain: 'BSC',
+          decimals: 18,
+          usdPrice: 279.2738558274085,
+        },
+        to: {
+          symbol: 'WETH.E',
+          logo: 'https://api.rango.exchange/i/j9xgdC',
+          blockchainLogo:
+            'https://api.rango.exchange/blockchains/avax_cchain.svg',
+
+          address: '0x49d5c2bdffac6ce2bfdb6640f4f80f226bc10bab',
+          blockchain: 'AVAX_CCHAIN',
+          decimals: 18,
+          usdPrice: 1329.24,
+        },
+        fromAmount: '0.300000000000000000',
+        fromAmountPrecision: null,
+        fromAmountMinValue: '0.047579322466294684272760',
+        fromAmountMaxValue: '79302.26195302606417382090',
+        fromAmountRestrictionType: 'INCLUSIVE',
+        toAmount: '0.062064305934309070',
+        fee: [
+          {
+            asset: { blockchain: 'BSC', symbol: 'BNB', address: null },
+            expenseType: 'FROM_SOURCE_WALLET',
+            amount: '0.001388002000000000',
+            name: 'Network Fee',
+          },
+        ],
+        estimatedTimeInSeconds: 300,
+        swapChainType: 'INTRA_CHAIN',
+        routes: null,
+        recommendedSlippage: null,
+        timeStat: { min: 162, avg: 260, max: 467 },
+        includesDestinationTx: false,
+        maxRequiredSign: 1,
+        warnings: [],
+      },
+      {
+        swapperId: 'PangolinSwap',
+        swapperLogo: 'https://api.rango.exchange/swappers/pangolin.png',
+        swapperType: 'DEX',
+        from: {
+          symbol: 'WETH.E',
+          logo: 'https://api.rango.exchange/i/j9xgdC',
+          address: '0x49d5c2bdffac6ce2bfdb6640f4f80f226bc10bab',
+          blockchain: 'AVAX_CCHAIN',
+          decimals: 18,
+          usdPrice: 1329.24,
+          blockchainLogo:
+            'https://api.rango.exchange/blockchains/avax_cchain.svg',
+        },
+        to: {
+          symbol: 'AVAX',
+          logo: 'https://api.rango.exchange/i/kX4edQ',
+          address: null,
+          blockchain: 'AVAX_CCHAIN',
+          decimals: 18,
+          usdPrice: 12.5,
+          blockchainLogo:
+            'https://api.rango.exchange/blockchains/avax_cchain.svg',
+        },
+        fromAmount: '0.062064305934309070',
+        fromAmountPrecision: null,
+        fromAmountMinValue: null,
+        fromAmountMaxValue: null,
+        fromAmountRestrictionType: 'EXCLUSIVE',
+        toAmount: '5.685715974132648891',
+        fee: [
+          {
+            asset: {
+              blockchain: 'AVAX_CCHAIN',
+              symbol: 'WETH.E',
+              address: '0x49d5c2bdffac6ce2bfdb6640f4f80f226bc10bab',
+            },
+            name: 'Network Fee',
+            expenseType: 'DECREASE_FROM_OUTPUT',
+            amount:
+              '0.00018619291780292721387591870688029381530892436558133340440690517425537109375',
+          },
+          {
+            asset: { blockchain: 'AVAX_CCHAIN', symbol: 'AVAX', address: null },
+            expenseType: 'FROM_SOURCE_WALLET',
+            amount: '0.005370022532678750',
+            name: 'Network Fee',
+          },
+        ],
+        estimatedTimeInSeconds: 45,
+        swapChainType: 'INTER_CHAIN',
+        routes: [
+          {
+            nodes: [
+              {
+                nodes: [
+                  {
+                    marketName: 'PangolinSwap',
+                    marketId: 'PangolinSwap',
+                    percent: 1.0,
+                  },
+                ],
+                from: 'WETH.e',
+                fromLogo: '',
+                fromAddress: '0x49d5c2bdffac6ce2bfdb6640f4f80f226bc10bab',
+                fromBlockchain: 'AVAX_CCHAIN',
+                to: 'WAVAX',
+                toLogo: '',
+                toAddress: '0xb31f66aa3c1e785363f0875a1b74e27b85fd66c7',
+                toBlockchain: 'AVAX_CCHAIN',
+              },
+            ],
+          },
+        ],
+        recommendedSlippage: null,
+        timeStat: { min: 6, avg: 39, max: 317 },
+        includesDestinationTx: false,
+        maxRequiredSign: 1,
+        warnings: [],
+      },
+    ],
+  },
+  validationStatus: null,
+  missingBlockchains: [],
+  diagnosisMessages: [],
+  walletNotSupportingFromBlockchain: false,
+  processingLimitReached: false,
+};
+
+export const wallets: SelectableWallet[] = [
+  {
+    walletType: WalletType.META_MASK,
+    address: '0x5423e28219d6d568dcf62a8134d623e6f4a1c2df',
+    image: 'https://app.rango.exchange/wallets/metamask.svg',
+    chain: 'BSC',
+    selected: false,
+  },
+  {
+    walletType: WalletType.OKX,
+    address: '0x2702d89c1c8658b49c45dd460deebcc45faec03c',
+    image: 'https://app.rango.exchange/wallets/okx.png',
+    chain: 'BSC',
+    selected: false,
+  },
+
+  {
+    walletType: WalletType.KEPLR,
+    address: 'osmo1unf2rcytjxfpz8x8ar63h4qeftadptg5t0nqcl',
+    image: 'https://app.rango.exchange/wallets/keplr.png',
+    chain: 'OSMOSIS',
+    selected: false,
+  },
+];
+
+export const exampleFor5Wallets: SelectableWallet[] = [
+  {
+    walletType: WalletType.META_MASK,
+    address: '0x5423e28219d6d568dcf62a8134d623e6f4a1c2df',
+    image: 'https://app.rango.exchange/wallets/metamask.svg',
+    selected: false,
+    chain: 'BSC',
+  },
+  {
+    walletType: WalletType.OKX,
+    address: '0x2702d89c1c8658b49c45dd460deebcc45faec03c',
+    image: 'https://app.rango.exchange/wallets/okx.png',
+    selected: false,
+    chain: 'BSC',
+  },
+  {
+    walletType: WalletType.EXODUS,
+    address: '0x2702d89c1c8658b49c45dd460deebcc45faec03c',
+    image: 'https://app.rango.exchange/wallets/exodus.png',
+    selected: false,
+    chain: 'BSC',
+  },
+  {
+    walletType: WalletType.MATH,
+    address: '0x2702d89c1c8658b49c45dd460deebcc45faec03c',
+    image: 'https://app.rango.exchange/wallets/math-wallet.png',
+    selected: false,
+    chain: 'BSC',
+  },
+  {
+    walletType: WalletType.CLOVER,
+    address: '0x2702d89c1c8658b49c45dd460deebcc45faec03c',
+    image: 'https://app.rango.exchange/wallets/clover.jpeg',
+    selected: false,
+    chain: 'BSC',
+  },
+
+  {
+    walletType: WalletType.KEPLR,
+    address: 'osmo1unf2rcytjxfpz8x8ar63h4qeftadptg5t0nqcl',
+    image: 'https://app.rango.exchange/wallets/keplr.png',
+    selected: false,
+    chain: 'OSMOSIS',
+  },
+];