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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/ui",
-  "version": "0.1.10-next.78",
+  "version": "0.1.10-next.81",
   "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

@@ -7,6 +7,7 @@ import { Chip } from '../Chip';
 import { LiquiditySource } from '../../types/meta';
 import { TextField } from '../TextField';
 import { Radio } from '../Radio';
+import { Switch } from '../Switch';
 
 const BaseContainer = styled('div', {
   borderRadius: '$5',
@@ -14,10 +15,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, {
@@ -26,8 +29,13 @@ const LiquiditySourceContainer = styled(BaseContainer, {
   marginTop: '$32',
   cursor: 'pointer',
 });
+const InfiniteContainer = styled(BaseContainer, {
+  display: 'flex',
+  justifyContent: 'space-between',
+  marginTop: '$32',
+});
 
-const StyledAngleRight = styled(AngleRightIcon, { marginLeft: '8px' });
+const StyledAngleRight = styled(AngleRightIcon, { marginLeft: '$8' });
 
 const LiquiditySourceNumber = styled('div', {
   display: 'flex',
@@ -55,6 +63,8 @@ export interface PropTypes {
   selectedTheme: Theme;
   onThemeChange: (theme: Theme) => void;
   onBack: () => void;
+  infiniteApprove: boolean;
+  toggleInfiniteApprove: (infinite: boolean) => void;
 }
 
 export function Settings(props: PropTypes) {
@@ -71,6 +81,8 @@ export function Settings(props: PropTypes) {
     minSlippage,
     selectedTheme,
     onThemeChange,
+    toggleInfiniteApprove,
+    infiniteApprove,
   } = props;
 
   const [selectedSlippage, setSelectedSlippage] = useState(
@@ -85,7 +97,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 +138,7 @@ export function Settings(props: PropTypes) {
         </SlippageChipsContainer>
       </BaseContainer>
       <ThemesContainer>
-        <Typography variant="body2">Theme</Typography>
+        <Title variant="body2">Theme</Title>
         <Radio
           defaultValue={selectedTheme}
           options={[
@@ -139,9 +151,13 @@ export function Settings(props: PropTypes) {
           style={{ marginTop: '$24' }}
         />
       </ThemesContainer>
+      <InfiniteContainer>
+        <Typography variant="body1">Infinite Approval</Typography>
+        <Switch checked={infiniteApprove} onChange={toggleInfiniteApprove} />
+      </InfiniteContainer>
       <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 +166,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>
   );
 }