@rango-dev/ui 0.1.10-next.91 → 0.1.10

package/src/theme.ts

@@ -44,6 +44,8 @@ const theme = {
     error300: '#FF3333',
     error500: '#FF0000',
     error700: '#E60000',
+    // Only use this color when you are going to use white for both dark and light theme.
+    white: '#fff',
   },
   space: {
     2: '2px',
@@ -98,8 +100,8 @@ const theme = {
   borderWidths: {},
   borderStyles: {},
   radii: {
-    5: '5px',
-    10: '10px',
+    5: '8px',
+    10: '12px',
   },
   shadows: {
     s: '0px 3px 5px 3px #f0f2f5, 0px 6px 10px 3px #f0f2f5, 0px 1px 18px 3px #f0f2f5',

package/src/types/meta.ts

@@ -18,3 +18,5 @@ export interface LiquiditySource {
   type: 'BRIDGE' | 'AGGREGATOR' | 'DEX';
   selected: boolean;
 }
+
+export type LoadingStatus = 'loading' | 'success' | 'failed';

package/dist/containers/ConfirmWallets/ConfirmWallets.d.ts

@@ -1,18 +0,0 @@
-import { BestRouteResponse } from 'rango-sdk';
-import React, { PropsWithChildren } from 'react';
-import { SelectableWallet } from '../../types';
-export interface PropTypes {
-    swap: BestRouteResponse | null;
-    fromAmount: string;
-    toAmount: string;
-    onBack: () => void;
-    onConfirm?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
-    confirmDisabled?: boolean;
-    loading?: boolean;
-    requiredWallets: string[];
-    selectableWallets: SelectableWallet[];
-    onChange: (w: SelectableWallet) => void;
-    isExperimentalChain?: (wallet: string) => boolean;
-    handleConnectChain?: (wallet: string) => void;
-}
-export declare function ConfirmWallets(props: PropsWithChildren<PropTypes>): JSX.Element;

package/dist/containers/ConfirmWallets/ConfirmWallets.stories.d.ts

@@ -1,6 +0,0 @@
-import React from 'react';
-import { PropTypes } from './ConfirmWallets';
-declare const _default: import("@storybook/csf").ComponentAnnotations<import("@storybook/react").ReactFramework, React.PropsWithChildren<PropTypes>>;
-export default _default;
-export declare const Main: (props: PropTypes) => JSX.Element;
-export declare const With5Wallets: (props: PropTypes) => JSX.Element;

package/dist/containers/ConfirmWallets/index.d.ts

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

package/dist/containers/ConfirmWallets/mock.d.ts

@@ -1,5 +0,0 @@
-import { BestRouteType } from '../../types/swaps';
-import { SelectableWallet } from './types';
-export declare const bestRoute: BestRouteType;
-export declare const wallets: SelectableWallet[];
-export declare const exampleFor5Wallets: SelectableWallet[];

package/dist/helper/swaps.d.ts

@@ -1,5 +0,0 @@
-import { PendingSwap } from '../containers/History/types';
-export declare function groupingOfSwaps(list: PendingSwap[]): {
-    title: string;
-    swaps: PendingSwap[];
-}[];

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

@@ -1,26 +0,0 @@
-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

@@ -1,118 +0,0 @@
-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 { styled } from '../../theme';
-import { SelectableWallet } from '../../types';
-
-const Footer = styled('div', {
-  display: 'flex',
-  alignItems: 'center',
-});
-
-const AlertContainer = styled('div', {
-  padding: '$16 0',
-});
-
-const ConfirmButton = styled(Button, {
-  marginTop: '$16',
-});
-
-export interface PropTypes {
-  swap: BestRouteResponse | null;
-  fromAmount: string;
-  toAmount: string;
-  onBack: () => void;
-  onConfirm?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
-  confirmDisabled?: boolean;
-  loading?: boolean;
-  requiredWallets: string[];
-  selectableWallets: SelectableWallet[];
-  onChange: (w: SelectableWallet) => void;
-  isExperimentalChain?: (wallet: string) => boolean;
-  handleConnectChain?: (wallet: string) => void;
-}
-export function ConfirmWallets(props: PropsWithChildren<PropTypes>) {
-  const {
-    onBack,
-    loading,
-    onConfirm,
-    swap,
-    requiredWallets,
-    selectableWallets,
-    onChange,
-    confirmDisabled,
-    isExperimentalChain,
-    handleConnectChain,
-    fromAmount,
-    toAmount,
-  } = props;
-
-  const firstStep = swap?.result?.swaps[0];
-  const lastStep = swap?.result?.swaps[swap.result?.swaps.length - 1];
-
-  return (
-    <SecondaryPage
-      textField={false}
-      title="Confirm Swap"
-      onBack={onBack}
-      Footer={
-        <Footer>
-          <ConfirmButton
-            fullWidth
-            loading={loading}
-            type="primary"
-            variant="contained"
-            onClick={onConfirm}
-            disabled={confirmDisabled}
-          >
-            Confirm
-          </ConfirmButton>
-        </Footer>
-      }
-    >
-      <>
-        <Typography variant="h6" mb={12}>
-          Confirm swap {fromAmount} {firstStep?.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">
-                      <Typography variant="body2">{`You should connect a ${wallet} supported wallet`}</Typography>
-                    </Alert>
-                  </AlertContainer>
-                  {isExperimentalChain?.(wallet) && (
-                    <Button
-                      variant="contained"
-                      type="primary"
-                      align="grow"
-                      onClick={() => handleConnectChain?.(wallet)}
-                    >
-                      {`Add ${wallet} chain to Cosmos wallets`}
-                    </Button>
-                  )}
-                </>
-              )}
-              {list.length != 0 && (
-                <SelectableWalletList list={list} onChange={onChange} />
-              )}
-            </div>
-          );
-        })}
-      </>
-    </SecondaryPage>
-  );
-}

package/src/containers/ConfirmWallets/index.ts

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

package/src/containers/ConfirmWallets/mock.ts

@@ -1,222 +0,0 @@
-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',
-  },
-];

package/src/helper/swaps.ts

@@ -1,23 +0,0 @@
-import { PendingSwap } from '../containers/History/types';
-
-export function groupingOfSwaps(list: PendingSwap[]) {
-  return list.reduce(
-    (acc: Array<{ title: string; swaps: PendingSwap[] }>, swap) => {
-      const categoryIndex = acc.findIndex(
-        (item) =>
-          (swap.status === 'running' && item.title == 'Active Swaps') ||
-          (swap.status !== 'running' && item.title == 'Recent Swaps')
-      );
-      if (categoryIndex > -1) {
-        acc[categoryIndex].swaps.push(swap);
-      } else {
-        acc.push({
-          title: swap.status === 'running' ? 'Active Swaps' : 'Recent Swaps',
-          swaps: [swap],
-        });
-      }
-      return acc;
-    },
-    []
-  );
-}