OriginProtocol · smitch88 · Aug 28, 2023 · Aug 24, 2023 · Aug 24, 2023 · Aug 24, 2023
diff --git a/apps/oeth/index.html b/apps/oeth/index.html
@@ -3,18 +3,51 @@
   <head>
     <meta charset="utf-8" />
     <title>Oeth</title>
+    <meta
+      name="description"
+      content="An ETH-pegged token that earns yield from all forms of staking"
+    />
     <base href="/" />
 
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <link rel="icon" type="image/x-icon" href="/favicon.ico" />
+
+    <!-- favicon -->
+    <link rel="shortcut icon" href="/images/favicon.svg" type="image/x-icon" />
+    <link rel="icon" href="/images/favicon.svg" type="image/x-icon" />
+
     <!-- Inter font -->
     <link rel="preconnect" href="https://rsms.me/" />
     <link rel="stylesheet" href="https://rsms.me/inter/inter.css" />
-    <!--  -->
+
+    <!--  Sailec font -->
     <link
       rel="stylesheet"
       href="https://cdn.jsdelivr.net/npm/typeface-sailec@1.0.0/index.min.css"
     />
+
+    <!-- meta tags for social -->
+
+    <meta property="og:url" content="https://oeth.com" />
+    <meta property="og:type" content="website" />
+    <meta property="og:title" content="Origin Ether (OETH)" />
+    <meta
+      property="og:description"
+      content="An ETH-pegged token that earns yield from all forms of staking"
+    />
+    <meta name="og:image" content="/images/meta.png" />
+
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:site" content="@originprotocol" />
+    <meta name="twitter:title" content="Origin Ether (OETH)" />
+    <meta
+      name="twitter:description"
+      content="An ETH-pegged token that earns yield from all forms of staking"
+    />
+    <meta
+      name="twitter:image"
+      content="https://cmsmediaproduction.s3.amazonaws.com/thumbnail_oeth_meta_ed53499f08.png"
+    />
+    <!-- end meta tags -->
   </head>
   <body>
     <div id="root"></div>

diff --git a/apps/oeth/src/components/Layout.tsx b/apps/oeth/src/components/Layout.tsx
@@ -9,7 +9,7 @@ export function Layout() {
   return (
     <>
       <TopNav
-        logo="https://app.oeth.com/images/origin-ether-logo.svg"
+        logo="/images/origin-ether-logo.svg"
         tabs={[
           intl.formatMessage({ defaultMessage: 'Swap' }),
           intl.formatMessage({ defaultMessage: 'Wrap' }),

diff --git a/apps/oeth/tsconfig.app.json b/apps/oeth/tsconfig.app.json
@@ -18,5 +18,5 @@
     "src/**/*.spec.jsx",
     "src/**/*.test.jsx"
   ],
-  "include": ["src/**/*.js", "src/**/*.jsx", "src/**/*.ts", "src/**/*.tsx", "../../libs/defi/oeth/src/components/TopNav.tsx"]
+  "include": ["src/**/*.js", "src/**/*.jsx", "src/**/*.ts", "src/**/*.tsx"]
 }
diff --git a/libs/defi/oeth/src/components/History/HistoryTable.stories.tsx b/libs/defi/oeth/src/components/History/HistoryTable.stories.tsx
@@ -1,32 +1,15 @@
 import { useState } from 'react';
 
-import { faker } from '@faker-js/faker';
 import { Container, Stack, Typography } from '@mui/material';
 import { within } from '@storybook/testing-library';
 
+import { rows } from './fixtures';
 import { HistoryFilterButton } from './HistoryButton';
 import { HistoryTable } from './HistoryTable';
 
 import type { Meta, StoryObj } from '@storybook/react';
 import type { ColumnFilter } from '@tanstack/react-table';
 
-import type { HistoryRow } from './HistoryTable';
-
-const rows = faker.helpers.multiple<HistoryRow>(
-  () => ({
-    date: faker.date.recent({ days: 35 }),
-    balance: faker.number.float({
-      min: 10000,
-      max: 10000000000,
-      precision: 10,
-    }),
-    change: faker.number.float({ min: -10, max: 25 }),
-    type: faker.helpers.arrayElement(['swap', 'received', 'sent', 'yield']),
-    link: faker.internet.url(),
-  }),
-  { count: 150 },
-);
-
 const WithFilters = () => {
   const [filter, setFilter] = useState<ColumnFilter>({ id: 'type', value: [] });
   return (
@@ -70,6 +53,7 @@ const WithFilters = () => {
           ))}
         </Stack>
       </Stack>
+      {/* @ts-expect-error type mismatch with fixtures */}
       <HistoryTable rows={rows} isLoading={false} filter={filter} />
     </Stack>
   );
@@ -80,6 +64,7 @@ const meta: Meta<typeof HistoryTable> = {
   title: 'History/History table',
   args: {
     isLoading: false,
+    // @ts-expect-error type mismatch
     rows,
   },
   render: (args) => (

diff --git a/libs/defi/oeth/src/components/History/HistoryTable.tsx b/libs/defi/oeth/src/components/History/HistoryTable.tsx
@@ -1,27 +1,12 @@
-import { useEffect, useMemo, useState } from 'react';
+import { useEffect, useMemo, useRef } from 'react';
 
-import {
-  Box,
-  Pagination,
-  Stack,
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableRow,
-} from '@mui/material';
-import { LinkIcon, quantityFormat } from '@origin/shared/components';
-import {
-  createColumnHelper,
-  flexRender,
-  getCoreRowModel,
-  getFilteredRowModel,
-  getPaginationRowModel,
-  useReactTable,
-} from '@tanstack/react-table';
+import { Box, Stack } from '@mui/material';
+import { DataTable, LinkIcon, quantityFormat } from '@origin/shared/components';
+import { createColumnHelper } from '@tanstack/react-table';
 import { useIntl } from 'react-intl';
 
-import type { ColumnFilter, ColumnFiltersState } from '@tanstack/react-table';
+import type { DataTableRef } from '@origin/shared/components';
+import type { ColumnFilter } from '@tanstack/react-table';
 
 type Filter = 'swap' | 'yield' | 'received' | 'sent';
 
@@ -31,6 +16,7 @@ export interface HistoryRow {
   change: number;
   balance: number;
   link: string;
+  [key: string]: unknown;
 }
 
 interface Props {
@@ -41,9 +27,10 @@ interface Props {
 
 const columnHelper = createColumnHelper<HistoryRow>();
 
-export function HistoryTable({ rows, filter }: Props) {
+export function HistoryTable({ rows, filter, isLoading }: Props) {
   const intl = useIntl();
-  const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
+  const ref = useRef<DataTableRef>(null);
+
   const columns = useMemo(
     () => [
       columnHelper.accessor('date', {
@@ -93,74 +80,18 @@ export function HistoryTable({ rows, filter }: Props) {
     [intl],
   );
 
-  const table = useReactTable({
-    data: rows,
-    columns,
-    state: {
-      pagination: {
-        pageSize: 20,
-        pageIndex: 0,
-      },
-      columnFilters,
-    },
-    getCoreRowModel: getCoreRowModel(),
-    getPaginationRowModel: getPaginationRowModel(),
-    getFilteredRowModel: getFilteredRowModel(),
-    onColumnFiltersChange: setColumnFilters,
-    // add when we do server side pagination
-    // manualPagination: true,
-    pageCount: rows.length / 3,
-    // add when we do server side pagination
-    // onPaginationChange: setPagination
-  });
-
   useEffect(() => {
-    table.getColumn('type')?.setFilterValue(filter);
-  }, [filter, table]);
+    ref?.current?.setFilter(filter, 'type');
+  }, [filter]);
+
   return (
-    <Stack gap={2}>
-      <Table>
-        <TableHead>
-          {table.getHeaderGroups().map((headerGroup) => (
-            <TableRow key={headerGroup.id}>
-              {headerGroup.headers.map((header) => (
-                <TableCell key={header.id}>
-                  {flexRender(
-                    header.column.columnDef.header,
-                    header.getContext(),
-                  )}
-                </TableCell>
-              ))}
-            </TableRow>
-          ))}
-        </TableHead>
-        <TableBody>
-          {table.getRowModel().rows.map((row) => (
-            <TableRow key={row.id}>
-              {row.getVisibleCells().map((cell) => (
-                <TableCell
-                  key={cell.id}
-                  sx={{
-                    ...(cell.column.columnDef.id === 'type'
-                      ? { '&:first-letter': { textTransform: 'uppercase' } }
-                      : {}),
-                  }}
-                >
-                  {flexRender(cell.column.columnDef.cell, cell.getContext())}
-                </TableCell>
-              ))}
-            </TableRow>
-          ))}
-        </TableBody>
-      </Table>
-      <Pagination
-        count={table.getPageCount()}
-        shape="rounded"
-        variant="outlined"
-        hidePrevButton
-        hideNextButton
-        onChange={(_, page) => table.setPageIndex(page)}
-      />
-    </Stack>
+    <DataTable
+      ref={ref}
+      rows={rows}
+      // @ts-expect-error typescript doesn't like my generic prop for whatever reason
+      columns={columns}
+      pageCount={rows.length / 3}
+      isLoading={isLoading}
+    />
   );
 }