feat: pin / unpin tokens

src/core/state/pinnedAssets/index.ts

@@ -0,0 +1,39 @@
+import create from 'zustand';
+
+import { createStore } from '../internal/createStore';
+
+type UpdatePinnedAssetArgs = {
+  uniqueId: string;
+};
+
+type UpdatePinnedAssetFn = ({ uniqueId }: UpdatePinnedAssetArgs) => void;
+
+export interface PinnedAssetState {
+  uniqueIds: string[];
+  addPinnedAsset: UpdatePinnedAssetFn;
+  removedPinnedAsset: UpdatePinnedAssetFn;
+}
+
+export const pinnedAssets = createStore<PinnedAssetState>(
+  (set, get) => ({
+    uniqueIds: [],
+    addPinnedAsset: ({ uniqueId }: UpdatePinnedAssetArgs) => {
+      const { uniqueIds } = get();
+      set({ uniqueIds: [...uniqueIds, uniqueId] });
+    },
+    removedPinnedAsset: ({ uniqueId }: UpdatePinnedAssetArgs) => {
+      const { uniqueIds } = get();
+      set({
+        uniqueIds: uniqueIds.filter((id) => id !== uniqueId),
+      });
+    },
+  }),
+  {
+    persist: {
+      name: 'pinned_assets',
+      version: 1,
+    },
+  },
+);
+
+export const usePinnedAssetStore = create(pinnedAssets);

src/design-system/symbols/generated/index.ts

@@ -1538,6 +1538,13 @@ export default {
       viewBox: { width: 24.896484375, height: 30.48828125 },
     },
   },
+  'pin.fill': {
+    semibold: {
+      name: 'doc.on.doc',
+      path: 'M0.53125 10.1631C0.53125 8.67285 1.71387 7.16895 3.64844 6.44434L3.87402 3.23828C2.83496 2.65723 2.03516 2.02148 1.68652 1.57031C1.49512 1.32422 1.39941 1.06445 1.39941 0.832031C1.39941 0.353516 1.76172 0.00488281 2.30176 0.00488281H9.69824C10.2383 0.00488281 10.6006 0.353516 10.6006 0.832031C10.6006 1.06445 10.5049 1.32422 10.3135 1.57031C9.96484 2.02148 9.16504 2.65039 8.12598 3.23828L8.35156 6.44434C10.2861 7.16895 11.4688 8.67285 11.4688 10.1631C11.4688 10.8125 11.0244 11.2432 10.3545 11.2432H6.72461V14.4971C6.72461 15.3994 6.20508 16.4453 6 16.4453C5.79492 16.4453 5.27539 15.3994 5.27539 14.4971V11.2432H1.64551C0.975586 11.2432 0.53125 10.8125 0.53125 10.1631Z',
+      viewBox: { width: 28.806640625, height: 35.068359375 },
+    },
+  },
   'doc.on.doc': {
     regular: {
       name: 'doc.on.doc',

src/entries/popup/components/CoinRow/CoinRow.tsx

@@ -7,6 +7,8 @@ import { rowTransparentAccentHighlight } from '~/design-system/styles/rowTranspa
 
 import { CoinIcon } from '../CoinIcon/CoinIcon';
 
+import { TokenMarkedHighlighter } from './TokenMarkedHighlighter';
+
 function RowHighlightWrapper({ children }: { children: ReactNode }) {
   return (
     <Inset horizontal="8px">
@@ -25,15 +27,18 @@ export function CoinRow({
   topRow,
   bottomRow,
   testId,
+  showPinStatus,
 }: {
   asset?: ParsedAsset | ParsedUserAsset;
   fallbackText?: string;
   topRow: ReactNode;
   bottomRow: ReactNode;
   testId?: string;
+  showPinStatus?: boolean;
 }) {
   return (
-    <Box style={{ height: '52px' }} testId={testId}>
+    <Box style={{ height: '52px', position: 'relative' }} testId={testId}>
+      {showPinStatus && <TokenMarkedHighlighter />}
       <RowHighlightWrapper>
         <Inset horizontal="12px" vertical="8px">
           <Rows>

src/entries/popup/components/CoinRow/TokenMarkedHighlighter.css.ts

@@ -0,0 +1,23 @@
+import { CSSProperties, style } from '@vanilla-extract/css';
+
+const elementStyle: CSSProperties = {
+  position: 'absolute',
+  height: '60%',
+  top: '50%',
+  left: '8.3px',
+  transform: 'translateY(-50%)',
+  borderTopRightRadius: '3px',
+  borderBottomRightRadius: '3px',
+  width: '2px',
+};
+
+export const higlighterBgDark = style([
+  {
+    ...elementStyle,
+    background: '#CE2233',
+  },
+]);
+
+export const higlighterBgLight = style([
+  { ...elementStyle, background: 'black' },
+]);

src/entries/popup/components/CoinRow/TokenMarkedHighlighter.tsx

@@ -0,0 +1,17 @@
+import { useCurrentThemeStore } from '~/core/state/currentSettings/currentTheme';
+import { Box } from '~/design-system';
+
+import {
+  higlighterBgDark,
+  higlighterBgLight,
+} from './TokenMarkedHighlighter.css';
+
+export function TokenMarkedHighlighter() {
+  const { currentTheme } = useCurrentThemeStore();
+
+  return (
+    <Box
+      className={currentTheme === 'dark' ? higlighterBgDark : higlighterBgLight}
+    />
+  );
+}

src/entries/popup/hooks/useFilteredPinnedAssets.ts

@@ -0,0 +1,34 @@
+import uniqBy from 'lodash/uniqBy';
+import { useMemo } from 'react';
+
+import { usePinnedAssetStore } from '~/core/state/pinnedAssets';
+import { ParsedUserAsset } from '~/core/types/assets';
+
+export const useFilteredPinnedAssets = (assets: ParsedUserAsset[]) => {
+  const { uniqueIds } = usePinnedAssetStore();
+
+  const computeUniqueAssets = (assets: ParsedUserAsset[]) => {
+    return uniqBy(
+      assets.sort(
+        (a: ParsedUserAsset, b: ParsedUserAsset) =>
+          parseFloat(b?.native?.balance?.amount) -
+          parseFloat(a?.native?.balance?.amount),
+      ),
+      'uniqueId',
+    );
+  };
+
+  const filteredAssets = useMemo(
+    () => [
+      ...computeUniqueAssets(
+        assets.filter((asset) => uniqueIds.includes(asset.uniqueId)),
+      ),
+      ...computeUniqueAssets(
+        assets.filter((asset) => !uniqueIds.includes(asset.uniqueId)),
+      ),
+    ],
+    [assets, uniqueIds],
+  );
+
+  return filteredAssets;
+};

src/entries/popup/hooks/usePress.ts

@@ -0,0 +1,22 @@
+import { useCallback, useRef, useState } from 'react';
+
+export const usePress = (onPressed: () => void) => {
+  const pressTimerRef = useRef<NodeJS.Timeout>();
+  const [pressed, setPressed] = useState(false);
+
+  const startPress = useCallback(() => {
+    setPressed(false);
+    if (pressTimerRef.current) clearTimeout(pressTimerRef.current);
+    pressTimerRef.current = setTimeout(() => {
+      onPressed();
+      setPressed(true);
+    }, 500);
+  }, [onPressed]);
+
+  const endPress = useCallback(() => {
+    if (pressed) setPressed(false);
+    if (pressTimerRef.current) clearTimeout(pressTimerRef.current);
+  }, [pressed]);
+
+  return { pressed, startPress, endPress };
+};

src/entries/popup/hooks/useTokenPressMouseEvents.ts

@@ -0,0 +1,52 @@
+import { MouseEvent, useCallback, useState } from 'react';
+
+import { usePinnedAssetStore } from '~/core/state/pinnedAssets';
+import { ParsedUserAsset } from '~/core/types/assets';
+
+import { usePress } from './usePress';
+
+interface TokenPressMouseEventHookArgs {
+  token: ParsedUserAsset;
+  onClick: () => void;
+}
+
+export const useTokenPressMouseEvents = ({
+  token,
+  onClick,
+}: TokenPressMouseEventHookArgs) => {
+  const [ready, setReady] = useState(false);
+  const { uniqueIds, addPinnedAsset, removedPinnedAsset } =
+    usePinnedAssetStore();
+
+  const onPressed = useCallback(() => {
+    const pinned = uniqueIds.some((id) => id === token.uniqueId);
+
+    if (pinned) {
+      removedPinnedAsset({ uniqueId: token.uniqueId });
+      return;
+    }
+
+    addPinnedAsset({ uniqueId: token.uniqueId });
+  }, [addPinnedAsset, removedPinnedAsset, token.uniqueId, uniqueIds]);
+
+  const { pressed, startPress, endPress } = usePress(onPressed);
+
+  const onMouseDown = (e: MouseEvent<HTMLDivElement>) => {
+    if (e.button === 0) {
+      if (!ready) setReady(true);
+      startPress();
+    }
+  };
+
+  const onMouseUp = () => {
+    if (ready) {
+      setReady(false);
+      if (!pressed) {
+        endPress();
+        onClick();
+      }
+    }
+  };
+
+  return { onMouseDown, onMouseUp };
+};

src/entries/popup/pages/home/TokenDetails/TokenContextMenu.tsx

@@ -4,14 +4,15 @@ import config from '~/core/firebase/remoteConfig';
 import { i18n } from '~/core/languages';
 import { shortcuts } from '~/core/references/shortcuts';
 import { useFeatureFlagsStore } from '~/core/state/currentSettings/featureFlags';
+import { usePinnedAssetStore } from '~/core/state/pinnedAssets';
 import { useSelectedTokenStore } from '~/core/state/selectedToken';
 import { ParsedUserAsset } from '~/core/types/assets';
 import { truncateAddress } from '~/core/utils/address';
 import { isNativeAsset } from '~/core/utils/chains';
 import { copyAddress } from '~/core/utils/copy';
 import { goToNewTab } from '~/core/utils/tabs';
 import { getTokenBlockExplorer } from '~/core/utils/transactions';
-import { Text } from '~/design-system';
+import { Box, Text } from '~/design-system';
 import { triggerAlert } from '~/design-system/components/Alert/Alert';
 
 import {
@@ -34,6 +35,8 @@ export function TokenContextMenu({ children, token }: TokenContextMenuProps) {
   const { isWatchingWallet } = useWallets();
   const { featureFlags } = useFeatureFlagsStore();
   const setSelectedToken = useSelectedTokenStore((s) => s.setSelectedToken);
+  const { uniqueIds } = usePinnedAssetStore();
+  const pinned = uniqueIds.some((id) => id === token.uniqueId);
 
   // if we are navigating to new page (swap/send) the menu closes automatically,
   // we don't want deselect the token in that case
@@ -130,6 +133,22 @@ export function TokenContextMenu({ children, token }: TokenContextMenuProps) {
             </Text>
           </ContextMenuItem>
         )}
+        <ContextMenuItem
+          symbolLeft="pin.fill"
+          onSelect={() => copyAddress(token.address)}
+        >
+          <Box style={{ wordBreak: 'break-all' }}>
+            <Text size="14pt" weight="semibold">
+              {pinned
+                ? i18n.t('token_details.more_options.unpin_token', {
+                    name: token.name,
+                  })
+                : i18n.t('token_details.more_options.pin_token', {
+                    name: token.name,
+                  })}
+            </Text>
+          </Box>
+        </ContextMenuItem>
       </ContextMenuContent>
     </DetailsMenuWrapper>
   );