tables: swap switch for toggle

renegade-fi · Sep 7, 2024 · eda43f2 · eda43f2
1 parent cc804fc
commit eda43f2
Show file tree

Hide file tree

Showing 6 changed files with 138 additions and 135 deletions.
diff --git a/app/assets/assets-table/data-table.tsx b/app/assets/assets-table/data-table.tsx
@@ -12,12 +12,10 @@ import {
   getSortedRowModel,
   useReactTable,
 } from "@tanstack/react-table"
-import { DollarSign } from "lucide-react"
+import { DollarSign, EyeOff } from "lucide-react"
 
 import { TransferDialog } from "@/components/dialogs/transfer/transfer-dialog"
 import { TableEmptyState } from "@/components/table-empty-state"
-import { Label } from "@/components/ui/label"
-import { Switch } from "@/components/ui/switch"
 import {
   Table,
   TableBody,
@@ -27,8 +25,11 @@ import {
   TableRow,
 } from "@/components/ui/table"
 import { Toggle } from "@/components/ui/toggle"
-
-import { cn } from "@/lib/utils"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip"
 
 interface DataTableProps<TData, TValue> {
   columns: ColumnDef<TData, TValue>[]
@@ -95,58 +96,76 @@ export function DataTable<TData, TValue>({
           Your deposits inside of Renegade. Only you and your connected relayer
           can see your balances.
         </div>
-        <div className="ml-auto flex items-center space-x-2">
-          <Toggle
-            aria-label="Toggle USD"
-            pressed={
-              columnVisibility.renegadeUsdValue && columnVisibility.l2UsdValue
-            }
-            size="sm"
-            onPressedChange={(value) => {
-              value
-                ? setColumnVisibility({
-                    renegadeUsdValue: true,
-                    l2UsdValue: true,
-                    renegadeBalance: false,
-                    l2Balance: false,
-                  })
-                : setColumnVisibility({
-                    renegadeUsdValue: false,
-                    l2UsdValue: false,
-                    renegadeBalance: true,
-                    l2Balance: true,
-                  })
-            }}
-          >
-            <DollarSign className={cn("h-4 w-4 text-muted-foreground")} />
-          </Toggle>
-        </div>
-        <div className="ml-4 flex items-center space-x-2">
-          <Switch
-            checked={showZeroL2Balance && showZeroRenegadeBalance}
-            onCheckedChange={(value) => {
-              setShowZeroL2Balance(!!value)
-              setShowZeroRenegadeBalance(!!value)
-            }}
-          />
-          <Label
-            className="text-muted-foreground"
-            htmlFor="long-format"
-          >
-            Show zeroes
-          </Label>
-        </div>
-        <div className="ml-4 flex items-center space-x-2">
-          <Switch
-            checked={isLongFormat}
-            onCheckedChange={(value) => setIsLongFormat(!!value)}
-          />
-          <Label
-            className="text-muted-foreground"
-            htmlFor="long-format"
-          >
-            Show decimals
-          </Label>
+        <div className="ml-auto flex items-center gap-2">
+          <Tooltip>
+            <TooltipTrigger>
+              <Toggle
+                aria-label="Toggle USD"
+                pressed={
+                  columnVisibility.renegadeUsdValue &&
+                  columnVisibility.l2UsdValue
+                }
+                size="sm"
+                variant="outline"
+                onPressedChange={(value) => {
+                  value
+                    ? setColumnVisibility({
+                        renegadeUsdValue: true,
+                        l2UsdValue: true,
+                        renegadeBalance: false,
+                        l2Balance: false,
+                      })
+                    : setColumnVisibility({
+                        renegadeUsdValue: false,
+                        l2UsdValue: false,
+                        renegadeBalance: true,
+                        l2Balance: true,
+                      })
+                }}
+              >
+                <DollarSign className="h-4 w-4 text-muted-foreground" />
+              </Toggle>
+            </TooltipTrigger>
+            <TooltipContent>
+              <p>USD Value</p>
+            </TooltipContent>
+          </Tooltip>
+          <Tooltip>
+            <TooltipTrigger>
+              <Toggle
+                aria-label="Show zero balances"
+                pressed={!showZeroL2Balance && !showZeroRenegadeBalance}
+                size="sm"
+                variant="outline"
+                onPressedChange={(value) => {
+                  setShowZeroL2Balance(!value)
+                  setShowZeroRenegadeBalance(!value)
+                }}
+              >
+                <EyeOff className="h-4 w-4 text-muted-foreground" />
+              </Toggle>
+            </TooltipTrigger>
+            <TooltipContent>
+              <p>Hide zero balances</p>
+            </TooltipContent>
+          </Tooltip>
+          <Tooltip>
+            <TooltipTrigger>
+              <Toggle
+                aria-label="Toggle decimal display"
+                className="w-8 p-0 font-mono text-xs font-bold text-muted-foreground data-[state=on]:text-muted-foreground"
+                pressed={isLongFormat}
+                size="sm"
+                variant="outline"
+                onPressedChange={(value) => setIsLongFormat(value)}
+              >
+                .00
+              </Toggle>
+            </TooltipTrigger>
+            <TooltipContent>
+              <p>Show decimals</p>
+            </TooltipContent>
+          </Tooltip>
         </div>
       </div>
       <div className="border">

diff --git a/app/assets/history-table/data-table.tsx b/app/assets/history-table/data-table.tsx
@@ -26,6 +26,12 @@ import {
   TableHeader,
   TableRow,
 } from "@/components/ui/table"
+import { Toggle } from "@/components/ui/toggle"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip"
 
 import { DISPLAY_TOKENS } from "@/lib/token"
 
@@ -150,17 +156,24 @@ export function DataTable<TData, TValue>({
             Clear
           </Button>
         ) : null}
-        <div className="ml-auto flex items-center space-x-2">
-          <Switch
-            checked={isLongFormat}
-            onCheckedChange={(value) => setIsLongFormat(!!value)}
-          />
-          <Label
-            className="text-muted-foreground"
-            htmlFor="long-format"
-          >
-            Show decimals
-          </Label>
+        <div className="ml-auto">
+          <Tooltip>
+            <TooltipTrigger>
+              <Toggle
+                aria-label="Toggle decimal display"
+                className="w-8 p-0 font-mono text-xs font-bold text-muted-foreground data-[state=on]:text-muted-foreground"
+                pressed={isLongFormat}
+                size="sm"
+                variant="outline"
+                onPressedChange={(value) => setIsLongFormat(value)}
+              >
+                .00
+              </Toggle>
+            </TooltipTrigger>
+            <TooltipContent>
+              <p>Toggle decimals</p>
+            </TooltipContent>
+          </Tooltip>
         </div>
       </div>
       <div className="border">

diff --git a/app/assets/page-client.tsx b/app/assets/page-client.tsx
@@ -1,23 +1,21 @@
 "use client"
 
-import React, { useRef } from "react"
+import React from "react"
 
-import { InfoCircledIcon } from "@radix-ui/react-icons"
 import {
   TaskType,
   Token,
   UpdateType,
   useBackOfQueueWallet,
   useTaskHistory,
 } from "@renegade-fi/react"
-import { ChevronDown, ChevronUp, Info } from "lucide-react"
+import { 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,
@@ -158,38 +156,13 @@ 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
-          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>
+        <div className="mt-12">
+          <h1 className="font-serif text-3xl font-bold leading-normal">
+            Assets
+          </h1>
           <AssetTable
             columns={assetColumns}
             data={balances}
@@ -210,23 +183,10 @@ export function PageClient() {
             </TooltipContent>
           </Tooltip>
         </div>
-        <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>
+        <div className="mt-20">
+          <h1 className="font-serif text-3xl font-bold leading-normal">
+            Transfer History
+          </h1>
           <TransferHistoryTable
             columns={historyColumns}
             data={historyData}

diff --git a/app/orders/data-table.tsx b/app/orders/data-table.tsx
@@ -31,6 +31,12 @@ import {
   TableHeader,
   TableRow,
 } from "@/components/ui/table"
+import { Toggle } from "@/components/ui/toggle"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip"
 
 import { useCancelAllOrders } from "@/hooks/use-cancel-all-orders"
 import { ExtendedOrderMetadata } from "@/hooks/use-order-table-data"
@@ -200,26 +206,31 @@ export function DataTable<TData, TValue>({
           </Button>
         ) : null}
         <Button
-          className="ml-auto text-muted-foreground"
+          className="ml-auto px-0 text-muted-foreground"
           disabled={isDisabled}
           size="sm"
           variant="link"
           onClick={handleCancelAllOrders}
         >
           Cancel all open orders
         </Button>
-        <div className="flex items-center space-x-2">
-          <Switch
-            checked={isLongFormat}
-            onCheckedChange={(value) => setIsLongFormat(!!value)}
-          />
-          <Label
-            className="text-muted-foreground"
-            htmlFor="long-format"
-          >
-            Show decimals
-          </Label>
-        </div>
+        <Tooltip>
+          <TooltipTrigger>
+            <Toggle
+              aria-label="Toggle decimal display"
+              className="w-8 p-0 font-mono text-xs font-bold text-muted-foreground data-[state=on]:text-muted-foreground"
+              pressed={isLongFormat}
+              size="sm"
+              variant="outline"
+              onPressedChange={(value) => setIsLongFormat(value)}
+            >
+              .00
+            </Toggle>
+          </TooltipTrigger>
+          <TooltipContent>
+            <p>Show decimals</p>
+          </TooltipContent>
+        </Tooltip>
       </div>
       <div className="border">
         <Table>

diff --git a/components/ui/toggle.tsx b/components/ui/toggle.tsx
@@ -7,7 +7,7 @@ import { cva, type VariantProps } from "class-variance-authority"
 import { cn } from "@/lib/utils"
 
 const toggleVariants = cva(
-  "inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground",
+  "inline-flex items-center justify-center  text-sm font-medium transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground",
   {
     variants: {
       variant: {

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml