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

package/package.json

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

@@ -22,14 +22,13 @@ const MainContainer = styled('div', {
   '&.hasIcon .footer': {
     paddingLeft: '$32',
   },
-
   variants: {
     type: {
       primary: {
         color: '$primary200',
       },
       secondary: {
-        color: '$secondary',
+        color: '$foreground',
       },
       success: {
         color: '$success300',
@@ -62,18 +61,40 @@ export function Alert(props: PropsWithChildren<PropTypes>) {
       <div className="main">
         {showIcon && (
           <>
-            {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
+              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>
           </>
         )}
-        {title && (
-          <Typography variant="h6" color={type}>
-            {title}
-          </Typography>
-        )}
-        {children}
+        <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/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,7 +78,10 @@ export function BlockchainSelector(props: PropTypes) {
                     onChange={onChange}
                   />
                 ) : (
-                  <Alert>{`${searchedFor} not found`}</Alert>
+                  <NotFoundAlert
+                    catergory="Blockchain"
+                    searchedFor={searchedFor}
+                  />
                 )}
               </>
             )}

package/src/components/Button/Button.tsx

@@ -33,6 +33,7 @@ const ButtonContainer = styled('button', {
     },
     size: {
       compact: {},
+      free: {},
       small: {
         height: '$32',
       },
@@ -375,7 +376,7 @@ const Content = styled('div', {
 export interface PropTypes
   extends Omit<HTMLAttributes<HTMLButtonElement>, 'prefix'> {
   onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
-  size?: 'small' | 'medium' | 'large' | 'compact';
+  size?: 'small' | 'medium' | 'large' | 'compact' | 'free';
   variant?: 'contained' | 'outlined' | 'ghost';
   type?: 'primary' | 'error' | 'warning' | 'success';
   prefix?: React.ReactNode;

package/src/components/ConnectWalletsModal/mockData.ts

@@ -8,6 +8,7 @@ export const walletsInfo: WalletInfo[] = [
     state: WalletState.DISCONNECTED,
     installLink: '',
     type: WalletType.COINBASE,
+    showOnMobile: true,
   },
   {
     image: 'https://app.rango.exchange/wallets/coinbase.svg',
@@ -15,6 +16,7 @@ export const walletsInfo: WalletInfo[] = [
     state: WalletState.CONNECTED,
     installLink: '',
     type: WalletType.COINBASE,
+    showOnMobile: true,
   },
   {
     image: 'https://app.rango.exchange/wallets/coinbase.svg',
@@ -22,12 +24,14 @@ export const walletsInfo: WalletInfo[] = [
     state: WalletState.CONNECTING,
     installLink: '',
     type: WalletType.COINBASE,
+    showOnMobile: true,
   },
   {
     image: 'https://app.rango.exchange/wallets/coinbase.svg',
     name: 'Coinbase',
     state: WalletState.NOT_INSTALLED,
     type: WalletType.COINBASE,
+    showOnMobile: true,
     installLink:
       'https://chrome.google.com/webstore/detail/coinbase-wallet-extension/hnfanknocfeofbddgcijnmhnfnkdnaad?hl=en',
   },
@@ -37,6 +41,7 @@ export const walletsInfo: WalletInfo[] = [
     state: WalletState.DISCONNECTED,
     installLink: '',
     type: WalletType.COINBASE,
+    showOnMobile: true,
   },
   {
     image: 'https://app.rango.exchange/wallets/coinbase.svg',
@@ -44,6 +49,7 @@ export const walletsInfo: WalletInfo[] = [
     state: WalletState.CONNECTED,
     installLink: '',
     type: WalletType.COINBASE,
+    showOnMobile: true,
   },
   {
     image: 'https://app.rango.exchange/wallets/coinbase.svg',
@@ -51,6 +57,7 @@ export const walletsInfo: WalletInfo[] = [
     state: WalletState.DISCONNECTED,
     installLink: '',
     type: WalletType.COINBASE,
+    showOnMobile: true,
   },
   {
     image: 'https://app.rango.exchange/wallets/coinbase.svg',
@@ -58,6 +65,7 @@ export const walletsInfo: WalletInfo[] = [
     state: WalletState.DISCONNECTED,
     installLink: '',
     type: WalletType.COINBASE,
+    showOnMobile: true,
   },
   {
     image: 'https://app.rango.exchange/wallets/coinbase.svg',
@@ -65,6 +73,7 @@ export const walletsInfo: WalletInfo[] = [
     state: WalletState.DISCONNECTED,
     installLink: '',
     type: WalletType.COINBASE,
+    showOnMobile: true,
   },
   {
     image: 'https://app.rango.exchange/wallets/coinbase.svg',
@@ -72,6 +81,7 @@ export const walletsInfo: WalletInfo[] = [
     state: WalletState.DISCONNECTED,
     installLink: '',
     type: WalletType.COINBASE,
+    showOnMobile: true,
   },
   {
     image: 'https://app.rango.exchange/wallets/coinbase.svg',
@@ -79,6 +89,7 @@ export const walletsInfo: WalletInfo[] = [
     state: WalletState.DISCONNECTED,
     installLink: '',
     type: WalletType.COINBASE,
+    showOnMobile: true,
   },
   {
     image: 'https://app.rango.exchange/wallets/coinbase.svg',
@@ -86,6 +97,7 @@ export const walletsInfo: WalletInfo[] = [
     state: WalletState.DISCONNECTED,
     installLink: '',
     type: WalletType.COINBASE,
+    showOnMobile: true,
   },
   {
     image: 'https://app.rango.exchange/wallets/coinbase.svg',
@@ -93,6 +105,7 @@ export const walletsInfo: WalletInfo[] = [
     state: WalletState.DISCONNECTED,
     installLink: '',
     type: WalletType.COINBASE,
+    showOnMobile: true,
   },
   {
     image: 'https://app.rango.exchange/wallets/coinbase.svg',
@@ -100,6 +113,7 @@ export const walletsInfo: WalletInfo[] = [
     state: WalletState.DISCONNECTED,
     installLink: '',
     type: WalletType.COINBASE,
+    showOnMobile: true,
   },
   {
     image: 'https://app.rango.exchange/wallets/coinbase.svg',
@@ -107,6 +121,7 @@ export const walletsInfo: WalletInfo[] = [
     state: WalletState.DISCONNECTED,
     installLink: '',
     type: WalletType.COINBASE,
+    showOnMobile: true,
   },
   {
     image: 'https://app.rango.exchange/wallets/coinbase.svg',
@@ -114,5 +129,6 @@ export const walletsInfo: WalletInfo[] = [
     state: WalletState.DISCONNECTED,
     installLink: '',
     type: WalletType.COINBASE,
+    showOnMobile: true,
   },
 ];

package/src/components/Divider/Divider.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import { styled } from '../../theme';
+
+const DividerContainer = styled('div', {
+  variants: {
+    size: {
+      4: {
+        height: '$4',
+      },
+      8: {
+        height: '$8',
+      },
+      12: {
+        height: '$12',
+      },
+      16: {
+        height: '$16',
+      },
+      18: {
+        height: '$18',
+      },
+      20: {
+        height: '$20',
+      },
+      24: {
+        height: '$24',
+      },
+      32: {
+        height: '$32',
+      },
+    },
+  },
+});
+export interface PropTypes {
+  size?: 4 | 8 | 12 | 16 | 18 | 20 | 24 | 32;
+  direction?: 'vertical' | 'horizontal';
+}
+
+export function Divider({ size = 12 }: PropTypes) {
+  return <DividerContainer size={size} />;
+}

package/src/components/Divider/index.ts

@@ -0,0 +1 @@
+export { Divider } from './Divider';

package/src/components/Header/Header.tsx

@@ -0,0 +1,39 @@
+import { styled } from '../../theme';
+import React, { PropsWithChildren } from 'react';
+import { AngleLeftIcon } from '../Icon';
+import { Typography } from '../Typography';
+import { Button } from '../Button';
+
+const HeaderContainer = styled('div', {
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  padding: '$8 0',
+  position: 'relative',
+});
+
+const BackButton = styled(Button, {
+  padding: '$8',
+});
+
+interface PropTypes {
+  onBack?: () => void;
+  prefix?: React.ReactNode;
+  suffix?: React.ReactNode;
+  title: string;
+}
+
+export function Header(props: PropsWithChildren<PropTypes>) {
+  return (
+    <HeaderContainer>
+      {props.onBack ? (
+        <BackButton variant="ghost" size="small" onClick={props.onBack}>
+          <AngleLeftIcon size={24} />
+        </BackButton>
+      ) : null}
+      {props.prefix}
+      <Typography variant="h4">{props.title}</Typography>
+      {props.suffix || <div></div>}
+    </HeaderContainer>
+  );
+}

package/src/components/Header/index.ts

@@ -0,0 +1 @@
+export { Header } from './Header';

package/src/components/Icon/ArrowRightIcon.tsx

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import { IconProps } from './types';
+import { SvgWithStrokeColor } from './common';
+
+export const ArrowRightIcon: React.FC<IconProps> = ({
+  size = 16,
+  color,
+  ...props
+}) => {
+  return (
+    <SvgWithStrokeColor
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      color={color}
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      xmlns="http://www.w3.org/2000/svg"
+      className="_icon"
+      {...props}
+    >
+      <line x1="5" y1="12" x2="19" y2="12"></line>
+      <polyline points="12 5 19 12 12 19"></polyline>
+    </SvgWithStrokeColor>
+  );
+};
+
+ArrowRightIcon.toString = () => '._icon';

package/src/components/Icon/index.ts

@@ -24,6 +24,7 @@ export { AngleDownIcon } from './AngleDownIcon';
 export { AngleLeftIcon } from './AngleLeftIcon';
 export { DownloadIcon } from './DownloadIcon';
 export { ChevronRightIcon } from './ChevronRightIcon';
+export { ArrowRightIcon } from './ArrowRightIcon';
 
 export { RetryRightIcon } from './RetryRightIcon';
 export { RetryLeftIcon } from './RetryLeftIcon';

package/src/components/LiquiditySourceList/LiquiditySourceList.tsx

@@ -1,11 +1,14 @@
 import { CSSProperties } from '@stitches/react';
 import React, { useEffect, useState } from 'react';
 import { styled } from '../../theme';
-import { LiquiditySource } from '../../types/meta';
+import { LiquiditySource, LoadingStatus } from '../../types/meta';
 import { Button } from '../Button/Button';
 import { Spacer } from '../Spacer';
 import { Switch } from '../Switch';
 import { Typography } from '../Typography';
+import { Spinner } from '../Spinner';
+import { LoadingFailedAlert } from '../Alert/LoadingFailedAlert';
+import { NotFoundAlert } from '../Alert/NotFoundAlert';
 
 const groupLiquiditySources = (
   liquiditySources: LiquiditySource[]
@@ -19,14 +22,22 @@ const groupLiquiditySources = (
   ),
 });
 
+const MainContainer = styled('div', {
+  variants: {
+    loaded: {
+      true: {
+        overflowY: 'auto',
+      },
+    },
+  },
+});
+
 const LiquiditySourceType = styled('div', {
   position: 'sticky',
   display: 'flex',
   justifyContent: 'space-between',
   alignItems: 'center',
   top: '0',
-  marginTop: '$8',
-  marginBottom: '$8',
   backgroundColor: '$background',
   zIndex: '9999',
   paddingTop: '$8',
@@ -39,14 +50,22 @@ const LiquidityImage = styled('img', {
   marginRight: '$16',
 });
 
+const LoaderContainer = styled('div', {
+  display: 'flex',
+  justifyContent: 'center',
+});
+
 export interface PropTypes {
   list: LiquiditySource[];
   onChange: (liquiditySource: LiquiditySource) => void;
   listContainerStyle?: CSSProperties;
+  loadingStatus: LoadingStatus;
+  searchedFor: string;
 }
 
 export function LiquiditySourceList(props: PropTypes) {
-  const { list, onChange, listContainerStyle } = props;
+  const { list, onChange, listContainerStyle, loadingStatus, searchedFor } =
+    props;
 
   const [selected, setSelected] = useState(
     list.filter((item) => item.selected)
@@ -79,7 +98,10 @@ export function LiquiditySourceList(props: PropTypes) {
   const totalSelectedExchanges = exchanges.filter(isSelected).length;
 
   return (
-    <div style={{ height: '450px', ...listContainerStyle }}>
+    <MainContainer
+      style={listContainerStyle}
+      loaded={loadingStatus === 'success'}
+    >
       <div>
         <LiquiditySourceType>
           <Typography variant="h5">Bridges</Typography>
@@ -90,14 +112,28 @@ export function LiquiditySourceList(props: PropTypes) {
           </Typography>
         </LiquiditySourceType>
         <Spacer size={12} direction="vertical" />
-        {bridges.map((liquiditySource, index) => (
-          <LiquiditySourceItem
-            liquiditySource={liquiditySource}
-            key={index}
-            selected={isSelected(liquiditySource)}
-            onChange={changeLiquiditySources}
-          />
-        ))}
+        {loadingStatus === 'loading' && (
+          <LoaderContainer>
+            <Spinner size={24} />
+          </LoaderContainer>
+        )}
+        {loadingStatus === 'failed' && <LoadingFailedAlert />}
+        {loadingStatus === 'success' && (
+          <>
+            {totalBridges ? (
+              bridges.map((liquiditySource, index) => (
+                <LiquiditySourceItem
+                  liquiditySource={liquiditySource}
+                  key={index}
+                  selected={isSelected(liquiditySource)}
+                  onChange={changeLiquiditySources}
+                />
+              ))
+            ) : (
+              <NotFoundAlert catergory="Bridge" searchedFor={searchedFor} />
+            )}
+          </>
+        )}
       </div>
       <div>
         <LiquiditySourceType>
@@ -109,16 +145,30 @@ export function LiquiditySourceList(props: PropTypes) {
           </Typography>
         </LiquiditySourceType>
         <Spacer size={12} direction="vertical" />
-        {exchanges.map((liquiditySource, index) => (
-          <LiquiditySourceItem
-            liquiditySource={liquiditySource}
-            key={index}
-            selected={isSelected(liquiditySource)}
-            onChange={changeLiquiditySources}
-          />
-        ))}
+        {loadingStatus === 'loading' && (
+          <LoaderContainer>
+            <Spinner size={24} />
+          </LoaderContainer>
+        )}
+        {loadingStatus === 'failed' && <LoadingFailedAlert />}
+        {loadingStatus == 'success' && (
+          <>
+            {totalExchanges ? (
+              exchanges.map((liquiditySource, index) => (
+                <LiquiditySourceItem
+                  liquiditySource={liquiditySource}
+                  key={index}
+                  selected={isSelected(liquiditySource)}
+                  onChange={changeLiquiditySources}
+                />
+              ))
+            ) : (
+              <NotFoundAlert catergory="Exchange" searchedFor={searchedFor} />
+            )}
+          </>
+        )}
       </div>
-    </div>
+    </MainContainer>
   );
 }