@rango-dev/ui 0.13.1-next.0 → 0.14.0

package/src/components/TokenPreview/TokenPreview.tsx

@@ -1,183 +0,0 @@
-import React, { ReactNode } from 'react';
-import {
-  Button,
-  InfoCircleIcon,
-  styled,
-  Typography,
-  Divider,
-  Image,
-} from '../..';
-import { i18n } from '@lingui/core';
-import { LoadingStatus } from '../../types/meta';
-
-const Box = styled('div', {
-  display: 'flex',
-  flexDirection: 'column',
-  width: '100%',
-  overflow: 'hidden',
-});
-
-const Container = styled('div', {
-  boxSizing: 'border-box',
-  borderRadius: '$5',
-  padding: '$8 $16 $16 $16',
-
-  variants: {
-    type: {
-      filled: {
-        backgroundColor: '$neutral100',
-      },
-      outlined: {
-        border: '1px solid $neutral100',
-      },
-    },
-  },
-
-  defaultVariants: {
-    type: 'filled',
-  },
-
-  '.head': {
-    display: 'flex',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    minHeight: '32px',
-    '.usd-value': {
-      paddingLeft: '$8',
-    },
-  },
-  '.form': {
-    display: 'flex',
-    width: '100%',
-    padding: '$2 0',
-    '.selectors': {
-      width: '35%',
-
-      '._text': {
-        whiteSpace: 'nowrap',
-        overflow: 'hidden',
-        textOverflow: 'ellipsis',
-      },
-    },
-    '.amount': {
-      width: '30%',
-    },
-  },
-});
-
-const ImagePlaceholder = styled('span', {
-  width: '24px',
-  height: '24px',
-  backgroundColor: '$neutral100',
-  borderRadius: '99999px',
-});
-
-const OutputContainer = styled('div', {
-  windth: '100%',
-  height: '$48',
-  borderRadius: '$5',
-  backgroundColor: '$surface',
-  border: '1px solid transparent',
-  position: 'relative',
-  display: 'flex',
-  alignItems: 'center',
-  paddingLeft: '$8',
-  paddingRight: '$8',
-});
-
-interface PropTypes {
-  label: string;
-  amount: string;
-  usdValue: string | null;
-  loadingStatus: LoadingStatus;
-  chain: {
-    displayName: string;
-    logo: string;
-  };
-  token: {
-    symbol: string;
-    image: string;
-  };
-  percentageChange?: ReactNode;
-}
-
-export function TokenPreview(props: PropTypes) {
-  const { chain, token, loadingStatus, percentageChange } = props;
-
-  const ItemSuffix = (
-    <div
-      style={{
-        display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'center',
-      }}>
-      {loadingStatus === 'failed' && <InfoCircleIcon color="error" size={24} />}
-    </div>
-  );
-
-  return (
-    <Box>
-      <Container type={'outlined'}>
-        <div className="head">
-          <Typography variant="body2" color="neutral800">
-            {props.label}
-          </Typography>
-          <div>
-            {percentageChange}
-            {props.usdValue && (
-              <Typography
-                variant="caption"
-                color="neutral600"
-                className="usd-value">{`$${props.usdValue}`}</Typography>
-            )}
-          </div>
-        </div>
-        <div className="form">
-          <Button
-            className="selectors"
-            variant="outlined"
-            loading={loadingStatus === 'loading'}
-            prefix={
-              loadingStatus === 'success' && chain ? (
-                <Image src={chain.logo} size={24} />
-              ) : (
-                <ImagePlaceholder />
-              )
-            }
-            suffix={ItemSuffix}
-            align="start"
-            size="large">
-            {loadingStatus === 'success' && chain
-              ? chain.displayName
-              : i18n.t('Chain')}
-          </Button>
-          <Divider size={12} direction="horizontal" />
-          <Button
-            className="selectors"
-            variant="outlined"
-            loading={loadingStatus === 'loading'}
-            prefix={
-              loadingStatus === 'success' && token ? (
-                <Image src={token.image} size={24} />
-              ) : (
-                <ImagePlaceholder />
-              )
-            }
-            suffix={ItemSuffix}
-            size="large"
-            align="start">
-            {loadingStatus === 'success' && token
-              ? token.symbol
-              : i18n.t('Token')}
-          </Button>
-          <Divider size={12} direction="horizontal" />
-          <div className="amount">
-            <OutputContainer>
-              <Typography variant="h4">{props.amount}</Typography>
-            </OutputContainer>
-          </div>
-        </div>
-      </Container>
-    </Box>
-  );
-}

package/src/components/TokenPreview/index.ts

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

package/src/containers/HomePanel/HomePanel.tsx

@@ -1,228 +0,0 @@
-import {
-  Alert,
-  BestRoute,
-  BottomLogo,
-  Button,
-  styled,
-  Typography,
-  Header,
-  HeaderButtons,
-  TokenInfo,
-  ConnectedWallet,
-} from '../..';
-import React from 'react';
-import { i18n } from '@lingui/core';
-import { BestRouteResponse, BlockchainMeta, SwapResult } from 'rango-sdk';
-import { LoadingStatus, TokenWithBalance } from '../../types/meta';
-
-const Container = styled('div', {
-  display: 'flex',
-  flexDirection: 'column',
-});
-
-const FromContainer = styled('div', {
-  position: 'relative',
-  paddingBottom: '$12',
-});
-
-const BestRouteContainer = styled('div', {
-  width: '100%',
-  paddingTop: '$16',
-});
-
-const Alerts = styled('div', {
-  width: '100%',
-  paddingTop: '$16',
-});
-
-const Footer = styled('div', {
-  display: 'flex',
-  flexDirection: 'column',
-  width: '100%',
-  paddingTop: '$16',
-});
-
-interface HomePanelProps {
-  bestRoute: BestRouteResponse | null;
-  bestRouteError: string;
-  fetchBestRoute: () => void;
-  onClickHistory: () => void;
-  onClickSettings: () => void;
-  fromChain: BlockchainMeta | null;
-  toChain: BlockchainMeta | null;
-  fromToken: TokenWithBalance | null;
-  toToken: TokenWithBalance | null;
-  setInputAmount: (amount: string) => void;
-  outputAmount: string;
-  outputUsdValue: string;
-  inputUsdValue: string;
-  inputAmount: string;
-  loadingStatus: LoadingStatus;
-  showBestRoute: boolean;
-  fetchingBestRoute: boolean;
-  swapButtonTitle: string;
-  swapButtonDisabled: boolean;
-  swapButtonClick: () => void;
-  onChainClick: (route: 'from-chain' | 'to-chain') => void;
-  onTokenClick: (route: 'from-token' | 'to-token') => void;
-  connectedWallets: ConnectedWallet[];
-  highFee: boolean;
-  errorMessage: string;
-  hasLimitError: (bestRoute: BestRouteResponse | null) => boolean;
-  swap: SwapResult | null;
-  swapFromAmount: string | null;
-  fromAmountRangeError: string;
-  recommendation: string;
-  totalFeeInUsd: string;
-  swithFromAndToComponent: React.ReactNode;
-  percentageChange: string;
-  tokenBalanceReal: string;
-  tokenBalance: string;
-  totalTime: string;
-  bestRouteData: BestRouteResponse | null;
-  showPercentageChange: boolean;
-}
-
-export function HomePanel({
-  bestRoute,
-  bestRouteError,
-  fetchBestRoute,
-  onClickHistory,
-  onClickSettings,
-  fromChain,
-  toChain,
-  fromToken,
-  toToken,
-  setInputAmount,
-  outputAmount,
-  inputAmount,
-  loadingStatus,
-  showBestRoute,
-  fetchingBestRoute,
-  outputUsdValue,
-  inputUsdValue,
-  swapButtonTitle,
-  swapButtonDisabled,
-  swapButtonClick,
-  onChainClick,
-  onTokenClick,
-  connectedWallets,
-  highFee,
-  errorMessage,
-  hasLimitError,
-  swap,
-  fromAmountRangeError,
-  recommendation,
-  totalFeeInUsd,
-  swithFromAndToComponent,
-  percentageChange,
-  tokenBalanceReal,
-  tokenBalance,
-  totalTime,
-  bestRouteData,
-  swapFromAmount,
-  showPercentageChange,
-}: HomePanelProps) {
-  return (
-    <Container>
-      <Header
-        title={i18n.t('SWAP')}
-        suffix={
-          <HeaderButtons
-            onClickRefresh={
-              !!bestRoute || bestRouteError ? fetchBestRoute : undefined
-            }
-            onClickHistory={onClickHistory}
-            onClickSettings={onClickSettings}
-          />
-        }
-      />
-      <FromContainer>
-        <>
-          <TokenInfo
-            type="From"
-            chain={fromChain}
-            token={fromToken}
-            onAmountChange={setInputAmount}
-            inputAmount={inputAmount}
-            fromChain={fromChain}
-            toChain={toChain}
-            loadingStatus={loadingStatus}
-            inputUsdValue={inputUsdValue}
-            fromToken={fromToken}
-            setInputAmount={setInputAmount}
-            connectedWallets={connectedWallets}
-            bestRoute={bestRoute}
-            fetchingBestRoute={fetchingBestRoute}
-            onChainClick={() => onChainClick('from-chain')}
-            onTokenClick={() => onTokenClick('from-token')}
-            tokenBalanceReal={tokenBalanceReal}
-            tokenBalance={tokenBalance}
-          />
-          {swithFromAndToComponent}
-        </>
-      </FromContainer>
-      <TokenInfo
-        type="To"
-        chain={toChain}
-        token={toToken}
-        outputAmount={outputAmount}
-        percentageChange={percentageChange}
-        outputUsdValue={outputUsdValue}
-        fromChain={fromChain}
-        toChain={toChain}
-        loadingStatus={loadingStatus}
-        inputUsdValue={inputUsdValue}
-        fromToken={fromToken}
-        setInputAmount={setInputAmount}
-        connectedWallets={connectedWallets}
-        inputAmount={inputAmount}
-        bestRoute={bestRoute}
-        fetchingBestRoute={fetchingBestRoute}
-        onChainClick={() => onChainClick('to-chain')}
-        onTokenClick={() => onTokenClick('to-token')}
-        tokenBalanceReal={tokenBalanceReal}
-        tokenBalance={tokenBalance}
-        showPercentageChange={showPercentageChange}
-      />
-      {showBestRoute && (
-        <BestRouteContainer>
-          <BestRoute
-            error={bestRouteError}
-            loading={fetchingBestRoute}
-            data={bestRouteData}
-            totalFee={totalFeeInUsd}
-            feeWarning={highFee}
-            totalTime={totalTime}
-          />
-        </BestRouteContainer>
-      )}
-      {(errorMessage || hasLimitError(bestRoute)) && (
-        <Alerts>
-          {errorMessage && <Alert type="error">{errorMessage}</Alert>}
-          {hasLimitError(bestRoute) && (
-            <Alert type="error" title={`${swap?.swapperId} Limit`}>
-              <>
-                <Typography variant="body2">
-                  {`${fromAmountRangeError}, Yours: ${swapFromAmount} ${swap?.from.symbol}`}
-                </Typography>
-                <Typography variant="body2">{recommendation}</Typography>
-              </>
-            </Alert>
-          )}
-        </Alerts>
-      )}
-      <Footer>
-        <Button
-          type="primary"
-          align="grow"
-          size="large"
-          disabled={swapButtonDisabled}
-          onClick={swapButtonClick}>
-          {swapButtonTitle}
-        </Button>
-        <BottomLogo />
-      </Footer>
-    </Container>
-  );
-}

package/src/containers/HomePanel/index.ts

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