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

package/src/components/LiquiditySourceList/LiquiditySourceList.tsx

@@ -19,9 +19,11 @@ const groupLiquiditySources = (
   ),
 });
 
-const LiquiditySourceType = styled(Typography, {
+const LiquiditySourceType = styled('div', {
   position: 'sticky',
-  display: 'block',
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
   top: '0',
   marginTop: '$8',
   marginBottom: '$8',
@@ -66,12 +68,29 @@ export function LiquiditySourceList(props: PropTypes) {
     setSelected(list.filter((item) => item.selected));
   }, [list]);
 
+  const sections = groupLiquiditySources(list);
+  const bridges = sections.bridge;
+  const exchanges = sections.exchange;
+
+  const totalBridges = bridges.length;
+  const totalExchanges = exchanges.length;
+  // TODO: This is not performant
+  const totalSelectedBridges = bridges.filter(isSelected).length;
+  const totalSelectedExchanges = exchanges.filter(isSelected).length;
+
   return (
     <div style={{ height: '450px', ...listContainerStyle }}>
       <div>
-        <LiquiditySourceType variant="h5">Bridges</LiquiditySourceType>
-        <Spacer size={16} direction="vertical" />
-        {groupLiquiditySources(list).bridge.map((liquiditySource, index) => (
+        <LiquiditySourceType>
+          <Typography variant="h5">Bridges</Typography>
+          <Typography variant="body1" color="neutrals800">
+            {totalSelectedBridges === totalBridges
+              ? totalBridges
+              : `${totalSelectedBridges} / ${totalBridges}`}
+          </Typography>
+        </LiquiditySourceType>
+        <Spacer size={12} direction="vertical" />
+        {bridges.map((liquiditySource, index) => (
           <LiquiditySourceItem
             liquiditySource={liquiditySource}
             key={index}
@@ -81,10 +100,16 @@ export function LiquiditySourceList(props: PropTypes) {
         ))}
       </div>
       <div>
-        <LiquiditySourceType variant="h5">Exchanges</LiquiditySourceType>
-        <Spacer size={16} direction="vertical" />
-
-        {groupLiquiditySources(list).exchange.map((liquiditySource, index) => (
+        <LiquiditySourceType>
+          <Typography variant="h5">Exchanges</Typography>
+          <Typography variant="body1" color="neutrals800">
+            {totalSelectedExchanges === totalExchanges
+              ? totalExchanges
+              : `${totalSelectedExchanges} / ${totalExchanges}`}
+          </Typography>
+        </LiquiditySourceType>
+        <Spacer size={12} direction="vertical" />
+        {exchanges.map((liquiditySource, index) => (
           <LiquiditySourceItem
             liquiditySource={liquiditySource}
             key={index}
@@ -113,7 +138,6 @@ const LiquiditySourceItem = ({
     prefix={<LiquidityImage src={liquiditySource.logo} />}
     suffix={<Switch checked={selected} />}
     style={{ marginBottom: '12px' }}
-    type={selected ? 'primary' : undefined}
     onClick={onChange.bind(null, liquiditySource)}
   >
     <Typography variant="body1">{liquiditySource.title}</Typography>

package/src/components/LiquiditySourcesSelector/LiquiditySourcesSelector.tsx

@@ -38,7 +38,7 @@ export function LiquiditySourcesSelector(props: PropTypes) {
       title="Liquidity Sources"
       TopButton={
         <ActionButton variant="ghost" type="primary" onClick={toggleAll}>
-          {list.find((item) => item.selected) ? 'Clear all' : 'Select all'}
+          {list.find((item) => item.selected) ? 'Deselect all' : 'Select all'}
         </ActionButton>
       }
       hasHeader={hasHeader}

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

@@ -6,7 +6,6 @@ import { Typography } from '../Typography';
 const Row = styled('div', {
   display: 'flex',
   flexWrap: 'wrap',
-  justifyContent: 'center',
 });
 
 const Circle = styled('div', {

package/src/components/Settings/Settings.tsx

@@ -11,7 +11,7 @@ import { Switch } from '../Switch';
 
 const BaseContainer = styled('div', {
   borderRadius: '$5',
-  backgroundColor: '$neutrals200',
+  backgroundColor: '$neutrals300',
   padding: '$16',
 });
 
@@ -46,6 +46,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';
 
@@ -97,7 +103,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 +120,7 @@ export function Settings(props: PropTypes) {
                 changeSlippage(slippage);
               }}
               selected={!customSlippage && slippage === selectedSlippage}
-              label={`${slippage.toString()} %`}
+              label={`${slippage.toString()}%`}
               style={{
                 marginRight: '8px',
               }}
@@ -128,11 +141,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>
@@ -158,7 +170,11 @@ export function Settings(props: PropTypes) {
       <LiquiditySourceContainer onClick={onLiquiditySourcesClick}>
         <Typography variant="body1">Liquidity Sources</Typography>
         <LiquiditySourceNumber>
-          <Typography variant="body2">{`( ${selectedLiquiditySources.length} / ${liquiditySources.length} )`}</Typography>
+          <Typography variant="body2" color="neutrals800">
+            {liquiditySources.length !== selectedLiquiditySources.length
+              ? `${selectedLiquiditySources.length} / ${liquiditySources.length}`
+              : liquiditySources.length}
+          </Typography>
           <StyledAngleRight />
         </LiquiditySourceNumber>
       </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/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',
@@ -82,13 +91,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

@@ -13,7 +13,7 @@ const MainContainer = styled('div', {
   display: 'flex',
   flexDirection: 'column',
   alignItems: 'end',
-  padding: '$16 $24',
+  padding: '$16',
   boxSizing: 'border-box',
   position: 'relative',
 });

package/src/components/Switch/Switch.tsx

@@ -9,14 +9,16 @@ const StyledSwitchRoot = styled(RadixSwitch.Root, {
   borderStyle: 'solid',
   width: '42px',
   height: '22px',
-  backgroundColor: '$neutrals300',
-  borderColor: '$neutrals400',
+  backgroundColor: '$neutrals600',
+  borderColor: '$neutrals600',
   borderRadius: '99999px',
   position: 'relative',
   padding: '0',
   cursor: 'pointer',
+
   '&[data-state="checked"]': {
-    backgroundColor: '$primary100',
+    backgroundColor: '$success',
+    borderColor: '$success',
   },
   '-webkit-tap-highlight-color': 'rgba(0, 0, 0, 0)',
 });
@@ -28,13 +30,13 @@ const StyledSwitchThumb = styled(RadixSwitch.Thumb, {
   display: 'block',
   width: '18px',
   height: '18px',
-  backgroundColor: '$neutrals500',
+  backgroundColor: '$white',
   transition: ' transform 300ms',
   borderRadius: '999999px',
   willChange: 'transform',
+
   '&[data-state="checked"]': {
     transform: 'translateX(20px)',
-    backgroundColor: '$primary',
   },
 });
 

package/src/components/TextField/TextField.tsx

@@ -15,7 +15,8 @@ const InputContainer = styled('div', {
   color: '$foreground',
   transition: 'border-color ease .3s',
   '&:focus-within': {
-    borderColor: '$primary',
+    borderColor: '$success',
+    outline: '1px solid $success',
   },
   variants: {
     size: {

package/src/components/Typography/Typography.stories.tsx

@@ -13,6 +13,7 @@ export default {
       options: [
         'body1',
         'body2',
+        'body3',
         'h1',
         'h2',
         'h3',
@@ -61,6 +62,9 @@ export const Main = (props: PropTypes) => (
     <Typography {...props} variant="body2">
       Body 2
     </Typography>
+    <Typography {...props} variant="body3">
+      Body 3
+    </Typography>
     <Typography {...props} variant="caption">
       Caption
     </Typography>

package/src/components/Typography/Typography.tsx

@@ -4,7 +4,6 @@ import { styled } from '../../theme';
 
 const TypographyContainer = styled('span', {
   margin: 0,
-  color: '$foreground',
   display: 'inline-block',
   variants: {
     variant: {
@@ -51,12 +50,6 @@ const TypographyContainer = styled('span', {
       h5: {
         fontSize: '$16',
         fontWeight: '$600',
-        '@md': {
-          fontSize: '$18',
-        },
-        '@lg': {
-          fontSize: '$20',
-        },
       },
       h6: {
         fontSize: '$14',
@@ -85,6 +78,10 @@ const TypographyContainer = styled('span', {
           fontSize: '$16',
         },
       },
+      body3: {
+        fontSize: '$12',
+        fontWeight: '$400',
+      },
       caption: {
         fontSize: '$10',
         fontWeight: '$400',
@@ -178,6 +175,7 @@ export interface PropTypes {
     | 'h6'
     | 'body1'
     | 'body2'
+    | 'body3'
     | 'caption';
   align?: 'center' | 'left' | 'right';
   noWrap?: boolean;
@@ -187,16 +185,29 @@ export interface PropTypes {
   mr?: 2 | 4 | 8 | 12;
   className?: string;
   style?: CSSProperties;
-
+  color?: string;
 }
 
 export function Typography({
   children,
   className,
+  color,
   ...props
 }: PropsWithChildren<PropTypes>) {
+  const customCss = color
+    ? {
+        color: color.startsWith('$') ? color : `$${color}`,
+      }
+    : {
+        color: '$foreground',
+      };
+
   return (
-    <TypographyContainer className={`_typography _text ${className}`} {...props}>
+    <TypographyContainer
+      className={`_typography _text ${className || ''}`}
+      css={customCss}
+      {...props}
+    >
       {children}
     </TypographyContainer>
   );

package/src/components/Wallet/State.tsx

@@ -1,7 +1,6 @@
 import React, { Fragment } from 'react';
 import { styled } from '../../theme';
-import { FilledCircle } from '../common';
-import { DownloadIcon } from '../Icon';
+import { DisconnectIcon, DownloadIcon } from '../Icon';
 import { Spinner } from '../Spinner';
 import { WalletState } from '../../types/wallet';
 import { InstallObjects, detectInstallLink } from '@rango-dev/wallets-shared';
@@ -28,7 +27,7 @@ export const State = ({
           </a>
         )}
         {walletState === WalletState.CONNECTING && <Spinner />}
-        {walletState === WalletState.CONNECTED && <FilledCircle />}
+        {walletState === WalletState.CONNECTED && <DisconnectIcon />}
       </StateIconContainer>
     )}
   </Fragment>

package/src/components/Wallet/Wallet.tsx

@@ -12,6 +12,25 @@ const WalletImage = styled('img', {
   height: '$24',
   marginRight: '$12',
 });
+const Text = styled('div', {
+  display: 'flex',
+  flexDirection: 'column',
+});
+
+const ExtendedButton = styled(Button, {
+  variants: {
+    type: {
+      primary: {
+        outline: '1px solid $primary',
+        borderColor: '$primary',
+
+        '&:hover': {
+          borderColor: '$primary',
+        },
+      },
+    },
+  },
+});
 
 export type PropTypes = WalletInfo & {
   onClick: (walletType: WalletType) => void;
@@ -19,8 +38,9 @@ export type PropTypes = WalletInfo & {
 
 export function Wallet(props: PropTypes) {
   const { name, type, image, state, onClick, installLink } = props;
+
   return (
-    <Button
+    <ExtendedButton
       type={state === WalletState.CONNECTED ? 'primary' : undefined}
       disabled={!state}
       onClick={() => {
@@ -34,9 +54,16 @@ export function Wallet(props: PropTypes) {
       prefix={<WalletImage src={image} />}
       suffix={<State walletState={state} installLink={installLink} />}
     >
-      <Typography variant="h5" noWrap={false}>
-        {name}
-      </Typography>
-    </Button>
+      <Text>
+        <Typography variant="h5" noWrap={false}>
+          {name}
+        </Typography>
+        {state === WalletState.CONNECTED ? (
+          <Typography variant="caption" noWrap={false} color="primary">
+            Connected
+          </Typography>
+        ) : null}
+      </Text>
+    </ExtendedButton>
   );
 }

package/src/containers/ConfirmSwap/ConfirmSwap.tsx

@@ -93,7 +93,6 @@ export interface PropTypes {
 export function ConfirmSwap(props: PropsWithChildren<PropTypes>) {
   const {
     bestRoute,
-    onRefresh,
     onBack,
     onConfirm,
     loading,
@@ -123,7 +122,6 @@ export function ConfirmSwap(props: PropsWithChildren<PropTypes>) {
           </Button>
         </Footer>
       }
-      TopButton={<StyledUpdateIcon size={24} onClick={onRefresh} />}
     >
       <MainContainer>
         <div>