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

package/src/components/HeaderLayout/HeaderLayout.tsx

@@ -0,0 +1,88 @@
+import {
+  Button,
+  AddWalletIcon,
+  Typography,
+  styled,
+  Spinner,
+  Image,
+} from '../..';
+import React, { PropsWithChildren } from 'react';
+import { i18n } from '@lingui/core';
+import { LoadingStatus } from '../../types/meta';
+import { ConnectedWallet } from '../../types/wallet';
+
+const Container = styled('div', {
+  display: 'flex',
+  width: '100%',
+  justifyContent: 'end',
+  '.balance': {
+    display: 'flex',
+  },
+});
+
+const WalletImages = styled('div', {
+  display: 'flex',
+  paddingLeft: '12px',
+});
+
+const WalletImageContainer = styled('div', {
+  marginLeft: -15,
+  marginRight: '$6',
+  '& img': {
+    borderRadius: '50%',
+  },
+});
+
+interface HeaderLayoutProps {
+  loadingStatus: LoadingStatus;
+  connectedWalletsImages: string[];
+  connectedWallets: ConnectedWallet[];
+  totalBalance: string;
+  fetchingBalance: boolean;
+  onClick: () => void;
+}
+export function HeaderLayout({
+  connectedWalletsImages,
+  loadingStatus,
+  connectedWallets,
+  totalBalance,
+  fetchingBalance,
+  onClick,
+  children,
+}: PropsWithChildren<HeaderLayoutProps>) {
+  return (
+    <>
+      <Container>
+        <Button
+          size="small"
+          suffix={<AddWalletIcon size={20} />}
+          variant="ghost"
+          flexContent
+          loading={loadingStatus === 'loading'}
+          disabled={loadingStatus === 'failed'}
+          onClick={onClick}
+          prefix={
+            connectedWalletsImages?.length ? (
+              <WalletImages>
+                {connectedWalletsImages.map((walletImage, index) => (
+                  <WalletImageContainer key={index}>
+                    <Image src={walletImage} size={24} />
+                  </WalletImageContainer>
+                ))}
+              </WalletImages>
+            ) : null
+          }>
+          <div className="balance">
+            <Typography variant="body2">
+              {!connectedWallets?.length
+                ? i18n.t('Connect Wallet')
+                : `$${totalBalance || 0}`}
+            </Typography>
+            {fetchingBalance && <Spinner />}
+          </div>
+        </Button>
+      </Container>
+      {children}
+    </>
+  );
+}

package/src/components/HeaderLayout/index.ts

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

package/src/components/PercentageChange/PercentageChange.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { Typography } from '..';
+
+interface PropTypes {
+  showPercentageChange: boolean;
+  percentageChange: string;
+}
+
+export function PercentageChange(props: PropTypes) {
+  const { percentageChange, showPercentageChange } = props;
+
+  return (
+    <>
+      {showPercentageChange && (
+        <Typography variant="caption" color="$error500">
+          {`(${percentageChange}%)`}
+        </Typography>
+      )}
+    </>
+  );
+}

package/src/components/PercentageChange/index.ts

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

package/src/components/RoutesOverview/RoutesOverview.tsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import { ChevronRightIcon, GasIcon, Divider } from '..';
+import { styled } from '../../theme';
+import { BestRouteResponse } from 'rango-sdk';
+
+export const Container = styled('div', {
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+  padding: '$8',
+  borderRadius: '$5',
+  backgroundColor: '$neutral100',
+  color: '$neutral800',
+  fontSize: '$12',
+
+  '.routes': {
+    display: 'flex',
+    alignItems: 'center',
+  },
+  '.fee': {
+    display: 'flex',
+    alignItems: 'center',
+  },
+});
+
+interface PropTypes {
+  routes: BestRouteResponse | null;
+  totalFee?: string;
+}
+export function RoutesOverview(props: PropTypes) {
+  if (!props.routes) return null;
+
+  const swaps = props.routes.result?.swaps;
+  return (
+    <Container>
+      <div className="routes">
+        {swaps?.map((swap, idx) => {
+          const isLast = idx + 1 == swaps.length;
+          return (
+            <React.Fragment key={idx}>
+              <div className="route">{swap.from.symbol}</div>
+              <ChevronRightIcon size={12} />
+              {isLast ? <div className="route">{swap.to.symbol}</div> : null}
+            </React.Fragment>
+          );
+        })}
+      </div>
+      {props.totalFee ? (
+        <div className="fee">
+          <GasIcon size={12} />
+          <Divider size={4} direction="horizontal" />${props.totalFee}
+        </div>
+      ) : null}
+    </Container>
+  );
+}

package/src/components/RoutesOverview/index.ts

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

package/src/components/SwapDetailsPlaceholder/SwapDetailsPlaceholder.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import { SecondaryPage, Spinner, Alert, styled } from '../..';
+import { i18n } from '@lingui/core';
+
+const PlaceholderContainer = styled('div', { height: '450px' });
+
+export const LoaderContainer = styled('div', {
+  display: 'flex',
+  justifyContent: 'center',
+  width: '100%',
+  paddingTop: '33%',
+  flex: 1,
+});
+
+interface PropTypes {
+  requestId: string;
+  loading: boolean;
+  onBack: () => void;
+}
+
+export function SwapDetailsPlaceholder(props: PropTypes) {
+  const { requestId, loading, onBack } = props;
+
+  return (
+    <SecondaryPage
+      title={i18n.t('Swap Details')}
+      textField={false}
+      onBack={onBack}>
+      <PlaceholderContainer>
+        {loading ? (
+          <LoaderContainer>
+            <Spinner size={24} />
+          </LoaderContainer>
+        ) : (
+          <Alert
+            type="secondary"
+            title={i18n.t(
+              'swapNotFound',
+              { requestId },
+              { message: 'Swap with request ID = ${requestId} not found.' }
+            )}
+          />
+        )}
+      </PlaceholderContainer>
+    </SecondaryPage>
+  );
+}

package/src/components/SwapDetailsPlaceholder/index.ts

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

package/src/components/TokenPreview/TokenPreview.tsx

@@ -0,0 +1,183 @@
+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

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

package/src/components/index.ts

@@ -12,18 +12,23 @@ export * from './Divider';
 export * from './Drawer';
 export * from './Header';
 export * from './HeaderButtons';
+export * from './HeaderLayout';
 export * from './Icon';
 export * from './Modal';
+export * from './PercentageChange';
 export * from './Radio';
+export * from './RoutesOverview';
 export * from './SecondaryPage';
 export * from './SelectableWalletList';
 export * from './Spinner';
 export * from './StepDetail';
 export * from './SwapContainer';
 export * from './SwapDetail';
+export * from './SwapDetailsPlaceholder';
 export * from './Switch';
 export * from './TextField';
 export * from './TokenList';
+export * from './TokenPreview';
 export * from './Tooltip';
 export * from './Typography';
 export * from './Wallet';

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

@@ -2,178 +2,7 @@ import { Meta } from '@storybook/react';
 import { ConfirmSwap, PropTypes } from './ConfirmSwap';
 import { exampleFor5Wallets, wallets, bestRoute } from './mock';
 import React from 'react';
-import { Button, Typography, Divider, Image, GasIcon, styled } from '../../';
-import { BestRouteResponse } from 'rango-sdk';
-import { ChevronRightIcon } from '../../components';
-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 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',
-});
-
-const TokenPreview = ({
-  chain,
-  token,
-  ...props
-}: {
-  label: string;
-  amount: string;
-  usdValue?: number;
-  chain: {
-    displayName: string;
-    logo: string;
-  };
-  token: {
-    symbol: string;
-    image: string;
-  };
-}) => (
-  <Box>
-    <Container type={'outlined'}>
-      <div className="head">
-        <Typography variant="body2" color="neutral800">
-          {props.label}
-        </Typography>
-        <div>
-          <Typography
-            variant="caption"
-            color="neutral600"
-            className="usd-value">{`$${props.usdValue}`}</Typography>
-        </div>
-      </div>
-      <div className="form">
-        <Button
-          className="selectors"
-          variant="outlined"
-          prefix={<Image src={chain.logo} size={24} />}
-          align="start"
-          size="large">
-          {chain.displayName}
-        </Button>
-        <Divider size={12} direction="horizontal" />
-        <Button
-          className="selectors"
-          variant="outlined"
-          prefix={<Image src={token.image} size={24} />}
-          size="large"
-          align="start">
-          {token.symbol}
-        </Button>
-        <Divider size={12} direction="horizontal" />
-        <div className="amount">
-          <OutputContainer>
-            <Typography variant="h4">{props.amount}</Typography>
-          </OutputContainer>
-        </div>
-      </div>
-    </Container>
-  </Box>
-);
-const OverviewContainer = styled('div', {
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'space-between',
-  padding: '$8',
-  borderRadius: '$5',
-  backgroundColor: '$neutral100',
-  color: '$neutral800',
-  fontSize: '$12',
-
-  '.routes': {
-    display: 'flex',
-    alignItems: 'center',
-  },
-  '.fee': {
-    display: 'flex',
-    alignItems: 'center',
-  },
-});
-
-const RoutesOverview = (props: { routes: BestRouteResponse; totalFee?: string }) => {
-  const swaps = props.routes.result?.swaps;
-  return (
-    <OverviewContainer>
-      <div className="routes">
-        {swaps?.map((swap, idx) => {
-          const isLast = idx + 1 == swaps.length;
-          return (
-            <React.Fragment key={idx}>
-              <div className="route">{swap.from.symbol}</div>
-              <ChevronRightIcon size={12} />
-              {isLast ? <div className="route">{swap.to.symbol}</div> : null}
-            </React.Fragment>
-          );
-        })}
-      </div>
-      <div className="fee">
-        <GasIcon size={12} />
-        <Divider size={4} direction="horizontal" />${props.totalFee}
-      </div>
-    </OverviewContainer>
-  );
-};
+import { Divider, RoutesOverview, TokenPreview } from '../../';
 
 const previewInputs = () => (
   <>
@@ -186,7 +15,8 @@ const previewInputs = () => (
         symbol: bestRoute?.result?.swaps[0].from.symbol || '',
         image: bestRoute?.result?.swaps[0].from.logo || '',
       }}
-      usdValue={2}
+      usdValue={'2'}
+      loadingStatus="success"
       amount={'2.99'}
       label="From"
     />
@@ -200,7 +30,8 @@ const previewInputs = () => (
         symbol: bestRoute?.result?.swaps[0].to.symbol || '',
         image: bestRoute?.result?.swaps[0].to.logo || '',
       }}
-      usdValue={2}
+      usdValue={'2'}
+      loadingStatus="success"
       amount={'2.99'}
       label="To"
     />