@rango-dev/ui 0.15.1-next.1 → 0.15.1-next.10

package/src/components/StatusDrawer/StatusDrawer.tsx

@@ -1,82 +0,0 @@
-import React from 'react';
-import { styled } from '../../theme';
-import { Button } from '../Button';
-import { Drawer } from '../Drawer';
-import { CheckCircleIcon, InfoCircleIcon, WarningIcon } from '../Icon';
-import { Divider } from '../Divider';
-import { Typography } from '../Typography';
-
-export interface PropTypes {
-  open: boolean;
-  onClose: () => void;
-  status: 'continue' | 'success' | 'failed';
-  title: string;
-  subtitle: string;
-  onSubmit?: (event: React.MouseEvent<HTMLButtonElement>) => void;
-  onCancel?: (event: React.MouseEvent<HTMLButtonElement>) => void;
-}
-const Header = styled('div', {
-  textAlign: 'center',
-  display: 'flex',
-  justifyContent: 'center',
-  alignItems: 'center',
-  marginBottom: '$16',
-});
-const Footer = styled('div', {
-  padding: '$20',
-  display: 'flex',
-  alignItems: 'center',
-});
-export function StatusDrawer({
-  status = 'success',
-  title,
-  subtitle,
-  onSubmit,
-  onCancel,
-  ...props
-}: PropTypes) {
-  return (
-    <Drawer
-      container={document.body}
-      content={
-        <>
-          <Header>
-            {status === 'success' ? (
-              <CheckCircleIcon color="success" size={24} />
-            ) : status === 'failed' ? (
-              <InfoCircleIcon color="error" size={24} />
-            ) : (
-              <WarningIcon color="warning" size={24} />
-            )}
-            <Typography variant="h6">{title}</Typography>
-          </Header>
-          <Typography variant="body2">{subtitle}</Typography>
-        </>
-      }
-      footer={
-        <Footer>
-          {status !== 'failed' && (
-            <Button fullWidth onClick={onCancel}>
-              {status === 'success' ? 'Cancel' : 'See detailes'}
-            </Button>
-          )}
-          <Divider size={16} direction='horizontal' />
-          <Button
-            fullWidth
-            onClick={onSubmit}
-            variant="contained"
-            type="primary"
-          >
-            {status === 'success'
-              ? 'Done'
-              : status === 'continue'
-              ? 'Continue'
-              : 'See detailes'}
-          </Button>
-        </Footer>
-      }
-      anchor="bottom"
-      {...props}
-    />
-  );
-}

package/src/components/StatusDrawer/index.ts

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

package/src/components/SwapDetail/SwapDetail.stories.tsx

@@ -1,22 +0,0 @@
-import React from 'react';
-import { Meta } from '@storybook/react';
-import { SwapDetail, PropTypes } from './SwapDetail';
-import { swap } from './mock';
-
-export default {
-  title: 'Components/Swap Detail',
-  component: SwapDetail,
-  args:{
-    status:'running'
-  },
-  argTypes: {
-    status: {
-      name: 'status',
-      control: { type: 'select' },
-      options: ['running', 'failed', 'success'],
-      defaultValue: 'running',
-    },
-  },
-} as Meta<typeof SwapDetail>;
-
-export const Main = (props: PropTypes) => <SwapDetail {...props} swap={swap} />;

package/src/components/SwapDetail/SwapDetail.tsx

@@ -1,104 +0,0 @@
-import React, { PropsWithChildren } from 'react';
-import { PendingSwap } from '../../containers/History/types';
-import { styled } from '../../theme';
-import { Button } from '../Button';
-import { ArrowRightIcon } from '../Icon';
-import { Divider } from '../Divider';
-import { Spinner } from '../Spinner';
-import { Token } from './Token';
-import { limitDecimalPlaces } from '../../helper';
-
-const Container = styled('div', {
-  position: 'relative',
-  display: 'flex',
-  justifyContent: 'space-between',
-  alignItems: 'center',
-  padding: '$16 0',
-  borderBottom: '1px solid $neutral100',
-
-  '& > .info': {
-    display: 'flex',
-    alignItems: 'center',
-  },
-
-  '.status': {
-    textTransform: 'uppercase',
-    fontWeight: 'bold',
-    fontSize: '$12',
-  },
-
-  '&.failed .status': {
-    color: '$error',
-  },
-  '&.success .status': {
-    color: '$success',
-  },
-});
-
-export interface PropTypes {
-  swap: PendingSwap;
-  status: 'running' | 'failed' | 'success';
-  onClick: (requestId: string) => void;
-}
-
-export function SwapDetail({
-  swap,
-  status,
-  onClick,
-}: PropsWithChildren<PropTypes>) {
-  const firstStep = swap.steps[0];
-  const lastStep = swap.steps[swap.steps.length - 1];
-
-  return (
-    <Button
-      variant="ghost"
-      size="free"
-      fullWidth
-      onClick={onClick.bind(null, swap.requestId)}
-    >
-      <Container className={`${status}`}>
-        <div className="info">
-          <Token
-            data={{
-              token: {
-                logo: firstStep.fromLogo,
-                symbol: firstStep.fromSymbol,
-              },
-              blockchain: {
-                logo: firstStep.fromBlockchainLogo || '',
-                name: firstStep.fromBlockchain,
-              },
-              amount: limitDecimalPlaces(swap.inputAmount),
-            }}
-          />
-          <Divider size={12} direction="horizontal" />
-          <ArrowRightIcon size={12} />
-          <Divider size={12} direction="horizontal" />
-          <Token
-            data={{
-              token: {
-                logo: lastStep.toLogo,
-                symbol: lastStep.toSymbol,
-              },
-              blockchain: {
-                logo: lastStep.toBlockchainLogo || '',
-                name: lastStep.toBlockchain,
-              },
-              amount: limitDecimalPlaces(lastStep.outputAmount || ''),
-              estimatedAmount: limitDecimalPlaces(
-                lastStep.expectedOutputAmountHumanReadable || ''
-              ),
-            }}
-          />
-        </div>
-        <div className={`status`}>
-          {status === 'running' ? (
-            <Spinner size={24} color="primary" />
-          ) : (
-            status
-          )}
-        </div>
-      </Container>
-    </Button>
-  );
-}

package/src/components/SwapDetail/Token.tsx

@@ -1,75 +0,0 @@
-import React from 'react';
-import { styled } from '../../theme';
-import { Divider } from '../Divider';
-import { Image } from '../common';
-
-const TokenContainer = styled('div', {
-  display: 'flex',
-  alignItems: 'center',
-  width: '160px',
-
-  '& .amount': {
-    fontWeight: 'bold',
-  },
-  '& .estimated': {
-    color: '$neutral600',
-  },
-});
-
-const TokenImage = styled('div', {
-  position: 'relative',
-  img: {
-    borderRadius: '50%',
-  },
-  '.overlay': {
-    position: 'absolute',
-    right: -4,
-    bottom: -4,
-    width: '$16',
-    height: '$16',
-    padding: '$2',
-    borderRadius: '50%',
-    display: 'flex',
-    justifyContent: 'center',
-    alignItems: 'center',
-    backgroundColor: '$background',
-    border: '1px solid $neutral400',
-  },
-});
-
-interface PropTypes {
-  data: {
-    token: {
-      logo: string;
-      symbol: string;
-    };
-    blockchain: {
-      logo: string;
-      name: string;
-    };
-    amount: string;
-    estimatedAmount?: string;
-  };
-}
-export function Token(props: PropTypes) {
-  const {
-    data: { token, blockchain, amount, estimatedAmount },
-  } = props;
-  return (
-    <TokenContainer>
-      <TokenImage>
-        <Image src={token.logo} alt="" size={24} />
-        <div className="overlay">
-          <Image src={blockchain.logo} alt={blockchain.name} size={12} />
-        </div>
-      </TokenImage>
-      <Divider size={8} direction="horizontal" />
-      {!!amount && <span className="amount">{props.data.amount}</span>}
-      {!amount && estimatedAmount && (
-        <span className="amount estimated">{props.data.estimatedAmount}</span>
-      )}
-      <Divider size={4} direction="horizontal" />
-      {token.symbol}
-    </TokenContainer>
-  );
-}

package/src/components/SwapDetail/index.ts

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

package/src/components/Wallet/State.tsx

@@ -1,34 +0,0 @@
-import React, { Fragment } from 'react';
-import { styled } from '../../theme';
-import { DisconnectIcon, DownloadIcon } from '../Icon';
-import { Spinner } from '../Spinner';
-import { WalletState } from '../../types/wallet';
-import { InstallObjects, detectInstallLink } from '@rango-dev/wallets-shared';
-
-const StateIconContainer = styled('span', {
-  display: 'flex',
-  justifyContent: 'center',
-  alignItems: 'center',
-});
-
-export const State = ({
-  walletState,
-  installLink,
-}: {
-  walletState: WalletState;
-  installLink: InstallObjects | string;
-}) => (
-  <Fragment>
-    {walletState !== WalletState.DISCONNECTED && (
-      <StateIconContainer>
-        {walletState === WalletState.NOT_INSTALLED && (
-          <a href={detectInstallLink(installLink)} target="_blank">
-            <DownloadIcon size={24} color="success" />
-          </a>
-        )}
-        {walletState === WalletState.CONNECTING && <Spinner />}
-        {walletState === WalletState.CONNECTED && <DisconnectIcon />}
-      </StateIconContainer>
-    )}
-  </Fragment>
-);

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

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

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';