@rango-dev/ui 0.1.10 → 0.1.11-next.11

package/src/components/TokenSelector/TokenSelector.tsx

@@ -9,27 +9,21 @@ 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%',
+  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) =>
@@ -41,53 +35,35 @@ const filterTokens = (list: TokenWithAmount[], searchedFor: string) =>
   );
 
 export function TokenSelector(props: PropTypes) {
-  const {
-    list,
-    type,
-    selected,
-    onChange,
-    hasHeader,
-    multiSelect,
-    selectedList,
-    onBack,
-    loadingStatus,
-  } = 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) => {
         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>
+
+        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',
@@ -74,9 +81,9 @@ const TypographyContainer = styled('span', {
       body2: {
         fontSize: '$14',
         fontWeight: '$400',
-        '@lg': {
-          fontSize: '$16',
-        },
+        // '@lg': {
+        //   fontSize: '$14',
+        // },
       },
       body3: {
         fontSize: '$12',
@@ -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',
@@ -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/containers/ConfirmSwap/ConfirmSwap.tsx

@@ -54,6 +54,8 @@ const Container = styled('div', {
 
 const Alerts = styled('div', { paddingBottom: '$16' });
 
+type Message = string | ReactNode
+
 export interface PropTypes {
   onBack: () => void;
   onConfirm?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
@@ -67,8 +69,8 @@ export interface PropTypes {
   previewInputs?: ReactNode;
   previewRoutes?: ReactNode;
   confirmButtonTitle: string;
-  errors?: ReactNode[];
-  warnings?: ReactNode[];
+  errors?: Message[];
+  warnings?: Message[];
   extraMessages?: ReactNode;
 }
 export function ConfirmSwap(props: PropsWithChildren<PropTypes>) {
@@ -115,17 +117,15 @@ export function ConfirmSwap(props: PropsWithChildren<PropTypes>) {
             {errors?.map((error, index) => (
               <>
                 <Spacer direction="vertical" />
-                <Alert type="error" key={index}>
-                  {error}
-                </Alert>
+                <Alert type="error" key={index} 
+                  {...(typeof error === 'string') ? {title: error} : {children: error} }/>
               </>
             ))}
             {warnings?.map((warning, index) => (
               <>
                 <Spacer direction="vertical" />
-                <Alert type="warning" key={index}>
-                  {warning}
-                </Alert>
+                <Alert type="warning" key={index} 
+                  {...(typeof warning === 'string') ? {title: warning} : {children: warning} }/>
               </>
             ))}
           </Alerts>
@@ -153,7 +153,7 @@ export function ConfirmSwap(props: PropsWithChildren<PropTypes>) {
                 <>
                   <AlertContainer>
                     <Alert type="error">
-                      You need to connect a compatible wallet with {wallet}
+                      You need to connect a compatible wallet with {wallet}.
                     </Alert>
                   </AlertContainer>
                   {isExperimentalChain?.(wallet) && (

package/src/containers/History/History.tsx

@@ -1,18 +1,12 @@
 import React, { PropsWithChildren } from 'react';
-import { Divider } from '../../components';
+import { Spinner } from '../../components';
 import { SecondaryPage } from '../../components/SecondaryPage';
-import { SwapDetail } from '../../components/SwapDetail';
-import { Typography } from '../../components/Typography';
 import { containsText } from '../../helper';
 import { styled } from '../../theme';
 import { PendingSwap } from './types';
 import { NotFoundAlert } from '../../components/Alert/NotFoundAlert';
-
-const Group = styled('div', {
-  '.group-title': {
-    textTransform: 'uppercase',
-  },
-});
+import { LoaderContainer } from '../../components/TokenSelector/TokenSelector';
+import { SwapsGroup, PropTypes as SwapsGroupPropTypes } from './SwapsGroup';
 
 const Container = styled('div', {
   overflowY: 'auto',
@@ -34,80 +28,43 @@ const filteredHistory = (
   });
 };
 
-export type GroupBy = (list: PendingSwap[]) => {
-  title: string;
-  swaps: PendingSwap[];
-}[];
-export interface PropTypes {
-  list: PendingSwap[];
-  onBack: () => void;
-  onSwapClick: (requestId: string) => void;
-  groupBy?: GroupBy;
-}
-const SwapsGroup = (props: Omit<PropTypes, 'onBack'>) => {
-  const { list, onSwapClick, groupBy } = props;
-  const groups = groupBy ? groupBy(list) : [{ title: 'History', swaps: list }];
+export type PropTypes = SwapsGroupPropTypes & { loading: boolean };
 
-  return (
-    <>
-      {groups
-        .filter((group) => group.swaps.length > 0)
-        .map((group, index) => (
-          <>
-            <Group key={index}>
-              <Typography
-                variant="body2"
-                color="neutrals600"
-                className="group-title"
-              >
-                {group.title}
-              </Typography>
-              {group.swaps.map((swap: PendingSwap, index: number) => (
-                <>
-                  <SwapDetail
-                    key={index}
-                    swap={swap}
-                    status={swap.status}
-                    onClick={onSwapClick}
-                  />
-                  <Divider size={12} />
-                </>
-              ))}
-            </Group>
-            <Divider size={24} />
-          </>
-        ))}
-    </>
-  );
-};
+export function History(props: PropsWithChildren<PropTypes>) {
+  const { list = [], onBack, onSwapClick, groupBy, loading } = props;
 
-export function History({
-  list = [],
-  onBack,
-  onSwapClick,
-  groupBy,
-}: PropsWithChildren<PropTypes>) {
   return (
     <SecondaryPage
       onBack={onBack}
       textField={true}
-      textFieldPlaceholder="Search By Blockchain Or Token Or Request ID"
+      textFieldPlaceholder="Search by Network, Token or Request ID"
       title="Swaps"
     >
       {(searchedFor) => {
         const filterSwaps = filteredHistory(list, searchedFor);
         return (
-          <Container>
-            {filterSwaps.length ? (
-              <SwapsGroup
-                list={filterSwaps}
-                onSwapClick={onSwapClick}
-                groupBy={groupBy}
-              />
-            ) : (
-              <NotFoundAlert catergory="Swap" />
+          <>
+            {loading && (
+              <LoaderContainer>
+                <Spinner size={24} />
+              </LoaderContainer>
             )}
-          </Container>
+            <Container>
+              {!loading && (
+                <>
+                  {filterSwaps.length ? (
+                    <SwapsGroup
+                      list={filterSwaps}
+                      onSwapClick={onSwapClick}
+                      groupBy={groupBy}
+                    />
+                  ) : (
+                    <NotFoundAlert catergory="Swap" />
+                  )}
+                </>
+              )}
+            </Container>
+          </>
         );
       }}
     </SecondaryPage>

package/src/containers/History/SwapsGroup.tsx

@@ -0,0 +1,59 @@
+import { PendingSwap } from '@rango-dev/queue-manager-rango-preset';
+import React from 'react';
+import { Typography, SwapDetail, Divider } from '../../components';
+import { styled } from '../../theme';
+
+const Group = styled('div', {
+  '.group-title': {
+    textTransform: 'uppercase',
+  },
+});
+
+export type GroupBy = (list: PendingSwap[]) => {
+  title: string;
+  swaps: PendingSwap[];
+}[];
+
+export interface PropTypes {
+  list: PendingSwap[];
+  onBack: () => void;
+  onSwapClick: (requestId: string) => void;
+  groupBy?: GroupBy;
+}
+
+export function SwapsGroup(props: Omit<PropTypes, 'onBack'>) {
+  const { list, onSwapClick, groupBy } = props;
+  const groups = groupBy ? groupBy(list) : [{ title: 'History', swaps: list }];
+
+  return (
+    <>
+      {groups
+        .filter((group) => group.swaps.length > 0)
+        .map((group, index) => (
+          <>
+            <Group key={index}>
+              <Typography
+                variant="body2"
+                color="neutrals600"
+                className="group-title"
+              >
+                {group.title}
+              </Typography>
+              {group.swaps.map((swap: PendingSwap, index: number) => (
+                <>
+                  <SwapDetail
+                    key={index}
+                    swap={swap}
+                    status={swap.status}
+                    onClick={onSwapClick}
+                  />
+                  <Divider size={12} />
+                </>
+              ))}
+            </Group>
+            <Divider size={24} />
+          </>
+        ))}
+    </>
+  );
+}

package/src/containers/History/index.ts

@@ -1 +1,2 @@
-export { History, GroupBy } from './History';
+export { History } from './History';
+export { SwapsGroup, GroupBy } from './SwapsGroup';