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

package/src/components/SwapDetail/SwapDetail.tsx

@@ -2,88 +2,39 @@ import React, { PropsWithChildren } from 'react';
 import { PendingSwap } from '../../containers/History/types';
 import { styled } from '../../theme';
 import { Button } from '../Button';
-import { CheckCircleIcon, InfoCircleIcon, TryAgainIcon } from '../Icon';
-import { StepDetail } from '../StepDetail';
+import { ArrowRightIcon } from '../Icon';
+import { Spacer } from '../Spacer';
+import { Spinner } from '../Spinner';
+import { Token } from './Token';
+import { limitDecimalPlaces } from '../../helper';
 
 const Container = styled('div', {
   position: 'relative',
-});
-
-const ButtonContainer = styled('div', {
-  paddingTop: '$8',
-});
-const SwapContainer = styled('div', {
   display: 'flex',
   justifyContent: 'space-between',
-  '@md': {
-    padding: '$12',
-  },
-  '&:hover': {
-    borderColor: '$primary',
-  },
+  alignItems: 'center',
+  padding: '$16 0',
+  borderBottom: '1px solid $neutrals300',
 
-  variants: {
-    status: {
-      failed: {
-        borderColor: '$error',
-      },
-      running: {
-        borderColor: '$neutrals400',
-      },
-      success: {
-        borderColor: '$success',
-      },
-    },
+  '& > .info': {
+    display: 'flex',
+    alignItems: 'center',
   },
-});
-const Arrow = styled('div', {
-  display: 'flex',
-  justifyContent: 'center',
-  alignItems: 'center',
-});
-const Line = styled('div', {
-  height: '0',
-  width: '$20',
-  border: '1px dashed $foreground',
-  borderRadius: 'inherit',
-  '@md': {
-    width: '$36',
+
+  '.status': {
+    textTransform: 'uppercase',
+    fontWeight: 'bold',
+    fontSize: '$12',
   },
-  '@lg': {
-    width: '$48',
+
+  '&.failed .status': {
+    color: '$error',
   },
-});
-const Dot = styled('div', {
-  width: '$6',
-  height: '$6',
-  backgroundColor: '$foreground',
-  borderRadius: '50%',
-  '@lg': {
-    width: '$8',
-    height: '$8',
+  '&.success .status': {
+    color: '$success',
   },
 });
-const ArrowRight = styled('div', {
-  width: '0px',
-  height: '0px',
-  borderTop: '5px solid transparent',
-  borderBottom: '5px solid transparent',
-  borderLeft: '5px solid $foreground',
-});
-const StatusContainer = styled('div', {
-  position: 'absolute',
-  right: '-8px',
-  top: '30%',
-  background: '$background',
-  borderRadius: '50%',
-  display: 'flex',
-  justifyContent: 'center',
 
-  '@md': {
-    top: '40%',
-    right: '-8px',
-  },
-});
 export interface PropTypes {
   swap: PendingSwap;
   status: 'running' | 'failed' | 'success';
@@ -99,52 +50,55 @@ export function SwapDetail({
   const lastStep = swap.steps[swap.steps.length - 1];
 
   return (
-    <Container onClick={onClick.bind(null, swap.requestId)}>
-      <ButtonContainer>
-        <Button
-          variant="outlined"
-          align="grow"
-          size="large"
-          type={
-            status === 'failed'
-              ? 'error'
-              : status === 'success'
-              ? 'success'
-              : undefined
-          }
-        >
-          <SwapContainer>
-            <StepDetail
-              logo={firstStep.fromLogo}
-              symbol={firstStep.fromSymbol}
-              chainLogo={firstStep.fromBlockchainLogo}
-              blockchain={firstStep.fromBlockchain}
-              amount={swap.inputAmount}
-            />
-            <Arrow>
-              <Dot />
-              <Line />
-              <ArrowRight />
-            </Arrow>
-            <StepDetail
-              logo={lastStep.toLogo}
-              symbol={lastStep.toSymbol}
-              chainLogo={lastStep.toBlockchainLogo}
-              blockchain={lastStep.toBlockchain}
-              amount={lastStep.outputAmount}
-            />
-          </SwapContainer>
-        </Button>
-      </ButtonContainer>
-      <StatusContainer>
-        {status === 'running' ? (
-          <TryAgainIcon size={16} />
-        ) : status === 'failed' ? (
-          <InfoCircleIcon size={18} color="error" />
-        ) : (
-          <CheckCircleIcon size={18} color="success" />
-        )}
-      </StatusContainer>
-    </Container>
+    <Button
+      variant="ghost"
+      size="free"
+      fullWidth
+      onClick={onClick.bind(null, swap.requestId)}
+    >
+      <Container className={`${status}`}>
+        <div className="info">
+          <Token
+            data={{
+              token: {
+                logo: firstStep.fromLogo,
+                symbol: firstStep.fromSymbol,
+              },
+              blockchain: {
+                logo: firstStep.fromBlockchainLogo || '',
+                name: firstStep.fromBlockchain,
+              },
+              amount: limitDecimalPlaces(swap.inputAmount),
+            }}
+          />
+          <Spacer size={12} />
+          <ArrowRightIcon size={12} />
+          <Spacer size={12} />
+          <Token
+            data={{
+              token: {
+                logo: lastStep.toLogo,
+                symbol: lastStep.toSymbol,
+              },
+              blockchain: {
+                logo: lastStep.toBlockchainLogo || '',
+                name: lastStep.toBlockchain,
+              },
+              amount: limitDecimalPlaces(lastStep.outputAmount || ''),
+              estimatedAmount: limitDecimalPlaces(
+                lastStep.expectedOutputAmountHumanReadable || ''
+              ),
+            }}
+          />
+        </div>
+        <div className={`status`}>
+          {status === 'running' ? (
+            <Spinner size={24} color="primary" />
+          ) : (
+            status
+          )}
+        </div>
+      </Container>
+    </Button>
   );
 }

package/src/components/SwapDetail/Token.tsx

@@ -0,0 +1,73 @@
+import React from 'react';
+import { styled } from '../../theme';
+import { Spacer } from '../Spacer';
+import { Image } from '../common';
+
+const TokenContainer = styled('div', {
+  display: 'flex',
+  alignItems: 'center',
+  width: '160px',
+
+  '& .amount': {
+    fontWeight: 'bold',
+  },
+  '& .estimated': {
+    color: '$neutrals600',
+  },
+});
+
+const TokenImage = styled('div', {
+  position: 'relative',
+
+  '.overlay': {
+    position: 'absolute',
+    right: -4,
+    bottom: -4,
+    width: '$16',
+    height: '$16',
+    padding: '$2',
+    borderRadius: '50%',
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: '$background',
+    border: '1px solid $neutrals400',
+  },
+});
+
+interface PropTypes {
+  data: {
+    token: {
+      logo: string;
+      symbol: string;
+    };
+    blockchain: {
+      logo: string;
+      name: string;
+    };
+    amount: string;
+    estimatedAmount?: string;
+  };
+}
+export function Token(props: PropTypes) {
+  const {
+    data: { token, blockchain, amount, estimatedAmount },
+  } = props;
+  return (
+    <TokenContainer>
+      <TokenImage>
+        <Image src={token.logo} alt="" size={24} />
+        <div className="overlay">
+          <Image src={blockchain.logo} alt={blockchain.name} size={12} />
+        </div>
+      </TokenImage>
+      <Spacer size={8} />
+      {!!amount && <span className="amount">{props.data.amount}</span>}
+      {!amount && estimatedAmount && (
+        <span className="amount estimated">{props.data.estimatedAmount}</span>
+      )}
+      <Spacer size={4} />
+      {token.symbol}
+    </TokenContainer>
+  );
+}

package/src/components/SwapDetail/mock.ts

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import { RoutingResultType, TransactionType } from 'rango-sdk';
 import { PendingSwap } from '../../containers/History/types';
 

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',
@@ -13,6 +14,7 @@ const InputContainer = styled('div', {
   position: 'relative',
   alignItems: 'center',
   color: '$foreground',
+  overflowX: 'hidden',
   transition: 'border-color ease .3s',
   '&:focus-within': {
     borderColor: '$success',
@@ -75,6 +77,13 @@ const Input = styled('input', {
   '&:disabled': {
     cursor: 'not-allowed',
   },
+  '&::-webkit-outer-spin-button, &::-webkit-inner-spin-button': {
+    '-webkit-appearance': 'none',
+    margin: 0,
+  },
+  '&[type="number"]': {
+    '-moz-appearance': 'textfield',
+  },
 });
 const Label = styled('label', {
   display: 'inline-block',

package/src/components/TokenList/TokenItem.tsx

@@ -4,11 +4,10 @@ import { styled } from '../../theme';
 import { Button } from '../Button';
 import { Typography } from '../Typography';
 import { TokenWithAmount } from './TokenList';
+import { Image } from '../common';
 
-const TokenImage = styled('img', {
-  width: '$32',
-  maxHeight: '$32',
-  marginRight: '$16',
+const TokenImageContainer = styled('div', {
+  paddingRight: '$16',
 });
 
 const TokenNameContainer = styled('div', {
@@ -40,6 +39,7 @@ export function TokenItem(props: PropTypes) {
         ...style,
         height: '48px',
         top: `${parseFloat(style?.top as string) + 0}px`,
+        padding: '0 4px',
       }}
     >
       <Button
@@ -48,7 +48,11 @@ export function TokenItem(props: PropTypes) {
         align="start"
         onClick={onClick.bind(null, token)}
         type={selected ? 'primary' : undefined}
-        prefix={<TokenImage src={token.image} />}
+        prefix={
+          <TokenImageContainer>
+            <Image src={token.image} size={32} />
+          </TokenImageContainer>
+        }
         suffix={
           token.balance?.amount && (
             <TokenAmountContainer>
@@ -62,7 +66,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: '33%',
+  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/Typography/Typography.tsx

@@ -61,6 +61,13 @@ const TypographyContainer = styled('span', {
           fontSize: '$18',
         },
       },
+      title: {
+        fontSize: '$14',
+        fontWeight: '$500',
+        '@md': {
+          fontSize: '$15',
+        }
+      },
       body1: {
         fontSize: '$14',
         fontWeight: '$400',
@@ -173,6 +180,7 @@ export interface PropTypes {
     | 'h4'
     | 'h5'
     | 'h6'
+    | 'title'
     | 'body1'
     | 'body2'
     | 'body3'

package/src/components/Wallet/Wallet.tsx

@@ -6,11 +6,10 @@ import { WalletInfo, WalletState } from '../../types/wallet';
 import { Button } from '../Button/Button';
 import { Typography } from '../Typography';
 import { State } from './State';
+import { Image } from '../common';
 
-const WalletImage = styled('img', {
-  width: '$24',
-  height: '$24',
-  marginRight: '$12',
+const WalletImageContainer = styled('div', {
+  paddingRight: '$12',
 });
 const Text = styled('div', {
   display: 'flex',
@@ -42,7 +41,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');
@@ -51,7 +50,11 @@ export function Wallet(props: PropTypes) {
       align="start"
       variant="outlined"
       size="large"
-      prefix={<WalletImage src={image} />}
+      prefix={
+        <WalletImageContainer>
+          <Image src={image} size={24} />
+        </WalletImageContainer>
+      }
       suffix={<State walletState={state} installLink={installLink} />}
     >
       <Text>

package/src/components/common/Image.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { styled } from '../../theme';
+
+const ImageContainer = styled('div', {
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  '.image': {
+    width: '100%',
+    height: '100%',
+    objectFit: 'contain',
+  },
+});
+
+type PropTypes = {
+  size: number;
+} & React.ImgHTMLAttributes<HTMLImageElement>;
+
+export function Image(props: PropTypes) {
+  const { size, ...otherProps } = props;
+
+  return (
+    <ImageContainer css={{ width: size + 'px', height: size + 'px' }}>
+      <img className="image" {...otherProps} />
+    </ImageContainer>
+  );
+}

package/src/components/common/index.ts

@@ -1 +1,2 @@
 export { FilledCircle } from './FilledCircle';
+export { Image } from './Image';

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} />
 );