@rango-dev/ui 0.1.10-next.92 → 0.1.10

package/src/components/LiquiditySourcesSelector/LiquiditySourcesSelector.tsx

@@ -1,8 +1,7 @@
 import { CSSProperties } from '@stitches/react';
 import React from 'react';
 import { containsText } from '../../helper';
-import { styled } from '../../theme';
-import { LiquiditySource } from '../../types/meta';
+import { LiquiditySource, LoadingStatus } from '../../types/meta';
 import { Button } from '../Button';
 import { LiquiditySourceList } from '../LiquiditySourceList';
 import { SecondaryPage } from '../SecondaryPage/SecondaryPage';
@@ -21,15 +20,19 @@ export interface PropTypes {
   onBack?: () => void;
   hasHeader?: boolean;
   listContainerStyle?: CSSProperties;
+  loadingStatus: LoadingStatus;
 }
-const ActionButton = styled(Button, {
-  position: 'absolute',
-  right: 0,
-});
 
 export function LiquiditySourcesSelector(props: PropTypes) {
-  const { list, onChange, onBack, hasHeader, listContainerStyle, toggleAll } =
-    props;
+  const {
+    list,
+    onChange,
+    onBack,
+    hasHeader,
+    listContainerStyle,
+    toggleAll,
+    loadingStatus,
+  } = props;
 
   return (
     <SecondaryPage
@@ -37,9 +40,9 @@ export function LiquiditySourcesSelector(props: PropTypes) {
       textFieldPlaceholder="Search By Name"
       title="Liquidity Sources"
       TopButton={
-        <ActionButton variant="ghost" type="primary" onClick={toggleAll}>
+        <Button variant="ghost" type="primary" onClick={toggleAll}>
           {list.find((item) => item.selected) ? 'Deselect all' : 'Select all'}
-        </ActionButton>
+        </Button>
       }
       hasHeader={hasHeader}
       onBack={onBack}
@@ -49,6 +52,8 @@ export function LiquiditySourcesSelector(props: PropTypes) {
           listContainerStyle={listContainerStyle}
           list={filterLiquiditySources(list, searchedFor)}
           onChange={onChange}
+          loadingStatus={loadingStatus}
+          searchedFor={searchedFor}
         />
       )}
     </SecondaryPage>

package/src/components/SecondaryPage/SecondaryPage.tsx

@@ -1,8 +1,9 @@
 import React, { ReactNode, useState } from 'react';
 import { styled } from '../../theme';
-import { AngleLeftIcon, SearchIcon } from '../Icon';
-import { TextField } from '../TextField/TextField';
-import { Typography } from '../Typography';
+import { Divider } from '../Divider';
+import { Header } from '../Header';
+import { SearchIcon } from '../Icon';
+import { TextField } from '../TextField';
 
 export type PropTypes = (
   | {
@@ -22,40 +23,16 @@ export type PropTypes = (
   hasHeader?: boolean;
 };
 
-const Container = styled('div', {
+const ContentContainer = styled('div', {
+  overflow: 'hidden',
   display: 'flex',
   flexDirection: 'column',
-  height: '100%',
-  width: '100%',
-  padding: '$12 0',
-  position: 'relative',
-
-  '@lg': {
-    padding: '$16 0',
-  },
-});
-
-const HeaderContainer = styled('div', {
-  display: 'flex',
-  justifyContent: 'center',
-  alignItems: 'center',
-  marginBottom: '$16',
-  position: 'relative',
-});
-
-const BackIcon = styled(AngleLeftIcon, {
-  position: 'absolute',
-  left: '0',
-});
-const StyledBackIcon = styled(BackIcon, {
-  cursor: 'pointer',
+  flex: '1',
+  padding: '0 $4',
 });
 
-const ContentContainer = styled('div', {
-  flex: '1',
-  overflowY: 'auto',
-  overflowX: 'hidden',
-  marginTop: '$16',
+const TextFieldContainer = styled('div', {
+  padding: '1px',
 });
 
 export function SecondaryPage(props: PropTypes) {
@@ -63,32 +40,29 @@ export function SecondaryPage(props: PropTypes) {
   const [searchedFor, setSearchedFor] = useState('');
 
   return (
-    <Container>
+    <>
       {hasHeader && (
-        <HeaderContainer>
-          <StyledBackIcon size={24} onClick={onBack} />
-          <Typography variant="h4">{title}</Typography>
-          {TopButton}
-        </HeaderContainer>
+        <Header onBack={onBack} title={title || ''} suffix={TopButton} />
       )}
 
-      {props.textField && (
-        <div>
-          <TextField
-            size="large"
-            prefix={<SearchIcon size={24} />}
-            placeholder={props.textFieldPlaceholder}
-            onChange={(event) => setSearchedFor(event.target.value)}
-            value={searchedFor}
-            autoFocus
-          />
-        </div>
-      )}
       <ContentContainer>
+        {props.textField && (
+          <TextFieldContainer>
+            <TextField
+              size="large"
+              prefix={<SearchIcon size={24} />}
+              placeholder={props.textFieldPlaceholder}
+              onChange={(event) => setSearchedFor(event.target.value)}
+              value={searchedFor}
+              autoFocus
+            />
+            <Divider size={16} />
+          </TextFieldContainer>
+        )}
         {props.textField && props.children?.(searchedFor)}
         {!props.textField && props.children}
       </ContentContainer>
       {Footer}
-    </Container>
+    </>
   );
 }

package/src/components/SelectableWalletList/SelectableWalletList.tsx

@@ -2,6 +2,7 @@ import React, { PropsWithChildren, useEffect, useState } from 'react';
 import { styled } from '../../theme';
 import { SelectableWallet } from '../../types';
 import { Typography } from '../Typography';
+import { getConciseAddress } from '../../helper';
 
 const Row = styled('div', {
   display: 'flex',
@@ -69,6 +70,7 @@ const Container = styled('div', {
     },
   },
 });
+
 export interface PropTypes {
   list: SelectableWallet[];
   onChange: (w: SelectableWallet) => void;
@@ -102,6 +104,9 @@ export function SelectableWalletList({
           >
             <img src={w.image} alt={w.walletType} width={24} height={24} />
             <Typography variant="body2">{w.name}</Typography>
+            <Typography variant="caption">
+              {getConciseAddress(w.address)}
+            </Typography>
             <Circle checked={checked}>
               <SolidCircle checked={checked} />
             </Circle>

package/src/components/SelectableWalletList/mock.ts

@@ -1,9 +1,10 @@
-import { WalletType } from '@rango-dev/wallets-shared';
-import { SelectableWallet } from '../../containers/ConfirmWallets/types';
+import { Network, WalletType } from '@rango-dev/wallets-shared';
+import { SelectableWallet } from '../../types';
 
 export const data: SelectableWallet[] = [
   {
-    blockchain: 'BSC',
+    chain: Network.BTC,
+    name: Network.BTC,
     walletType: WalletType.META_MASK,
     address: '0x5423e28219d6d568dcf62a8134d623e6f4a1c2df',
     image: 'https://app.rango.exchange/wallets/metamask.svg',

package/src/components/Settings/Settings.tsx

@@ -4,10 +4,11 @@ import { AngleRightIcon } from '../Icon';
 import { SecondaryPage } from '../SecondaryPage/SecondaryPage';
 import { Typography } from '../Typography';
 import { Chip } from '../Chip';
-import { LiquiditySource } from '../../types/meta';
+import { LiquiditySource, LoadingStatus } from '../../types/meta';
 import { TextField } from '../TextField';
 import { Radio } from '../Radio';
 import { Switch } from '../Switch';
+import { Button } from '../Button';
 
 const BaseContainer = styled('div', {
   borderRadius: '$5',
@@ -71,6 +72,7 @@ export interface PropTypes {
   onBack: () => void;
   infiniteApprove: boolean;
   toggleInfiniteApprove: (infinite: boolean) => void;
+  loadingStatus: LoadingStatus;
 }
 
 export function Settings(props: PropTypes) {
@@ -89,6 +91,7 @@ export function Settings(props: PropTypes) {
     onThemeChange,
     toggleInfiniteApprove,
     infiniteApprove,
+    loadingStatus,
   } = props;
 
   const [selectedSlippage, setSelectedSlippage] = useState(
@@ -167,16 +170,32 @@ export function Settings(props: PropTypes) {
         <Typography variant="body1">Infinite Approval</Typography>
         <Switch checked={infiniteApprove} onChange={toggleInfiniteApprove} />
       </InfiniteContainer>
-      <LiquiditySourceContainer onClick={onLiquiditySourcesClick}>
-        <Typography variant="body1">Liquidity Sources</Typography>
-        <LiquiditySourceNumber>
-          <Typography variant="body2" color="neutrals800">
-            {liquiditySources.length !== selectedLiquiditySources.length
-              ? `${selectedLiquiditySources.length} / ${liquiditySources.length}`
-              : liquiditySources.length}
-          </Typography>
-          <StyledAngleRight />
-        </LiquiditySourceNumber>
+      <LiquiditySourceContainer>
+        <Button
+          onClick={onLiquiditySourcesClick}
+          align="start"
+          variant="ghost"
+          loading={loadingStatus === 'loading'}
+          suffix={
+            <LiquiditySourceNumber>
+              {loadingStatus === 'success' && (
+                <Typography variant="body2" color="neutrals800">
+                  {liquiditySources.length !== selectedLiquiditySources.length
+                    ? `${selectedLiquiditySources.length} / ${liquiditySources.length}`
+                    : liquiditySources.length}
+                </Typography>
+              )}
+              {loadingStatus === 'failed' && (
+                <Typography variant="body2" color="$error500">
+                  Loading failed
+                </Typography>
+              )}
+              <StyledAngleRight />
+            </LiquiditySourceNumber>
+          }
+        >
+          <Typography variant="body1">Liquidity Sources</Typography>
+        </Button>
       </LiquiditySourceContainer>
     </>
   );

package/src/components/StatusDrawer/StatusDrawer.tsx

@@ -37,6 +37,7 @@ export function StatusDrawer({
 }: PropTypes) {
   return (
     <Drawer
+      container={document.body}
       content={
         <>
           <Header>

package/src/components/StepDetail/StepDetail.tsx

@@ -69,6 +69,7 @@ const Detail = styled('div', {
 });
 const SubTitle = styled(Typography, {
   color: '$neutrals600',
+  display: 'block',
 });
 export interface PropTypes {
   logo: string;

package/src/components/SwapContainer/SwapContainer.tsx

@@ -3,36 +3,41 @@ import React, { PropsWithChildren } from 'react';
 import { styled } from '../../theme';
 
 const MainContainer = styled('div', {
+  position: 'relative',
+  display: 'flex',
+  flexDirection: 'column',
   borderRadius: '$10',
-  maxWidth: '512px',
   boxShadow: '$s',
-  minWidth: '375px',
   width: '100%',
-  backgroundColor: '$background',
-  height: 'fit-content',
-  display: 'flex',
-  flexDirection: 'column',
-  alignItems: 'end',
+  minWidth: '375px',
+  maxWidth: '512px',
+  maxHeight: '595px',
   padding: '$16',
   boxSizing: 'border-box',
-  position: 'relative',
-});
-
-const ContentContainer = styled('div', {
-  width: '100%',
-  // maxHeight: '600px',
+  backgroundColor: '$background',
+  variants: {
+    fixedHeight: {
+      true: {
+        height: '595px',
+      },
+      false: {
+        height: 'auto',
+      },
+    },
+  },
 });
 
 export interface PropTypes {
   style?: CSSProperties;
+  fixedHeight?: boolean;
 }
 
 export function SwapContainer(props: PropsWithChildren<PropTypes>) {
-  const { children, style } = props;
+  const { children, style, fixedHeight = true } = props;
 
   return (
-    <MainContainer style={style} id="swap-box">
-      <ContentContainer>{children}</ContentContainer>
+    <MainContainer style={style} id="swap-box" fixedHeight={fixedHeight}>
+      {children}
     </MainContainer>
   );
 }

package/src/components/SwapDetail/SwapDetail.tsx

@@ -2,88 +2,45 @@ import React, { PropsWithChildren } from 'react';
 import { PendingSwap } from '../../containers/History/types';
 import { styled } from '../../theme';
 import { Button } from '../Button';
-import { CheckCircleIcon, InfoCircleIcon, TryAgainIcon } from '../Icon';
-import { StepDetail } from '../StepDetail';
+import { ArrowRightIcon } from '../Icon';
+import { Spacer } from '../Spacer';
+import { Spinner } from '../Spinner';
+import { Token } from './Token';
 
 const Container = styled('div', {
   position: 'relative',
-});
-
-const ButtonContainer = styled('div', {
-  paddingTop: '$8',
-});
-const SwapContainer = styled('div', {
   display: 'flex',
   justifyContent: 'space-between',
-  '@md': {
-    padding: '$12',
+  alignItems: 'center',
+  padding: '$16 0',
+  borderBottom: '1px solid $neutrals300',
+
+  '& > .info': {
+    display: 'flex',
+    alignItems: 'center',
   },
-  '&:hover': {
-    borderColor: '$primary',
+
+  '.status': {
+    textTransform: 'uppercase',
+    fontWeight: 'bold',
+    fontSize: '$12',
   },
 
-  variants: {
-    status: {
-      failed: {
-        borderColor: '$error',
-      },
-      running: {
-        borderColor: '$neutrals400',
-      },
-      success: {
-        borderColor: '$success',
-      },
-    },
+  '&.running': {
+    color: '$foreground',
   },
-});
-const Arrow = styled('div', {
-  display: 'flex',
-  justifyContent: 'center',
-  alignItems: 'center',
-});
-const Line = styled('div', {
-  height: '0',
-  width: '$20',
-  border: '1px dashed $foreground',
-  borderRadius: 'inherit',
-  '@md': {
-    width: '$36',
+  '&.failed,&.success': {
+    color: '$neutrals600',
   },
-  '@lg': {
-    width: '$48',
+
+  '&.failed .status': {
+    color: '$error',
   },
-});
-const Dot = styled('div', {
-  width: '$6',
-  height: '$6',
-  backgroundColor: '$foreground',
-  borderRadius: '50%',
-  '@lg': {
-    width: '$8',
-    height: '$8',
+  '&.success .status': {
+    color: '$success',
   },
 });
-const ArrowRight = styled('div', {
-  width: '0px',
-  height: '0px',
-  borderTop: '5px solid transparent',
-  borderBottom: '5px solid transparent',
-  borderLeft: '5px solid $foreground',
-});
-const StatusContainer = styled('div', {
-  position: 'absolute',
-  right: '-8px',
-  top: '30%',
-  background: '$background',
-  borderRadius: '50%',
-  display: 'flex',
-  justifyContent: 'center',
 
-  '@md': {
-    top: '40%',
-    right: '-8px',
-  },
-});
 export interface PropTypes {
   swap: PendingSwap;
   status: 'running' | 'failed' | 'success';
@@ -99,52 +56,57 @@ export function SwapDetail({
   const lastStep = swap.steps[swap.steps.length - 1];
 
   return (
-    <Container onClick={onClick.bind(null, swap.requestId)}>
-      <ButtonContainer>
-        <Button
-          variant="outlined"
-          align="grow"
-          size="large"
-          type={
-            status === 'failed'
-              ? 'error'
-              : status === 'success'
-              ? 'success'
-              : undefined
-          }
-        >
-          <SwapContainer>
-            <StepDetail
-              logo={firstStep.fromLogo}
-              symbol={firstStep.fromSymbol}
-              chainLogo={firstStep.fromBlockchainLogo}
-              blockchain={firstStep.fromBlockchain}
-              amount={swap.inputAmount}
-            />
-            <Arrow>
-              <Dot />
-              <Line />
-              <ArrowRight />
-            </Arrow>
-            <StepDetail
-              logo={lastStep.toLogo}
-              symbol={lastStep.toSymbol}
-              chainLogo={lastStep.toBlockchainLogo}
-              blockchain={lastStep.toBlockchain}
-              amount={lastStep.outputAmount}
-            />
-          </SwapContainer>
-        </Button>
-      </ButtonContainer>
-      <StatusContainer>
-        {status === 'running' ? (
-          <TryAgainIcon size={16} />
-        ) : status === 'failed' ? (
-          <InfoCircleIcon size={18} color="error" />
-        ) : (
-          <CheckCircleIcon size={18} color="success" />
-        )}
-      </StatusContainer>
-    </Container>
+    <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: {
+                // @ts-ignore
+                logo: firstStep.fromBlockchainLogo,
+                name: firstStep.fromBlockchain,
+              },
+              amount: swap.inputAmount,
+            }}
+          />
+          <Spacer size={12} />
+          <ArrowRightIcon size={12} />
+          <Spacer size={12} />
+          <Token
+            data={{
+              token: {
+                logo: lastStep.toLogo,
+                symbol: lastStep.toSymbol,
+              },
+              blockchain: {
+                // @ts-ignore
+                logo: lastStep.toBlockchainLogo,
+                name: lastStep.toBlockchain,
+              },
+              amount:
+                lastStep.outputAmount ||
+                lastStep.expectedOutputAmountHumanReadable ||
+                '',
+            }}
+          />
+        </div>
+        <div className={`status`}>
+          {status === 'running' ? (
+            <Spinner size={24} color="primary" />
+          ) : (
+            status
+          )}
+        </div>
+      </Container>
+    </Button>
   );
 }

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/mock.ts

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import { RoutingResultType, TransactionType } from 'rango-sdk';
 import { PendingSwap } from '../../containers/History/types';
 

package/src/components/TextField/TextField.tsx

@@ -4,6 +4,7 @@ import { styled } from '../../theme';
 
 const InputContainer = styled('div', {
   backgroundColor: '$background',
+  padding: '1px',
   boxSizing: 'border-box',
   border: '1px solid $neutrals400',
   borderRadius: '$5',

package/src/components/TokenList/TokenItem.tsx

@@ -40,6 +40,7 @@ export function TokenItem(props: PropTypes) {
         ...style,
         height: '48px',
         top: `${parseFloat(style?.top as string) + 0}px`,
+        padding: '0 4px',
       }}
     >
       <Button
@@ -62,7 +63,9 @@ export function TokenItem(props: PropTypes) {
       >
         <TokenNameContainer>
           <Typography variant="body1">{token.symbol}</Typography>
-          <Typography variant="body2">{token.name}</Typography>
+          <Typography variant="caption" color="neutrals600">
+            {token.name}
+          </Typography>
         </TokenNameContainer>
       </Button>
     </div>