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

package/src/components/TextField/TextField.tsx

@@ -4,6 +4,7 @@ import { styled } from '../../theme';
 
 const InputContainer = styled('div', {
   backgroundColor: '$background',
+  padding: '1px',
   boxSizing: 'border-box',
   border: '1px solid $neutrals400',
   borderRadius: '$5',

package/src/components/TokenList/TokenItem.tsx

@@ -40,6 +40,7 @@ export function TokenItem(props: PropTypes) {
         ...style,
         height: '48px',
         top: `${parseFloat(style?.top as string) + 0}px`,
+        padding: '0 4px',
       }}
     >
       <Button
@@ -62,7 +63,9 @@ export function TokenItem(props: PropTypes) {
       >
         <TokenNameContainer>
           <Typography variant="body1">{token.symbol}</Typography>
-          <Typography variant="body2">{token.name}</Typography>
+          <Typography variant="caption" color="neutrals600">
+            {token.name}
+          </Typography>
         </TokenNameContainer>
       </Button>
     </div>

package/src/components/TokenList/TokenList.tsx

@@ -1,6 +1,6 @@
 import React, { forwardRef, useEffect, useState } from 'react';
 import { CommonProps } from 'react-window';
-import { Token } from 'rango-sdk';
+import { Asset, Token } from 'rango-sdk';
 import { VirtualizedList } from '../VirtualizedList/VirtualizedList';
 import { TokenItem } from './TokenItem';
 
@@ -18,7 +18,7 @@ export interface PropTypes {
   searchedText: string;
   onChange: (token: TokenWithAmount) => void;
   multiSelect?: boolean;
-  selectedList?: TokenWithAmount[] | 'all';
+  selectedList?: Asset[];
 }
 
 export function TokenList(props: PropTypes) {
@@ -33,7 +33,6 @@ export function TokenList(props: PropTypes) {
   const isSelected = (token: Token) => {
     if (multiSelect && selectedList) {
       return (
-        selectedList === 'all' ||
         selectedList
           .map((item) => item.symbol + item.address)
           .indexOf(token.symbol + token.address) > -1
@@ -53,7 +52,7 @@ export function TokenList(props: PropTypes) {
 
   useEffect(() => {
     setTokens(list.slice(0, PAGE_SIZE));
-  }, [searchedText]);
+  }, [searchedText, list]);
 
   useEffect(() => {
     setHasNextPage(list.length > tokens.length);
@@ -76,22 +75,20 @@ export function TokenList(props: PropTypes) {
   );
 
   return (
-    <div style={{ height: '450px' }}>
-      <VirtualizedList
-        Item={({ index, style }) => (
-          <TokenItem
-            token={tokens[index]}
-            style={style}
-            onClick={changeSelected}
-            selected={isSelected(tokens[index])}
-          />
-        )}
-        hasNextPage={hasNextPage}
-        itemCount={tokens.length}
-        loadNextPage={loadNextPage}
-        innerElementType={innerElementType}
-        size={56}
-      />
-    </div>
+    <VirtualizedList
+      Item={({ index, style }) => (
+        <TokenItem
+          token={tokens[index]}
+          style={style}
+          onClick={changeSelected}
+          selected={isSelected(tokens[index])}
+        />
+      )}
+      hasNextPage={hasNextPage}
+      itemCount={tokens.length}
+      loadNextPage={loadNextPage}
+      innerElementType={innerElementType}
+      size={56}
+    />
   );
 }

package/src/components/TokenSelector/TokenSelector.tsx

@@ -3,16 +3,27 @@ import { containsText } from '../../helper';
 import { SecondaryPage } from '../SecondaryPage/SecondaryPage';
 import { TokenList } from '../TokenList';
 import { TokenWithAmount } from '../TokenList/TokenList';
+import { LoadingStatus } from '../../types/meta';
+import { Spinner } from '../Spinner';
+import { LoadingFailedAlert } from '../Alert/LoadingFailedAlert';
+import { NotFoundAlert } from '../Alert/NotFoundAlert';
+import { styled } from '../../theme';
 
+export const LoaderContainer = styled('div', {
+  display: 'flex',
+  justifyContent: 'center',
+  width: '100%',
+  paddingTop: '5%',
+  flex: 1,
+});
 export interface PropTypes {
   list: TokenWithAmount[];
   type?: 'Source' | 'Destination';
   selected: TokenWithAmount | null;
   onChange: (token: TokenWithAmount) => void;
-  hasHeader?: boolean;
-  multiSelect?: boolean;
   onBack?: () => void;
-  selectedList?: TokenWithAmount[] | 'all';
+  loadingStatus: LoadingStatus;
+  hasHeader?: boolean;
 }
 
 const filterTokens = (list: TokenWithAmount[], searchedFor: string) =>
@@ -24,35 +35,37 @@ const filterTokens = (list: TokenWithAmount[], searchedFor: string) =>
   );
 
 export function TokenSelector(props: PropTypes) {
-  const {
-    list,
-    type,
-    selected,
-    onChange,
-    hasHeader,
-    multiSelect,
-    selectedList,
-    onBack,
-  } = props;
+  const { list, type, selected, hasHeader, onChange, onBack, loadingStatus } =
+    props;
 
   return (
     <SecondaryPage
       textField={true}
-      textFieldPlaceholder="Search Blockchain By Name"
-      title={`Select ${type} Token`}
       hasHeader={hasHeader}
+      title={`Select ${type} Token`}
       onBack={onBack}
+      textFieldPlaceholder="Search Token By Name"
     >
-      {(searchedFor) => (
-        <TokenList
-          searchedText={searchedFor}
-          list={filterTokens(list, searchedFor)}
-          selected={selected}
-          selectedList={selectedList}
-          multiSelect={multiSelect}
-          onChange={onChange}
-        />
-      )}
+      {(searchedFor) => {
+        const filteredTokens = filterTokens(list, searchedFor);
+
+        return loadingStatus === 'loading' ? (
+          <LoaderContainer>
+            <Spinner size={24} />
+          </LoaderContainer>
+        ) : loadingStatus === 'failed' ? (
+          <LoadingFailedAlert />
+        ) : filteredTokens.length ? (
+          <TokenList
+            searchedText={searchedFor}
+            list={filteredTokens}
+            selected={selected}
+            onChange={onChange}
+          />
+        ) : (
+          <NotFoundAlert catergory="Token" searchedFor={searchedFor} />
+        );
+      }}
     </SecondaryPage>
   );
 }

package/src/components/Wallet/Wallet.tsx

@@ -42,7 +42,7 @@ export function Wallet(props: PropTypes) {
   return (
     <ExtendedButton
       type={state === WalletState.CONNECTED ? 'primary' : undefined}
-      disabled={!state}
+      disabled={state == WalletState.CONNECTING}
       onClick={() => {
         if (state === WalletState.NOT_INSTALLED) {
           window.open(detectInstallLink(installLink), '_blank');

package/src/components/index.ts

@@ -27,3 +27,5 @@ export * from './Radio';
 export * from './TokenList';
 export * from './common';
 export * from './Drawer';
+export * from './Header';
+export * from './Divider';

package/src/containers/ConfirmSwap/ConfirmSwap.stories.tsx

@@ -1,13 +1,22 @@
 import React from 'react';
 import { ComponentMeta } from '@storybook/react';
 import { ConfirmSwap, PropTypes } from './ConfirmSwap';
-import { bestRoute } from './mock';
+import { exampleFor5Wallets, wallets } from './mock';
 
 export default {
   title: 'Containers/ConfirmSwap',
   component: ConfirmSwap,
+  argTypes: {
+    requiredWallets: {
+      defaultValue: ['BSC', 'OSMOSIS'],
+    },
+  },
 } as ComponentMeta<typeof ConfirmSwap>;
 
 export const Main = (props: PropTypes) => (
-  <ConfirmSwap {...props} bestRoute={bestRoute} />
+  <ConfirmSwap {...props} selectableWallets={wallets} />
+);
+
+export const With5Wallets = (props: PropTypes) => (
+  <ConfirmSwap {...props} selectableWallets={exampleFor5Wallets} />
 );

package/src/containers/ConfirmSwap/ConfirmSwap.tsx

@@ -1,125 +1,110 @@
-import React, { Fragment, PropsWithChildren, ReactNode } from 'react';
-import { Spacer } from '../../components';
-import { Alert } from '../../components/Alert';
+import React, { PropsWithChildren, ReactNode } from 'react';
+import { Alert, Spacer } from '../../components';
 import { Button } from '../../components/Button';
-import { RetryIcon, GasIcon } from '../../components/Icon';
-import { SecondaryPage } from '../../components/SecondaryPage/';
-import { StepDetail } from '../../components/StepDetail';
+import { SecondaryPage } from '../../components/SecondaryPage/SecondaryPage';
+import { SelectableWalletList } from '../../components/SelectableWalletList';
 import { Typography } from '../../components/Typography';
 import { styled } from '../../theme';
-import { BestRouteWithFee } from '../../types/swaps';
+import { SelectableWallet } from '../../types';
 
 const MainContainer = styled('div', {
-  overflow: 'hidden',
+  overflowY: 'auto',
 });
 
-export const Line = styled('div', {
-  width: '0',
-  marginLeft: '$12',
-  height: '36px',
-  border: '1px dashed $foreground',
-  borderRadius: 'inherit',
-});
-export const SwapperContainer = styled('div', {
-  display: 'flex',
-  alignItems: 'center',
-  marginLeft: '6px',
-});
-export const BodyError = styled('div', {
-  height: '100%',
-  display: 'flex',
-  justifyContent: 'center',
-  alignItems: 'center',
-});
-export const ErrorMsg = styled(Typography, {
-  color: '$error',
-});
-export const Fee = styled('div', {
-  display: 'flex',
-  alignItems: 'center',
-});
-export const SwapperLogo = styled('img', {
-  width: '$16',
-  height: '$16',
-});
-export const RelativeContainer = styled('div', {
-  position: 'relative',
+const Section = styled('div', {
+  paddingBottom: '$32',
+  marginBottom: '$32',
+  borderBottom: '1px solid $neutrals400',
 });
 
-export const Footer = styled('div', {
+const Footer = styled('div', {
   display: 'flex',
   alignItems: 'center',
 });
-export const Dot = styled('div', {
-  width: '$8',
-  height: '$8',
-  backgroundColor: '$foreground',
-  borderRadius: '4px',
-  marginLeft: '$8',
-});
-export const ArrowDown = styled('div', {
-  width: '0px',
-  height: '0px',
-  borderLeft: '5px solid transparent',
-  borderRight: '5px solid transparent',
-  borderTop: '5px solid $foreground',
-  marginLeft: '$8',
-});
-export const UpdateIcon = styled(RetryIcon, {
-  position: 'absolute',
-  right: '0',
+
+const AlertContainer = styled('div', {
+  padding: '$16 0',
 });
-export const StyledUpdateIcon = styled(UpdateIcon, {
-  cursor: 'pointer',
+
+const ConfirmButton = styled(Button, {
+  marginTop: '$16',
 });
 
-const BestRouteContainer = styled('div', {
-  overflow: 'auto',
+const Container = styled('div', {
+  paddingBottom: '$24',
+
+  '.title': {
+    paddingBottom: '$8',
+    display: 'flex',
+    alignItems: 'center',
+  },
+  '.num': {
+    backgroundColor: '$neutrals300',
+    display: 'inline-flex',
+    width: '24px',
+    height: '24px',
+    color: '$neutrals800',
+    borderRadius: '50%',
+    fontSize: '$14',
+    border: '1px solid $neutrals400',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
 });
 
 const Alerts = styled('div', { paddingBottom: '$16' });
+
 export interface PropTypes {
-  bestRoute: BestRouteWithFee | null;
-  onRefresh?: React.MouseEventHandler<SVGElement>;
-  confirmButtonTitle: string;
-  confirmButtonDisabled: boolean;
   onBack: () => void;
   onConfirm?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+  confirmDisabled?: boolean;
   loading?: boolean;
+  requiredWallets: string[];
+  selectableWallets: SelectableWallet[];
+  onChange: (w: SelectableWallet) => void;
+  isExperimentalChain?: (wallet: string) => boolean;
+  handleConnectChain?: (wallet: string) => void;
+  previewInputs?: ReactNode;
+  previewRoutes?: ReactNode;
+  confirmButtonTitle: string;
   errors?: ReactNode[];
   warnings?: ReactNode[];
   extraMessages?: ReactNode;
 }
 export function ConfirmSwap(props: PropsWithChildren<PropTypes>) {
   const {
-    bestRoute,
     onBack,
-    onConfirm,
     loading,
+    onConfirm,
+    requiredWallets,
+    selectableWallets,
+    onChange,
+    confirmDisabled,
+    isExperimentalChain,
+    handleConnectChain,
+    confirmButtonTitle,
     errors,
     warnings,
     extraMessages,
-    confirmButtonTitle,
-    confirmButtonDisabled,
   } = props;
 
   return (
     <SecondaryPage
       textField={false}
-      title="Swap"
+      title="Confirm Swap"
       onBack={onBack}
       Footer={
         <Footer>
-          <Button
-            type="primary"
+          <ConfirmButton
             fullWidth
             loading={loading}
+            type="primary"
             variant="contained"
             onClick={onConfirm}
-            disabled={confirmButtonDisabled}
+            disabled={confirmDisabled}
           >
             {confirmButtonTitle}
-          </Button>
+          </ConfirmButton>
         </Footer>
       }
     >
@@ -145,49 +130,50 @@ export function ConfirmSwap(props: PropsWithChildren<PropTypes>) {
             ))}
           </Alerts>
         </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>
+        {props.previewInputs || props.previewRoutes ? (
+          <Section>
+            {props.previewInputs}
+            {!!props.previewRoutes ? (
+              <Spacer size={16} direction="vertical" />
+            ) : null}
+            {props.previewRoutes}
+          </Section>
+        ) : null}
+
+        {requiredWallets.map((wallet, index) => {
+          const list = selectableWallets.filter((w) => wallet === w.chain);
+          return (
+            <Container key={index}>
+              <div className="title">
+                <div className="num">{index + 1}</div>
+                <Spacer size={8} />
+                <Typography variant="body2">Your {wallet} Wallet</Typography>
+              </div>
+              {list.length === 0 && (
+                <>
+                  <AlertContainer>
+                    <Alert type="error">
+                      You need to connect a compatible wallet with {wallet}
+                    </Alert>
+                  </AlertContainer>
+                  {isExperimentalChain?.(wallet) && (
+                    <Button
+                      variant="contained"
+                      type="primary"
+                      align="grow"
+                      onClick={() => handleConnectChain?.(wallet)}
+                    >
+                      {`Add ${wallet} chain to Cosmos wallets`}
+                    </Button>
+                  )}
+                </>
+              )}
+              {list.length != 0 && (
+                <SelectableWalletList list={list} onChange={onChange} />
               )}
-              <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">
-                      ${swap.feeInUsd} 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>
-          ))}
-        </BestRouteContainer>
+            </Container>
+          );
+        })}
       </MainContainer>
     </SecondaryPage>
   );

package/src/containers/ConfirmSwap/mock.ts

@@ -1,5 +1,8 @@
+// @ts-nocheck
+import { WalletType } from '@rango-dev/wallets-shared';
 import { RoutingResultType } from 'rango-sdk';
 import { BestRouteType } from '../../types/swaps';
+import { SelectableWallet } from '../../types';
 
 export const bestRoute: BestRouteType = {
   from: { blockchain: 'BSC', symbol: 'BNB', address: null },
@@ -14,10 +17,12 @@ export const bestRoute: BestRouteType = {
         swapperId: 'AnySwap Aggregator',
         swapperType: 'AGGREGATOR',
         swapperLogo: 'https://api.rango.exchange/swappers/multichain.png',
+
         from: {
           symbol: 'BNB',
           logo: 'https://api.rango.exchange/i/Y3v1KW',
           blockchainLogo: 'https://api.rango.exchange/blockchains/binance.svg',
+
           address: null,
           blockchain: 'BSC',
           decimals: 18,
@@ -28,6 +33,7 @@ export const bestRoute: BestRouteType = {
           logo: 'https://api.rango.exchange/i/j9xgdC',
           blockchainLogo:
             'https://api.rango.exchange/blockchains/avax_cchain.svg',
+
           address: '0x49d5c2bdffac6ce2bfdb6640f4f80f226bc10bab',
           blockchain: 'AVAX_CCHAIN',
           decimals: 18,
@@ -93,8 +99,8 @@ export const bestRoute: BestRouteType = {
               symbol: 'WETH.E',
               address: '0x49d5c2bdffac6ce2bfdb6640f4f80f226bc10bab',
             },
-            expenseType: 'DECREASE_FROM_OUTPUT',
             name: 'Network Fee',
+            expenseType: 'DECREASE_FROM_OUTPUT',
             amount:
               '0.00018619291780292721387591870688029381530892436558133340440690517425537109375',
           },
@@ -141,6 +147,77 @@ export const bestRoute: BestRouteType = {
   validationStatus: null,
   missingBlockchains: [],
   diagnosisMessages: [],
-  processingLimitReached: false,
   walletNotSupportingFromBlockchain: false,
+  processingLimitReached: false,
 };
+
+export const wallets: SelectableWallet[] = [
+  {
+    walletType: WalletType.META_MASK,
+    address: '0x5423e28219d6d568dcf62a8134d623e6f4a1c2df',
+    image: 'https://app.rango.exchange/wallets/metamask.svg',
+    chain: 'BSC',
+    selected: false,
+  },
+  {
+    walletType: WalletType.OKX,
+    address: '0x2702d89c1c8658b49c45dd460deebcc45faec03c',
+    image: 'https://app.rango.exchange/wallets/okx.png',
+    chain: 'BSC',
+    selected: false,
+  },
+
+  {
+    walletType: WalletType.KEPLR,
+    address: 'osmo1unf2rcytjxfpz8x8ar63h4qeftadptg5t0nqcl',
+    image: 'https://app.rango.exchange/wallets/keplr.png',
+    chain: 'OSMOSIS',
+    selected: false,
+  },
+];
+
+export const exampleFor5Wallets: SelectableWallet[] = [
+  {
+    walletType: WalletType.META_MASK,
+    address: '0x5423e28219d6d568dcf62a8134d623e6f4a1c2df',
+    image: 'https://app.rango.exchange/wallets/metamask.svg',
+    selected: false,
+    chain: 'BSC',
+  },
+  {
+    walletType: WalletType.OKX,
+    address: '0x2702d89c1c8658b49c45dd460deebcc45faec03c',
+    image: 'https://app.rango.exchange/wallets/okx.png',
+    selected: false,
+    chain: 'BSC',
+  },
+  {
+    walletType: WalletType.EXODUS,
+    address: '0x2702d89c1c8658b49c45dd460deebcc45faec03c',
+    image: 'https://app.rango.exchange/wallets/exodus.png',
+    selected: false,
+    chain: 'BSC',
+  },
+  {
+    walletType: WalletType.MATH,
+    address: '0x2702d89c1c8658b49c45dd460deebcc45faec03c',
+    image: 'https://app.rango.exchange/wallets/math-wallet.png',
+    selected: false,
+    chain: 'BSC',
+  },
+  {
+    walletType: WalletType.CLOVER,
+    address: '0x2702d89c1c8658b49c45dd460deebcc45faec03c',
+    image: 'https://app.rango.exchange/wallets/clover.jpeg',
+    selected: false,
+    chain: 'BSC',
+  },
+
+  {
+    walletType: WalletType.KEPLR,
+    address: 'osmo1unf2rcytjxfpz8x8ar63h4qeftadptg5t0nqcl',
+    image: 'https://app.rango.exchange/wallets/keplr.png',
+    selected: false,
+    chain: 'OSMOSIS',
+  },
+];