TW-1479: EVM Transactions History

package.json

@@ -33,6 +33,7 @@
   },
   "dependencies": {
     "@apollo/client": "^3.7.2",
+    "@covalenthq/client-sdk": "^2",
     "@dicebear/bottts-neutral": "^8.0.1",
     "@dicebear/core": "^8.0.1",
     "@firebase/app": "^0.10.1",
@@ -200,7 +201,7 @@
     "ts-prune": "^0.10.3",
     "typescript": "^5.4.2",
     "typescript-eslint": "^7",
-    "use-debounce": "7.0.1",
+    "use-debounce": "^10",
     "use-force-update": "1.0.7",
     "use-onclickoutside": "0.4.1",
     "util": "0.11.1",

public/_locales/de/messages.json

@@ -465,10 +465,6 @@
     "message": "Tezos Mainnet",
     "description": "Mainnet = main network"
   },
-  "marigoldMainnet": {
-    "message": "Marigold Mainnet",
-    "description": "Mainnet = main network"
-  },
   "templeWalletOptions": {
     "message": "Temple Wallet | Optionen"
   },

public/_locales/en/messages.json

@@ -2436,6 +2436,7 @@
   "blockExplorer": {
     "message": "Block Explorer"
   },
+  "viewOnExplorer": { "message": "View on explorer" },
   "viewOnBlockExplorer": { "message": "View on block explorer" },
   "specifyTokenId": {
     "message": "Specify token ID"

public/_locales/uk/messages.json

@@ -1960,5 +1960,8 @@
   },
   "zarName": {
     "message": "Південноафриканський ранд"
+  },
+  "allNetworks": {
+    "message": "Всі мережі"
   }
 }

src/app/PageRouter.tsx

@@ -23,6 +23,7 @@ import { useTempleClient } from 'lib/temple/front';
 import * as Woozie from 'lib/woozie';
 import { TempleChainKind } from 'temple/types';
 
+import { ActivityPage } from './pages/Activity';
 import { ChainSettings } from './pages/ChainSettings';
 import { ImportWallet } from './pages/ImportWallet';
 import { Market } from './pages/Market';
@@ -75,6 +76,7 @@ const ROUTE_MAP = Woozie.createMap<RouteContext>([
       <Home chainKind={chainKind} chainId={chainId} assetSlug={assetSlug} />
     ))
   ],
+  ['/activity', onlyReady(() => <ActivityPage />)],
   ['/connect-ledger', onlyReady(onlyInFullPage(() => <ConnectLedger />))],
   ['/receive', onlyReady(() => <Receive />)],
   [

src/app/a11y/content-fader/index.tsx

@@ -0,0 +1,5 @@
+import ModStyles from './styles.module.css';
+
+export const ACTIVATE_CONTENT_FADER_CLASSNAME = ModStyles.activateContentFader;
+
+export const FADABLE_CONTENT_CLASSNAME = ModStyles.fadeableContent;

src/app/a11y/content-fader/styles.module.css

@@ -0,0 +1,3 @@
+.activateContentFader .fadeableContent {
+  filter: brightness(0.85);
+}

src/app/atoms/AccountName.tsx

@@ -90,7 +90,6 @@ interface CopyAddressButtonProps {
 
 const CopyAddressButton = memo<CopyAddressButtonProps>(({ chain, address, onCopy }) => (
   <ActionListItem
-    className="flex items-center"
     onClick={() => {
       window.navigator.clipboard.writeText(address);
       onCopy();

src/app/atoms/ActionListItem.tsx

@@ -1,4 +1,4 @@
-import React, { memo } from 'react';
+import React, { FC } from 'react';
 
 import clsx from 'clsx';
 
@@ -14,33 +14,42 @@ export interface ActionListItemProps extends PropsWithChildren {
   /** Pass it, if you want it to be called with `false` on click too */
   setOpened?: SyncFn<boolean>;
   testID?: string;
+  active?: boolean;
   danger?: boolean;
 }
 
-export const ActionListItem = memo<ActionListItemProps>(
-  ({ Icon, linkTo, className, onClick, setOpened, testID, danger, children }) => {
-    const baseProps = {
-      testID,
-      className: clsx(
-        'flex items-center py-1.5 px-2 gap-x-1 rounded-md text-font-description',
-        'hover:bg-secondary-low',
-        className
-      ),
-      onClick: setOpened
-        ? () => {
-            setOpened(false);
-            onClick?.();
-          }
-        : onClick,
-      children: (
-        <>
-          {Icon && <IconBase Icon={Icon} size={16} className={danger ? 'text-error' : 'text-secondary'} />}
+export const ActionListItem: FC<ActionListItemProps> = ({
+  Icon,
+  linkTo,
+  className,
+  onClick,
+  setOpened,
+  testID,
+  active,
+  danger,
+  children
+}) => {
+  const baseProps = {
+    testID,
+    className: clsx(
+      'flex items-center py-1.5 px-2 gap-x-1 rounded-md text-font-description',
+      active ? 'bg-grey-4' : danger ? 'hover:bg-error-low' : 'hover:bg-secondary-low',
+      className
+    ),
+    onClick: setOpened
+      ? () => {
+          setOpened(false);
+          onClick?.();
+        }
+      : onClick,
+    children: (
+      <>
+        {Icon && <IconBase Icon={Icon} size={16} className={danger ? 'text-error' : 'text-secondary'} />}
 
-          {typeof children === 'string' ? <span className="capitalize">{children}</span> : children}
-        </>
-      )
-    };
+        {typeof children === 'string' ? <span className="capitalize">{children}</span> : children}
+      </>
+    )
+  };
 
-    return linkTo ? <Link {...baseProps} to={linkTo} /> : <Button {...baseProps} />;
-  }
-);
+  return linkTo ? <Link {...baseProps} to={linkTo} /> : <Button {...baseProps} />;
+};

src/app/atoms/Anchor.tsx

@@ -2,13 +2,13 @@ import * as React from 'react';
 
 import { AnalyticsEventCategory, setTestID, TestIDProps, useAnalytics } from 'lib/analytics';
 
-interface Props
+export interface AnchorProps
   extends React.PropsWithRef<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>>,
     TestIDProps {
   treatAsButton?: boolean;
 }
 
-export const Anchor = React.forwardRef<HTMLAnchorElement, Props>(
+export const Anchor = React.forwardRef<HTMLAnchorElement, AnchorProps>(
   (
     { target = '_blank', rel = 'noopener noreferrer', testID, testIDProperties, treatAsButton, onClick, ...props },
     ref

src/app/atoms/Avatar.tsx

@@ -24,11 +24,11 @@ export type AvatarProps = AvatarDivProps | AvatarButtonProps;
 const sizeButtonClassNames = {
   24: 'w-6 h-6 rounded border p-px',
   32: 'w-8 h-8 rounded-md border p-px',
-  60: 'w-15 h-15 rounded-2.5 border-1.5 p-[0.5px]'
+  60: 'w-15 h-15 rounded-10 border-1.5 p-[0.5px]'
 };
 
 const sizeContainerClassNames = {
-  24: 'rounded-0.75',
+  24: 'rounded-3',
   32: 'rounded',
   60: 'rounded-lg border border-white'
 };

src/app/atoms/Identicon.tsx

@@ -1,18 +1,23 @@
-import React, { HTMLAttributes, useMemo } from 'react';
+import React, { FC, HTMLAttributes, ImgHTMLAttributes, useMemo } from 'react';
 
 import clsx from 'clsx';
 
-import { IdenticonType, getIdenticonUri } from 'lib/temple/front';
-import { IdenticonOptions } from 'lib/temple/front/identicon';
+import {
+  IdenticonImgType,
+  ImageIdenticonOptions,
+  InitialsIdenticonOptions,
+  buildImageIdenticonUri,
+  buildInitialsIdenticonUri
+} from 'lib/identicon';
 
-type IdenticonProps<T extends IdenticonType> = HTMLAttributes<HTMLDivElement> & {
+interface IdenticonProps<T extends IdenticonImgType> extends HTMLAttributes<HTMLDivElement> {
   type: T;
   hash: string;
   size?: number;
-  options?: IdenticonOptions<T>;
-};
+  options?: ImageIdenticonOptions<T>;
+}
 
-export const Identicon = <T extends IdenticonType>({
+export const Identicon = <T extends IdenticonImgType>({
   type,
   hash,
   size = 100,
@@ -21,19 +26,30 @@ export const Identicon = <T extends IdenticonType>({
   options,
   ...rest
 }: IdenticonProps<T>) => {
-  const backgroundImage = useMemo(() => getIdenticonUri(hash, size, type, options), [hash, options, size, type]);
+  const backgroundImage = useMemo(() => buildImageIdenticonUri(hash, size, type, options), [hash, options, size, type]);
 
   return (
     <div
       className={clsx(
-        type === 'initials' ? 'bg-transparent' : 'bg-white',
-        'bg-no-repeat bg-center inline-block overflow-hidden',
+        'bg-white overflow-hidden',
+        'inline-block bg-no-repeat bg-center', // (!) Why?
         className
       )}
-      style={style}
+      style={{ width: size, height: size, ...style }}
       {...rest}
     >
-      <img src={backgroundImage} alt="" style={{ width: size, height: size }} />
+      <img src={backgroundImage} alt="" className="w-full h-full" />
     </div>
   );
 };
+
+interface IdenticonInitialsProps extends ImgHTMLAttributes<HTMLImageElement> {
+  value: string;
+  options?: InitialsIdenticonOptions;
+}
+
+export const IdenticonInitials: FC<IdenticonInitialsProps> = ({ value, options, ...props }) => {
+  const src = useMemo(() => buildInitialsIdenticonUri(value, options), [options, value]);
+
+  return <img src={src} {...props} />;
+};

src/app/atoms/InfiniteScroll.tsx

@@ -0,0 +1,83 @@
+import React, { CSSProperties, FC, ReactElement, useEffect } from 'react';
+
+import ReactInfiniteScrollComponent from 'react-infinite-scroll-component';
+
+import { APP_CONTENT_PAPER_DOM_ID, SCROLL_DOCUMENT } from 'app/layouts/containers';
+
+import { LoaderDebounce } from './LoaderDebounce';
+import { SyncSpinner } from './SyncSpinner';
+
+interface Props extends PropsWithChildren {
+  itemsLength: number;
+  isSyncing: boolean;
+  reachedTheEnd: boolean;
+  retryInitialLoad: EmptyFn;
+  loadMore: EmptyFn;
+  loader?: ReactElement;
+}
+
+export const InfiniteScroll: FC<Props> = ({
+  itemsLength,
+  isSyncing,
+  reachedTheEnd,
+  retryInitialLoad,
+  loadMore,
+  loader,
+  children
+}) => {
+  const loadNext = itemsLength ? loadMore : retryInitialLoad;
+
+  const onScroll = isSyncing || reachedTheEnd ? undefined : buildOnScroll(loadNext);
+
+  // For when there are too few items to make initial scroll for loadMore:
+  useEffect(() => {
+    if (SCROLL_DOCUMENT || isSyncing || reachedTheEnd) return;
+
+    const scrollableElem = document.getElementById(APP_CONTENT_PAPER_DOM_ID);
+
+    if (!scrollableElem || scrollableElem.scrollTop || scrollableElem.scrollHeight > scrollableElem.clientHeight)
+      return;
+
+    if (isScrollAtTheEnd(scrollableElem)) loadNext();
+  }, [isSyncing, itemsLength, reachedTheEnd]);
+
+  return (
+    <ReactInfiniteScrollComponent
+      dataLength={itemsLength}
+      hasMore={!reachedTheEnd}
+      next={loadNext}
+      onScroll={onScroll}
+      loader={null} // Doesn't always show this way
+      scrollableTarget={SCROLL_DOCUMENT ? undefined : APP_CONTENT_PAPER_DOM_ID}
+      style={STYLE}
+    >
+      {children}
+
+      <LoaderDebounce isSyncing={isSyncing} keepTime={2_000}>
+        {loader ?? <SyncSpinner className="mt-4" />}
+      </LoaderDebounce>
+    </ReactInfiniteScrollComponent>
+  );
+};
+
+const STYLE: CSSProperties = {
+  /** Scrollable element must be an ancestor of this component - document or other. */
+  overflow: 'unset'
+};
+
+/**
+ * Build onscroll listener to trigger next loading, when fetching data resulted in error.
+ * `InfiniteScroll.props.next` won't be triggered in this case.
+ */
+const buildOnScroll =
+  (next: EmptyFn) =>
+  ({ target }: { target: EventTarget | null }) => {
+    const elem: HTMLElement =
+      target instanceof Document ? (target.scrollingElement! as HTMLElement) : (target as HTMLElement);
+
+    if (isScrollAtTheEnd(elem)) next();
+  };
+
+function isScrollAtTheEnd(elem: Element) {
+  return elem.scrollHeight === elem.clientHeight + elem.scrollTop;
+}