Feat(pricefeed/price feed id) add data

[aditya520]

No description provided.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
docs	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Oct 21, 2024 4:02pm
documentation	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Oct 21, 2024 4:02pm

[cprussin]

Main suggestions are to see if you can use the built-in nextra components for some of this stuff and to improve the state management in the price-feed-ids network data loading block

[cprussin]

I don't think there's any reason to extract all this out, just put the tailwind classes in at the call sites where they're being consumed (i.e. lines 70 - 72)

[cprussin]

I generally recommend using undefined instead of null, see sindresorhus/meta#7 for a good discussion on why

[cprussin]

I'm assuming that this is a copy icon right? Why not use the CopyIcon.tsx that's already in the codebase?

[cprussin]

A lot of this component is doing the same stuff that's already in Nextra in copy-to-clipboard.tsx, code.tsx, and pre.tsx. There's also built-in table components too. I'd advise trying to find a way to leverage the nextra built in components for this stuff -- e.g. I'm guessing you can replace this entire component with something very similar to this:

import { Code, Pre, Table, Td, Th, Tr } from 'nextra/components';

const PriceFeedTable = ({ priceFeeds }: { priceFeeds: PriceFeed[] }) => {
  // .... filtering stuff

  return (
    <Table>
      <thead>
        <Tr>
          <Th className="w-3/10">Asset Type</Th>
          <Th className="w-1/5">Name</Th>
          <Th className="w-1/2">Feed ID</Th>
        </Tr>
      </thead>
      <tbody>
        {filteredFeeds.map(({ assetType, name, ids }) => (
          <Tr key={name}>
            <Td>{assetType}</Td>
            <Td>{name}</Td>
            <Td>
              <Pre data-copy="">
                <Code>
                  {ids}
                </Code>
              </Pre>
            </Td>
          </Tr>
        ))}
      </thead>
    </Table>
  );
};

Note pre is short for Preformatted and is nearly always the right html tag to wrap a code block, see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/pre.

Not only will this drastically reduce the amount of custom code here, but you'll also make things much more consistent with the rest of the site.

[cprussin]

You should use something that's unique and not index based here, e.g. feed.name, as the key. Using the index will cause issues when you change the filter because React will try to recycle HTML elements that were used for other feeds when indices change and you'll get hard to debug issues where you'll see stale data in the UI.

[cprussin]

Ideally, you should validate the response type here. This is where zod can be helpful.

Alternatively if you use the Hermes js client, it already has validation and everything built in

[cprussin]

You should ideally pass a canceler here using AbortController. You should also attach a catch handler to the promise, all promises should be caught explicitly to avoid uncaught exceptions in the boundary between promise and async code (even though you have a catch in the async code there, the code could easily be refactored such that uncaught exceptions make their way through, and without having a catch handler on the promise the code is unsafe).

You can also extract out the fetchPriceFeeds function to clean things up a bit.

You should also add loading and error states.

Finally I'd suggest putting all the component code in an actual .tsx file and just importing it here, rather than keeping it inline. Your formatting isn't handled by prettier, you don't get linting, etc, when you have the code inline.

Putting this all together would look something like this:

import { useState, useEffect } from 'react';
import { z } from "zod";

import PriceFeedTable from "../../../components/PriceFeedTable";

export const PriceFeedData = () => {
  const priceFeedData = usePriceFeedData();

  switch (state.type) {
    case StateType.NotLoaded:
    case StateType.Loading: {
      return <Spinner /> // TODO implement a spinner / loader...
    }

    case StateType.Error: {
      return <p>Oh no!  An error occurred: {state.error}</p>
    }

    case StateType.Loaded: {
      return <PriceFeedTable priceFeeds={state.data} />;
    }
  }
};

const usePriceFeedData = (): State => {
  const [state, setState] = useState<State>(State.NotLoaded());

  useEffect(() => {
    setState(State.Loading());
    const controller = new AbortController();
    fetchPriceFeeds(controller)
      .then(data => setState(State.Loaded(data)))
      .catch((error: unknown) => {
        console.error('Error fetching price feeds:', error);
        setState(State.Error(error));
      });
    return () => controller.abort();
  }, []);

  return state;
}

const dataSchema = z.array(z.object({
  asset_type: z.string(),
  display_symbol: z.string(),
  ids: z.array() // TODO: I don't know what this shape should be but you should type this correctly!
}).transform(({ asset_type, display_symbol, id }) => ({
  assetType: asset_type,
  name: display_symbol,
  ids: id
})));

type Data = z.infer<typeof dataSchema>;

enum StateType = {
  NotLoaded,
  Loading,
  Error,
  Loaded
}

const State = {
  NotLoaded: () => ({ type: StateType.NotLoaded as const }),
  Loading: () => ({ type: StateType.Loading as const }),
  Error: (error: unknown) => ({ type: StateType.Error as const, error }),
  Loaded: (data: Data) => ({ type: StateType.Loaded as const, data }),
}
type State = ReturnType<typeof State[keyof typeof State]>;

const fetchPriceFeeds = async (signal: AbortSignal): Promise<Data> => {
  const response = await fetch('https://hermes.pyth.network/v2/price_feeds', { signal });
  return dataSchema.parse(await response.json());
};

Note this is untested and still needs a few TODO items filled in so don't copy-paste blindly!