@rango-dev/ui 0.1.10-next.91 → 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}>
-          {list.find((item) => item.selected) ? 'Clear all' : 'Select all'}
-        </ActionButton>
+        <Button variant="ghost" type="primary" onClick={toggleAll}>
+          {list.find((item) => item.selected) ? 'Deselect all' : 'Select all'}
+        </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/Radio/Radio.tsx

@@ -27,14 +27,15 @@ const ItemContainer = styled('div', {
 });
 const StyledItem = styled(RadioGroup.Item, {
   padding: '0',
-  backgroundColor: '$neutrals300',
   width: '20px',
   height: '20px',
   borderRadius: '100%',
-  border: 'none',
   cursor: 'pointer',
+  backgroundColor: '$background',
+  border: '1px solid $neutrals400',
+
   '&:hover': {
-    backgroundColor: '$neutrals400',
+    borderColor: '$neutrals600',
   },
 });
 
@@ -55,7 +56,7 @@ const StyledIndicator = styled(RadioGroup.Indicator, {
     width: '10px',
     height: '10px',
     borderRadius: '50%',
-    backgroundColor: '$primary',
+    backgroundColor: '$success',
   },
 });
 

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,11 +2,11 @@ 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',
   flexWrap: 'wrap',
-  justifyContent: 'center',
 });
 
 const Circle = styled('div', {
@@ -70,6 +70,7 @@ const Container = styled('div', {
     },
   },
 });
+
 export interface PropTypes {
   list: SelectableWallet[];
   onChange: (w: SelectableWallet) => void;
@@ -103,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,14 +4,15 @@ 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',
-  backgroundColor: '$neutrals200',
+  backgroundColor: '$neutrals300',
   padding: '$16',
 });
 
@@ -46,6 +47,12 @@ const LiquiditySourceNumber = styled('div', {
 const ThemesContainer = styled(BaseContainer, {
   marginTop: '$32',
 });
+const Head = styled('div', {
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  paddingBottom: '$16',
+});
 
 type Theme = 'dark' | 'light' | 'auto';
 
@@ -65,6 +72,7 @@ export interface PropTypes {
   onBack: () => void;
   infiniteApprove: boolean;
   toggleInfiniteApprove: (infinite: boolean) => void;
+  loadingStatus: LoadingStatus;
 }
 
 export function Settings(props: PropTypes) {
@@ -83,6 +91,7 @@ export function Settings(props: PropTypes) {
     onThemeChange,
     toggleInfiniteApprove,
     infiniteApprove,
+    loadingStatus,
   } = props;
 
   const [selectedSlippage, setSelectedSlippage] = useState(
@@ -97,7 +106,14 @@ export function Settings(props: PropTypes) {
   const PageContent = (
     <>
       <BaseContainer>
-        <Title variant="body1">Slippage tolerance per swap</Title>
+        <Head>
+          <Typography variant="body1">Slippage tolerance per swap</Typography>
+          {customSlippage ? (
+            <Typography variant="caption" color="error">
+              {customSlippage}% Custom
+            </Typography>
+          ) : undefined}
+        </Head>
         <SlippageChipsContainer>
           {slippages.map((slippage, index) => (
             <Chip
@@ -107,7 +123,7 @@ export function Settings(props: PropTypes) {
                 changeSlippage(slippage);
               }}
               selected={!customSlippage && slippage === selectedSlippage}
-              label={`${slippage.toString()} %`}
+              label={`${slippage.toString()}%`}
               style={{
                 marginRight: '8px',
               }}
@@ -128,11 +144,10 @@ export function Settings(props: PropTypes) {
               customSlippage && <Typography variant="body2">%</Typography>
             }
             size="small"
-            placeholder="Custom"
+            placeholder="Custom %"
             style={{
               width: '128px',
               flexGrow: 'initial',
-              borderColor: customSlippage ? '$success' : 'initial',
             }}
           />
         </SlippageChipsContainer>
@@ -155,12 +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">{`( ${selectedLiquiditySources.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/Spacer/Spacer.tsx

@@ -4,6 +4,8 @@ import { styled } from '../../theme';
 const SpacerContainer = styled('div', {
   variants: {
     size: {
+      4: {},
+      8: {},
       12: {},
       16: {},
       18: {},
@@ -16,6 +18,34 @@ const SpacerContainer = styled('div', {
     },
   },
   compoundVariants: [
+    {
+      size: 4,
+      direction: 'horizontal',
+      css: {
+        width: '$4',
+      },
+    },
+    {
+      size: 4,
+      direction: 'vertical',
+      css: {
+        height: '$4',
+      },
+    },
+    {
+      size: 8,
+      direction: 'horizontal',
+      css: {
+        width: '$8',
+      },
+    },
+    {
+      size: 8,
+      direction: 'vertical',
+      css: {
+        height: '$8',
+      },
+    },
     {
       size: 12,
       direction: 'horizontal',
@@ -89,7 +119,7 @@ const SpacerContainer = styled('div', {
   ],
 });
 export interface PropTypes {
-  size?: 12 | 16 | 18 | 20 | 24;
+  size?: 4 | 8 | 12 | 16 | 18 | 20 | 24;
   direction?: 'vertical' | 'horizontal';
 }
 

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

@@ -21,12 +21,21 @@ const Logo = styled('img', {
   borderRadius: '50%',
 });
 
-const ChainLogo = styled('img', {
+const ChainLogo = styled('div', {
   position: 'absolute',
-  bottom: 0,
-  width: '$12',
-  height: '$12',
-  right: 0,
+  right: -4,
+  bottom: -4,
+  width: '$16',
+  height: '$16',
+  padding: '$2',
+  borderRadius: '50%',
+  backgroundColor: '$background',
+  border: '1px solid $neutrals400',
+
+  img: {
+    width: '100%',
+    display: 'block',
+  },
 });
 const StepContainer = styled('div', {
   display: 'flex',
@@ -60,6 +69,7 @@ const Detail = styled('div', {
 });
 const SubTitle = styled(Typography, {
   color: '$neutrals600',
+  display: 'block',
 });
 export interface PropTypes {
   logo: string;
@@ -82,13 +92,15 @@ export function StepDetail({
     <StepContainer direction={direction}>
       <StepLogoContainer direction={direction}>
         <Logo src={logo} alt={symbol} />
-        <ChainLogo src={chainLogo} alt={blockchain} />
+        <ChainLogo>
+          <img src={chainLogo} alt={blockchain} />
+        </ChainLogo>
       </StepLogoContainer>
       <Detail pl={direction === 'horizontal'}>
         <Typography noWrap variant={direction === 'vertical' ? 'body2' : 'h6'}>
           {amount ? parseFloat(amount).toFixed(2) : '?'} {symbol}
         </Typography>
-        <SubTitle noWrap variant="caption">
+        <SubTitle noWrap variant="caption" color="neutrals800">
           on {blockchain}
         </SubTitle>
       </Detail>

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',
-  padding: '$16 $24',
+  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>
   );
 }