@aurora-is-near/intents-swap-widget 3.17.2 → 3.17.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aurora-is-near/intents-swap-widget",
-  "version": "3.17.2",
+  "version": "3.17.3",
   "description": "Provides components and hooks to build your own Intents swap widget",
   "author": "Maksim Vashchuk",
   "license": "MIT",

package/src/features/TokensList/TokenItem.tsx

@@ -6,8 +6,6 @@ import { TinyNumber } from '@/components/TinyNumber';
 import { getUsdDisplayBalance } from '@/utils/formatters/getUsdDisplayBalance';
 import type { Token, TokenBalance } from '@/types/token';
 
-export const TOKEN_ITEM_HEIGHT = 58;
-
 type Msg = { type: 'on_select_token'; token: Token };
 
 type Props = {
@@ -15,6 +13,7 @@ type Props = {
   balance: TokenBalance;
   showBalance?: boolean;
   isNotSelectable?: boolean;
+  isFocused?: boolean;
   className?: string;
   onMsg: (msg: Msg) => void;
 };
@@ -24,6 +23,7 @@ export const TokenItem = ({
   balance,
   showBalance = true,
   isNotSelectable,
+  isFocused,
   className,
   onMsg,
 }: Props) => {
@@ -43,6 +43,7 @@ export const TokenItem = ({
           {
             'cursor-not-allowed': isNotSelectable,
             'cursor-pointer hover:bg-sw-gray-800': !isNotSelectable,
+            'bg-sw-gray-800': isFocused && !isNotSelectable,
           },
           className,
         )}
@@ -52,7 +53,10 @@ export const TokenItem = ({
         <TokenIcon
           token={token}
           chainShowIcon={!token.isIntent}
-          className="border-sw-gray-900 group-hover:border-sw-gray-800 transition-colors"
+          className={cn('group-hover:border-sw-gray-800 transition-colors', {
+            'border-sw-gray-800': isFocused,
+            'border-sw-gray-900': !isFocused,
+          })}
         />
 
         <div className="gap-sw-xs mr-auto flex flex-col">

package/src/features/TokensList/TokensList.tsx

@@ -1,8 +1,24 @@
-import { VList } from 'virtua';
-import { Fragment, useMemo } from 'react';
+import { VList, VListHandle } from 'virtua';
+import { useCallback, useMemo, useRef, useState } from 'react';
 
-import { TOKEN_ITEM_HEIGHT, TokenItem } from './TokenItem';
+import { TokenItem } from './TokenItem';
+import { useFocusOnList } from './hooks';
 import { TokensListPlaceholder } from './TokensListPlaceholder';
+import {
+  LIST_CONTAINER_ID,
+  MAX_LIST_VIEW_AREA_HEIGHT,
+  TOKEN_ITEM_HEIGHT,
+} from './constants';
+import {
+  getFirstGroupItemTotalIndex,
+  getGroupHeadersTotalIndexes,
+  getListItemsTotalCount,
+  getListState,
+  getListTotalHeight,
+  getTokenByTotalIndex,
+} from './utils';
+import type { ListGroup } from './types';
+
 import { cn } from '@/utils/cn';
 import { Hr } from '@/components/Hr';
 import { useUnsafeSnapshot } from '@/machine/snap';
@@ -31,18 +47,6 @@ type Props = {
   onMsg: (msg: Msg) => void;
 };
 
-const useListState = (tokens: ReadonlyArray<Token>, search: string) => {
-  if (tokens.length === 0 && search) {
-    return 'EMPTY_SEARCH';
-  }
-
-  if (tokens.length === 0 && !search) {
-    return 'NO_TOKENS';
-  }
-
-  return 'HAS_TOKENS';
-};
-
 export const TokensList = ({
   variant,
   search,
@@ -68,37 +72,52 @@ export const TokensList = ({
   });
 
   const areTokensGrouped = ctx.walletAddress ? groupTokens : false;
-  const tokensListState = useListState(filteredTokens.all, search);
+  const tokensListState = getListState(filteredTokens.all, search);
 
-  const tokensUngrouped = useMemo(
-    () => [{ label: null, tokens: filteredTokens.all }],
+  const ref = useRef<VListHandle>(null);
+  const [focusedIndex, setFocusedIndex] = useState(-1);
+
+  const tokensUngrouped = useMemo<ListGroup<1>>(
+    () => [{ tokens: filteredTokens.all }],
     [filteredTokens.all],
   );
 
-  const tokensBySection = useMemo(
-    () => [
-      { label: appName, tokens: filteredTokens.intents },
-      {
-        label: chainIsNotSupported ? null : 'Connected wallet',
-        tokens: filteredTokens.wallet,
-      },
-    ],
-    [filteredTokens.wallet, filteredTokens.intents, chainIsNotSupported],
-  );
+  const tokensBySection = useMemo(() => {
+    return [
+      ...(filteredTokens.intents.length > 0
+        ? [
+            { label: appName, count: filteredTokens.intents.length },
+            { tokens: filteredTokens.intents },
+          ]
+        : []),
+      ...(filteredTokens.wallet.length > 0
+        ? [
+            {
+              label: chainIsNotSupported ? null : 'Connected wallet',
+              count: filteredTokens.wallet.length,
+            },
+            { tokens: filteredTokens.wallet },
+          ]
+        : []),
+    ].filter(Boolean) as ListGroup<0 | 2 | 4>;
+  }, [filteredTokens.wallet, filteredTokens.intents, chainIsNotSupported]);
 
-  const tokensCount = useMemo(() => {
-    return (areTokensGrouped ? tokensBySection : tokensUngrouped).reduce(
-      (acc, group) => acc + group.tokens.length,
-      0,
-    );
-  }, [tokensBySection, tokensUngrouped, areTokensGrouped]);
+  const tokensList = areTokensGrouped ? tokensBySection : tokensUngrouped;
 
-  // <offset> - user defined offset e.g. page header height + space
-  // 152px - height of TokenModal elements like search and paddings
-  // 48px - minimal offset from the bottom screen edge
-  // Total: 152 + 48 = 200px
-  // const maxHeight = `calc(100vh - (${topScreenOffset ?? '0px'} + ${offset ?? '0px'} + 200px))`;
-  const maxHeight = '450px';
+  const listHeight = getListTotalHeight(tokensList);
+  const totalItems = getListItemsTotalCount(tokensList);
+  const headerIndexes = getGroupHeadersTotalIndexes(tokensList);
+
+  const handleBlur = useCallback(() => {
+    setFocusedIndex(-1);
+  }, []);
+
+  useFocusOnList({
+    listRef: ref.current,
+    initialFocusedIndex: areTokensGrouped ? 1 : 0,
+    onFocus: (index) => setFocusedIndex(index),
+    onBlur: handleBlur,
+  });
 
   switch (tokensListState) {
     case 'EMPTY_SEARCH':
@@ -121,26 +140,98 @@ export const TokensList = ({
       return (
         <div className={cn('gap-sw-lg flex flex-col', className)}>
           <VList
+            ref={ref}
+            tabIndex={0}
+            id={LIST_CONTAINER_ID}
+            itemSize={TOKEN_ITEM_HEIGHT}
             className="hide-scrollbar"
             style={{
-              maxHeight,
               minHeight: 200,
-              height: tokensCount
-                ? tokensCount * TOKEN_ITEM_HEIGHT +
-                  (areTokensGrouped ? tokensBySection.length * 62 : 0)
-                : TOKEN_ITEM_HEIGHT * 2,
+              height: listHeight,
+              maxHeight: MAX_LIST_VIEW_AREA_HEIGHT,
+              overflowAnchor: 'none',
+              outline: 'none',
+            }}
+            onKeyDown={(e) => {
+              if (!ref.current) {
+                return;
+              }
+
+              switch (e.code) {
+                case 'ArrowUp': {
+                  e.preventDefault();
+                  let prevIndex = Math.max(focusedIndex - 1, 0);
+
+                  if (areTokensGrouped && headerIndexes.includes(prevIndex)) {
+                    prevIndex = prevIndex === 0 ? 1 : prevIndex - 1;
+                  }
+
+                  setFocusedIndex(prevIndex);
+                  ref.current?.scrollToIndex(prevIndex, {
+                    align: 'center',
+                    smooth: true,
+                  });
+
+                  break;
+                }
+
+                case 'ArrowDown': {
+                  e.preventDefault();
+                  let nextIndex = Math.min(focusedIndex + 1, totalItems - 1);
+
+                  if (areTokensGrouped && headerIndexes.includes(nextIndex)) {
+                    nextIndex = nextIndex === 0 ? 1 : nextIndex + 1;
+                  }
+
+                  setFocusedIndex(nextIndex);
+                  ref.current?.scrollToIndex(nextIndex, {
+                    align: 'center',
+                    smooth: true,
+                  });
+
+                  break;
+                }
+
+                case 'Enter': {
+                  e.preventDefault();
+                  const token = getTokenByTotalIndex(tokensList, focusedIndex);
+
+                  if (token) {
+                    onMsg({ type: 'on_select_token', token });
+                  }
+
+                  break;
+                }
+
+                default:
+                  break;
+              }
             }}>
-            {(areTokensGrouped ? tokensBySection : tokensUngrouped).map(
-              ({ label, tokens: tokensToDisplay }) => (
-                <Fragment key={label ?? 'ungrouped-tokens'}>
-                  {tokensToDisplay.length && label ? (
-                    <header className="pb-sw-lg flex flex-col">
+            {tokensList.map(
+              ({ label, count, tokens: tokensToDisplay }, groupIndex) => {
+                const firstItemInGroupIndex = getFirstGroupItemTotalIndex(
+                  tokensList,
+                  groupIndex,
+                );
+
+                if (label !== undefined) {
+                  if (!label) {
+                    // must be rendered for calculations even if label is null
+                    return <header key={groupIndex} />;
+                  }
+
+                  return (
+                    <header
+                      key={label}
+                      className="pb-sw-lg pt-sw-sm flex flex-col">
                       <Hr />
-                      <span className="text-sw-label-sm pt-sw-xl text-sw-gray-100">{`${label} — ${tokensToDisplay.length}`}</span>
+                      <span className="text-sw-label-sm pt-sw-xl text-sw-gray-100">{`${label} — ${count}`}</span>
                     </header>
-                  ) : null}
+                  );
+                }
 
-                  {tokensToDisplay.map((token) => {
+                if (tokensToDisplay) {
+                  return tokensToDisplay.map((token, tokenIndex) => {
                     const tokenBalanceKey = getTokenBalanceKey(token);
 
                     return (
@@ -149,17 +240,20 @@ export const TokensList = ({
                         key={tokenBalanceKey}
                         showBalance={showBalances}
                         balance={mergedBalance[tokenBalanceKey]}
+                        isFocused={
+                          focusedIndex === firstItemInGroupIndex + tokenIndex
+                        }
                         isNotSelectable={
                           chainIsNotSupported && !!ctx.walletAddress
                         }
                         onMsg={onMsg}
                       />
                     );
-                  })}
+                  });
+                }
 
-                  {tokensToDisplay.length ? <div className="h-sw-2xl" /> : null}
-                </Fragment>
-              ),
+                return null;
+              },
             )}
           </VList>
         </div>

package/src/features/TokensList/constants.ts

@@ -0,0 +1,4 @@
+export const MAX_LIST_VIEW_AREA_HEIGHT = '450px';
+export const LIST_CONTAINER_ID = 'virtual-tokens-list';
+export const TOKEN_ITEM_HEIGHT = 58;
+export const LIST_SECTION_HEADER_HEIGHT = 62;

package/src/features/TokensList/hooks/index.ts

@@ -0,0 +1 @@
+export { useFocusOnList } from './useFocusOnList';

package/src/features/TokensList/hooks/useFocusOnList.ts

@@ -0,0 +1,56 @@
+import { useCallback, useEffect } from 'react';
+import type { VListHandle } from 'virtua';
+
+import { LIST_CONTAINER_ID } from '../constants';
+
+import { useHandleKeyDown } from '@/hooks/useHandleKeyDown';
+
+type Args = {
+  initialFocusedIndex: number;
+  listRef: VListHandle | null;
+  onFocus: (index: number) => void;
+  onBlur: () => void;
+};
+
+export const useFocusOnList = ({
+  initialFocusedIndex,
+  listRef,
+  onFocus,
+  onBlur,
+}: Args) => {
+  useHandleKeyDown('ArrowDown', () => {
+    const virtualListDiv = document.getElementById(LIST_CONTAINER_ID);
+
+    if (virtualListDiv && document.activeElement !== virtualListDiv) {
+      onFocus(initialFocusedIndex);
+      listRef?.scrollToIndex(initialFocusedIndex, { align: 'nearest' });
+
+      // required to prevent initial scroll on focus
+      // which causes list's jump
+      setTimeout(() => {
+        virtualListDiv.focus({ preventScroll: true });
+      }, 0);
+    }
+  });
+
+  const handleBlur = useCallback(
+    (event: FocusEvent) => {
+      const virtualListDiv = document.getElementById(LIST_CONTAINER_ID);
+
+      if (event.target === virtualListDiv) {
+        onBlur();
+      }
+    },
+    [onBlur],
+  );
+
+  useEffect(() => {
+    const virtualListDiv = document.getElementById(LIST_CONTAINER_ID);
+
+    virtualListDiv?.addEventListener('blur', handleBlur);
+
+    return () => {
+      virtualListDiv?.removeEventListener('blur', handleBlur);
+    };
+  }, [handleBlur]);
+};

package/src/features/TokensList/types.ts

@@ -0,0 +1,28 @@
+import type { Token } from '@/types/token';
+
+type OddGroup = {
+  label: string | null;
+  count: number;
+  tokens?: never;
+};
+
+type EvenGroup = {
+  label?: never;
+  count?: never;
+  tokens: Token[];
+};
+
+// covers 3 sections max (extend if needed)
+export type ListGroup<N extends number = 6> = N extends 0
+  ? []
+  : N extends 1
+    ? [EvenGroup]
+    : N extends 2
+      ? [OddGroup, EvenGroup]
+      : N extends 4
+        ? [OddGroup, EvenGroup, OddGroup, EvenGroup]
+        : N extends 6
+          ? [OddGroup, EvenGroup, OddGroup, EvenGroup, OddGroup, EvenGroup]
+          : never;
+
+export type AnyListGroup = ListGroup<0 | 1 | 2 | 4 | 6>;

package/src/features/TokensList/utils/getFirstGroupItemTotalIndex.ts

@@ -0,0 +1,28 @@
+import type { AnyListGroup } from '../types';
+
+/**
+ * Get index across all groups of the first item in a given group
+ *
+ * @param tokensList - The list of tokens (grouped or ungrouped)
+ * @param groupIndex - The index of the group
+ * @returns The total index of the first item in the group
+ */
+export const getFirstGroupItemTotalIndex = (
+  tokensList: AnyListGroup,
+  groupIndex: number,
+) => {
+  const tokensGroupIndex = groupIndex % 2 !== 0 ? groupIndex : 0;
+
+  if (tokensGroupIndex <= 1) {
+    return tokensGroupIndex;
+  }
+
+  return (
+    tokensList.reduce((acc, group, index) => {
+      return (
+        acc +
+        (group.tokens && index < tokensGroupIndex ? group.tokens.length + 1 : 0)
+      );
+    }, 0) + 1
+  ); // +1 for current group's header
+};

package/src/features/TokensList/utils/getGroupHeadersTotalIndexes.ts

@@ -0,0 +1,21 @@
+import type { AnyListGroup } from '../types';
+
+/**
+ * Get positions of all group headers in the combined list
+ *
+ * @param tokensList - The list of tokens (grouped or ungrouped)
+ * @returns List of positions of all group headers in the combined list
+ */
+export const getGroupHeadersTotalIndexes = (tokensList: AnyListGroup) => {
+  return tokensList.reduce<number[]>((acc, group, index) => {
+    if (index === 0 && group.label) {
+      return [0];
+    }
+
+    if (group.tokens && index < tokensList.length - 1) {
+      return [...acc, (acc[acc.length - 1] ?? 0) + group.tokens.length + 1];
+    }
+
+    return acc;
+  }, []);
+};

package/src/features/TokensList/utils/getListItemsTotalCount.ts

@@ -0,0 +1,14 @@
+import type { AnyListGroup } from '../types';
+
+/**
+ * Get the total number of RENDERED items in the list (including group headers)
+ *
+ * @param tokensList - The list of tokens (grouped or ungrouped)
+ * @returns The total number of items in the list
+ */
+export const getListItemsTotalCount = (tokensList: AnyListGroup) => {
+  return tokensList.reduce(
+    (acc, group) => acc + (group.tokens?.length ?? 0) + (group.label ? 1 : 0),
+    0,
+  );
+};

package/src/features/TokensList/utils/getListState.ts

@@ -0,0 +1,16 @@
+import type { Token } from '@/types/token';
+
+/**
+ * Get the state of the list
+ *
+ * @param tokens - The list of tokens (grouped or ungrouped)
+ * @param search - The search string
+ * @returns The state of the list: 'EMPTY_SEARCH', 'NO_TOKENS', 'HAS_TOKENS'
+ */
+export const getListState = (tokens: ReadonlyArray<Token>, search: string) => {
+  if (tokens.length) {
+    return 'HAS_TOKENS';
+  }
+
+  return !search ? 'NO_TOKENS' : 'EMPTY_SEARCH';
+};

package/src/features/TokensList/utils/getListTotalHeight.ts

@@ -0,0 +1,25 @@
+import { LIST_SECTION_HEADER_HEIGHT, TOKEN_ITEM_HEIGHT } from '../constants';
+import type { AnyListGroup } from '../types';
+
+const getTokensTotalCount = (tokensList: AnyListGroup) => {
+  return tokensList.reduce(
+    (acc, group) => acc + (group.tokens?.length ?? 0),
+    0,
+  );
+};
+
+/**
+ * Get the total height of the list
+ *
+ * @param tokensList - The list of tokens (grouped or ungrouped)
+ * @returns The total height of the list
+ */
+export const getListTotalHeight = (tokensList: AnyListGroup) => {
+  const tokensCount = getTokensTotalCount(tokensList);
+
+  return tokensCount
+    ? tokensCount * TOKEN_ITEM_HEIGHT +
+        tokensList.filter((group) => !!group.label).length *
+          LIST_SECTION_HEADER_HEIGHT
+    : TOKEN_ITEM_HEIGHT * 2;
+};

package/src/features/TokensList/utils/getTokenByTotalIndex.ts

@@ -0,0 +1,19 @@
+import type { AnyListGroup } from '../types';
+
+/**
+ * Get the token by total index across all groups and headers
+ *
+ * @param tokensList - The list of tokens (grouped or ungrouped)
+ * @param totalIndex - The total index of the token
+ * @returns The token
+ */
+export const getTokenByTotalIndex = (
+  tokensList: AnyListGroup,
+  totalIndex: number,
+) => {
+  const flatList = tokensList.flatMap((group) =>
+    'label' in group ? [null] : group.tokens,
+  );
+
+  return flatList[totalIndex];
+};

package/src/features/TokensList/utils/index.ts

@@ -0,0 +1,6 @@
+export { getGroupHeadersTotalIndexes } from './getGroupHeadersTotalIndexes';
+export { getFirstGroupItemTotalIndex } from './getFirstGroupItemTotalIndex';
+export { getListItemsTotalCount } from './getListItemsTotalCount';
+export { getTokenByTotalIndex } from './getTokenByTotalIndex';
+export { getListTotalHeight } from './getListTotalHeight';
+export { getListState } from './getListState';