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

package/src/components/LiquiditySourceList/LiquiditySourceList.tsx

@@ -1,11 +1,15 @@
 import { CSSProperties } from '@stitches/react';
 import React, { useEffect, useState } from 'react';
 import { styled } from '../../theme';
-import { LiquiditySource } from '../../types/meta';
+import { LiquiditySource, LoadingStatus } from '../../types/meta';
 import { Button } from '../Button/Button';
 import { Spacer } from '../Spacer';
 import { Switch } from '../Switch';
 import { Typography } from '../Typography';
+import { Spinner } from '../Spinner';
+import { LoadingFailedAlert } from '../Alert/LoadingFailedAlert';
+import { NotFoundAlert } from '../Alert/NotFoundAlert';
+import { Image } from '../common';
 
 const groupLiquiditySources = (
   liquiditySources: LiquiditySource[]
@@ -19,34 +23,49 @@ const groupLiquiditySources = (
   ),
 });
 
+const MainContainer = styled('div', {
+  variants: {
+    loaded: {
+      true: {
+        overflowY: 'auto',
+        padding: '0 $4',
+      },
+    },
+  },
+});
+
 const LiquiditySourceType = styled('div', {
   position: 'sticky',
   display: 'flex',
   justifyContent: 'space-between',
   alignItems: 'center',
   top: '0',
-  marginTop: '$8',
-  marginBottom: '$8',
   backgroundColor: '$background',
   zIndex: '9999',
   paddingTop: '$8',
   paddingBottom: '$8',
 });
 
-const LiquidityImage = styled('img', {
-  width: '$20',
-  maxHeight: '$20',
-  marginRight: '$16',
+const LiquidityImageContainer = styled('div', {
+  paddingRight: '$16',
+});
+
+const LoaderContainer = styled('div', {
+  display: 'flex',
+  justifyContent: 'center',
 });
 
 export interface PropTypes {
   list: LiquiditySource[];
   onChange: (liquiditySource: LiquiditySource) => void;
   listContainerStyle?: CSSProperties;
+  loadingStatus: LoadingStatus;
+  searchedFor: string;
 }
 
 export function LiquiditySourceList(props: PropTypes) {
-  const { list, onChange, listContainerStyle } = props;
+  const { list, onChange, listContainerStyle, loadingStatus, searchedFor } =
+    props;
 
   const [selected, setSelected] = useState(
     list.filter((item) => item.selected)
@@ -79,7 +98,10 @@ export function LiquiditySourceList(props: PropTypes) {
   const totalSelectedExchanges = exchanges.filter(isSelected).length;
 
   return (
-    <div style={{ height: '450px', ...listContainerStyle }}>
+    <MainContainer
+      style={listContainerStyle}
+      loaded={loadingStatus === 'success'}
+    >
       <div>
         <LiquiditySourceType>
           <Typography variant="h5">Bridges</Typography>
@@ -90,14 +112,28 @@ export function LiquiditySourceList(props: PropTypes) {
           </Typography>
         </LiquiditySourceType>
         <Spacer size={12} direction="vertical" />
-        {bridges.map((liquiditySource, index) => (
-          <LiquiditySourceItem
-            liquiditySource={liquiditySource}
-            key={index}
-            selected={isSelected(liquiditySource)}
-            onChange={changeLiquiditySources}
-          />
-        ))}
+        {loadingStatus === 'loading' && (
+          <LoaderContainer>
+            <Spinner size={24} />
+          </LoaderContainer>
+        )}
+        {loadingStatus === 'failed' && <LoadingFailedAlert />}
+        {loadingStatus === 'success' && (
+          <>
+            {totalBridges ? (
+              bridges.map((liquiditySource, index) => (
+                <LiquiditySourceItem
+                  liquiditySource={liquiditySource}
+                  key={index}
+                  selected={isSelected(liquiditySource)}
+                  onChange={changeLiquiditySources}
+                />
+              ))
+            ) : (
+              <NotFoundAlert catergory="Bridge" searchedFor={searchedFor} />
+            )}
+          </>
+        )}
       </div>
       <div>
         <LiquiditySourceType>
@@ -109,16 +145,30 @@ export function LiquiditySourceList(props: PropTypes) {
           </Typography>
         </LiquiditySourceType>
         <Spacer size={12} direction="vertical" />
-        {exchanges.map((liquiditySource, index) => (
-          <LiquiditySourceItem
-            liquiditySource={liquiditySource}
-            key={index}
-            selected={isSelected(liquiditySource)}
-            onChange={changeLiquiditySources}
-          />
-        ))}
+        {loadingStatus === 'loading' && (
+          <LoaderContainer>
+            <Spinner size={24} />
+          </LoaderContainer>
+        )}
+        {loadingStatus === 'failed' && <LoadingFailedAlert />}
+        {loadingStatus == 'success' && (
+          <>
+            {totalExchanges ? (
+              exchanges.map((liquiditySource, index) => (
+                <LiquiditySourceItem
+                  liquiditySource={liquiditySource}
+                  key={index}
+                  selected={isSelected(liquiditySource)}
+                  onChange={changeLiquiditySources}
+                />
+              ))
+            ) : (
+              <NotFoundAlert catergory="Exchange" searchedFor={searchedFor} />
+            )}
+          </>
+        )}
       </div>
-    </div>
+    </MainContainer>
   );
 }
 
@@ -135,7 +185,11 @@ const LiquiditySourceItem = ({
     size="large"
     align="start"
     variant="outlined"
-    prefix={<LiquidityImage src={liquiditySource.logo} />}
+    prefix={
+      <LiquidityImageContainer>
+        <Image src={liquiditySource.logo} size={20} />
+      </LiquidityImageContainer>
+    }
     suffix={<Switch checked={selected} />}
     style={{ marginBottom: '12px' }}
     onClick={onChange.bind(null, liquiditySource)}

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/Modal/Modal.tsx

@@ -12,7 +12,6 @@ export interface PropTypes {
   content: React.ReactNode;
   action?: React.ReactNode;
   containerStyle?: CSSProperties;
-  contentStyle?: CSSProperties;
 }
 
 const BackDrop = styled('div', {
@@ -48,7 +47,6 @@ const ModalHeader = styled('div', {
   marginBottom: '$16',
 });
 
-const ContentContainer = styled('div', {});
 
 export function Modal(props: PropTypes) {
   const {
@@ -58,7 +56,6 @@ export function Modal(props: PropTypes) {
     onClose,
     containerStyle,
     action,
-    contentStyle,
   } = props;
 
   const handleBackDropClick = (event: React.MouseEvent<HTMLDivElement>) => {
@@ -81,9 +78,7 @@ export function Modal(props: PropTypes) {
                   <CloseIcon size={24} onClick={onClose} />
                 </Row>
               </ModalHeader>
-              <ContentContainer style={contentStyle}>
-                {content}
-              </ContentContainer>
+              {content}
             </ModalContainer>
           </BackDrop>,
           document.body

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,8 @@ import React, { PropsWithChildren, useEffect, useState } from 'react';
 import { styled } from '../../theme';
 import { SelectableWallet } from '../../types';
 import { Typography } from '../Typography';
+import { getConciseAddress } from '../../helper';
+import { Image } from '../common';
 
 const Row = styled('div', {
   display: 'flex',
@@ -69,6 +71,7 @@ const Container = styled('div', {
     },
   },
 });
+
 export interface PropTypes {
   list: SelectableWallet[];
   onChange: (w: SelectableWallet) => void;
@@ -100,8 +103,11 @@ export function SelectableWalletList({
             onClick={onClick.bind(null, w)}
             key={index}
           >
-            <img src={w.image} alt={w.walletType} width={24} height={24} />
+            <Image src={w.image} alt={w.walletType} size={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',
@@ -26,13 +27,13 @@ const SlippageChipsContainer = styled('div', {
 const LiquiditySourceContainer = styled(BaseContainer, {
   display: 'flex',
   justifyContent: 'space-between',
-  marginTop: '$32',
+  marginTop: '$16',
   cursor: 'pointer',
 });
 const InfiniteContainer = styled(BaseContainer, {
   display: 'flex',
   justifyContent: 'space-between',
-  marginTop: '$32',
+  marginTop: '$16',
 });
 
 const StyledAngleRight = styled(AngleRightIcon, { marginLeft: '$8' });
@@ -44,8 +45,9 @@ const LiquiditySourceNumber = styled('div', {
 });
 
 const ThemesContainer = styled(BaseContainer, {
-  marginTop: '$32',
+  marginTop: '$16',
 });
+
 const Head = styled('div', {
   display: 'flex',
   justifyContent: 'space-between',
@@ -71,6 +73,7 @@ export interface PropTypes {
   onBack: () => void;
   infiniteApprove: boolean;
   toggleInfiniteApprove: (infinite: boolean) => void;
+  loadingStatus: LoadingStatus;
 }
 
 export function Settings(props: PropTypes) {
@@ -89,6 +92,7 @@ export function Settings(props: PropTypes) {
     onThemeChange,
     toggleInfiniteApprove,
     infiniteApprove,
+    loadingStatus,
   } = props;
 
   const [selectedSlippage, setSelectedSlippage] = useState(
@@ -167,16 +171,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

@@ -50,6 +50,12 @@ const StepContainer = styled('div', {
         justifyContent: 'center',
       },
     },
+    success: {
+      true: { filter: 'none' },
+      false: {
+        filter: 'grayscale(100%)',
+      },
+    },
   },
 });
 const Detail = styled('div', {
@@ -69,6 +75,8 @@ const Detail = styled('div', {
 });
 const SubTitle = styled(Typography, {
   color: '$neutrals600',
+  display: 'block',
+  paddingLeft: '$8',
 });
 export interface PropTypes {
   logo: string;
@@ -76,19 +84,24 @@ export interface PropTypes {
   amount: string;
   symbol: string;
   blockchain: string;
+  estimatedAmount?: string;
   direction?: 'horizontal' | 'vertical';
+  success?: boolean;
 }
 
-export function StepDetail({
-  logo,
-  chainLogo,
-  amount,
-  symbol,
-  blockchain,
-  direction = 'horizontal',
-}: PropsWithChildren<PropTypes>) {
+export function StepDetail(props: PropsWithChildren<PropTypes>) {
+  const {
+    logo,
+    chainLogo,
+    amount,
+    symbol,
+    blockchain,
+    estimatedAmount,
+    success = true,
+    direction = 'horizontal',
+  } = props;
   return (
-    <StepContainer direction={direction}>
+    <StepContainer direction={direction} success={success}>
       <StepLogoContainer direction={direction}>
         <Logo src={logo} alt={symbol} />
         <ChainLogo>
@@ -96,10 +109,31 @@ export function StepDetail({
         </ChainLogo>
       </StepLogoContainer>
       <Detail pl={direction === 'horizontal'}>
-        <Typography noWrap variant={direction === 'vertical' ? 'body2' : 'h6'}>
-          {amount ? parseFloat(amount).toFixed(2) : '?'} {symbol}
+        {amount && (
+          <Typography
+            noWrap
+            variant={direction === 'vertical' ? 'body2' : 'title'}
+          >
+            {amount}
+          </Typography>
+        )}
+        {!amount && estimatedAmount && (
+          <Typography
+            noWrap
+            variant={direction === 'vertical' ? 'body2' : 'title'}
+            color={'$neutrals600'}
+          >
+            {estimatedAmount}
+          </Typography>
+        )}
+        &nbsp;
+        <Typography
+          variant={direction === 'vertical' ? 'body2' : 'title'}
+          noWrap
+        >
+          {symbol}
         </Typography>
-        <SubTitle noWrap variant="caption" color="neutrals800">
+        <SubTitle noWrap variant="caption" color="$neutrals800">
           on {blockchain}
         </SubTitle>
       </Detail>

package/src/components/SwapContainer/SwapContainer.tsx

@@ -3,36 +3,40 @@ 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',
   padding: '$16',
   boxSizing: 'border-box',
-  position: 'relative',
-});
-
-const ContentContainer = styled('div', {
-  width: '100%',
-  // maxHeight: '600px',
+  backgroundColor: '$background',
+  variants: {
+    fixedHeight: {
+      true: {
+        height: '595px',
+        maxHeight: '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>
   );
 }