feat: #163: pair selector (#204)

* fix: apply new UI changes of density

* feat: set up new PairSelector

* feat: add star-pair feature

* feat: implement basic pair selection

* refactor: create more components related to pair selector

* feat: implement filtering input

* feat: implement `/api/pairs` endpoint to fetch the most popular pairs

* feat: implement recent assets in search results

* feat: use balances in the search results

* fix: small bugs

* fix: merge

* fix: ts

* fix: handle the pr feedback

app/api/pairs/route.ts

@@ -0,0 +1 @@
+export { GET } from '@/shared/api/server/summary/pairs';

app/app.tsx

@@ -8,6 +8,8 @@ import { TooltipProvider } from '@penumbra-zone/ui/Tooltip';
 import { Header, SyncBar } from '@/widgets/header';
 import { queryClient } from '@/shared/const/queryClient';
 import { connectionStore } from '@/shared/model/connection';
+import { recentPairsStore } from '@/pages/trade/ui/pair-selector/store';
+import { starStore } from '@/features/star-pair';
 
 // Used so that observer() won't subscribe to any observables used in an SSR environment
 // and no garbage collection problems are introduced.
@@ -16,6 +18,8 @@ enableStaticRendering(typeof window === 'undefined');
 export const App = observer(({ children }: { children: ReactNode }) => {
   useEffect(() => {
     connectionStore.setup();
+    recentPairsStore.setup();
+    starStore.setup();
   }, []);
 
   return (

global.d.ts

@@ -2,3 +2,9 @@ declare module '*.css' {
   const content: Record<string, string>;
   export default content;
 }
+
+declare module '*.svg' {
+  import { FC, SVGAttributes } from 'react';
+  const value: FC<SVGAttributes<SVGElement>>;
+  export default value;
+}

package.json

@@ -43,7 +43,7 @@
     "@penumbra-zone/protobuf": "^6.3.0",
     "@penumbra-zone/transport-dom": "^7.5.0",
     "@penumbra-zone/types": "^26.3.0",
-    "@penumbra-zone/ui": "^13.5.0",
+    "@penumbra-zone/ui": "^13.6.0",
     "@penumbra-zone/wasm": "^34.0.0",
     "@radix-ui/react-icons": "^1.3.2",
     "@rehooks/component-size": "^1.0.3",

src/features/star-pair/index.ts

@@ -0,0 +1,3 @@
+export { StarButton } from './star-button';
+export { starStore } from './store';
+export type { Pair } from './storage';

src/features/star-pair/star-button.tsx

@@ -0,0 +1,40 @@
+import { FC, MouseEventHandler } from 'react';
+import { observer } from 'mobx-react-lite';
+import { Star } from 'lucide-react';
+import { Button } from '@penumbra-zone/ui/Button';
+import { Density } from '@penumbra-zone/ui/Density';
+import StarFilled from './star-filled.svg';
+import type { Pair } from './storage';
+import { starStore } from './store';
+
+export interface StarButtonProps {
+  pair: Pair;
+  adornment?: boolean;
+}
+
+export const StarButton = observer(({ pair, adornment }: StarButtonProps) => {
+  const { star, unstar, isStarred } = starStore;
+  const starred = isStarred(pair);
+
+  const onClick: MouseEventHandler<HTMLButtonElement> = event => {
+    event.stopPropagation();
+    if (starred) {
+      unstar(pair);
+    } else {
+      star(pair);
+    }
+  };
+
+  return (
+    <Density compact>
+      <Button
+        icon={starred ? (StarFilled as FC) : Star}
+        priority={adornment ? 'primary' : 'secondary'}
+        iconOnly={adornment ? 'adornment' : true}
+        onClick={onClick}
+      >
+        Favorite
+      </Button>
+    </Density>
+  );
+});

src/features/star-pair/storage.ts

@@ -0,0 +1,35 @@
+import { Metadata } from '@penumbra-zone/protobuf/penumbra/core/asset/v1/asset_pb';
+
+export interface Pair {
+  base: Metadata;
+  quote: Metadata;
+}
+
+const STAR_STORE_LS_KEY = 'star-pairs-store';
+
+export const getStarredPairs = (): Pair[] => {
+  try {
+    const data = JSON.parse(localStorage.getItem(STAR_STORE_LS_KEY) ?? '[]') as {
+      base: string;
+      quote: string;
+    }[];
+    return data.map(pair => ({
+      base: Metadata.fromJson(pair.base),
+      quote: Metadata.fromJson(pair.quote),
+    }));
+  } catch (_) {
+    return [];
+  }
+};
+
+export const setStarredPairs = (pairs: Pair[]): void => {
+  localStorage.setItem(
+    STAR_STORE_LS_KEY,
+    JSON.stringify(
+      pairs.map(pair => ({
+        base: pair.base.toJson(),
+        quote: pair.quote.toJson(),
+      })),
+    ),
+  );
+};

src/features/star-pair/store.ts

@@ -0,0 +1,34 @@
+import { makeAutoObservable } from 'mobx';
+import { Pair, getStarredPairs, setStarredPairs } from './storage';
+
+class StarStateStore {
+  pairs: Pair[] = [];
+
+  constructor() {
+    makeAutoObservable(this);
+  }
+
+  star = (pair: Pair) => {
+    this.pairs = [...this.pairs, pair];
+    setStarredPairs(this.pairs);
+  };
+
+  unstar = (pair: Pair) => {
+    this.pairs = this.pairs.filter(
+      value => !value.base.equals(pair.base) || !value.quote.equals(pair.quote),
+    );
+    setStarredPairs(this.pairs);
+  };
+
+  setup() {
+    this.pairs = getStarredPairs();
+  }
+
+  isStarred = (pair: Pair): boolean => {
+    return this.pairs.some(
+      value => value.base.symbol === pair.base.symbol && value.quote.symbol === pair.quote.symbol,
+    );
+  };
+}
+
+export const starStore = new StarStateStore();

src/pages/trade/api/use-pairs.ts

@@ -0,0 +1,13 @@
+import { useQuery } from '@tanstack/react-query';
+import type { PairData } from '@/shared/api/server/summary/pairs';
+import { apiFetch } from '@/shared/utils/api-fetch';
+
+// Fetches the array of popular (sorted by liquidity) pairs
+export const usePairs = () => {
+  return useQuery({
+    queryKey: ['pairs'],
+    queryFn: async () => {
+      return apiFetch<PairData[]>('/api/pairs');
+    },
+  });
+};