@rango-dev/ui 0.1.10-next.78 → 0.1.10-next.80

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/ui",
-  "version": "0.1.10-next.78",
+  "version": "0.1.10-next.80",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

package/src/components/Alert/Alert.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { PropsWithChildren } from 'react';
 import { CheckCircleIcon, InfoCircleIcon, WarningIcon } from '../Icon';
 import { Typography } from '../Typography';
 import { darkTheme, styled } from '../../theme';
@@ -30,10 +30,7 @@ const MainContainer = styled('div', {
   },
 });
 
-const ContentContainer = styled('div', {
-  display: 'flex',
-  flexDirection: 'column',
-});
+const ContentContainer = styled('div', {});
 
 const TitleContainer = styled('div', {
   marginBottom: '$8',
@@ -49,12 +46,11 @@ const StyledTypography = styled(Typography, {
 
 export interface PropTypes {
   type: 'primary' | 'secondary' | 'success' | 'warning' | 'error';
-  description: string;
   title?: string;
 }
 
-export function Alert(props: PropTypes) {
-  const { type, description, title } = props;
+export function Alert(props: PropsWithChildren<PropTypes>) {
+  const { type, children, title } = props;
 
   const showIcon = (
     ['error', 'success', 'warning'] as PropTypes['type'][]
@@ -75,7 +71,7 @@ export function Alert(props: PropTypes) {
             <StyledTypography variant="h6">{title}</StyledTypography>
           </TitleContainer>
         )}
-        <StyledTypography variant="body2">{description}</StyledTypography>
+        {children}
       </ContentContainer>
     </MainContainer>
   );

package/src/components/BestRoute/BestRoute.tsx

@@ -2,8 +2,7 @@ import React, { Fragment, PropsWithChildren } from 'react';
 import { GasIcon, TimeIcon } from '../../components/Icon';
 import { StepDetail } from '../../components/StepDetail';
 import { Typography } from '../../components/Typography';
-import { rawFees, secondsToString, totalArrivalTime } from '../../helper';
-import { styled } from '../../theme';
+import { keyframes, styled } from '../../theme';
 import { Skeleton } from '../Skeleton';
 import { Spinner } from '../Spinner';
 import { BestRouteResponse } from 'rango-sdk';
@@ -77,6 +76,18 @@ const ArrowRight = styled('div', {
   borderLeft: '5px solid $foreground',
 });
 
+const pulse = keyframes({
+  '0%': {
+    opacity: 1,
+  },
+  '50%': {
+    opacity: 0.3,
+  },
+  '100%': {
+    opacity: 1,
+  },
+});
+
 const GasContainer = styled('div', {
   backgroundColor: '$neutrals300',
   borderRadius: '5px',
@@ -91,6 +102,30 @@ const GasContainer = styled('div', {
     margin: '$8',
   },
 });
+
+const FeeContainer = styled('div', {
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+  variants: {
+    warning: {
+      true: {
+        animation: `${pulse} 2s ease-in-out infinite`,
+      },
+    },
+  },
+});
+
+const TotalFee = styled(Typography, {
+  variants: {
+    warning: {
+      true: {
+        color: '$warning300',
+      },
+    },
+  },
+});
+
 const SkeletonContainer = styled('div', {
   padding: '$4',
   '@md': {
@@ -105,22 +140,14 @@ const SwapperContainer = styled('div', {
 
 export interface PropTypes {
   data: BestRouteResponse | null;
+  totalFee: string;
+  feeWarning: boolean;
+  totalTime: string;
   loading?: boolean;
   error?: string;
 }
-export function BestRoute({
-  data,
-  loading,
-  error,
-}: PropsWithChildren<PropTypes>) {
-  let fee,
-    time: string = '';
-
-  if (!!data) {
-    fee = rawFees(data);
-    time = secondsToString(totalArrivalTime(data));
-  }
-
+export function BestRoute(props: PropsWithChildren<PropTypes>) {
+  const { data, loading, error, totalFee, feeWarning, totalTime } = props;
   return (
     <Container>
       {loading ? (
@@ -129,16 +156,23 @@ export function BestRoute({
         </SkeletonContainer>
       ) : (
         <GasContainer>
-          <GasIcon size={20} />
-          <Typography mt={4} align="center" variant="caption">
-            {error && '-'}
-            {!!data && `$${fee}`}
-          </Typography>
+          <FeeContainer warning={feeWarning}>
+            <GasIcon size={20} color={feeWarning ? 'warning' : undefined} />
+            <TotalFee
+              mt={4}
+              align="center"
+              variant="caption"
+              warning={feeWarning}
+            >
+              {error && '-'}
+              {!!data && `$${totalFee}`}
+            </TotalFee>
+          </FeeContainer>
           <HR />
           <TimeIcon size={20} />
           <Typography mt={4} align="center" variant="caption">
             {error && '-'}
-            {!!data && `~${time}m`}
+            {!!data && `~${totalTime}m`}
           </Typography>
         </GasContainer>
       )}

package/src/components/BlockchainSelector/BlockchainSelector.tsx

@@ -7,6 +7,7 @@ import { Spinner } from '../Spinner';
 import { styled } from '../../theme';
 import { CSSProperties } from '@stitches/react';
 import { containsText } from '../../helper';
+import { Typography } from '../Typography';
 
 const ListContainer = styled('div', {
   height: '450px',
@@ -58,20 +59,22 @@ export function BlockchainSelector(props: PropTypes) {
       textFieldPlaceholder="Search Blockchain By Name"
       title={`Select ${type} Network`}
       onBack={onBack}
-      Content={({ searchedFor }) => {
+    >
+      {(searchedFor) => {
         const filteredBlockchains = filterBlockchains(list, searchedFor);
         return (
-          <ListContainer style={listContainerStyle}>
+          <ListContainer style={listContainerStyle} key="1">
             {loadingStatus === 'loading' && (
               <div>
                 <Spinner size={24} />
               </div>
             )}
             {loadingStatus === 'failed' && (
-              <Alert
-                type="error"
-                description="Error connecting server, please reload the app and try again"
-              />
+              <Alert type="error">
+                <Typography variant="body2">
+                  Error connecting server, please reload the app and try again
+                </Typography>
+              </Alert>
             )}
             {loadingStatus === 'success' && (
               <>
@@ -84,16 +87,15 @@ export function BlockchainSelector(props: PropTypes) {
                     onChange={onChange}
                   />
                 ) : (
-                  <Alert
-                    type="secondary"
-                    description={`${searchedFor} not found`}
-                  />
+                  <Alert type="secondary">
+                    <Typography variant="body2">{`${searchedFor} not found`}</Typography>
+                  </Alert>
                 )}
               </>
             )}
           </ListContainer>
         );
       }}
-    />
+    </SecondaryPage>
   );
 }

package/src/components/LiquiditySourceList/LiquiditySourceList.tsx

@@ -1,5 +1,5 @@
 import { CSSProperties } from '@stitches/react';
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { styled } from '../../theme';
 import { LiquiditySource } from '../../types/meta';
 import { Button } from '../Button/Button';
@@ -21,6 +21,7 @@ const groupLiquiditySources = (
 
 const LiquiditySourceType = styled(Typography, {
   position: 'sticky',
+  display: 'block',
   top: '0',
   marginTop: '$8',
   marginBottom: '$8',
@@ -55,14 +56,16 @@ export function LiquiditySourceList(props: PropTypes) {
       if (clickedItem.selected) return [...prevState, clickedItem];
       return prevState.filter((item) => item.title != clickedItem.title);
     });
-    setTimeout(() => {
-      onChange(clickedItem);
-    }, 200);
+    onChange(clickedItem);
   };
 
   const isSelected = (liquiditySource: LiquiditySource) =>
     !!selected.find((item) => liquiditySource.title === item.title);
 
+  useEffect(() => {
+    setSelected(list.filter((item) => item.selected));
+  }, [list]);
+
   return (
     <div style={{ height: '450px', ...listContainerStyle }}>
       <div>
@@ -102,19 +105,17 @@ const LiquiditySourceItem = ({
   liquiditySource: LiquiditySource;
   selected: boolean;
   onChange: (clickedItem: LiquiditySource) => void;
-}) => {
-  return (
-    <Button
-      size="large"
-      align="start"
-      variant="outlined"
-      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>
-    </Button>
-  );
-};
+}) => (
+  <Button
+    size="large"
+    align="start"
+    variant="outlined"
+    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>
+  </Button>
+);

package/src/components/LiquiditySourcesSelector/LiquiditySourcesSelector.tsx

@@ -43,13 +43,14 @@ export function LiquiditySourcesSelector(props: PropTypes) {
       }
       hasHeader={hasHeader}
       onBack={onBack}
-      Content={({ searchedFor }) => (
+    >
+      {(searchedFor) => (
         <LiquiditySourceList
           listContainerStyle={listContainerStyle}
           list={filterLiquiditySources(list, searchedFor)}
           onChange={onChange}
         />
       )}
-    />
+    </SecondaryPage>
   );
 }

package/src/components/Radio/Radio.tsx

@@ -26,6 +26,7 @@ const ItemContainer = styled('div', {
   marginRight: '$8',
 });
 const StyledItem = styled(RadioGroup.Item, {
+  padding: '0',
   backgroundColor: '$neutrals300',
   width: '20px',
   height: '20px',

package/src/components/SecondaryPage/SecondaryPage.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { ReactNode, useState } from 'react';
 import { styled } from '../../theme';
 import { AngleLeftIcon, SearchIcon } from '../Icon';
 import { TextField } from '../TextField/TextField';
@@ -7,12 +7,12 @@ import { Typography } from '../Typography';
 export type PropTypes = (
   | {
       textField: true;
-      Content: React.ElementType<{ searchedFor: string }>;
+      children?: (searchedFor: string) => ReactNode;
       textFieldPlaceholder: string;
     }
   | {
       textField: false;
-      Content: React.ReactNode;
+      children?: ReactNode;
     }
 ) & {
   title?: string;
@@ -84,10 +84,9 @@ export function SecondaryPage(props: PropTypes) {
         </div>
       )}
       <ContentContainer>
-        {props.textField && <props.Content searchedFor={searchedFor} />}
-        {!props.textField && props.Content}
+        {props.textField && props.children?.(searchedFor)}
+        {!props.textField && props.children}
       </ContentContainer>
-
       {Footer}
     </Container>
   );

package/src/components/SelectableWalletList/SelectableWalletList.tsx

@@ -1,6 +1,6 @@
 import React, { PropsWithChildren, useEffect, useState } from 'react';
-import { SelectableWallet } from '../../containers/ConfirmWallets/types';
 import { styled } from '../../theme';
+import { SelectableWallet } from '../../types';
 import { Typography } from '../Typography';
 
 const Row = styled('div', {

package/src/components/Settings/Settings.tsx

@@ -14,10 +14,12 @@ const BaseContainer = styled('div', {
   padding: '$16',
 });
 
+const Title = styled(Typography, { marginBottom: '$16' });
+
 const SlippageChipsContainer = styled('div', {
-  display: 'flex',
-  flexWrap: 'wrap',
-  marginTop: '$16',
+  display: 'grid',
+  rowGap: '$16',
+  gridTemplateColumns: 'repeat(auto-fill, 64px)',
 });
 
 const LiquiditySourceContainer = styled(BaseContainer, {
@@ -27,7 +29,7 @@ const LiquiditySourceContainer = styled(BaseContainer, {
   cursor: 'pointer',
 });
 
-const StyledAngleRight = styled(AngleRightIcon, { marginLeft: '8px' });
+const StyledAngleRight = styled(AngleRightIcon, { marginLeft: '$8' });
 
 const LiquiditySourceNumber = styled('div', {
   display: 'flex',
@@ -85,7 +87,7 @@ export function Settings(props: PropTypes) {
   const PageContent = (
     <>
       <BaseContainer>
-        <Typography variant="body1">Slippage tolerance per swap</Typography>
+        <Title variant="body1">Slippage tolerance per swap</Title>
         <SlippageChipsContainer>
           {slippages.map((slippage, index) => (
             <Chip
@@ -126,7 +128,7 @@ export function Settings(props: PropTypes) {
         </SlippageChipsContainer>
       </BaseContainer>
       <ThemesContainer>
-        <Typography variant="body2">Theme</Typography>
+        <Title variant="body2">Theme</Title>
         <Radio
           defaultValue={selectedTheme}
           options={[
@@ -141,7 +143,7 @@ export function Settings(props: PropTypes) {
       </ThemesContainer>
       <LiquiditySourceContainer onClick={onLiquiditySourcesClick}>
         <Typography variant="body1">Liquidity Sources</Typography>
-        <LiquiditySourceNumber onClick={onLiquiditySourcesClick}>
+        <LiquiditySourceNumber>
           <Typography variant="body2">{`( ${selectedLiquiditySources.length} / ${liquiditySources.length} )`}</Typography>
           <StyledAngleRight />
         </LiquiditySourceNumber>
@@ -150,11 +152,8 @@ export function Settings(props: PropTypes) {
   );
 
   return (
-    <SecondaryPage
-      title="Settings"
-      textField={false}
-      Content={PageContent}
-      onBack={onBack}
-    />
+    <SecondaryPage title="Settings" textField={false} onBack={onBack}>
+      {PageContent}
+    </SecondaryPage>
   );
 }

package/src/components/SwapContainer/SwapContainer.tsx

@@ -14,6 +14,7 @@ const MainContainer = styled('div', {
   flexDirection: 'column',
   alignItems: 'end',
   padding: '$16 $24',
+  boxSizing: 'border-box',
 });
 
 const ContentContainer = styled('div', {

package/src/components/Switch/Switch.tsx

@@ -13,6 +13,7 @@ const StyledSwitchRoot = styled(RadixSwitch.Root, {
   borderColor: '$neutrals400',
   borderRadius: '99999px',
   position: 'relative',
+  padding: '0',
   cursor: 'pointer',
   '&[data-state="checked"]': {
     backgroundColor: '$primary100',

package/src/components/TokenSelector/TokenSelector.tsx

@@ -33,7 +33,8 @@ export function TokenSelector(props: PropTypes) {
       title={`Select ${type} Token`}
       hasHeader={hasHeader}
       onBack={onBack}
-      Content={({ searchedFor }) => (
+    >
+      {(searchedFor) => (
         <TokenList
           searchedText={searchedFor}
           list={list}
@@ -43,6 +44,6 @@ export function TokenSelector(props: PropTypes) {
           onChange={onChange}
         />
       )}
-    />
+    </SecondaryPage>
   );
 }

package/src/containers/ConfirmSwap/ConfirmSwap.tsx

@@ -1,5 +1,5 @@
 import { BestRouteResponse } from 'rango-sdk';
-import React, { Fragment, PropsWithChildren } from 'react';
+import React, { Fragment, PropsWithChildren, ReactNode } from 'react';
 import { Alert } from '../../components/Alert';
 import { Button } from '../../components/Button';
 import { RetryIcon, GasIcon } from '../../components/Icon';
@@ -8,6 +8,10 @@ import { StepDetail } from '../../components/StepDetail';
 import { Typography } from '../../components/Typography';
 import { styled } from '../../theme';
 
+const MainContainer = styled('div', {
+  overflow: 'hidden',
+});
+
 export const Line = styled('div', {
   width: '0',
   marginLeft: '$12',
@@ -68,24 +72,38 @@ export const StyledUpdateIcon = styled(UpdateIcon, {
   cursor: 'pointer',
 });
 
+const BestRouteContainer = styled('div', {
+  overflow: 'auto',
+});
+
 const Alerts = styled('div', { paddingBottom: '$16' });
 
 export interface PropTypes {
   bestRoute: BestRouteResponse | null;
+  onRefresh?: React.MouseEventHandler<SVGElement>;
+  confirmButtonTitle: string;
+  confirmButtonDisabled: boolean;
   onBack: () => void;
   onConfirm?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
   loading?: boolean;
-  error?: string;
-  warning?: string;
+  errors?: ReactNode[];
+  warnings?: ReactNode[];
+  extraMessages?: ReactNode;
 }
-export function ConfirmSwap({
-  bestRoute,
-  onBack,
-  onConfirm,
-  loading,
-  error,
-  warning,
-}: PropsWithChildren<PropTypes>) {
+export function ConfirmSwap(props: PropsWithChildren<PropTypes>) {
+  const {
+    bestRoute,
+    onRefresh,
+    onBack,
+    onConfirm,
+    loading,
+    errors,
+    warnings,
+    extraMessages,
+    confirmButtonTitle,
+    confirmButtonDisabled,
+  } = props;
+
   return (
     <SecondaryPage
       textField={false}
@@ -99,56 +117,76 @@ export function ConfirmSwap({
             loading={loading}
             variant="contained"
             onClick={onConfirm}
+            disabled={confirmButtonDisabled}
           >
-            Swap
+            {confirmButtonTitle}
           </Button>
         </Footer>
       }
-      Content={bestRoute?.result?.swaps.map((swap, index) => (
-        <Fragment key={index}>
+      TopButton={<StyledUpdateIcon size={24} onClick={onRefresh} />}
+    >
+      <MainContainer>
+        <div>
+          {extraMessages || null}
           <Alerts>
-            {error && <Alert description={error} type="error" />}
-            {warning && <Alert description={warning} type="warning" />}
+            {errors?.map((error, index) => (
+              <Alert type="error" key={index}>
+                {error}
+              </Alert>
+            ))}
+            {/* {error && warnings && <Spacer direction="vertical" size={16} />} */}
+            {warnings?.map((warning, index) => (
+              <Alert type="warning" key={index}>
+                {warning}
+              </Alert>
+            ))}
           </Alerts>
-          {index === 0 && (
-            <RelativeContainer>
+        </div>
+        <BestRouteContainer>
+          {bestRoute?.result?.swaps.map((swap, index) => (
+            <Fragment key={index}>
+              {index === 0 && (
+                <RelativeContainer>
+                  <StepDetail
+                    logo={swap.from.logo}
+                    symbol={swap.from.symbol}
+                    chainLogo={swap.from.blockchainLogo}
+                    blockchain={swap.from.blockchain}
+                    amount={swap.fromAmount}
+                  />
+                  <Dot />
+                </RelativeContainer>
+              )}
+              <Line />
+              <SwapperContainer>
+                <SwapperLogo src={swap.swapperLogo} alt={swap.swapperId} />
+                <div>
+                  <Typography ml={4} variant="caption">
+                    {swap.swapperType} from {swap.from.symbol} to{' '}
+                    {swap.to.symbol} via {swap.swapperId}{' '}
+                  </Typography>
+                  <Fee>
+                    <GasIcon />
+                    <Typography ml={4} variant="caption">
+                      {parseFloat(swap.fee[0].amount).toFixed(6)} estimated gas
+                      fee
+                    </Typography>
+                  </Fee>
+                </div>
+              </SwapperContainer>
+              <Line />
+              {index + 1 === bestRoute.result?.swaps.length && <ArrowDown />}
               <StepDetail
-                logo={swap.from.logo}
-                symbol={swap.from.symbol}
-                chainLogo={swap.from.blockchainLogo}
-                blockchain={swap.from.blockchain}
-                amount={swap.fromAmount}
+                logo={swap.to.logo}
+                symbol={swap.to.symbol}
+                chainLogo={swap.to.blockchainLogo}
+                blockchain={swap.to.blockchain}
+                amount={swap.toAmount}
               />
-              <Dot />
-            </RelativeContainer>
-          )}
-          <Line />
-          <SwapperContainer>
-            <SwapperLogo src={swap.swapperLogo} alt={swap.swapperId} />
-            <div>
-              <Typography ml={4} variant="caption">
-                {swap.swapperType} from {swap.from.symbol} to {swap.to.symbol}{' '}
-                via {swap.swapperId}{' '}
-              </Typography>
-              <Fee>
-                <GasIcon />
-                <Typography ml={4} variant="caption">
-                  {parseFloat(swap.fee[0].amount).toFixed(6)} estimated gas fee
-                </Typography>
-              </Fee>
-            </div>
-          </SwapperContainer>
-          <Line />
-          {index + 1 === bestRoute.result?.swaps.length && <ArrowDown />}
-          <StepDetail
-            logo={swap.to.logo}
-            symbol={swap.to.symbol}
-            chainLogo={swap.to.blockchainLogo}
-            blockchain={swap.to.blockchain}
-            amount={swap.toAmount}
-          />
-        </Fragment>
-      ))}
-    />
+            </Fragment>
+          ))}
+        </BestRouteContainer>
+      </MainContainer>
+    </SecondaryPage>
   );
 }