[WIP] [UI] Pools page and user liquidity

[cyphertrace]

Notion ticket: N/A

Checklist

• Github project and label have been assigned
• Tests have been added or are unnecessary
• Docs have been updated or are unnecessary
• Preview deployment works (visit the Cloudflare preview URL)
• Manual testing in #product-testing completed or unnecessary
• New i18n strings do not contain any security vulnerabilities (e.g. should not allow translator to update email/url)
• When fetching new translations from external sources, do a sanity check (e.g. get people who speak the language to check, shove all new translations into Google translate)

[github-actions]

✨ Deployment complete! Take a peek over at https://703687ce.ui-storybook.pages.dev

[cloudflare-workers-and-pages]

Deploying with    Cloudflare Pages

Latest commit:	af8784e
Status:	✅  Deploy successful!
Preview URL:	https://f2ce4fb5.swim-ui.pages.dev
Branch Preview URL:	https://ui-user-liquidity.swim-ui.pages.dev

View logs

[swimthor]

The root cause is we are using hook inside a callback

Warning: React has detected a change in the order of Hooks called by PoolsPage. This will lead to bugs and errors if not fixed. For more information, read the Rules of Hooks: https://reactjs.org/link/rules-of-hooks

[swimthor]

One solution for this is to create a custom react component and run this function as hook there, and use that component in columns.render

[cyphertrace]

@swimthor Thanks for taking the time to look! I will try with react component and see does it solve those issues. Thanks!

[swimthor]

I can make the sorting work on local, eui actually does not handle the sorting logic for us, so we have to save the sort direction and field manually and do the sorting ourselves.

  const [sortField, setSortField] = useState<keyof typeof tablePools[0]>('id');
  const [sortDirection, setSortDirection] = useState<Direction>('asc');
  const onTableChange = useCallback(({sort }: Criteria<typeof tablePools[0]>): void => {
    if (sort !== undefined) {
      setSortField(sort.field);
      setSortDirection(sort.direction);
    }
  });
    
    // somewhere we sort `tablePools` by sortField and sortDirection
    
    <EuiBasicTable
      ......
      sorting={{
        sort: {
          field: sortField,
          direction: sortDirection,
        },
        enableAllColumns: true,
      }}
      onChange={onTableChange}
    />