diff --git a/app/assets/assets-table/data-table.tsx b/app/assets/assets-table/data-table.tsx index 283c2bd0..e21954c2 100644 --- a/app/assets/assets-table/data-table.tsx +++ b/app/assets/assets-table/data-table.tsx @@ -91,14 +91,14 @@ export function DataTable({ return ( <> -
+
Your deposits inside of Renegade. Only you and your connected relayer can see your balances.
-
+
- + ({ - + ({ - + ({
-
+
{table.getHeaderGroups().map((headerGroup) => ( diff --git a/app/assets/history-table/columns.tsx b/app/assets/history-table/columns.tsx index 662b6667..b00f3bb9 100644 --- a/app/assets/history-table/columns.tsx +++ b/app/assets/history-table/columns.tsx @@ -30,7 +30,7 @@ export const columns: ColumnDef[] = [ }, { accessorKey: "mint", - header: () =>
Asset
, + header: () =>
Asset
, cell: ({ row }) => { const mint = row.getValue<`0x${string}`>("mint") const token = Token.findByAddress(mint) @@ -56,7 +56,9 @@ export const columns: ColumnDef[] = [ }, { id: "usdValue", - header: () =>
Amount ($)
, + header: () => ( +
Amount ($)
+ ), cell: function Cell({ row }) { const mint = row.getValue<`0x${string}`>("mint") const token = Token.findByAddress(mint) @@ -106,7 +108,7 @@ export const columns: ColumnDef[] = [ cell: ({ row }) => { const timestamp = row.getValue("timestamp") const formatted = formatTimestamp(timestamp) - return
{formatted}
+ return
{formatted}
}, }, ] diff --git a/app/assets/history-table/data-table.tsx b/app/assets/history-table/data-table.tsx index 731168cf..1179f7ba 100644 --- 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({ return ( <> -
+
Filters
({ Clear ) : null} -
+
- + ({
-
+
{table.getHeaderGroups().map((headerGroup) => ( diff --git a/app/assets/page-client.tsx b/app/assets/page-client.tsx index ec3287bb..4cc7fdaa 100644 --- 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 ( -
-
-
-

- Assets -

- - - - - - Where are my assets? - - - -

{ASSETS_TOOLTIP}

- - -
-
-

- Transfer History -

+
+
+

+ Assets +

+ + + + + + Where are my assets? + + + +

{ASSETS_TOOLTIP}

+ + +
+
+

+ Transfer History +

+
+
diff --git a/app/components/account-menu.tsx b/app/components/account-menu.tsx index 88501b06..e4660249 100644 --- a/app/components/account-menu.tsx +++ b/app/components/account-menu.tsx @@ -40,7 +40,7 @@ export function AccountDropdown({ children }: { children: React.ReactNode }) { return ( {children} - + diff --git a/app/components/connect-wallet-button.tsx b/app/components/connect-wallet-button.tsx index e6e51a27..99c8585b 100644 --- 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 ( <> + + +
+
+ ) + } return (
-
-
- Welcome to Renegade! Deposit your Arbitrum tokens to get started. -
+
- +
+ Welcome to Renegade! Deposit your Arbitrum tokens to get started. +
+ + + +
+
+ {address ? ( + + + + ) : ( + + )} + {status === "in relayer" && ( + + + + )} +
+
+
+
@@ -105,7 +150,7 @@ export function Header() { Stats -
+
{status === "in relayer" && ( <> {/* @@ -142,7 +187,6 @@ export function Header() { {status === "in relayer" && ( + + + + + + + ) : ( + <> + + + + )} +
+
+ ) +} diff --git a/app/components/mobile-nav-sheet.tsx b/app/components/mobile-nav-sheet.tsx new file mode 100644 index 00000000..e2e04397 --- /dev/null +++ b/app/components/mobile-nav-sheet.tsx @@ -0,0 +1,163 @@ +import { useState } from "react" + +import Image from "next/image" +import Link from "next/link" +import { usePathname } from "next/navigation" + +import { VisuallyHidden } from "@radix-ui/react-visually-hidden" +import { Book } from "lucide-react" + +import { Button } from "@/components/ui/button" +import { Separator } from "@/components/ui/separator" +import { + Sheet, + SheetContent, + SheetDescription, + SheetHeader, + SheetTitle, + SheetTrigger, +} from "@/components/ui/sheet" + +export function MobileNavSheet({ children }: { children: React.ReactNode }) { + const [open, setOpen] = useState(false) + const pathname = usePathname() + + const handleLinkClick = (href: string) => { + if (pathname.includes(href)) { + setOpen(false) + } + } + + return ( + + {children} + + + + Menu + Click on a link! + + +
+ handleLinkClick("/trade")} + > + + + handleLinkClick("/trade")} + > + Trade + + handleLinkClick("/assets")} + > + Assets + + handleLinkClick("/orders")} + > + Orders + + handleLinkClick("/stats")} + > + Stats + +
+ +
+ + + + +
+ + + ) +} diff --git a/app/components/zendesk.tsx b/app/components/zendesk.tsx new file mode 100644 index 00000000..42ceab89 --- /dev/null +++ b/app/components/zendesk.tsx @@ -0,0 +1,17 @@ +"use client" + +import Script from "next/script" + +import { useMediaQuery } from "@/hooks/use-media-query" + +export function Zendesk() { + const isDesktop = useMediaQuery("(min-width: 1024px)") + if (!isDesktop) return <> + return ( +