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

package/src/containers/ConfirmSwap/ConfirmSwap.tsx

@@ -1,125 +1,112 @@
-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' });
+
+type Message = string | ReactNode
+
 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;
-  errors?: ReactNode[];
-  warnings?: ReactNode[];
+  requiredWallets: string[];
+  selectableWallets: SelectableWallet[];
+  onChange: (w: SelectableWallet) => void;
+  isExperimentalChain?: (wallet: string) => boolean;
+  handleConnectChain?: (wallet: string) => void;
+  previewInputs?: ReactNode;
+  previewRoutes?: ReactNode;
+  confirmButtonTitle: string;
+  errors?: Message[];
+  warnings?: Message[];
   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>
       }
     >
@@ -130,64 +117,63 @@ 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>
         </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',
+  },
+];

package/src/containers/History/History.tsx

@@ -1,20 +1,15 @@
 import React, { PropsWithChildren } from 'react';
+import { Spinner } from '../../components';
 import { SecondaryPage } from '../../components/SecondaryPage';
-import { SwapDetail } from '../../components/SwapDetail';
-import { Typography } from '../../components/Typography';
 import { containsText } from '../../helper';
-import { groupingOfSwaps } from '../../helper/swaps';
 import { styled } from '../../theme';
 import { PendingSwap } from './types';
+import { NotFoundAlert } from '../../components/Alert/NotFoundAlert';
+import { LoaderContainer } from '../../components/TokenSelector/TokenSelector';
+import { SwapsGroup, PropTypes as SwapsGroupPropTypes } from './SwapsGroup';
 
-const BodyError = styled('div', {
-  height: '100%',
-  display: 'flex',
-  justifyContent: 'center',
-  alignItems: 'center',
-});
-const ErrorMsg = styled(Typography, {
-  color: '$error',
+const Container = styled('div', {
+  overflowY: 'auto',
 });
 const filteredHistory = (
   list: PendingSwap[],
@@ -32,63 +27,44 @@ const filteredHistory = (
     );
   });
 };
-const Group = styled('div', {
-  marginBottom: '$24',
-  paddingRight: '$8',
-  maxHeight: '600px',
-});
-const GroupTitle = styled(Typography, {
-  color: '$neutrals500',
-});
 
-export interface PropTypes {
-  list: PendingSwap[];
-  onBack: () => void;
-  onSwapClick: (requestId: string) => void;
-}
-const SwapsGroup = (props: Omit<PropTypes, 'onBack'>) => {
-  const { list, onSwapClick } = props;
-  const swapsInGroup = groupingOfSwaps(list);
+export type PropTypes = SwapsGroupPropTypes & { loading: boolean };
 
-  return (
-    <>
-      {swapsInGroup.map((group, index) => (
-        <Group key={index}>
-          <GroupTitle variant="body2">{group.title}</GroupTitle>
-          {group.swaps.map((swap: PendingSwap, index: number) => (
-            <SwapDetail
-              key={index}
-              swap={swap}
-              status={swap.status}
-              onClick={onSwapClick}
-            />
-          ))}
-        </Group>
-      ))}
-    </>
-  );
-};
+export function History(props: PropsWithChildren<PropTypes>) {
+  const { list = [], onBack, onSwapClick, groupBy, loading } = props;
 
-export function History({
-  list = [],
-  onBack,
-  onSwapClick,
-}: PropsWithChildren<PropTypes>) {
   return (
     <SecondaryPage
       onBack={onBack}
       textField={true}
-      textFieldPlaceholder="Search By Blockchain Or Token"
+      textFieldPlaceholder="Search by Network, Token or Request ID"
       title="Swaps"
     >
       {(searchedFor) => {
         const filterSwaps = filteredHistory(list, searchedFor);
-        return filterSwaps.length ? (
-          <SwapsGroup list={filterSwaps} onSwapClick={onSwapClick} />
-        ) : (
-          <BodyError>
-            <ErrorMsg variant="caption">Not Found</ErrorMsg>
-          </BodyError>
+        return (
+          <>
+            {loading && (
+              <LoaderContainer>
+                <Spinner size={24} />
+              </LoaderContainer>
+            )}
+            <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 } from './History';
+export { SwapsGroup, GroupBy } from './SwapsGroup';

package/src/containers/History/mock.ts

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

package/src/containers/History/types.tsx

@@ -1,20 +1,13 @@
 import {
   CosmosTransaction,
   EvmTransaction,
-  SimulationResult,
   SolanaTransaction,
   SwapExplorerUrl,
   SwapperStatusStep,
   Transfer,
 } from 'rango-sdk';
-import {
-  MessageSeverity,
-  PendingSwapNetworkStatus,
-  StepStatus,
-  SwapSavedSettings,
-  SwapStatus,
-  WalletTypeAndAddress,
-} from '../../types/swaps';
+import { PendingSwapNetworkStatus, StepStatus } from '../../types/swaps';
+export { PendingSwap } from '@rango-dev/queue-manager-rango-preset';
 
 export type PendingSwapStep = {
   id: number;
@@ -52,24 +45,3 @@ export type PendingSwapStep = {
   diagnosisUrl: string | null;
   internalSteps: SwapperStatusStep[] | null;
 };
-
-export type PendingSwap = {
-  creationTime: string;
-  finishTime: string | null;
-  requestId: string;
-  inputAmount: string;
-  status: SwapStatus;
-  isPaused: boolean;
-  extraMessage: string | null;
-  extraMessageSeverity: MessageSeverity | null;
-  extraMessageErrorCode: string | null;
-  extraMessageDetail: string | null | undefined;
-  networkStatusExtraMessage: string | null;
-  networkStatusExtraMessageDetail: string | null;
-  lastNotificationTime: string | null;
-  wallets: { [p: string]: WalletTypeAndAddress };
-  settings: SwapSavedSettings;
-  steps: PendingSwapStep[];
-  simulationResult: SimulationResult;
-  validateBalanceOrFee: boolean;
-};