@rango-dev/ui 0.1.10-next.102

package/src/components/Wallet/Wallet.stories.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import { ComponentMeta } from '@storybook/react';
+
+import { PropTypes, Wallet } from './Wallet';
+import { WalletState } from '../../types/wallet';
+
+export default {
+  title: 'Wallet chip',
+  component: Wallet,
+  argTypes: {
+    title: {
+      name: 'title',
+      type: 'string',
+      defaultValue: 'Coinbase',
+    },
+    image: {
+      name: 'image',
+      type: 'string',
+      defaultValue: 'https://app.rango.exchange/wallets/coinbase.svg',
+    },
+    disabled: {
+      name: 'disabled',
+      type: 'boolean',
+      defaultValue: false,
+    },
+    state: {
+      name: 'wallet state',
+      control: {
+        type: 'select',
+      },
+      options: Object.values(WalletState),
+    },
+  },
+} as ComponentMeta<typeof Wallet>;
+
+export const Main = (args: PropTypes) => <Wallet {...args}></Wallet>;

package/src/components/Wallet/Wallet.tsx

@@ -0,0 +1,69 @@
+import { detectInstallLink, WalletType } from '@rango-dev/wallets-shared';
+import React from 'react';
+
+import { styled } from '../../theme';
+import { WalletInfo, WalletState } from '../../types/wallet';
+import { Button } from '../Button/Button';
+import { Typography } from '../Typography';
+import { State } from './State';
+
+const WalletImage = styled('img', {
+  width: '$24',
+  height: '$24',
+  marginRight: '$12',
+});
+const Text = styled('div', {
+  display: 'flex',
+  flexDirection: 'column',
+});
+
+const ExtendedButton = styled(Button, {
+  variants: {
+    type: {
+      primary: {
+        outline: '1px solid $primary',
+        borderColor: '$primary',
+
+        '&:hover': {
+          borderColor: '$primary',
+        },
+      },
+    },
+  },
+});
+
+export type PropTypes = WalletInfo & {
+  onClick: (walletType: WalletType) => void;
+};
+
+export function Wallet(props: PropTypes) {
+  const { name, type, image, state, onClick, installLink } = props;
+
+  return (
+    <ExtendedButton
+      type={state === WalletState.CONNECTED ? 'primary' : undefined}
+      disabled={state == WalletState.CONNECTING}
+      onClick={() => {
+        if (state === WalletState.NOT_INSTALLED) {
+          window.open(detectInstallLink(installLink), '_blank');
+        } else onClick(type);
+      }}
+      align="start"
+      variant="outlined"
+      size="large"
+      prefix={<WalletImage src={image} />}
+      suffix={<State walletState={state} installLink={installLink} />}
+    >
+      <Text>
+        <Typography variant="h5" noWrap={false}>
+          {name}
+        </Typography>
+        {state === WalletState.CONNECTED ? (
+          <Typography variant="caption" noWrap={false} color="primary">
+            Connected
+          </Typography>
+        ) : null}
+      </Text>
+    </ExtendedButton>
+  );
+}

package/src/components/Wallet/index.ts

@@ -0,0 +1 @@
+export * from './Wallet';

package/src/components/common/FilledCircle.tsx

@@ -0,0 +1,8 @@
+import { styled } from '../../theme';
+
+export const FilledCircle = styled('span', {
+  width: '10px',
+  height: '10px',
+  backgroundColor: '$primary',
+  borderRadius: '99999px',
+});

package/src/components/common/index.ts

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

package/src/components/index.ts

@@ -0,0 +1,31 @@
+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';
+export * from './ColorPicker';
+export * from './Radio';
+export * from './TokenList';
+export * from './common';
+export * from './Drawer';
+export * from './Header';
+export * from './Divider';

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

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

package/src/containers/ConfirmSwap/ConfirmSwap.tsx

@@ -0,0 +1,180 @@
+import React, { PropsWithChildren, ReactNode } from 'react';
+import { Alert, Spacer } 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 $neutrals400',
+});
+
+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: '$neutrals300',
+    display: 'inline-flex',
+    width: '24px',
+    height: '24px',
+    color: '$neutrals800',
+    borderRadius: '50%',
+    fontSize: '$14',
+    border: '1px solid $neutrals400',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});
+
+const Alerts = styled('div', { paddingBottom: '$16' });
+
+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?: ReactNode[];
+  warnings?: ReactNode[];
+  extraMessages?: ReactNode;
+}
+export function ConfirmSwap(props: PropsWithChildren<PropTypes>) {
+  const {
+    onBack,
+    loading,
+    onConfirm,
+    requiredWallets,
+    selectableWallets,
+    onChange,
+    confirmDisabled,
+    isExperimentalChain,
+    handleConnectChain,
+    confirmButtonTitle,
+    errors,
+    warnings,
+    extraMessages,
+  } = props;
+
+  return (
+    <SecondaryPage
+      textField={false}
+      title="Confirm Swap"
+      onBack={onBack}
+      Footer={
+        <Footer>
+          <ConfirmButton
+            fullWidth
+            loading={loading}
+            type="primary"
+            variant="contained"
+            onClick={onConfirm}
+            disabled={confirmDisabled}
+          >
+            {confirmButtonTitle}
+          </ConfirmButton>
+        </Footer>
+      }
+    >
+      <MainContainer>
+        <div>
+          {extraMessages || null}
+          <Alerts>
+            {errors?.map((error, index) => (
+              <>
+                <Spacer direction="vertical" />
+                <Alert type="error" key={index}>
+                  {error}
+                </Alert>
+              </>
+            ))}
+            {warnings?.map((warning, index) => (
+              <>
+                <Spacer direction="vertical" />
+                <Alert type="warning" key={index}>
+                  {warning}
+                </Alert>
+              </>
+            ))}
+          </Alerts>
+        </div>
+        {props.previewInputs || props.previewRoutes ? (
+          <Section>
+            {props.previewInputs}
+            {!!props.previewRoutes ? (
+              <Spacer size={16} direction="vertical" />
+            ) : 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>
+                <Spacer size={8} />
+                <Typography variant="body2">Your {wallet} Wallet</Typography>
+              </div>
+              {list.length === 0 && (
+                <>
+                  <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={onChange} />
+              )}
+            </Container>
+          );
+        })}
+      </MainContainer>
+    </SecondaryPage>
+  );
+}

package/src/containers/ConfirmSwap/index.ts

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

package/src/containers/ConfirmSwap/mock.ts

@@ -0,0 +1,223 @@
+// @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: 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/containers/History/History.stories.tsx

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