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

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