@rango-dev/ui 0.1.10-next.69

package/src/components/SwapDetail/mock.ts

@@ -0,0 +1,275 @@
+import { RoutingResultType, TransactionType } from 'rango-sdk';
+import { PendingSwap } from '../../containers/History/types';
+
+export const swap: PendingSwap = {
+  creationTime: '1673164511955',
+  finishTime: '1673164550137',
+  requestId: '51e211d9-d61c-45d2-a4d4-1f9f7f90ee85',
+  inputAmount: '1',
+  wallets: {
+    OSMOSIS: {
+      walletType: 'keplr',
+      address: 'osmo1unf2rcytjxfpz8x8ar63h4qeftadptg5t0nqcl',
+    },
+  },
+  status: 'running',
+  isPaused: false,
+  extraMessage: null,
+  extraMessageSeverity: 'info',
+  extraMessageDetail: '',
+  extraMessageErrorCode: null,
+  networkStatusExtraMessage: null,
+  networkStatusExtraMessageDetail: null,
+  lastNotificationTime: null,
+  settings: {
+    slippage: '1.0',
+    disabledSwappersIds: [],
+    disabledSwappersGroups: [],
+  },
+  simulationResult: {
+    resultType: RoutingResultType.OK,
+    outputAmount: '1.540670',
+    swaps: [
+      {
+        swapperId: 'Osmosis',
+        swapperType: 'DEX',
+        swapperLogo: '',
+        from: {
+          symbol: 'JUNO',
+          logo: 'https://api.rango.exchange/tokens/COSMOS/JUNO.png',
+          address:
+            'ibc/46b44899322f3cd854d2d46deef881958467cdd4b3b10086da49296bbed94bed',
+          blockchain: 'OSMOSIS',
+          blockchainLogo: 'https://api.rango.exchange/swappers/osmosis.png',
+          decimals: 6,
+          usdPrice: 1.1091996179668873,
+        },
+        to: {
+          symbol: 'OSMO',
+          logo: 'https://api.rango.exchange/i/mJQPS2',
+          address: null,
+          blockchain: 'OSMOSIS',
+          decimals: 6,
+          blockchainLogo: 'https://api.rango.exchange/swappers/osmosis.png',
+          usdPrice: 0.7192435454440882,
+        },
+        fromAmount: '1.000000',
+        fromAmountPrecision: null,
+        fromAmountMinValue: null,
+        fromAmountMaxValue: null,
+        fromAmountRestrictionType: 'EXCLUSIVE',
+        toAmount: '1.540670',
+        fee: [
+          {
+            asset: {
+              blockchain: 'OSMOSIS',
+              symbol: 'OSMO',
+              address: null,
+            },
+            expenseType: 'FROM_SOURCE_WALLET',
+            name: 'Network Fee',
+            amount: '0',
+          },
+        ],
+        estimatedTimeInSeconds: 45,
+        swapChainType: 'INTRA_CHAIN',
+        routes: [
+          {
+            nodes: [
+              {
+                nodes: [
+                  {
+                    marketName: 'pool#498',
+                    marketId: null,
+                    percent: 1,
+                  },
+                ],
+                from: 'JUNO',
+                fromLogo: 'https://api.rango.exchange/tokens/COSMOS/JUNO.png',
+                fromAddress:
+                  'ibc/46b44899322f3cd854d2d46deef881958467cdd4b3b10086da49296bbed94bed',
+                fromBlockchain: 'OSMOSIS',
+                to: 'ATOM',
+                toLogo: 'https://api.rango.exchange/tokens/COSMOS/ATOM.png',
+                toAddress:
+                  'ibc/27394fb092d2eccd56123c74f36e4c1f926001ceada9ca97ea622b25f41e5eb2',
+                toBlockchain: 'OSMOSIS',
+              },
+              {
+                nodes: [
+                  {
+                    marketName: 'pool#8',
+                    marketId: null,
+                    percent: 1,
+                  },
+                ],
+                from: 'ATOM',
+                fromLogo: 'https://api.rango.exchange/tokens/COSMOS/ATOM.png',
+                fromAddress:
+                  'ibc/27394fb092d2eccd56123c74f36e4c1f926001ceada9ca97ea622b25f41e5eb2',
+                fromBlockchain: 'OSMOSIS',
+                to: 'IRIS',
+                toLogo: 'https://api.rango.exchange/tokens/COSMOS/IRIS.png',
+                toAddress:
+                  'ibc/7c4d60aa95e5a7558b0a364860979ca34b7ff8aaf255b87af9e879374470cec0',
+                toBlockchain: 'OSMOSIS',
+              },
+              {
+                nodes: [
+                  {
+                    marketName: 'pool#7',
+                    marketId: null,
+                    percent: 1,
+                  },
+                ],
+                from: 'IRIS',
+                fromLogo: 'https://api.rango.exchange/tokens/COSMOS/IRIS.png',
+                fromAddress:
+                  'ibc/7c4d60aa95e5a7558b0a364860979ca34b7ff8aaf255b87af9e879374470cec0',
+                fromBlockchain: 'OSMOSIS',
+                to: 'OSMO',
+                toLogo: 'https://api.rango.exchange/tokens/COSMOS/OSMO.png',
+                toAddress: null,
+                toBlockchain: 'OSMOSIS',
+              },
+            ],
+          },
+        ],
+        recommendedSlippage: null,
+        timeStat: {
+          min: 6,
+          avg: 40,
+          max: 241,
+        },
+        includesDestinationTx: false,
+        maxRequiredSign: 1,
+        warnings: [],
+      },
+    ],
+  },
+  validateBalanceOrFee: true,
+  steps: [
+    {
+      id: 1,
+      fromBlockchain: 'OSMOSIS',
+      fromSymbol: 'JUNO',
+      swapperType: 'test',
+      fromSymbolAddress:
+        'ibc/46b44899322f3cd854d2d46deef881958467cdd4b3b10086da49296bbed94bed',
+      fromDecimals: 6,
+      fromAmountPrecision: null,
+      fromAmountMinValue: null,
+      fromAmountMaxValue: null,
+      toBlockchainLogo: 'https://api.rango.exchange/swappers/osmosis.png',
+      fromBlockchainLogo: 'https://api.rango.exchange/swappers/osmosis.png',
+      toBlockchain: 'OSMOSIS',
+      fromLogo: 'https://api.rango.exchange/tokens/COSMOS/JUNO.png',
+      toSymbol: 'OSMO',
+      toSymbolAddress: null,
+      toDecimals: 6,
+      toLogo: 'https://api.rango.exchange/i/mJQPS2',
+      startTransactionTime: 1673164519916,
+      swapperId: 'Osmosis',
+      swapperLogo: 'https://api.rango.exchange/swappers/osmosis.png',
+      expectedOutputAmountHumanReadable: '1.540670',
+      outputAmount: '1.540658',
+      status: 'running',
+      networkStatus: null,
+      executedTransactionId:
+        '0f8f17eecc863c2d6be65ef52cfe3128ff3cd7baeddf133160bea8ccdfbf876b',
+      explorerUrl: [
+        {
+          url: 'https://www.mintscan.io/osmosis/txs/0f8f17eecc863c2d6be65ef52cfe3128ff3cd7baeddf133160bea8ccdfbf876b',
+          description: null,
+        },
+      ],
+      cosmosTransaction: {
+        type: TransactionType.COSMOS,
+        fromWalletAddress: 'osmo1unf2rcytjxfpz8x8ar63h4qeftadptg5t0nqcl',
+        blockChain: 'OSMOSIS',
+        data: {
+          chainId: 'osmosis-1',
+          account_number: 102721,
+          sequence: '308',
+          msgs: [
+            {
+              __type: 'OsmosisSwapMessage',
+              type: 'osmosis/gamm/swap-exact-amount-in',
+              value: {
+                sender: 'osmo1unf2rcytjxfpz8x8ar63h4qeftadptg5t0nqcl',
+                routes: [
+                  {
+                    pool_id: '498',
+                    token_out_denom:
+                      'ibc/27394FB092D2ECCD56123C74F36E4C1F926001CEADA9CA97EA622B25F41E5EB2',
+                  },
+                  {
+                    pool_id: '8',
+                    token_out_denom:
+                      'ibc/7C4D60AA95E5A7558B0A364860979CA34B7FF8AAF255B87AF9E879374470CEC0',
+                  },
+                  {
+                    pool_id: '7',
+                    token_out_denom: 'uosmo',
+                  },
+                ],
+                token_in: {
+                  denom:
+                    'ibc/46B44899322F3CD854D2D46DEEF881958467CDD4B3B10086DA49296BBED94BED',
+                  amount: '1000000',
+                },
+                token_out_min_amount: '1525264',
+              },
+            },
+          ],
+          protoMsgs: [
+            {
+              type_url: '/osmosis.gamm.v1beta1.MsgSwapExactAmountIn',
+              value: [
+                10, 43, 111, 115, 109, 111, 49, 117, 110, 102, 50, 114, 99, 121,
+                116, 106, 120, 102, 112, 122, 56, 120, 56, 97, 114, 54, 51, 104,
+                52, 113, 101, 102, 116, 97, 100, 112, 116, 103, 53, 116, 48,
+                110, 113, 99, 108, 18, 73, 8, -14, 3, 18, 68, 105, 98, 99, 47,
+                50, 55, 51, 57, 52, 70, 66, 48, 57, 50, 68, 50, 69, 67, 67, 68,
+                53, 54, 49, 50, 51, 67, 55, 52, 70, 51, 54, 69, 52, 67, 49, 70,
+                57, 50, 54, 48, 48, 49, 67, 69, 65, 68, 65, 57, 67, 65, 57, 55,
+                69, 65, 54, 50, 50, 66, 50, 53, 70, 52, 49, 69, 53, 69, 66, 50,
+                18, 72, 8, 8, 18, 68, 105, 98, 99, 47, 55, 67, 52, 68, 54, 48,
+                65, 65, 57, 53, 69, 53, 65, 55, 53, 53, 56, 66, 48, 65, 51, 54,
+                52, 56, 54, 48, 57, 55, 57, 67, 65, 51, 52, 66, 55, 70, 70, 56,
+                65, 65, 70, 50, 53, 53, 66, 56, 55, 65, 70, 57, 69, 56, 55, 57,
+                51, 55, 52, 52, 55, 48, 67, 69, 67, 48, 18, 9, 8, 7, 18, 5, 117,
+                111, 115, 109, 111, 26, 79, 10, 68, 105, 98, 99, 47, 52, 54, 66,
+                52, 52, 56, 57, 57, 51, 50, 50, 70, 51, 67, 68, 56, 53, 52, 68,
+                50, 68, 52, 54, 68, 69, 69, 70, 56, 56, 49, 57, 53, 56, 52, 54,
+                55, 67, 68, 68, 52, 66, 51, 66, 49, 48, 48, 56, 54, 68, 65, 52,
+                57, 50, 57, 54, 66, 66, 69, 68, 57, 52, 66, 69, 68, 18, 7, 49,
+                48, 48, 48, 48, 48, 48, 34, 7, 49, 53, 50, 53, 50, 54, 52,
+              ],
+            },
+          ],
+          memo: '',
+          source: null,
+          fee: {
+            gas: '900000',
+            amount: [
+              {
+                denom: 'uosmo',
+                amount: '0',
+              },
+            ],
+          },
+          signType: 'AMINO',
+          rpcUrl: 'sample_rpc',
+        },
+        rawTransfer: null,
+      },
+      solanaTransaction: null,
+      evmTransaction: null,
+      evmApprovalTransaction: null,
+      transferTransaction: null,
+      diagnosisUrl: null,
+      internalSteps: null,
+    },
+  ],
+};

package/src/components/Switch/Switch.stories.tsx

@@ -0,0 +1,9 @@
+import { ComponentMeta } from '@storybook/react';
+import React from 'react';
+import { Switch, PropTypes } from './Switch';
+
+export default { title: 'Switch', component: Switch } as ComponentMeta<
+  typeof Switch
+>;
+
+export const Main = (args: PropTypes) => <Switch {...args} />;

package/src/components/Switch/Switch.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import * as RadixSwitch from '@radix-ui/react-switch';
+
+import { styled } from '../../theme';
+
+const StyledSwitchRoot = styled(RadixSwitch.Root, {
+  boxSizing: 'border-box',
+  boxShadow: 'none',
+  borderStyle: 'solid',
+  width: '42px',
+  height: '22px',
+  backgroundColor: '$neutrals300',
+  borderColor: '$neutrals400',
+  borderRadius: '99999px',
+  position: 'relative',
+  cursor: 'pointer',
+  '&[data-state="checked"]': {
+    backgroundColor: '$primary100',
+  },
+  '-webkit-tap-highlight-color': 'rgba(0, 0, 0, 0)',
+});
+
+const StyledSwitchThumb = styled(RadixSwitch.Thumb, {
+  position: 'absolute',
+  top: '0',
+  boxSizing: 'border-box',
+  display: 'block',
+  width: '18px',
+  height: '18px',
+  backgroundColor: '$neutrals500',
+  transition: ' transform 100ms',
+  borderRadius: '999999px',
+  willChange: 'transform',
+  '&[data-state="checked"]': {
+    transform: 'translateX(20px)',
+    backgroundColor: '$primary500',
+  },
+});
+
+export interface PropTypes {
+  checked: boolean;
+  onChange?: (checked: boolean) => void;
+}
+
+export function Switch(props: PropTypes) {
+  const { checked, onChange } = props;
+  return (
+    <StyledSwitchRoot checked={checked} onCheckedChange={onChange}>
+      <StyledSwitchThumb />
+    </StyledSwitchRoot>
+  );
+}

package/src/components/Switch/index.ts

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

package/src/components/TextField/TextField.stories.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { ComponentMeta } from '@storybook/react';
+
+import { TextField, PropTypes } from './TextField';
+import { SearchIcon } from '../Icon';
+
+export default {
+  title: 'Components/Text Field',
+
+  component: TextField,
+  argTypes: {
+    disabled: {
+      name: 'disabled',
+      type: 'boolean',
+    },
+    placeholder: {
+      name: 'placeholder',
+      type: 'string',
+    },
+  },
+} as ComponentMeta<typeof TextField>;
+
+export const Main = (args: PropTypes) => <TextField {...args} />;
+
+export const WithPrefix = (args: PropTypes) => (
+  <TextField {...args} prefix={<SearchIcon size={20} />} />
+);
+
+export const WithSuffix = (args: PropTypes) => (
+  <TextField {...args} suffix={<SearchIcon size={20} />} />
+);

package/src/components/TextField/TextField.tsx

@@ -0,0 +1,129 @@
+import React, { PropsWithChildren, RefObject } from 'react';
+
+import { styled } from '../../theme';
+
+const InputContainer = styled('div', {
+  backgroundColor: '$background',
+  boxSizing: 'border-box',
+  border: '1px solid $neutrals400',
+  borderRadius: '$5',
+  height: '$48',
+  display: 'flex',
+  flexGrow: 1,
+  position: 'relative',
+  alignItems: 'center',
+  color: '$foreground',
+  transition: 'border-color ease .3s',
+  '&:focus-within': {
+    borderColor: '$primary500',
+  },
+  variants: {
+    size: {
+      small: {
+        height: '$32',
+      },
+      medium: {
+        height: '$40',
+      },
+      large: {
+        height: '$48',
+      },
+    },
+    disabled: {
+      true: {
+        backgroundColor: '$neutrals300',
+        cursor: 'not-allowed',
+        filter: 'grayscale(100%)',
+      },
+    },
+    prefix: {
+      true: {
+        paddingLeft: '$16',
+      },
+      false: {
+        paddingLeft: '$0',
+      },
+    },
+    suffix: {
+      true: {
+        paddingRight: '$16',
+      },
+      false: {
+        paddingRight: '$0',
+      },
+    },
+  },
+  defaultVariants: {
+    size: 'medium',
+  },
+});
+
+const Input = styled('input', {
+  color: '$text',
+  paddingLeft: '$16',
+  paddingRight: '$16',
+  flexGrow: 1,
+  width: '100%',
+  border: 'none',
+  borderRadius: '$5',
+  outline: 'none',
+  fontSize: '$l',
+  backgroundColor: 'transparent',
+  '-webkit-appearance': 'none',
+  margin: 0,
+  '&:disabled': {
+    cursor: 'not-allowed',
+  },
+});
+const Label = styled('label', {
+  display: 'inline-block',
+  fontSize: '$16',
+  marginBottom: '$4',
+});
+
+export type PropTypes = {
+  label?: string;
+  prefix?: React.ReactNode;
+  suffix?: React.ReactNode;
+  size?: 'small' | 'medium' | 'large';
+} & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'prefix' | 'size'> & {
+    ref?:
+      | ((instance: HTMLInputElement | null) => void)
+      | React.RefObject<HTMLInputElement>
+      | null
+      | undefined;
+  };
+
+export const TextField = React.forwardRef(
+  (
+    props: PropsWithChildren<PropTypes>,
+    ref:
+      | RefObject<HTMLInputElement>
+      | ((instance: HTMLInputElement | null) => void)
+      | null
+      | undefined
+  ) => {
+    const { label, prefix, suffix, children, size, style, ...inputAttributes } =
+      props;
+    return (
+      <>
+        {label && (
+          <Label {...(inputAttributes.id && { htmlFor: inputAttributes.id })}>
+            {label}
+          </Label>
+        )}
+        <InputContainer
+          disabled={inputAttributes.disabled}
+          prefix={!!prefix}
+          suffix={!!suffix}
+          size={size}
+          style={style}
+        >
+          {prefix || null}
+          <Input {...inputAttributes} spellCheck={false} ref={ref} />
+          {suffix || null}
+        </InputContainer>
+      </>
+    );
+  }
+);

package/src/components/TextField/index.ts

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

package/src/components/TokenList/TokenList.stories.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { ComponentMeta } from '@storybook/react';
+import { TokenList, PropTypes } from './TokenList';
+import { tokensMeta } from './mockData';
+
+export default {
+  title: 'Token List',
+  component: TokenList,
+  argTypes: {
+    searchedText: {
+      defaultValue: '',
+    },
+  },
+} as ComponentMeta<typeof TokenList>;
+
+export const Main = (args: PropTypes) => (
+  <TokenList {...args} list={tokensMeta} selected={tokensMeta[0]} />
+);

package/src/components/TokenList/TokenList.tsx

@@ -0,0 +1,180 @@
+import React, { forwardRef, useEffect, useState } from 'react';
+import { CommonProps } from 'react-window';
+import { containsText } from '../../helpers';
+import { styled } from '../../theme';
+import { Token } from 'rango-sdk';
+import { Button } from '../Button/Button';
+import { Typography } from '../Typography';
+import { VirtualizedList } from '../VirtualizedList/VirtualizedList';
+import { CSSProperties } from '@stitches/react';
+
+export interface TokenWithAmount extends Token {
+  balance?: {
+    amount: string;
+    usdValue: string;
+  };
+}
+
+const PAGE_SIZE = 20;
+export interface PropTypes {
+  list: TokenWithAmount[];
+  selected: TokenWithAmount | null;
+  searchedText: string;
+  onChange: (token: TokenWithAmount) => void;
+}
+
+const TokenImage = styled('img', {
+  width: '$32',
+  maxHeight: '$32',
+  marginRight: '$16',
+});
+
+const TokenNameContainer = styled('div', {
+  display: 'flex',
+  flexDirection: 'column',
+});
+
+const TokenAmountContainer = styled('div', {
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'flex-end',
+});
+
+const filterTokens = (
+  list: Token[],
+  searchedText: string,
+  outputCount?: number
+) => {
+  if (searchedText)
+    return list
+      .filter(
+        (token) =>
+          containsText(token.symbol, searchedText) ||
+          containsText(token.address || '', searchedText) ||
+          containsText(token.name || '', searchedText)
+      )
+      .slice(0, outputCount);
+  else return list.slice(0, outputCount);
+};
+
+export function TokenList(props: PropTypes) {
+  const { list, searchedText, onChange } = props;
+  const [selected, setSelected] = useState(props.selected);
+
+  const changeSelected = (token: TokenWithAmount) => {
+    setSelected(token);
+    onChange(token);
+  };
+
+  const Token = ({
+    filteredTokens,
+    index,
+    style,
+  }: {
+    filteredTokens: TokenWithAmount[];
+    index: number;
+    style: CSSProperties | undefined;
+  }) => {
+    const currentToken = filteredTokens[index];
+    return (
+      <div
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          width: '100%',
+          ...style,
+          height: '48px',
+          top: `${parseFloat(style?.top as string) + 0}px`,
+        }}
+      >
+        <Button
+          variant="outlined"
+          size="large"
+          align="start"
+          onClick={changeSelected.bind(null, currentToken)}
+          type={
+            selected?.symbol === currentToken.symbol &&
+            selected?.address === currentToken.address
+              ? 'primary'
+              : undefined
+          }
+          prefix={<TokenImage src={currentToken.image} />}
+          suffix={
+            currentToken.balance?.amount && (
+              <TokenAmountContainer>
+                <Typography variant="body2">
+                  {currentToken.balance.amount}
+                </Typography>
+                <Typography variant="caption">
+                  {`${currentToken.balance.usdValue}$`}
+                </Typography>
+              </TokenAmountContainer>
+            )
+          }
+        >
+          <TokenNameContainer>
+            <Typography variant="body1">{currentToken.symbol}</Typography>
+            <Typography variant="body2">{currentToken.name}</Typography>
+          </TokenNameContainer>
+        </Button>
+      </div>
+    );
+  };
+
+  const [hasNextPage, setHasNextPage] = useState<boolean>(true);
+  const [isNextPageLoading, setIsNextPageLoading] = useState<boolean>(false);
+  const [filteredTokens, setFilteredTokens] = useState<TokenWithAmount[]>(list);
+
+  const loadNextPage = () => {
+    setIsNextPageLoading(true);
+    setTimeout(() => {
+      setIsNextPageLoading(false);
+      setFilteredTokens(
+        filterTokens(list, searchedText, filteredTokens.length + PAGE_SIZE)
+      );
+    }, 0);
+  };
+
+  useEffect(() => {
+    setFilteredTokens(filterTokens(list, searchedText, PAGE_SIZE));
+  }, [searchedText]);
+
+  useEffect(() => {
+    setHasNextPage(
+      filterTokens(list, searchedText).length > filterTokens.length
+    );
+  }, [filteredTokens.length]);
+
+  const innerElementType: React.FC<CommonProps> = forwardRef(
+    ({ style, ...rest }, ref) => {
+      return (
+        <div
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+          ref={ref as any}
+          style={{
+            ...style,
+            // eslint-disable-next-line react/prop-types
+            height: `${parseFloat(style?.height as string) + 8 * 2}px`,
+          }}
+          {...rest}
+        />
+      );
+    }
+  );
+
+  return (
+    <div style={{ height: '450px' }}>
+      <VirtualizedList
+        Item={({ index, style }) => (
+          <Token filteredTokens={filteredTokens} style={style} index={index} />
+        )}
+        hasNextPage={hasNextPage}
+        isNextPageLoading={isNextPageLoading}
+        itemCount={filteredTokens.length}
+        loadNextPage={loadNextPage}
+        innerElementType={innerElementType}
+        size={56}
+      />
+    </div>
+  );
+}