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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/ui",
-  "version": "0.1.10-next.91",
+  "version": "0.1.10",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -20,6 +20,7 @@
     "build-storybook": "build-storybook"
   },
   "peerDependencies": {
+    "@rango-dev/queue-manager-rango-preset": "*",
     "react": ">=16"
   },
   "husky": {
@@ -75,7 +76,7 @@
     "@rango-dev/wallets-shared": "^0.1.11-next.78",
     "@stitches/react": "^1.2.8",
     "@types/react-color": "^3.0.6",
-    "rango-sdk": "^0.1.19",
+    "rango-sdk": "^0.1.20",
     "react-color": "^2.19.3",
     "react-virtualized-auto-sizer": "^1.0.7",
     "react-window": "^1.8.8",

package/src/components/Alert/Alert.tsx

@@ -1,52 +1,52 @@
-import React, { PropsWithChildren } from 'react';
+import React, { PropsWithChildren, ReactNode } from 'react';
 import { CheckCircleIcon, InfoCircleIcon, WarningIcon } from '../Icon';
 import { Typography } from '../Typography';
-import { darkTheme, styled } from '../../theme';
+import { styled } from '../../theme';
+import { Spacer } from '../Spacer';
 
 const MainContainer = styled('div', {
-  display: 'flex',
   width: '100%',
-  alignItems: 'center',
   padding: '$16',
   borderRadius: '$5',
+  backgroundColor: '$neutrals300',
+  color: '$neutrals800',
+
+  '.main': {
+    display: 'flex',
+    alignItems: 'center',
+  },
+
+  '.footer': {
+    paddingTop: '$8',
+  },
+  '&.hasIcon .footer': {
+    paddingLeft: '$32',
+  },
   variants: {
     type: {
       primary: {
-        backgroundColor: '$primary200',
+        color: '$primary200',
       },
       secondary: {
-        backgroundColor: '$neutrals400',
+        color: '$foreground',
       },
       success: {
-        backgroundColor: '$success300',
+        color: '$success300',
       },
       warning: {
-        backgroundColor: '$warning500',
+        color: '$warning500',
       },
       error: {
-        backgroundColor: '$error300',
+        color: '$error300',
       },
     },
   },
 });
 
-const ContentContainer = styled('div', {});
-
-const TitleContainer = styled('div', {
-  marginBottom: '$8',
-});
-
-const IconContainer = styled('div', {
-  marginRight: '$24',
-});
-
-const StyledTypography = styled(Typography, {
-  color: darkTheme.colors.foreground.value,
-});
-
 export interface PropTypes {
-  type: 'primary' | 'secondary' | 'success' | 'warning' | 'error';
+  type?: 'primary' | 'secondary' | 'success' | 'warning' | 'error';
   title?: string;
+  footer?: ReactNode;
 }
 
 export function Alert(props: PropsWithChildren<PropTypes>) {
@@ -57,22 +57,46 @@ export function Alert(props: PropsWithChildren<PropTypes>) {
   ).includes(type);
 
   return (
-    <MainContainer type={type}>
-      {showIcon && (
-        <IconContainer>
-          {type === 'success' && <CheckCircleIcon color="success" size={28} />}
-          {type === 'warning' && <WarningIcon color="white" size={28} />}
-          {type === 'error' && <InfoCircleIcon color="error" size={28} />}
-        </IconContainer>
-      )}
-      <ContentContainer>
-        {title && (
-          <TitleContainer>
-            <StyledTypography variant="h6">{title}</StyledTypography>
-          </TitleContainer>
+    <MainContainer type={type} className={showIcon ? 'hasIcon' : ''}>
+      <div className="main">
+        {showIcon && (
+          <>
+            <div
+              style={{
+                width: '32px',
+                display: 'flex',
+                justifyContent: 'center',
+                alignItems: 'center',
+              }}
+            >
+              {type === 'success' && <CheckCircleIcon color={type} size={24} />}
+              {type === 'warning' && <WarningIcon color={type} size={24} />}
+              {type === 'error' && <InfoCircleIcon color={type} size={24} />}
+              <Spacer size={8} />
+            </div>
+          </>
         )}
-        {children}
-      </ContentContainer>
+        <div
+          style={{
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'start',
+            flexDirection: 'column',
+            width: '100%',
+          }}
+        >
+          {title && (
+            <>
+              <Typography className="title" variant="h6" color={type}>
+                {title}
+              </Typography>
+              {!!children && <Spacer size={8} direction="vertical" />}
+            </>
+          )}
+          {children}
+        </div>
+      </div>
+      {props.footer ? <div className="footer">{props.footer}</div> : null}
     </MainContainer>
   );
 }

package/src/components/Alert/LoadingFailedAlert.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { Alert } from './Alert';
+
+export function LoadingFailedAlert() {
+  return (
+    <Alert
+      type="error"
+      title=" Error connecting server, please reload the app and try again."
+    />
+  );
+}

package/src/components/Alert/NotFoundAlert.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { Alert } from './Alert';
+
+interface PropTypes {
+  catergory: string;
+  searchedFor?: string;
+}
+
+export function NotFoundAlert(props: PropTypes) {
+  const { catergory, searchedFor } = props;
+  return (
+    <Alert
+      type="secondary"
+      title={`${catergory} ${
+        searchedFor ? "'" + searchedFor + "'" : ''
+      } not found.`}
+    />
+  );
+}

package/src/components/Alert/index.ts

@@ -1 +1,2 @@
 export { Alert } from './Alert';
+export { LoadingFailedAlert } from './LoadingFailedAlert';

package/src/components/BestRoute/BestRoute.tsx

@@ -6,6 +6,7 @@ import { keyframes, styled } from '../../theme';
 import { Skeleton } from '../Skeleton';
 import { Spinner } from '../Spinner';
 import { BestRouteResponse } from 'rango-sdk';
+import { Tooltip } from '../Tooltip';
 
 const Container = styled('div', {
   borderRadius: '$5',
@@ -40,11 +41,13 @@ const Line = styled('div', {
     width: '$32',
   },
 });
+
 const HR = styled('hr', {
   width: '100%',
-  background: '$neutrals200',
+  border: '1px solid $neutrals400',
   margin: '$8 0',
 });
+
 const SwapperLogo = styled('img', {
   width: '$16',
   height: '$16',
@@ -103,7 +106,7 @@ const GasContainer = styled('div', {
   },
 });
 
-const FeeContainer = styled('div', {
+const CostContainer = styled('div', {
   display: 'flex',
   flexDirection: 'column',
   alignItems: 'center',
@@ -156,24 +159,30 @@ export function BestRoute(props: PropsWithChildren<PropTypes>) {
         </SkeletonContainer>
       ) : (
         <GasContainer>
-          <FeeContainer warning={feeWarning}>
-            <GasIcon size={20} color={feeWarning ? 'warning' : undefined} />
-            <TotalFee
-              mt={4}
-              align="center"
-              variant="caption"
-              warning={feeWarning}
-            >
-              {error && '-'}
-              {!!data && `$${totalFee}`}
-            </TotalFee>
-          </FeeContainer>
+          <Tooltip content="Transaction cost (fee)">
+            <CostContainer warning={feeWarning}>
+              <GasIcon size={20} color={feeWarning ? 'warning' : undefined} />
+              <TotalFee
+                mt={4}
+                align="center"
+                variant="caption"
+                warning={feeWarning}
+              >
+                {error && '-'}
+                {!!data && `$${totalFee}`}
+              </TotalFee>
+            </CostContainer>
+          </Tooltip>
           <HR />
-          <TimeIcon size={20} />
-          <Typography mt={4} align="center" variant="caption">
-            {error && '-'}
-            {!!data && `~${totalTime}m`}
-          </Typography>
+          <Tooltip content="Time estimate">
+            <CostContainer warning={feeWarning}>
+              <TimeIcon size={20} />
+              <Typography mt={4} align="center" variant="caption">
+                {error && '-'}
+                {!!data && `~${totalTime}m`}
+              </Typography>
+            </CostContainer>
+          </Tooltip>
         </GasContainer>
       )}
       <BestRouteContainer>

package/src/components/BestRoute/mock.ts

@@ -1,6 +1,8 @@
 import { RoutingResultType } from 'rango-sdk';
 import { BestRouteType } from '../../types/swaps';
 
+// TODO: I used `internalSwaps: []` to fix ts error. fix it by using real data.
+
 export const bestRoute: BestRouteType = {
   from: { blockchain: 'BSC', symbol: 'BNB', address: null },
   to: { blockchain: 'AVAX_CCHAIN', symbol: 'AVAX', address: null },
@@ -11,6 +13,8 @@ export const bestRoute: BestRouteType = {
     outputAmount: '5.685715974132648891',
     swaps: [
       {
+        // TODO: fix this and use real data
+        internalSwaps: [],
         swapperId: 'AnySwap Aggregator',
         swapperType: 'AGGREGATOR',
         swapperLogo: 'https://api.rango.exchange/swappers/multichain.png',
@@ -63,6 +67,7 @@ export const bestRoute: BestRouteType = {
         includesDestinationTx: false,
       },
       {
+        internalSwaps: [],
         swapperId: 'PangolinSwap',
         swapperLogo: 'https://api.rango.exchange/swappers/pangolin.png',
         swapperType: 'DEX',
@@ -164,6 +169,7 @@ export const bestRouteExample2: BestRouteType = {
     outputAmount: '30.983906',
     swaps: [
       {
+        internalSwaps: [],
         maxRequiredSign: 1,
         warnings: [],
         swapperId: 'ParaSwap Bsc',
@@ -263,6 +269,7 @@ export const bestRouteExample2: BestRouteType = {
         includesDestinationTx: false,
       },
       {
+        internalSwaps: [],
         maxRequiredSign: 1,
         warnings: [],
         swapperId: 'Satellite',
@@ -310,6 +317,7 @@ export const bestRouteExample2: BestRouteType = {
         includesDestinationTx: false,
       },
       {
+        internalSwaps: [],
         maxRequiredSign: 1,
         warnings: [],
         swapperId: 'Osmosis',
@@ -403,6 +411,7 @@ export const bestRouteExample2: BestRouteType = {
         includesDestinationTx: false,
       },
       {
+        internalSwaps: [],
         maxRequiredSign: 1,
         warnings: [],
         swapperId: 'Osmosis',
@@ -486,6 +495,7 @@ export const bestRouteExample3: BestRouteType = {
     outputAmount: '5.685715974132648891',
     swaps: [
       {
+        internalSwaps: [],
         maxRequiredSign: 1,
         warnings: [],
         swapperId: 'AnySwap Aggregator',

package/src/components/BlockchainSelector/BlockchainSelector.tsx

@@ -2,18 +2,17 @@ import React from 'react';
 import { BlockchainMeta } from 'rango-sdk';
 import { BlockchainsList } from '../BlockchainsList';
 import { SecondaryPage } from '../SecondaryPage/SecondaryPage';
-import { Alert } from '../Alert';
 import { Spinner } from '../Spinner';
 import { styled } from '../../theme';
 import { CSSProperties } from '@stitches/react';
 import { containsText } from '../../helper';
-import { Typography } from '../Typography';
+import { LoadingStatus } from '../../types/meta';
+import { LoadingFailedAlert } from '../Alert/LoadingFailedAlert';
+import { NotFoundAlert } from '../Alert/NotFoundAlert';
+import { LoaderContainer } from '../TokenSelector/TokenSelector';
 
 const ListContainer = styled('div', {
-  height: '450px',
-  display: 'flex',
-  justifyContent: 'center',
-  alignItems: 'center',
+  overflowY: 'auto',
 });
 
 const filterBlockchains = (list: BlockchainMeta[], searchedFor: string) =>
@@ -23,8 +22,6 @@ const filterBlockchains = (list: BlockchainMeta[], searchedFor: string) =>
       containsText(blockchain.displayName, searchedFor)
   );
 
-export type LoadingStatus = 'loading' | 'success' | 'failed';
-
 export interface PropTypes {
   type?: 'Source' | 'Destination';
   list: BlockchainMeta[];
@@ -65,20 +62,14 @@ export function BlockchainSelector(props: PropTypes) {
         return (
           <ListContainer style={listContainerStyle} key="1">
             {loadingStatus === 'loading' && (
-              <div>
+              <LoaderContainer>
                 <Spinner size={24} />
-              </div>
-            )}
-            {loadingStatus === 'failed' && (
-              <Alert type="error">
-                <Typography variant="body2">
-                  Error connecting server, please reload the app and try again
-                </Typography>
-              </Alert>
+              </LoaderContainer>
             )}
+            {loadingStatus === 'failed' && <LoadingFailedAlert />}
             {loadingStatus === 'success' && (
               <>
-                {filteredBlockchains.length > 0 ? (
+                {filteredBlockchains.length ? (
                   <BlockchainsList
                     list={filteredBlockchains}
                     selected={selected}
@@ -87,9 +78,10 @@ export function BlockchainSelector(props: PropTypes) {
                     onChange={onChange}
                   />
                 ) : (
-                  <Alert type="secondary">
-                    <Typography variant="body2">{`${searchedFor} not found`}</Typography>
-                  </Alert>
+                  <NotFoundAlert
+                    catergory="Blockchain"
+                    searchedFor={searchedFor}
+                  />
                 )}
               </>
             )}

package/src/components/Button/Button.stories.tsx

@@ -27,7 +27,7 @@ export default {
     size: {
       name: 'size',
       control: { type: 'radio' },
-      options: ['small', 'medium', 'large'],
+      options: ['small', 'medium', 'large', 'compact'],
       defaultValue: 'medium',
     },
     disabled: {

package/src/components/Button/Button.tsx

@@ -1,5 +1,5 @@
 import { CSSProperties } from '@stitches/react';
-import React, { PropsWithChildren } from 'react';
+import React, { PropsWithChildren, HTMLAttributes } from 'react';
 import { darkTheme, styled } from '../../theme';
 import { Spinner } from '../Spinner';
 import { Typography } from '../Typography';
@@ -13,6 +13,12 @@ const ButtonContainer = styled('button', {
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'center',
+  transition: 'all 0.35s',
+  border: '0',
+
+  '&:active': {
+    transform: 'scale(0.95)',
+  },
 
   variants: {
     align: {
@@ -26,6 +32,8 @@ const ButtonContainer = styled('button', {
       },
     },
     size: {
+      compact: {},
+      free: {},
       small: {
         height: '$32',
       },
@@ -43,27 +51,28 @@ const ButtonContainer = styled('button', {
         border: 0,
         '&:hover': {
           backgroundColor: '$neutrals200',
-          color: '$foreground',
         },
         '&:disabled': {
-          background: '$neutrals400 !important',
+          background: '$neutrals400',
+        },
+        '&:disabled:hover': {
+          background: '$neutrals400',
+          transform: 'unset',
         },
       },
       outlined: {
-        backgroundColor: '$background !important',
-        borderColor: '$neutrals400 !important',
+        backgroundColor: '$background',
+        border: 1,
+        borderStyle: 'solid',
+        borderColor: '$neutrals400',
         color: '$foreground',
         '&:hover': {
-          borderColor: '$neutrals600 !important',
-          color: '$neutrals500 !important',
+          borderColor: '$neutrals600',
         },
         '&:disabled': {
-          borderColor: '$neutrals300 !important',
-          color: '$neutrals400 !important',
+          borderColor: '$neutrals300',
+          color: '$neutrals400',
         },
-        background: 'transparent',
-        border: 1,
-        borderStyle: 'solid',
       },
       ghost: {
         color: '$foreground',
@@ -103,11 +112,7 @@ const ButtonContainer = styled('button', {
       variant: 'contained',
       css: {
         background: '$primary',
-        $$color: '$colors$background',
-        [`.${darkTheme} &`]: {
-          $$color: '$colors$foreground',
-        },
-        color: '$$color !important',
+        color: '$white',
         '&:hover': {
           background: '$primary700',
         },
@@ -124,7 +129,7 @@ const ButtonContainer = styled('button', {
       variant: 'outlined',
       css: {
         color: '$primary !important',
-        borderColor: '$primary !important',
+        borderColor: '$primary',
         '&:hover': {
           color: '$primary700 !important',
           borderColor: '$primary700 !important',
@@ -179,7 +184,7 @@ const ButtonContainer = styled('button', {
       variant: 'outlined',
       css: {
         color: '$error !important',
-        borderColor: '$error !important',
+        borderColor: '$error',
         '&:hover': {
           color: '$error300 !important',
           borderColor: '$error300 !important',
@@ -236,7 +241,7 @@ const ButtonContainer = styled('button', {
       variant: 'outlined',
       css: {
         color: '$warning !important',
-        borderColor: '$warning !important',
+        borderColor: '$warning',
         '&:hover': {
           color: '$warning300 !important',
           borderColor: '$warning300 !important',
@@ -293,7 +298,7 @@ const ButtonContainer = styled('button', {
       variant: 'outlined',
       css: {
         color: '$success !important',
-        borderColor: '$success !important',
+        borderColor: '$success',
         '&:hover': {
           color: '$success300 !important',
           borderColor: '$success300 !important',
@@ -324,6 +329,13 @@ const ButtonContainer = styled('button', {
         },
       },
     },
+    {
+      size: 'compact',
+      css: {
+        padding: '$2 $4',
+        fontSize: '$12',
+      },
+    },
   ],
   defaultVariants: {
     size: 'medium',
@@ -361,9 +373,10 @@ const Content = styled('div', {
   },
 });
 
-export interface PropTypes {
+export interface PropTypes
+  extends Omit<HTMLAttributes<HTMLButtonElement>, 'prefix'> {
   onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
-  size?: 'small' | 'medium' | 'large';
+  size?: 'small' | 'medium' | 'large' | 'compact' | 'free';
   variant?: 'contained' | 'outlined' | 'ghost';
   type?: 'primary' | 'error' | 'warning' | 'success';
   prefix?: React.ReactNode;

package/src/components/Chip/Chip.tsx

@@ -1,7 +1,6 @@
 import { CSSProperties } from '@stitches/react';
 import React from 'react';
 import { styled } from '../../theme';
-import { Typography } from '../Typography';
 
 const ChipCointainer = styled('div', {
   display: 'inline-flex',
@@ -12,12 +11,16 @@ const ChipCointainer = styled('div', {
   height: '32',
   fontSize: '$14',
   cursor: 'pointer',
+  transition: 'all 0.35s',
+  color: '$foreground',
+
   '&:hover': {
-    backgroundColor: '$neutrals300',
+    backgroundColor: '$success700',
+    color: '$background',
   },
   variants: {
     selected: {
-      true: { backgroundColor: '$neutrals400' },
+      true: { backgroundColor: '$success', color: '$background' },
       false: { backgroundColor: '$background' },
     },
   },
@@ -38,7 +41,7 @@ export function Chip(props: PropTypes) {
   return (
     <ChipCointainer selected={selected} onClick={onClick} style={style}>
       {prefix || null}
-      <Typography variant="body2">{label}</Typography>
+      {label}
       {suffix || null}
     </ChipCointainer>
   );