initial mobile commit

renegade-fi · Sep 20, 2024 · 3e1540b · 3e1540b
1 parent 862e04c
commit 3e1540b
Show file tree

Hide file tree

Showing 78 changed files with 2,192 additions and 1,014 deletions.
diff --git a/app/assets/assets-table/data-table.tsx b/app/assets/assets-table/data-table.tsx
@@ -91,14 +91,14 @@ export function DataTable<TData, TValue>({
 
   return (
     <>
-      <div className="flex items-center pb-4">
+      <div className="flex flex-col gap-2 lg:flex-row lg:items-center">
         <div className="text-sm font-medium text-muted-foreground">
           Your deposits inside of Renegade. Only you and your connected relayer
           can see your balances.
         </div>
-        <div className="ml-auto flex items-center gap-2">
+        <div className="flex items-center gap-2 lg:ml-auto">
           <Tooltip>
-            <TooltipTrigger>
+            <TooltipTrigger asChild>
               <Toggle
                 aria-label="Toggle USD"
                 pressed={
@@ -131,7 +131,7 @@ export function DataTable<TData, TValue>({
             </TooltipContent>
           </Tooltip>
           <Tooltip>
-            <TooltipTrigger>
+            <TooltipTrigger asChild>
               <Toggle
                 aria-label="Show zero balances"
                 pressed={!showZeroL2Balance && !showZeroRenegadeBalance}
@@ -150,10 +150,10 @@ export function DataTable<TData, TValue>({
             </TooltipContent>
           </Tooltip>
           <Tooltip>
-            <TooltipTrigger>
+            <TooltipTrigger asChild>
               <Toggle
                 aria-label="Toggle decimal display"
-                className="w-8 p-0 font-mono text-xs text-muted-foreground data-[state=on]:text-muted-foreground"
+                className="w-8 font-mono text-xs text-muted-foreground data-[state=on]:text-muted-foreground"
                 pressed={isLongFormat}
                 size="sm"
                 variant="outline"
@@ -168,7 +168,7 @@ export function DataTable<TData, TValue>({
           </Tooltip>
         </div>
       </div>
-      <div className="border">
+      <div className="mt-2 border lg:mt-4">
         <Table>
           <TableHeader>
             {table.getHeaderGroups().map((headerGroup) => (

diff --git a/app/assets/history-table/columns.tsx b/app/assets/history-table/columns.tsx
@@ -30,7 +30,7 @@ export const columns: ColumnDef<HistoryData>[] = [
   },
   {
     accessorKey: "mint",
-    header: () => <div>Asset</div>,
+    header: () => <div className="pr-7">Asset</div>,
     cell: ({ row }) => {
       const mint = row.getValue<`0x${string}`>("mint")
       const token = Token.findByAddress(mint)
@@ -56,7 +56,9 @@ export const columns: ColumnDef<HistoryData>[] = [
   },
   {
     id: "usdValue",
-    header: () => <div className="text-right">Amount ($)</div>,
+    header: () => (
+      <div className="whitespace-nowrap text-right">Amount ($)</div>
+    ),
     cell: function Cell({ row }) {
       const mint = row.getValue<`0x${string}`>("mint")
       const token = Token.findByAddress(mint)
@@ -106,7 +108,7 @@ export const columns: ColumnDef<HistoryData>[] = [
     cell: ({ row }) => {
       const timestamp = row.getValue<number>("timestamp")
       const formatted = formatTimestamp(timestamp)
-      return <div className="text-right">{formatted}</div>
+      return <div className="whitespace-nowrap text-right">{formatted}</div>
     },
   },
 ]
diff --git a/app/assets/history-table/data-table.tsx b/app/assets/history-table/data-table.tsx
@@ -16,8 +16,6 @@ import {
 import { TableEmptyState } from "@/components/table-empty-state"
 import { TableSelect } from "@/components/table-select"
 import { Button } from "@/components/ui/button"
-import { Label } from "@/components/ui/label"
-import { Switch } from "@/components/ui/switch"
 import {
   Table,
   TableBody,
@@ -122,7 +120,7 @@ export function DataTable<TData, TValue>({
 
   return (
     <>
-      <div className="flex items-center gap-2 pb-4">
+      <div className="flex flex-wrap items-center gap-2 lg:gap-4">
         <div className="text-sm font-medium text-muted-foreground">Filters</div>
         <TableSelect
           placeholder="Status"
@@ -156,12 +154,12 @@ export function DataTable<TData, TValue>({
             Clear
           </Button>
         ) : null}
-        <div className="ml-auto">
+        <div className="sm:ml-auto">
           <Tooltip>
-            <TooltipTrigger>
+            <TooltipTrigger asChild>
               <Toggle
                 aria-label="Toggle decimal display"
-                className="w-8 p-0 font-mono text-xs text-muted-foreground data-[state=on]:text-muted-foreground"
+                className="w-8 font-mono text-xs text-muted-foreground data-[state=on]:text-muted-foreground"
                 pressed={isLongFormat}
                 size="sm"
                 variant="outline"
@@ -176,7 +174,7 @@ export function DataTable<TData, TValue>({
           </Tooltip>
         </div>
       </div>
-      <div className="border">
+      <div className="mt-2 border lg:mt-4">
         <Table>
           <TableHeader>
             {table.getHeaderGroups().map((headerGroup) => (

diff --git a/app/assets/page-client.tsx b/app/assets/page-client.tsx
@@ -17,10 +17,10 @@ import { DataTable as AssetTable } from "@/app/assets/assets-table/data-table"
 import { DataTable as TransferHistoryTable } from "@/app/assets/history-table/data-table"
 
 import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "@/components/ui/tooltip"
+  ResponsiveTooltip,
+  ResponsiveTooltipContent,
+  ResponsiveTooltipTrigger,
+} from "@/components/ui/responsive-tooltip"
 
 import { usePriceQueries } from "@/hooks/use-price-queries"
 import { useRefreshOnBlock } from "@/hooks/use-refresh-on-block"
@@ -157,36 +157,36 @@ export function PageClient() {
   }, [transferHistory])
 
   return (
-    <main>
-      <div className="container">
-        <div className="mt-12">
-          <h1 className="font-serif text-3xl font-bold leading-normal">
-            Assets
-          </h1>
-          <AssetTable
-            columns={assetColumns}
-            data={balances}
-            setShowZeroL2Balance={setShowZeroL2Balance}
-            setShowZeroRenegadeBalance={setShowZeroRenegadeBalance}
-            showZeroL2Balance={showZeroL2Balance}
-            showZeroRenegadeBalance={showZeroRenegadeBalance}
-          />
-          <Tooltip>
-            <TooltipTrigger>
-              <span className="mt-4 flex items-center text-xs text-muted-foreground">
-                <Info className="mr-1 h-3 w-3" />
-                Where are my assets?
-              </span>
-            </TooltipTrigger>
-            <TooltipContent>
-              <p className="font-sans">{ASSETS_TOOLTIP}</p>
-            </TooltipContent>
-          </Tooltip>
-        </div>
-        <div className="mt-20">
-          <h1 className="font-serif text-3xl font-bold leading-normal">
-            Transfer History
-          </h1>
+    <main className="container">
+      <div className="mt-12">
+        <h1 className="font-serif text-3xl font-bold tracking-tighter lg:tracking-normal">
+          Assets
+        </h1>
+        <AssetTable
+          columns={assetColumns}
+          data={balances}
+          setShowZeroL2Balance={setShowZeroL2Balance}
+          setShowZeroRenegadeBalance={setShowZeroRenegadeBalance}
+          showZeroL2Balance={showZeroL2Balance}
+          showZeroRenegadeBalance={showZeroRenegadeBalance}
+        />
+        <ResponsiveTooltip>
+          <ResponsiveTooltipTrigger>
+            <span className="mt-4 flex cursor-pointer items-center text-xs text-muted-foreground">
+              <Info className="mr-1 h-3 w-3" />
+              Where are my assets?
+            </span>
+          </ResponsiveTooltipTrigger>
+          <ResponsiveTooltipContent>
+            <p className="font-sans">{ASSETS_TOOLTIP}</p>
+          </ResponsiveTooltipContent>
+        </ResponsiveTooltip>
+      </div>
+      <div className="mt-20">
+        <h1 className="font-serif text-3xl font-bold tracking-tighter lg:tracking-normal">
+          Transfer History
+        </h1>
+        <div className="mt-2 lg:mt-4">
           <TransferHistoryTable
             columns={historyColumns}
             data={historyData}

diff --git a/app/assets/page.tsx b/app/assets/page.tsx
@@ -16,7 +16,7 @@ export default async function Page() {
   // )
 
   return (
-    <div className="grid min-h-screen grid-rows-[auto_1fr_auto]">
+    <div className="grid min-h-screen grid-cols-1 grid-rows-[auto_1fr_auto]">
       <div className="min-h-20">
         <Header />
       </div>

diff --git a/app/components/account-menu.tsx b/app/components/account-menu.tsx
@@ -40,7 +40,7 @@ export function AccountDropdown({ children }: { children: React.ReactNode }) {
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>{children}</DropdownMenuTrigger>
-      <DropdownMenuContent className="w-56">
+      <DropdownMenuContent>
         <DropdownMenuLabel>
           <Tooltip>
             <TooltipTrigger asChild>

diff --git a/app/components/connect-wallet-button.tsx b/app/components/connect-wallet-button.tsx
@@ -2,14 +2,18 @@ import { SignInDialog } from "@/components/dialogs/sign-in-dialog"
 import { Button } from "@/components/ui/button"
 
 import { useSignInAndConnect } from "@/hooks/use-sign-in-and-connect"
+import { cn } from "@/lib/utils"
 
-export function ConnectWalletButton() {
+export function ConnectWalletButton({ className }: { className?: string }) {
   const { handleClick, content, open, onOpenChange } = useSignInAndConnect()
 
   return (
     <>
       <Button
-        className="border border-[#333333] font-extended text-base hover:border-[#999999]"
+        className={cn(
+          "border border-[#333333] font-extended text-base hover:border-[#999999]",
+          className,
+        )}
         size="shimmer"
         variant="shimmer"
         onClick={handleClick}

diff --git a/app/components/deposit-banner.tsx b/app/components/deposit-banner.tsx
@@ -10,6 +10,7 @@ import { useLocalStorage } from "usehooks-ts"
 import { TransferDialog } from "@/components/dialogs/transfer/transfer-dialog"
 import { Button } from "@/components/ui/button"
 
+import { useMediaQuery } from "@/hooks/use-media-query"
 import { STORAGE_DEPOSIT_BANNER } from "@/lib/constants/storage"
 
 export function DepositBanner() {
@@ -20,33 +21,66 @@ export function DepositBanner() {
       select: (data) => data.balances.length,
     },
   })
+  const isDesktop = useMediaQuery("(min-width: 1024px)")
 
-  React.useEffect(() => {
-    if (data === 0 && !isClosed) {
-      setTimeout(() => setIsVisible(true), 100)
-    } else {
-      setIsVisible(false)
-    }
-  }, [data, isClosed])
+  // React.useEffect(() => {
+  //   if (data === 0 && !isClosed) {
+  //     setTimeout(() => setIsVisible(true), 100)
+  //   } else {
+  //     setIsVisible(false)
+  //   }
+  // }, [data, isClosed])
+
+  if (isDesktop) {
+    return (
+      <div
+        className={`transition-all duration-300 ease-in ${
+          isVisible
+            ? "max-h-20 opacity-100"
+            : "max-h-0 overflow-hidden opacity-0"
+        }`}
+      >
+        <div className="flex w-full items-center border-b border-border bg-[#00183e] py-2 pl-4 text-sm text-blue lg:py-0">
+          <div>
+            Welcome to Renegade! Deposit your Arbitrum tokens to get started.
+          </div>
+          <TransferDialog>
+            <Button
+              className="text-blue"
+              variant="link"
+            >
+              Deposit now
+              <ArrowRight className="ml-1 h-4 w-4" />
+            </Button>
+          </TransferDialog>
+          <Button
+            className="ml-auto"
+            size="icon"
+            variant="ghost"
+            onClick={() => {
+              setIsVisible(false)
+              setTimeout(() => setIsClosed(true), 300)
+            }}
+          >
+            <Cross2Icon className="h-4 w-4" />
+            <span className="sr-only">Close</span>
+          </Button>
+        </div>
+      </div>
+    )
+  }
 
   return (
     <div
       className={`transition-all duration-300 ease-in ${
         isVisible ? "max-h-20 opacity-100" : "max-h-0 overflow-hidden opacity-0"
       }`}
     >
-      <div className="flex w-full items-center border-b border-border bg-[#00183e] pl-4 text-sm text-blue">
-        <div>
-          Welcome to Renegade! Deposit your Arbitrum tokens to get started.
-        </div>
+      <div className="flex w-full items-center text-pretty border-b border-border bg-[#00183e] py-2 pl-4 pr-2 text-sm text-blue lg:py-0">
         <TransferDialog>
-          <Button
-            className="text-blue"
-            variant="link"
-          >
-            Deposit now
-            <ArrowRight className="ml-1 h-4 w-4" />
-          </Button>
+          <div>
+            Welcome to Renegade! Deposit your Arbitrum tokens to get started.
+          </div>
         </TransferDialog>
         <Button
           className="ml-auto"

diff --git a/app/components/footer.tsx b/app/components/footer.tsx
@@ -26,9 +26,9 @@ import { isTestnet } from "@/lib/viem"
 export function Footer() {
   const { address } = useAccount()
   return (
-    <footer className="fixed bottom-0 z-10 min-w-full border-t bg-background">
+    <footer className="z-10 hidden min-w-full border-t bg-background lg:fixed lg:bottom-0 lg:block">
       <div className="grid min-h-20 grid-cols-2 items-center">
-        <div className="flex items-center pl-6">
+        <div className="hidden items-center pl-6 lg:flex">
           <ContextMenu>
             <ContextMenuTrigger>
               <Image
@@ -90,7 +90,7 @@ export function Footer() {
             </Tooltip>
           )}
         </div>
-        <div className="ml-auto pr-[140px] text-xs">
+        <div className="ml-2 flex text-xs lg:ml-auto lg:pr-[140px]">
           <Button
             asChild
             size="icon"