assets: add button to nav to history

app/assets/page-client.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import React from "react"
+import React, { useRef } from "react"
 
 import { InfoCircledIcon } from "@radix-ui/react-icons"
 import {
@@ -10,13 +10,14 @@ import {
   useBackOfQueueWallet,
   useTaskHistory,
 } from "@renegade-fi/react"
-import { Info } from "lucide-react"
+import { ChevronDown, ChevronUp, Info } from "lucide-react"
 import { formatUnits } from "viem/utils"
 import { useAccount, useReadContracts } from "wagmi"
 
 import { DataTable as AssetTable } from "@/app/assets/assets-table/data-table"
 import { DataTable as TransferHistoryTable } from "@/app/assets/history-table/data-table"
 
+import { Button } from "@/components/ui/button"
 import {
   Tooltip,
   TooltipContent,
@@ -157,11 +158,38 @@ export function PageClient() {
     }, [])
   }, [transferHistory])
 
+  const assetsRef = useRef<HTMLDivElement>(null)
+  const transferHistoryRef = useRef<HTMLDivElement>(null)
+
+  const scrollToSection = (ref: React.RefObject<HTMLDivElement>) => {
+    if (ref.current) {
+      const yOffset = -100 // Adjust this value to set your desired offset
+      const y =
+        ref.current.getBoundingClientRect().top + window.scrollY + yOffset
+      window.scrollTo({ top: y, behavior: "smooth" })
+    }
+  }
+
   return (
     <main>
       <div className="container">
-        <div className="mt-12">
-          <h1 className="mt-6 font-serif text-3xl font-bold">Assets</h1>
+        <div
+          ref={assetsRef}
+          className="mt-12"
+        >
+          <div className="flex justify-between align-baseline">
+            <h1 className="font-serif text-3xl font-bold">Assets</h1>
+            <div>
+              <Button
+                size="sm"
+                variant="outline"
+                onClick={() => scrollToSection(transferHistoryRef)}
+              >
+                Transfer History
+                <ChevronDown className="ml-2 h-4 w-4" />
+              </Button>
+            </div>
+          </div>
           <AssetTable
             columns={assetColumns}
             data={balances}
@@ -182,10 +210,23 @@ export function PageClient() {
             </TooltipContent>
           </Tooltip>
         </div>
-        <div className="mt-20">
-          <h1 className="my-6 font-serif text-3xl font-bold">
-            Transfer History
-          </h1>
+        <div
+          ref={transferHistoryRef}
+          className="mt-20"
+        >
+          <div className="mb-4 flex justify-between align-baseline">
+            <h1 className="font-serif text-3xl font-bold">Transfer History</h1>
+            <div>
+              <Button
+                size="sm"
+                variant="outline"
+                onClick={() => scrollToSection(assetsRef)}
+              >
+                Assets
+                <ChevronUp className="ml-2 h-4 w-4" />
+              </Button>
+            </div>
+          </div>
           <TransferHistoryTable
             columns={historyColumns}
             data={historyData}