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

package/src/components/SwapDetail/SwapDetail.tsx

@@ -2,88 +2,45 @@ 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';
 
 const Container = styled('div', {
   position: 'relative',
-});
-
-const ButtonContainer = styled('div', {
-  paddingTop: '$8',
-});
-const SwapContainer = styled('div', {
   display: 'flex',
   justifyContent: 'space-between',
-  '@md': {
-    padding: '$12',
+  alignItems: 'center',
+  padding: '$16 0',
+  borderBottom: '1px solid $neutrals300',
+
+  '& > .info': {
+    display: 'flex',
+    alignItems: 'center',
   },
-  '&:hover': {
-    borderColor: '$primary',
+
+  '.status': {
+    textTransform: 'uppercase',
+    fontWeight: 'bold',
+    fontSize: '$12',
   },
 
-  variants: {
-    status: {
-      failed: {
-        borderColor: '$error',
-      },
-      running: {
-        borderColor: '$neutrals400',
-      },
-      success: {
-        borderColor: '$success',
-      },
-    },
+  '&.running': {
+    color: '$foreground',
   },
-});
-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',
+  '&.failed,&.success': {
+    color: '$neutrals600',
   },
-  '@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 +56,57 @@ 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: {
+                // @ts-ignore
+                logo: firstStep.fromBlockchainLogo,
+                name: firstStep.fromBlockchain,
+              },
+              amount: swap.inputAmount,
+            }}
+          />
+          <Spacer size={12} />
+          <ArrowRightIcon size={12} />
+          <Spacer size={12} />
+          <Token
+            data={{
+              token: {
+                logo: lastStep.toLogo,
+                symbol: lastStep.toSymbol,
+              },
+              blockchain: {
+                // @ts-ignore
+                logo: lastStep.toBlockchainLogo,
+                name: lastStep.toBlockchain,
+              },
+              amount:
+                lastStep.outputAmount ||
+                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,68 @@
+import React from 'react';
+import { styled } from '../../theme';
+import { Spacer } from '../Spacer';
+
+const TokenContainer = styled('div', {
+  display: 'flex',
+  alignItems: 'center',
+
+  '& .amount': {
+    fontWeight: 'bold',
+  },
+});
+
+const TokenImage = styled('div', {
+  position: 'relative',
+  width: '$24',
+  height: '$24',
+
+  img: {
+    width: '100%',
+    display: 'block',
+  },
+
+  '.overlay': {
+    position: 'absolute',
+    right: -4,
+    bottom: -4,
+    width: '$16',
+    height: '$16',
+    padding: '$2',
+    borderRadius: '50%',
+    backgroundColor: '$background',
+    border: '1px solid $neutrals400',
+  },
+});
+
+interface PropTypes {
+  data: {
+    token: {
+      logo: string;
+      symbol: string;
+    };
+    blockchain: {
+      logo: string;
+      name: string;
+    };
+    amount: string;
+  };
+}
+export function Token(props: PropTypes) {
+  return (
+    <TokenContainer>
+      <TokenImage>
+        <img src={props.data.token.logo} alt="" />
+        <div className="overlay">
+          <img
+            src={props.data.blockchain.logo}
+            alt={props.data.blockchain.name}
+          />
+        </div>
+      </TokenImage>
+      <Spacer size={8} />
+      <span className="amount">{props.data.amount}</span>
+      <Spacer size={4} />
+      {props.data.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/Switch/Switch.tsx

@@ -9,14 +9,16 @@ const StyledSwitchRoot = styled(RadixSwitch.Root, {
   borderStyle: 'solid',
   width: '42px',
   height: '22px',
-  backgroundColor: '$neutrals300',
-  borderColor: '$neutrals400',
+  backgroundColor: '$neutrals600',
+  borderColor: '$neutrals600',
   borderRadius: '99999px',
   position: 'relative',
   padding: '0',
   cursor: 'pointer',
+
   '&[data-state="checked"]': {
-    backgroundColor: '$primary100',
+    backgroundColor: '$success',
+    borderColor: '$success',
   },
   '-webkit-tap-highlight-color': 'rgba(0, 0, 0, 0)',
 });
@@ -28,13 +30,13 @@ const StyledSwitchThumb = styled(RadixSwitch.Thumb, {
   display: 'block',
   width: '18px',
   height: '18px',
-  backgroundColor: '$neutrals500',
+  backgroundColor: '$white',
   transition: ' transform 300ms',
   borderRadius: '999999px',
   willChange: 'transform',
+
   '&[data-state="checked"]': {
     transform: 'translateX(20px)',
-    backgroundColor: '$primary',
   },
 });
 

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',
@@ -15,7 +16,8 @@ const InputContainer = styled('div', {
   color: '$foreground',
   transition: 'border-color ease .3s',
   '&:focus-within': {
-    borderColor: '$primary',
+    borderColor: '$success',
+    outline: '1px solid $success',
   },
   variants: {
     size: {

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

@@ -53,7 +53,7 @@ export function TokenList(props: PropTypes) {
 
   useEffect(() => {
     setTokens(list.slice(0, PAGE_SIZE));
-  }, [searchedText]);
+  }, [searchedText, list]);
 
   useEffect(() => {
     setHasNextPage(list.length > tokens.length);
@@ -76,22 +76,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,7 +3,23 @@ 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';
 
+const Container = styled('div', {
+  flex: '1',
+});
+
+export const LoaderContainer = styled('div', {
+  display: 'flex',
+  justifyContent: 'center',
+  width: '100%',
+  position: 'absolute',
+  top: '50%',
+});
 export interface PropTypes {
   list: TokenWithAmount[];
   type?: 'Source' | 'Destination';
@@ -13,6 +29,7 @@ export interface PropTypes {
   multiSelect?: boolean;
   onBack?: () => void;
   selectedList?: TokenWithAmount[] | 'all';
+  loadingStatus: LoadingStatus;
 }
 
 const filterTokens = (list: TokenWithAmount[], searchedFor: string) =>
@@ -33,6 +50,7 @@ export function TokenSelector(props: PropTypes) {
     multiSelect,
     selectedList,
     onBack,
+    loadingStatus,
   } = props;
 
   return (
@@ -43,16 +61,35 @@ export function TokenSelector(props: PropTypes) {
       hasHeader={hasHeader}
       onBack={onBack}
     >
-      {(searchedFor) => (
-        <TokenList
-          searchedText={searchedFor}
-          list={filterTokens(list, searchedFor)}
-          selected={selected}
-          selectedList={selectedList}
-          multiSelect={multiSelect}
-          onChange={onChange}
-        />
-      )}
+      {(searchedFor) => {
+        const filteredTokens = filterTokens(list, searchedFor);
+        return (
+          <Container>
+            {loadingStatus === 'loading' && (
+              <LoaderContainer>
+                <Spinner size={24} />
+              </LoaderContainer>
+            )}
+            {loadingStatus === 'failed' && <LoadingFailedAlert />}
+            {loadingStatus === 'success' && (
+              <>
+                {filteredTokens.length ? (
+                  <TokenList
+                    searchedText={searchedFor}
+                    list={filteredTokens}
+                    selected={selected}
+                    selectedList={selectedList}
+                    multiSelect={multiSelect}
+                    onChange={onChange}
+                  />
+                ) : (
+                  <NotFoundAlert catergory="Token" searchedFor={searchedFor} />
+                )}
+              </>
+            )}
+          </Container>
+        );
+      }}
     </SecondaryPage>
   );
 }

package/src/components/Typography/Typography.stories.tsx

@@ -13,6 +13,7 @@ export default {
       options: [
         'body1',
         'body2',
+        'body3',
         'h1',
         'h2',
         'h3',
@@ -61,6 +62,9 @@ export const Main = (props: PropTypes) => (
     <Typography {...props} variant="body2">
       Body 2
     </Typography>
+    <Typography {...props} variant="body3">
+      Body 3
+    </Typography>
     <Typography {...props} variant="caption">
       Caption
     </Typography>

package/src/components/Typography/Typography.tsx

@@ -4,7 +4,6 @@ import { styled } from '../../theme';
 
 const TypographyContainer = styled('span', {
   margin: 0,
-  color: '$foreground',
   display: 'inline-block',
   variants: {
     variant: {
@@ -51,12 +50,6 @@ const TypographyContainer = styled('span', {
       h5: {
         fontSize: '$16',
         fontWeight: '$600',
-        '@md': {
-          fontSize: '$18',
-        },
-        '@lg': {
-          fontSize: '$20',
-        },
       },
       h6: {
         fontSize: '$14',
@@ -85,6 +78,10 @@ const TypographyContainer = styled('span', {
           fontSize: '$16',
         },
       },
+      body3: {
+        fontSize: '$12',
+        fontWeight: '$400',
+      },
       caption: {
         fontSize: '$10',
         fontWeight: '$400',
@@ -178,6 +175,7 @@ export interface PropTypes {
     | 'h6'
     | 'body1'
     | 'body2'
+    | 'body3'
     | 'caption';
   align?: 'center' | 'left' | 'right';
   noWrap?: boolean;
@@ -187,16 +185,29 @@ export interface PropTypes {
   mr?: 2 | 4 | 8 | 12;
   className?: string;
   style?: CSSProperties;
-
+  color?: string;
 }
 
 export function Typography({
   children,
   className,
+  color,
   ...props
 }: PropsWithChildren<PropTypes>) {
+  const customCss = color
+    ? {
+        color: color.startsWith('$') ? color : `$${color}`,
+      }
+    : {
+        color: '$foreground',
+      };
+
   return (
-    <TypographyContainer className={`_typography _text ${className}`} {...props}>
+    <TypographyContainer
+      className={`_typography _text ${className || ''}`}
+      css={customCss}
+      {...props}
+    >
       {children}
     </TypographyContainer>
   );

package/src/components/Wallet/State.tsx

@@ -1,7 +1,6 @@
 import React, { Fragment } from 'react';
 import { styled } from '../../theme';
-import { FilledCircle } from '../common';
-import { DownloadIcon } from '../Icon';
+import { DisconnectIcon, DownloadIcon } from '../Icon';
 import { Spinner } from '../Spinner';
 import { WalletState } from '../../types/wallet';
 import { InstallObjects, detectInstallLink } from '@rango-dev/wallets-shared';
@@ -28,7 +27,7 @@ export const State = ({
           </a>
         )}
         {walletState === WalletState.CONNECTING && <Spinner />}
-        {walletState === WalletState.CONNECTED && <FilledCircle />}
+        {walletState === WalletState.CONNECTED && <DisconnectIcon />}
       </StateIconContainer>
     )}
   </Fragment>

package/src/components/Wallet/Wallet.tsx

@@ -12,6 +12,25 @@ const WalletImage = styled('img', {
   height: '$24',
   marginRight: '$12',
 });
+const Text = styled('div', {
+  display: 'flex',
+  flexDirection: 'column',
+});
+
+const ExtendedButton = styled(Button, {
+  variants: {
+    type: {
+      primary: {
+        outline: '1px solid $primary',
+        borderColor: '$primary',
+
+        '&:hover': {
+          borderColor: '$primary',
+        },
+      },
+    },
+  },
+});
 
 export type PropTypes = WalletInfo & {
   onClick: (walletType: WalletType) => void;
@@ -19,10 +38,11 @@ export type PropTypes = WalletInfo & {
 
 export function Wallet(props: PropTypes) {
   const { name, type, image, state, onClick, installLink } = props;
+
   return (
-    <Button
+    <ExtendedButton
       type={state === WalletState.CONNECTED ? 'primary' : undefined}
-      disabled={!state}
+      disabled={state == WalletState.CONNECTING}
       onClick={() => {
         if (state === WalletState.NOT_INSTALLED) {
           window.open(detectInstallLink(installLink), '_blank');
@@ -34,9 +54,16 @@ export function Wallet(props: PropTypes) {
       prefix={<WalletImage src={image} />}
       suffix={<State walletState={state} installLink={installLink} />}
     >
-      <Typography variant="h5" noWrap={false}>
-        {name}
-      </Typography>
-    </Button>
+      <Text>
+        <Typography variant="h5" noWrap={false}>
+          {name}
+        </Typography>
+        {state === WalletState.CONNECTED ? (
+          <Typography variant="caption" noWrap={false} color="primary">
+            Connected
+          </Typography>
+        ) : null}
+      </Text>
+    </ExtendedButton>
   );
 }

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';