@rango-dev/ui 0.1.10-next.102

package/src/components/SwapDetail/Token.tsx

@@ -0,0 +1,68 @@
+import React from 'react';
+import { styled } from '../../theme';
+import { Spacer } from '../Spacer';
+
+const TokenContainer = styled('div', {
+  display: 'flex',
+  alignItems: 'center',
+
+  '& .amount': {
+    fontWeight: 'bold',
+  },
+});
+
+const TokenImage = styled('div', {
+  position: 'relative',
+  width: '$24',
+  height: '$24',
+
+  img: {
+    width: '100%',
+    display: 'block',
+  },
+
+  '.overlay': {
+    position: 'absolute',
+    right: -4,
+    bottom: -4,
+    width: '$16',
+    height: '$16',
+    padding: '$2',
+    borderRadius: '50%',
+    backgroundColor: '$background',
+    border: '1px solid $neutrals400',
+  },
+});
+
+interface PropTypes {
+  data: {
+    token: {
+      logo: string;
+      symbol: string;
+    };
+    blockchain: {
+      logo: string;
+      name: string;
+    };
+    amount: string;
+  };
+}
+export function Token(props: PropTypes) {
+  return (
+    <TokenContainer>
+      <TokenImage>
+        <img src={props.data.token.logo} alt="" />
+        <div className="overlay">
+          <img
+            src={props.data.blockchain.logo}
+            alt={props.data.blockchain.name}
+          />
+        </div>
+      </TokenImage>
+      <Spacer size={8} />
+      <span className="amount">{props.data.amount}</span>
+      <Spacer size={4} />
+      {props.data.token.symbol}
+    </TokenContainer>
+  );
+}

package/src/components/SwapDetail/index.ts

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

package/src/components/SwapDetail/mock.ts

@@ -0,0 +1,276 @@
+// @ts-nocheck
+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,55 @@
+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: '$neutrals600',
+  borderColor: '$neutrals600',
+  borderRadius: '99999px',
+  position: 'relative',
+  padding: '0',
+  cursor: 'pointer',
+
+  '&[data-state="checked"]': {
+    backgroundColor: '$success',
+    borderColor: '$success',
+  },
+  '-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: '$white',
+  transition: ' transform 300ms',
+  borderRadius: '999999px',
+  willChange: 'transform',
+
+  '&[data-state="checked"]': {
+    transform: 'translateX(20px)',
+  },
+});
+
+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,141 @@
+import React, { PropsWithChildren, RefObject } from 'react';
+
+import { styled } from '../../theme';
+
+const InputContainer = styled('div', {
+  backgroundColor: '$background',
+  padding: '1px',
+  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: '$success',
+    outline: '1px solid $success',
+  },
+  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: '$foreground',
+  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: '$14',
+  color: '$foreground',
+  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
+            className="_text"
+            {...(inputAttributes.id && { htmlFor: inputAttributes.id })}
+          >
+            {label}
+          </Label>
+        )}
+        <InputContainer
+          disabled={inputAttributes.disabled}
+          prefix={!!prefix}
+          suffix={!!suffix}
+          size={size}
+          style={style}
+          className="_text"
+        >
+          {prefix || null}
+          <Input
+            className="_text"
+            {...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/TokenItem.tsx

@@ -0,0 +1,73 @@
+import { Token } from 'rango-sdk';
+import React, { CSSProperties } from 'react';
+import { styled } from '../../theme';
+import { Button } from '../Button';
+import { Typography } from '../Typography';
+import { TokenWithAmount } from './TokenList';
+
+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',
+});
+
+interface PropTypes {
+  token: TokenWithAmount;
+  selected: boolean;
+  onClick: (token: Token) => void;
+  style?: CSSProperties;
+}
+
+export function TokenItem(props: PropTypes) {
+  const { token, style, onClick, selected } = props;
+  return (
+    <div
+      style={{
+        display: 'flex',
+        alignItems: 'center',
+        width: '100%',
+        ...style,
+        height: '48px',
+        top: `${parseFloat(style?.top as string) + 0}px`,
+        padding: '0 4px',
+      }}
+    >
+      <Button
+        variant="outlined"
+        size="large"
+        align="start"
+        onClick={onClick.bind(null, token)}
+        type={selected ? 'primary' : undefined}
+        prefix={<TokenImage src={token.image} />}
+        suffix={
+          token.balance?.amount && (
+            <TokenAmountContainer>
+              <Typography variant="body2">{token.balance.amount}</Typography>
+              <Typography variant="caption">
+                {`${token.balance.usdValue}$`}
+              </Typography>
+            </TokenAmountContainer>
+          )
+        }
+      >
+        <TokenNameContainer>
+          <Typography variant="body1">{token.symbol}</Typography>
+          <Typography variant="caption" color="neutrals600">
+            {token.name}
+          </Typography>
+        </TokenNameContainer>
+      </Button>
+    </div>
+  );
+}

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]} />
+);