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

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,129 +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' });
+
 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,
-    onRefresh,
     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>
       }
-      TopButton={<StyledUpdateIcon size={24} onClick={onRefresh} />}
     >
       <MainContainer>
         <div>
@@ -147,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',
+  },
+];

package/src/containers/History/History.tsx

@@ -1,20 +1,21 @@
 import React, { PropsWithChildren } from 'react';
+import { Divider } 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';
 
-const BodyError = styled('div', {
-  height: '100%',
-  display: 'flex',
-  justifyContent: 'center',
-  alignItems: 'center',
+const Group = styled('div', {
+  '.group-title': {
+    textTransform: 'uppercase',
+  },
 });
-const ErrorMsg = styled(Typography, {
-  color: '$error',
+
+const Container = styled('div', {
+  overflowY: 'auto',
 });
 const filteredHistory = (
   list: PendingSwap[],
@@ -32,39 +33,50 @@ const filteredHistory = (
     );
   });
 };
-const Group = styled('div', {
-  marginBottom: '$24',
-  paddingRight: '$8',
-  maxHeight: '600px',
-});
-const GroupTitle = styled(Typography, {
-  color: '$neutrals500',
-});
 
+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 } = props;
-  const swapsInGroup = groupingOfSwaps(list);
+  const { list, onSwapClick, groupBy } = props;
+  const groups = groupBy ? groupBy(list) : [{ title: 'History', swaps: list }];
 
   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>
-      ))}
+      {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} />
+          </>
+        ))}
     </>
   );
 };
@@ -73,22 +85,29 @@ export function History({
   list = [],
   onBack,
   onSwapClick,
+  groupBy,
 }: PropsWithChildren<PropTypes>) {
   return (
     <SecondaryPage
       onBack={onBack}
       textField={true}
-      textFieldPlaceholder="Search By Blockchain Or Token"
+      textFieldPlaceholder="Search By Blockchain Or 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 (
+          <Container>
+            {filterSwaps.length ? (
+              <SwapsGroup
+                list={filterSwaps}
+                onSwapClick={onSwapClick}
+                groupBy={groupBy}
+              />
+            ) : (
+              <NotFoundAlert catergory="Swap" />
+            )}
+          </Container>
         );
       }}
     </SecondaryPage>

package/src/containers/History/index.ts

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

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