@rango-dev/ui 0.15.1-next.2 → 0.15.1-next.4

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

@@ -1,66 +0,0 @@
-import { Meta } from '@storybook/react';
-import { ConfirmSwap, PropTypes } from './ConfirmSwap';
-import { exampleFor5Wallets, wallets, bestRoute } from './mock';
-import React from 'react';
-import { Divider, RoutesOverview, TokenPreview } from '../../';
-
-const previewInputs = () => (
-  <>
-    <TokenPreview
-      chain={{
-        displayName: bestRoute?.result?.swaps[0].from.blockchain || '',
-        logo: bestRoute?.result?.swaps[0].from.blockchainLogo || '',
-      }}
-      token={{
-        symbol: bestRoute?.result?.swaps[0].from.symbol || '',
-        image: bestRoute?.result?.swaps[0].from.logo || '',
-      }}
-      usdValue={'2'}
-      loadingStatus="success"
-      amount={'2.99'}
-      label="From"
-    />
-    <Divider size={12} />
-    <TokenPreview
-      chain={{
-        displayName: bestRoute?.result?.swaps[0].to.blockchain || '',
-        logo: bestRoute?.result?.swaps[0].to.blockchainLogo || '',
-      }}
-      token={{
-        symbol: bestRoute?.result?.swaps[0].to.symbol || '',
-        image: bestRoute?.result?.swaps[0].to.logo || '',
-      }}
-      usdValue={'2'}
-      loadingStatus="success"
-      amount={'2.99'}
-      label="To"
-    />
-  </>
-);
-
-export default {
-  title: 'Containers/ConfirmSwap',
-  component: ConfirmSwap,
-  args: {
-    requiredWallets: ['BSC', 'OSMOSIS'],
-    confirmButtonTitle: 'confirm',
-  },
-} as Meta<typeof ConfirmSwap>;
-
-export const Main = (props: PropTypes) => (
-  <ConfirmSwap
-    {...props}
-    selectableWallets={wallets}
-    previewInputs={<>{previewInputs()}</>}
-    previewRoutes={<RoutesOverview routes={bestRoute} totalFee={'0.32'} />}
-  />
-);
-
-export const With5Wallets = (props: PropTypes) => (
-  <ConfirmSwap
-    {...props}
-    selectableWallets={exampleFor5Wallets}
-    previewInputs={<>{previewInputs()}</>}
-    previewRoutes={<RoutesOverview routes={bestRoute} totalFee={'0.32'} />}
-  />
-);

package/src/containers/ConfirmSwap/ConfirmSwap.tsx

@@ -1,247 +0,0 @@
-import React, { PropsWithChildren, ReactNode } from 'react';
-import { Alert, Checkbox, Divider, TextField } 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 MainContainer = styled('div', {
-  overflowY: 'auto',
-});
-
-const Section = styled('div', {
-  paddingBottom: '$32',
-  marginBottom: '$32',
-  borderBottom: '1px solid $neutral400',
-});
-
-const Footer = styled('div', {
-  display: 'flex',
-  alignItems: 'center',
-});
-
-const AlertContainer = styled('div', {
-  padding: '$16 0',
-});
-
-const ConfirmButton = styled(Button, {
-  marginTop: '$16',
-});
-
-const Container = styled('div', {
-  paddingBottom: '$24',
-
-  '.title': {
-    paddingBottom: '$8',
-    display: 'flex',
-    alignItems: 'center',
-  },
-  '.num': {
-    backgroundColor: '$neutral100',
-    display: 'inline-flex',
-    width: '24px',
-    height: '24px',
-    color: '$neutral800',
-    borderRadius: '50%',
-    fontSize: '$14',
-    border: '1px solid $neutral400',
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-});
-
-const Alerts = styled('div', { paddingBottom: '$16' });
-
-type Message = string | ReactNode;
-
-export interface PropTypes {
-  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;
-  previewInputs?: ReactNode;
-  previewRoutes?: ReactNode;
-  confirmButtonTitle: string;
-  errors?: Message[];
-  warnings?: Message[];
-  extraMessages?: ReactNode;
-  customDestination?: string;
-  checkedDestination: boolean;
-  setDestinationChain: (chain: string) => void;
-  setCustomDestination: (customDestination: string) => void;
-  customDestinationEnabled?: boolean;
-  isValidCustomDestination: (blockchain: string, address: string) => boolean;
-  isWalletRequired?: boolean;
-}
-export function ConfirmSwap(props: PropsWithChildren<PropTypes>) {
-  const {
-    onBack,
-    loading,
-    onConfirm,
-    requiredWallets,
-    selectableWallets,
-    onChange,
-    confirmDisabled,
-    isExperimentalChain,
-    handleConnectChain,
-    confirmButtonTitle,
-    errors,
-    warnings,
-    extraMessages,
-    customDestination,
-    setCustomDestination,
-    checkedDestination,
-    setDestinationChain,
-    customDestinationEnabled = true,
-    isValidCustomDestination,
-    isWalletRequired,
-  } = props;
-
-  return (
-    <SecondaryPage
-      textField={false}
-      title="Confirm Swap"
-      onBack={onBack}
-      Footer={
-        <Footer>
-          <ConfirmButton
-            fullWidth
-            loading={loading}
-            type="primary"
-            variant="contained"
-            onClick={onConfirm}
-            disabled={
-              confirmDisabled ||
-              (!!customDestination &&
-                !isValidCustomDestination(
-                  requiredWallets[requiredWallets.length - 1],
-                  customDestination,
-                ))
-            }>
-            {confirmButtonTitle}
-          </ConfirmButton>
-        </Footer>
-      }>
-      <MainContainer>
-        <div>
-          {extraMessages || null}
-          <Alerts>
-            {errors?.map((error, index) => (
-              <React.Fragment key={index}>
-                <Divider />
-                <Alert
-                  type="error"
-                  key={index}
-                  {...(typeof error === 'string' ? { title: error } : { children: error })}
-                />
-              </React.Fragment>
-            ))}
-            {warnings?.map((warning, index) => (
-              <React.Fragment key={index}>
-                <Divider />
-                <Alert
-                  type="warning"
-                  key={index}
-                  {...(typeof warning === 'string' ? { title: warning } : { children: warning })}
-                />
-              </React.Fragment>
-            ))}
-          </Alerts>
-        </div>
-        {props.previewInputs || props.previewRoutes ? (
-          <Section>
-            {props.previewInputs}
-            {!!props.previewRoutes ? <Divider size={16} /> : null}
-            {props.previewRoutes}
-          </Section>
-        ) : null}
-        {requiredWallets.map((wallet, index) => {
-          const list = selectableWallets.filter((w) => wallet === w.chain);
-          return (
-            <Container key={index}>
-              <div className="title">
-                <div className="num">{index + 1}</div>
-                <Divider size={8} direction="horizontal" />
-                <Typography variant="body2">Your {wallet} Wallet</Typography>
-              </div>
-              {list.length === 0 &&
-                (isWalletRequired || (!isWalletRequired && !checkedDestination)) && (
-                  <>
-                    <AlertContainer>
-                      <Alert type="error">
-                        You need to connect a compatible wallet with {wallet}.
-                      </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={(w) => {
-                    onChange(w);
-                    setDestinationChain('');
-                    setCustomDestination('');
-                  }}
-                />
-              )}
-              {index === requiredWallets.length - 1 && customDestinationEnabled && (
-                <>
-                  <Divider />
-                  <Checkbox
-                    label={`Choose a custom ${wallet} address`}
-                    checked={checkedDestination}
-                    onCheckedChange={(checked) => {
-                      if (!checked) {
-                        setDestinationChain('');
-                        setCustomDestination('');
-                        list.length && onChange(list[0]);
-                      } else {
-                        setDestinationChain(wallet);
-                      }
-                    }}
-                    id={'custom_destination'}
-                  />
-                  <Divider />
-
-                  {checkedDestination && (
-                    <>
-                      <TextField
-                        placeholder="Your destination address"
-                        value={customDestination}
-                        onChange={(e) => {
-                          setCustomDestination(e.target.value);
-                        }}
-                      />
-                      {!!customDestination &&
-                        !isValidCustomDestination(wallet, customDestination) && (
-                          <AlertContainer>
-                            <Alert type="error">Not a valid {wallet} address.</Alert>
-                          </AlertContainer>
-                        )}
-                    </>
-                  )}
-                </>
-              )}
-            </Container>
-          );
-        })}
-      </MainContainer>
-    </SecondaryPage>
-  );
-}

package/src/containers/ConfirmSwap/index.ts

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

package/src/containers/ConfirmSwap/mock.ts

@@ -1,220 +0,0 @@
-// @ts-nocheck
-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: WalletTypes.META_MASK,
-    address: '0x5423e28219d6d568dcf62a8134d623e6f4a1c2df',
-    image: 'https://app.rango.exchange/wallets/metamask.svg',
-    chain: 'BSC',
-    selected: false,
-  },
-  {
-    walletType: WalletTypes.OKX,
-    address: '0x2702d89c1c8658b49c45dd460deebcc45faec03c',
-    image: 'https://app.rango.exchange/wallets/okx.png',
-    chain: 'BSC',
-    selected: false,
-  },
-
-  {
-    walletType: WalletTypes.KEPLR,
-    address: 'osmo1unf2rcytjxfpz8x8ar63h4qeftadptg5t0nqcl',
-    image: 'https://app.rango.exchange/wallets/keplr.png',
-    chain: 'OSMOSIS',
-    selected: false,
-  },
-];
-
-export const exampleFor5Wallets: SelectableWallet[] = [
-  {
-    walletType: WalletTypes.META_MASK,
-    address: '0x5423e28219d6d568dcf62a8134d623e6f4a1c2df',
-    image: 'https://app.rango.exchange/wallets/metamask.svg',
-    selected: false,
-    chain: 'BSC',
-  },
-  {
-    walletType: WalletTypes.OKX,
-    address: '0x2702d89c1c8658b49c45dd460deebcc45faec03c',
-    image: 'https://app.rango.exchange/wallets/okx.png',
-    selected: false,
-    chain: 'BSC',
-  },
-  {
-    walletType: WalletTypes.EXODUS,
-    address: '0x2702d89c1c8658b49c45dd460deebcc45faec03c',
-    image: 'https://app.rango.exchange/wallets/exodus.png',
-    selected: false,
-    chain: 'BSC',
-  },
-  {
-    walletType: WalletTypes.MATH,
-    address: '0x2702d89c1c8658b49c45dd460deebcc45faec03c',
-    image: 'https://app.rango.exchange/wallets/math-wallet.png',
-    selected: false,
-    chain: 'BSC',
-  },
-  {
-    walletType: WalletTypes.CLOVER,
-    address: '0x2702d89c1c8658b49c45dd460deebcc45faec03c',
-    image: 'https://app.rango.exchange/wallets/clover.jpeg',
-    selected: false,
-    chain: 'BSC',
-  },
-
-  {
-    walletType: WalletTypes.KEPLR,
-    address: 'osmo1unf2rcytjxfpz8x8ar63h4qeftadptg5t0nqcl',
-    image: 'https://app.rango.exchange/wallets/keplr.png',
-    selected: false,
-    chain: 'OSMOSIS',
-  },
-];

package/src/containers/History/History.stories.tsx

@@ -1,14 +0,0 @@
-import React from 'react';
-import { Meta } from '@storybook/react';
-
-import { History, PropTypes } from './History';
-import { pendingSwap } from './mock';
-
-export default {
-  title: 'Containers/History',
-  component: History,
-} as Meta<typeof History>;
-
-export const Main = (props: PropTypes) => (
-  <History {...props} list={pendingSwap} />
-);

package/src/containers/History/History.tsx

@@ -1,72 +0,0 @@
-import React, { PropsWithChildren } from 'react';
-import { Spinner } from '../../components';
-import { SecondaryPage } from '../../components/SecondaryPage';
-import { containsText } from '../../helper';
-import { styled } from '../../theme';
-import { PendingSwap } from './types';
-import { NotFoundAlert } from '../../components/Alert/NotFoundAlert';
-import { SwapsGroup, PropTypes as SwapsGroupPropTypes } from './SwapsGroup';
-import { LoaderContainer } from '../TokenSelector/TokenSelector';
-
-const Container = styled('div', {
-  overflowY: 'auto',
-});
-const filteredHistory = (
-  list: PendingSwap[],
-  searchedFor: string
-): PendingSwap[] => {
-  return list.filter((swap) => {
-    const firstStep = swap.steps[0];
-    const lastStep = swap.steps[swap.steps.length - 1];
-    return (
-      containsText(firstStep.fromBlockchain, searchedFor) ||
-      containsText(firstStep.fromSymbol, searchedFor) ||
-      containsText(lastStep.toBlockchain, searchedFor) ||
-      containsText(lastStep.toSymbol, searchedFor) ||
-      containsText(swap.requestId, searchedFor)
-    );
-  });
-};
-
-export type PropTypes = SwapsGroupPropTypes & { loading: boolean };
-
-export function History(props: PropsWithChildren<PropTypes>) {
-  const { list = [], onBack, onSwapClick, groupBy, loading } = props;
-
-  return (
-    <SecondaryPage
-      onBack={onBack}
-      textField={true}
-      textFieldPlaceholder="Search by blockchain, token or request Id"
-      title="Swaps"
-    >
-      {(searchedFor) => {
-        const filterSwaps = filteredHistory(list, searchedFor);
-        return (
-          <>
-            {loading && (
-              <LoaderContainer>
-                <Spinner size={24} />
-              </LoaderContainer>
-            )}
-            <Container>
-              {!loading && (
-                <>
-                  {filterSwaps.length ? (
-                    <SwapsGroup
-                      list={filterSwaps}
-                      onSwapClick={onSwapClick}
-                      groupBy={groupBy}
-                    />
-                  ) : (
-                    <NotFoundAlert catergory="Swap" />
-                  )}
-                </>
-              )}
-            </Container>
-          </>
-        );
-      }}
-    </SecondaryPage>
-  );
-}

package/src/containers/History/SwapsGroup.tsx

@@ -1,59 +0,0 @@
-import { PendingSwap } from '@rango-dev/queue-manager-rango-preset';
-import React from 'react';
-import { Typography, SwapDetail, Divider } from '../../components';
-import { styled } from '../../theme';
-
-const Group = styled('div', {
-  '.group-title': {
-    textTransform: 'uppercase',
-  },
-});
-
-export type GroupBy = (list: PendingSwap[]) => {
-  title: string;
-  swaps: PendingSwap[];
-}[];
-
-export interface PropTypes {
-  list: PendingSwap[];
-  onBack: () => void;
-  onSwapClick: (requestId: string) => void;
-  groupBy?: GroupBy;
-}
-
-export function SwapsGroup(props: Omit<PropTypes, 'onBack'>) {
-  const { list, onSwapClick, groupBy } = props;
-  const groups = groupBy ? groupBy(list) : [{ title: 'History', swaps: list }];
-
-  return (
-    <>
-      {groups
-        .filter((group) => group.swaps.length > 0)
-        .map((group, index) => (
-          <React.Fragment key={index}>
-            <Group>
-              <Typography
-                variant="body2"
-                color="neutral600"
-                className="group-title"
-              >
-                {group.title}
-              </Typography>
-              {group.swaps.map((swap: PendingSwap) => (
-                <React.Fragment
-                    key={swap.requestId}>
-                  <SwapDetail
-                    swap={swap}
-                    status={swap.status}
-                    onClick={onSwapClick}
-                  />
-                  <Divider size={12} />
-                </React.Fragment>
-              ))}
-            </Group>
-            <Divider size={24} />
-          </React.Fragment>
-        ))}
-    </>
-  );
-}

package/src/containers/History/index.ts

@@ -1,3 +0,0 @@
-export { History } from './History';
-export { SwapsGroup } from './SwapsGroup';
-export type { GroupBy } from './SwapsGroup';