From 17ab75de8ad4781ee7ce6b0ad7c9a03321894775 Mon Sep 17 00:00:00 2001 From: 0xShikhar Date: Sun, 1 Dec 2024 04:54:13 +0530 Subject: [PATCH 01/26] feat: add radix-ui support --- package.json | 2 + src/app/dashboard/page.tsx | 52 +++++ src/components/Sidebar.tsx | 0 src/components/ui/button.tsx | 57 ++++++ src/components/ui/dropdown-menu.tsx | 201 +++++++++++++++++++ yarn.lock | 297 +++++++++++++++++++++++++++- 6 files changed, 608 insertions(+), 1 deletion(-) create mode 100644 src/app/dashboard/page.tsx create mode 100644 src/components/Sidebar.tsx create mode 100644 src/components/ui/button.tsx create mode 100644 src/components/ui/dropdown-menu.tsx diff --git a/package.json b/package.json index bcc1809..f3f3da1 100644 --- a/package.json +++ b/package.json @@ -30,6 +30,8 @@ "tailwindcss-animate": "^1.0.7" }, "devDependencies": { + "@radix-ui/react-dropdown-menu": "^2.1.2", + "@radix-ui/react-slot": "^1.1.0", "@svgr/webpack": "^8.1.0", "@types/node": "^20", "@types/react": "^18", diff --git a/src/app/dashboard/page.tsx b/src/app/dashboard/page.tsx new file mode 100644 index 0000000..2bf25a8 --- /dev/null +++ b/src/app/dashboard/page.tsx @@ -0,0 +1,52 @@ +import React from 'react'; + +export default function Home() { + return ( +
+
+

nexusfi

+ +
+
+ +
+
+

Your balance

+
+
15 stNIBI
+
15 stNIBI
+
+
+

Points earned

+

9,432

+
+
+

TVL

+

$2,917,644.46

+
+
+
+
+ Total stNIBI issued: $2,784,695.01 + Total NIBI issued: $132,465.05 +
+
+
+
Unbonding period
+
Total burned: 1,747,790.02 (/22,805.21)
+
Staking reward: 10 NIBI
+
+
+
+
+
+ ); +}; \ No newline at end of file diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx new file mode 100644 index 0000000..e69de29 diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx new file mode 100644 index 0000000..d76f008 --- /dev/null +++ b/src/components/ui/button.tsx @@ -0,0 +1,57 @@ +import * as React from "react" +import { Slot } from "@radix-ui/react-slot" +import { cva, type VariantProps } from "class-variance-authority" + +import { cn } from "@/lib/utils" + +const buttonVariants = cva( + "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50", + { + variants: { + variant: { + default: "bg-primary text-primary-foreground hover:bg-primary/90", + destructive: + "bg-destructive text-destructive-foreground hover:bg-destructive/90", + outline: + "border border-input bg-background hover:bg-accent hover:text-accent-foreground", + secondary: + "bg-secondary text-secondary-foreground hover:bg-secondary/80", + ghost: "hover:bg-accent hover:text-accent-foreground", + link: "text-primary underline-offset-4 hover:underline", + }, + size: { + default: "h-10 px-4 py-2", + sm: "h-9 rounded-md px-3", + lg: "h-11 rounded-md px-8", + icon: "h-10 w-10", + }, + }, + defaultVariants: { + variant: "default", + size: "default", + }, + } +) + +export interface ButtonProps + extends React.ButtonHTMLAttributes, + VariantProps { + asChild?: boolean +} + +const Button = React.forwardRef( + ({ className, variant, size, asChild = false, ...props }, ref) => { + const Comp = asChild ? Slot : "button" + return ( + + ) + } +) +Button.displayName = "Button" + +export { Button, buttonVariants } + diff --git a/src/components/ui/dropdown-menu.tsx b/src/components/ui/dropdown-menu.tsx new file mode 100644 index 0000000..1fba980 --- /dev/null +++ b/src/components/ui/dropdown-menu.tsx @@ -0,0 +1,201 @@ +"use client" + +import * as React from "react" +import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu" +import { FaCheck, FaChevronRight, FaCircle } from 'react-icons/fa' + +import { cn } from "@/lib/utils" + +const DropdownMenu = DropdownMenuPrimitive.Root + +const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger + +const DropdownMenuGroup = DropdownMenuPrimitive.Group + +const DropdownMenuPortal = DropdownMenuPrimitive.Portal + +const DropdownMenuSub = DropdownMenuPrimitive.Sub + +const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup + +const DropdownMenuSubTrigger = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef & { + inset?: boolean + } +>(({ className, inset, children, ...props }, ref) => ( + + {children} + + +)) +DropdownMenuSubTrigger.displayName = + DropdownMenuPrimitive.SubTrigger.displayName + +const DropdownMenuSubContent = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +DropdownMenuSubContent.displayName = + DropdownMenuPrimitive.SubContent.displayName + +const DropdownMenuContent = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, sideOffset = 4, ...props }, ref) => ( + + + +)) +DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName + +const DropdownMenuItem = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef & { + inset?: boolean + } +>(({ className, inset, ...props }, ref) => ( + +)) +DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName + +const DropdownMenuCheckboxItem = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, children, checked, ...props }, ref) => ( + + + + + + + {children} + +)) +DropdownMenuCheckboxItem.displayName = + DropdownMenuPrimitive.CheckboxItem.displayName + +const DropdownMenuRadioItem = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, children, ...props }, ref) => ( + + + + + + + {children} + +)) +DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName + +const DropdownMenuLabel = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef & { + inset?: boolean + } +>(({ className, inset, ...props }, ref) => ( + +)) +DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName + +const DropdownMenuSeparator = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName + +const DropdownMenuShortcut = ({ + className, + ...props +}: React.HTMLAttributes) => { + return ( + + ) +} +DropdownMenuShortcut.displayName = "DropdownMenuShortcut" + +export { + DropdownMenu, + DropdownMenuTrigger, + DropdownMenuContent, + DropdownMenuItem, + DropdownMenuCheckboxItem, + DropdownMenuRadioItem, + DropdownMenuLabel, + DropdownMenuSeparator, + DropdownMenuShortcut, + DropdownMenuGroup, + DropdownMenuPortal, + DropdownMenuSub, + DropdownMenuSubContent, + DropdownMenuSubTrigger, + DropdownMenuRadioGroup, +} + diff --git a/yarn.lock b/yarn.lock index 14ad573..090373e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2060,6 +2060,13 @@ "@floating-ui/core" "^1.0.0" "@floating-ui/utils" "^0.2.0" +"@floating-ui/react-dom@^2.0.0": + version "2.1.2" + resolved "https://registry.yarnpkg.com/@floating-ui/react-dom/-/react-dom-2.1.2.tgz#a1349bbf6a0e5cb5ded55d023766f20a4d439a31" + integrity sha512-06okr5cgPzMNBy+Ycse2A6udMi4bqwW/zgBF/rwjcNqWkyr82Mcg8b0vjX8OJpZFy/FKjJmw6wV7t44kK6kW7A== + dependencies: + "@floating-ui/dom" "^1.0.0" + "@floating-ui/react-dom@^2.0.8", "@floating-ui/react-dom@^2.1.0": version "2.1.0" resolved "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.1.0.tgz" @@ -2751,11 +2758,226 @@ resolved "https://registry.npmjs.org/@protobufjs/utf8/-/utf8-1.1.0.tgz" integrity sha512-Vvn3zZrhQZkkBE8LSuW3em98c0FwgO4nxzv6OdSxPKJIEKY2bGbHn+mhGIPerzI4twdxaP8/0+06HBpwf345Lw== +"@radix-ui/primitive@1.1.0": + version "1.1.0" + resolved "https://registry.yarnpkg.com/@radix-ui/primitive/-/primitive-1.1.0.tgz#42ef83b3b56dccad5d703ae8c42919a68798bbe2" + integrity sha512-4Z8dn6Upk0qk4P74xBhZ6Hd/w0mPEzOOLxy4xiPXOXqjF7jZS0VAKk7/x/H6FyY2zCkYJqePf1G5KmkmNJ4RBA== + +"@radix-ui/react-arrow@1.1.0": + version "1.1.0" + resolved "https://registry.yarnpkg.com/@radix-ui/react-arrow/-/react-arrow-1.1.0.tgz#744f388182d360b86285217e43b6c63633f39e7a" + integrity sha512-FmlW1rCg7hBpEBwFbjHwCW6AmWLQM6g/v0Sn8XbP9NvmSZ2San1FpQeyPtufzOMSIx7Y4dzjlHoifhp+7NkZhw== + dependencies: + "@radix-ui/react-primitive" "2.0.0" + +"@radix-ui/react-collection@1.1.0": + version "1.1.0" + resolved "https://registry.yarnpkg.com/@radix-ui/react-collection/-/react-collection-1.1.0.tgz#f18af78e46454a2360d103c2251773028b7724ed" + integrity sha512-GZsZslMJEyo1VKm5L1ZJY8tGDxZNPAoUeQUIbKeJfoi7Q4kmig5AsgLMYYuyYbfjd8fBmFORAIwYAkXMnXZgZw== + dependencies: + "@radix-ui/react-compose-refs" "1.1.0" + "@radix-ui/react-context" "1.1.0" + "@radix-ui/react-primitive" "2.0.0" + "@radix-ui/react-slot" "1.1.0" + +"@radix-ui/react-compose-refs@1.1.0": + version "1.1.0" + resolved "https://registry.yarnpkg.com/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.0.tgz#656432461fc8283d7b591dcf0d79152fae9ecc74" + integrity sha512-b4inOtiaOnYf9KWyO3jAeeCG6FeyfY6ldiEPanbUjWd+xIk5wZeHa8yVwmrJ2vderhu/BQvzCrJI0lHd+wIiqw== + +"@radix-ui/react-context@1.1.0": + version "1.1.0" + resolved "https://registry.yarnpkg.com/@radix-ui/react-context/-/react-context-1.1.0.tgz#6df8d983546cfd1999c8512f3a8ad85a6e7fcee8" + integrity sha512-OKrckBy+sMEgYM/sMmqmErVn0kZqrHPJze+Ql3DzYsDDp0hl0L62nx/2122/Bvps1qz645jlcu2tD9lrRSdf8A== + +"@radix-ui/react-context@1.1.1": + version "1.1.1" + resolved "https://registry.yarnpkg.com/@radix-ui/react-context/-/react-context-1.1.1.tgz#82074aa83a472353bb22e86f11bcbd1c61c4c71a" + integrity sha512-UASk9zi+crv9WteK/NU4PLvOoL3OuE6BWVKNF6hPRBtYBDXQ2u5iu3O59zUlJiTVvkyuycnqrztsHVJwcK9K+Q== + +"@radix-ui/react-direction@1.1.0": + version "1.1.0" + resolved "https://registry.yarnpkg.com/@radix-ui/react-direction/-/react-direction-1.1.0.tgz#a7d39855f4d077adc2a1922f9c353c5977a09cdc" + integrity sha512-BUuBvgThEiAXh2DWu93XsT+a3aWrGqolGlqqw5VU1kG7p/ZH2cuDlM1sRLNnY3QcBS69UIz2mcKhMxDsdewhjg== + +"@radix-ui/react-dismissable-layer@1.1.1": + version "1.1.1" + resolved "https://registry.yarnpkg.com/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.1.1.tgz#cbdcb739c5403382bdde5f9243042ba643883396" + integrity sha512-QSxg29lfr/xcev6kSz7MAlmDnzbP1eI/Dwn3Tp1ip0KT5CUELsxkekFEMVBEoykI3oV39hKT4TKZzBNMbcTZYQ== + dependencies: + "@radix-ui/primitive" "1.1.0" + "@radix-ui/react-compose-refs" "1.1.0" + "@radix-ui/react-primitive" "2.0.0" + "@radix-ui/react-use-callback-ref" "1.1.0" + "@radix-ui/react-use-escape-keydown" "1.1.0" + +"@radix-ui/react-dropdown-menu@^2.1.2": + version "2.1.2" + resolved "https://registry.yarnpkg.com/@radix-ui/react-dropdown-menu/-/react-dropdown-menu-2.1.2.tgz#acc49577130e3c875ef0133bd1e271ea3392d924" + integrity sha512-GVZMR+eqK8/Kes0a36Qrv+i20bAPXSn8rCBTHx30w+3ECnR5o3xixAlqcVaYvLeyKUsm0aqyhWfmUcqufM8nYA== + dependencies: + "@radix-ui/primitive" "1.1.0" + "@radix-ui/react-compose-refs" "1.1.0" + "@radix-ui/react-context" "1.1.1" + "@radix-ui/react-id" "1.1.0" + "@radix-ui/react-menu" "2.1.2" + "@radix-ui/react-primitive" "2.0.0" + "@radix-ui/react-use-controllable-state" "1.1.0" + +"@radix-ui/react-focus-guards@1.1.1": + version "1.1.1" + resolved "https://registry.yarnpkg.com/@radix-ui/react-focus-guards/-/react-focus-guards-1.1.1.tgz#8635edd346304f8b42cae86b05912b61aef27afe" + integrity sha512-pSIwfrT1a6sIoDASCSpFwOasEwKTZWDw/iBdtnqKO7v6FeOzYJ7U53cPzYFVR3geGGXgVHaH+CdngrrAzqUGxg== + +"@radix-ui/react-focus-scope@1.1.0": + version "1.1.0" + resolved "https://registry.yarnpkg.com/@radix-ui/react-focus-scope/-/react-focus-scope-1.1.0.tgz#ebe2891a298e0a33ad34daab2aad8dea31caf0b2" + integrity sha512-200UD8zylvEyL8Bx+z76RJnASR2gRMuxlgFCPAe/Q/679a/r0eK3MBVYMb7vZODZcffZBdob1EGnky78xmVvcA== + dependencies: + "@radix-ui/react-compose-refs" "1.1.0" + "@radix-ui/react-primitive" "2.0.0" + "@radix-ui/react-use-callback-ref" "1.1.0" + "@radix-ui/react-icons@^1.3.0": version "1.3.0" resolved "https://registry.npmjs.org/@radix-ui/react-icons/-/react-icons-1.3.0.tgz" integrity sha512-jQxj/0LKgp+j9BiTXz3O3sgs26RNet2iLWmsPyRz2SIcR4q/4SbazXfnYwbAr+vLYKSfc7qxzyGQA1HLlYiuNw== +"@radix-ui/react-id@1.1.0": + version "1.1.0" + resolved "https://registry.yarnpkg.com/@radix-ui/react-id/-/react-id-1.1.0.tgz#de47339656594ad722eb87f94a6b25f9cffae0ed" + integrity sha512-EJUrI8yYh7WOjNOqpoJaf1jlFIH2LvtgAl+YcFqNCa+4hj64ZXmPkAKOFs/ukjz3byN6bdb/AVUqHkI8/uWWMA== + dependencies: + "@radix-ui/react-use-layout-effect" "1.1.0" + +"@radix-ui/react-menu@2.1.2": + version "2.1.2" + resolved "https://registry.yarnpkg.com/@radix-ui/react-menu/-/react-menu-2.1.2.tgz#91f6815845a4298dde775563ed2d80b7ad667899" + integrity sha512-lZ0R4qR2Al6fZ4yCCZzu/ReTFrylHFxIqy7OezIpWF4bL0o9biKo0pFIvkaew3TyZ9Fy5gYVrR5zCGZBVbO1zg== + dependencies: + "@radix-ui/primitive" "1.1.0" + "@radix-ui/react-collection" "1.1.0" + "@radix-ui/react-compose-refs" "1.1.0" + "@radix-ui/react-context" "1.1.1" + "@radix-ui/react-direction" "1.1.0" + "@radix-ui/react-dismissable-layer" "1.1.1" + "@radix-ui/react-focus-guards" "1.1.1" + "@radix-ui/react-focus-scope" "1.1.0" + "@radix-ui/react-id" "1.1.0" + "@radix-ui/react-popper" "1.2.0" + "@radix-ui/react-portal" "1.1.2" + "@radix-ui/react-presence" "1.1.1" + "@radix-ui/react-primitive" "2.0.0" + "@radix-ui/react-roving-focus" "1.1.0" + "@radix-ui/react-slot" "1.1.0" + "@radix-ui/react-use-callback-ref" "1.1.0" + aria-hidden "^1.1.1" + react-remove-scroll "2.6.0" + +"@radix-ui/react-popper@1.2.0": + version "1.2.0" + resolved "https://registry.yarnpkg.com/@radix-ui/react-popper/-/react-popper-1.2.0.tgz#a3e500193d144fe2d8f5d5e60e393d64111f2a7a" + integrity sha512-ZnRMshKF43aBxVWPWvbj21+7TQCvhuULWJ4gNIKYpRlQt5xGRhLx66tMp8pya2UkGHTSlhpXwmjqltDYHhw7Vg== + dependencies: + "@floating-ui/react-dom" "^2.0.0" + "@radix-ui/react-arrow" "1.1.0" + "@radix-ui/react-compose-refs" "1.1.0" + "@radix-ui/react-context" "1.1.0" + "@radix-ui/react-primitive" "2.0.0" + "@radix-ui/react-use-callback-ref" "1.1.0" + "@radix-ui/react-use-layout-effect" "1.1.0" + "@radix-ui/react-use-rect" "1.1.0" + "@radix-ui/react-use-size" "1.1.0" + "@radix-ui/rect" "1.1.0" + +"@radix-ui/react-portal@1.1.2": + version "1.1.2" + resolved "https://registry.yarnpkg.com/@radix-ui/react-portal/-/react-portal-1.1.2.tgz#51eb46dae7505074b306ebcb985bf65cc547d74e" + integrity sha512-WeDYLGPxJb/5EGBoedyJbT0MpoULmwnIPMJMSldkuiMsBAv7N1cRdsTWZWht9vpPOiN3qyiGAtbK2is47/uMFg== + dependencies: + "@radix-ui/react-primitive" "2.0.0" + "@radix-ui/react-use-layout-effect" "1.1.0" + +"@radix-ui/react-presence@1.1.1": + version "1.1.1" + resolved "https://registry.yarnpkg.com/@radix-ui/react-presence/-/react-presence-1.1.1.tgz#98aba423dba5e0c687a782c0669dcd99de17f9b1" + integrity sha512-IeFXVi4YS1K0wVZzXNrbaaUvIJ3qdY+/Ih4eHFhWA9SwGR9UDX7Ck8abvL57C4cv3wwMvUE0OG69Qc3NCcTe/A== + dependencies: + "@radix-ui/react-compose-refs" "1.1.0" + "@radix-ui/react-use-layout-effect" "1.1.0" + +"@radix-ui/react-primitive@2.0.0": + version "2.0.0" + resolved "https://registry.yarnpkg.com/@radix-ui/react-primitive/-/react-primitive-2.0.0.tgz#fe05715faa9203a223ccc0be15dc44b9f9822884" + integrity sha512-ZSpFm0/uHa8zTvKBDjLFWLo8dkr4MBsiDLz0g3gMUwqgLHz9rTaRRGYDgvZPtBJgYCBKXkS9fzmoySgr8CO6Cw== + dependencies: + "@radix-ui/react-slot" "1.1.0" + +"@radix-ui/react-roving-focus@1.1.0": + version "1.1.0" + resolved "https://registry.yarnpkg.com/@radix-ui/react-roving-focus/-/react-roving-focus-1.1.0.tgz#b30c59daf7e714c748805bfe11c76f96caaac35e" + integrity sha512-EA6AMGeq9AEeQDeSH0aZgG198qkfHSbvWTf1HvoDmOB5bBG/qTxjYMWUKMnYiV6J/iP/J8MEFSuB2zRU2n7ODA== + dependencies: + "@radix-ui/primitive" "1.1.0" + "@radix-ui/react-collection" "1.1.0" + "@radix-ui/react-compose-refs" "1.1.0" + "@radix-ui/react-context" "1.1.0" + "@radix-ui/react-direction" "1.1.0" + "@radix-ui/react-id" "1.1.0" + "@radix-ui/react-primitive" "2.0.0" + "@radix-ui/react-use-callback-ref" "1.1.0" + "@radix-ui/react-use-controllable-state" "1.1.0" + +"@radix-ui/react-slot@1.1.0", "@radix-ui/react-slot@^1.1.0": + version "1.1.0" + resolved "https://registry.yarnpkg.com/@radix-ui/react-slot/-/react-slot-1.1.0.tgz#7c5e48c36ef5496d97b08f1357bb26ed7c714b84" + integrity sha512-FUCf5XMfmW4dtYl69pdS4DbxKy8nj4M7SafBgPllysxmdachynNflAdp/gCsnYWNDnge6tI9onzMp5ARYc1KNw== + dependencies: + "@radix-ui/react-compose-refs" "1.1.0" + +"@radix-ui/react-use-callback-ref@1.1.0": + version "1.1.0" + resolved "https://registry.yarnpkg.com/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.1.0.tgz#bce938ca413675bc937944b0d01ef6f4a6dc5bf1" + integrity sha512-CasTfvsy+frcFkbXtSJ2Zu9JHpN8TYKxkgJGWbjiZhFivxaeW7rMeZt7QELGVLaYVfFMsKHjb7Ak0nMEe+2Vfw== + +"@radix-ui/react-use-controllable-state@1.1.0": + version "1.1.0" + resolved "https://registry.yarnpkg.com/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.1.0.tgz#1321446857bb786917df54c0d4d084877aab04b0" + integrity sha512-MtfMVJiSr2NjzS0Aa90NPTnvTSg6C/JLCV7ma0W6+OMV78vd8OyRpID+Ng9LxzsPbLeuBnWBA1Nq30AtBIDChw== + dependencies: + "@radix-ui/react-use-callback-ref" "1.1.0" + +"@radix-ui/react-use-escape-keydown@1.1.0": + version "1.1.0" + resolved "https://registry.yarnpkg.com/@radix-ui/react-use-escape-keydown/-/react-use-escape-keydown-1.1.0.tgz#31a5b87c3b726504b74e05dac1edce7437b98754" + integrity sha512-L7vwWlR1kTTQ3oh7g1O0CBF3YCyyTj8NmhLR+phShpyA50HCfBFKVJTpshm9PzLiKmehsrQzTYTpX9HvmC9rhw== + dependencies: + "@radix-ui/react-use-callback-ref" "1.1.0" + +"@radix-ui/react-use-layout-effect@1.1.0": + version "1.1.0" + resolved "https://registry.yarnpkg.com/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.1.0.tgz#3c2c8ce04827b26a39e442ff4888d9212268bd27" + integrity sha512-+FPE0rOdziWSrH9athwI1R0HDVbWlEhd+FR+aSDk4uWGmSJ9Z54sdZVDQPZAinJhJXwfT+qnj969mCsT2gfm5w== + +"@radix-ui/react-use-rect@1.1.0": + version "1.1.0" + resolved "https://registry.yarnpkg.com/@radix-ui/react-use-rect/-/react-use-rect-1.1.0.tgz#13b25b913bd3e3987cc9b073a1a164bb1cf47b88" + integrity sha512-0Fmkebhr6PiseyZlYAOtLS+nb7jLmpqTrJyv61Pe68MKYW6OWdRE2kI70TaYY27u7H0lajqM3hSMMLFq18Z7nQ== + dependencies: + "@radix-ui/rect" "1.1.0" + +"@radix-ui/react-use-size@1.1.0": + version "1.1.0" + resolved "https://registry.yarnpkg.com/@radix-ui/react-use-size/-/react-use-size-1.1.0.tgz#b4dba7fbd3882ee09e8d2a44a3eed3a7e555246b" + integrity sha512-XW3/vWuIXHa+2Uwcc2ABSfcCledmXhhQPlGbfcRXbiUQI5Icjcg19BGCZVKKInYbvUCut/ufbbLLPFC5cbb1hw== + dependencies: + "@radix-ui/react-use-layout-effect" "1.1.0" + +"@radix-ui/rect@1.1.0": + version "1.1.0" + resolved "https://registry.yarnpkg.com/@radix-ui/rect/-/rect-1.1.0.tgz#f817d1d3265ac5415dadc67edab30ae196696438" + integrity sha512-A9+lCBZoaMJlVKcRBz2YByCG+Cp2t6nAnMnNba+XiWxnj6r4JUFqfsgwocMBZU9LPtdxC6wB56ySYpc7LQIoJg== + "@react-aria/breadcrumbs@^3.5.13": version "3.5.13" resolved "https://registry.npmjs.org/@react-aria/breadcrumbs/-/breadcrumbs-3.5.13.tgz" @@ -4548,6 +4770,13 @@ argparse@^2.0.1: resolved "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz" integrity sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q== +aria-hidden@^1.1.1: + version "1.2.4" + resolved "https://registry.yarnpkg.com/aria-hidden/-/aria-hidden-1.2.4.tgz#b78e383fdbc04d05762c78b4a25a501e736c4522" + integrity sha512-y+CcFFwelSXpLZk/7fMB2mUbGtX9lKycf1MWJ7CaTIERyitVlyQx6C+sxcROU2BAJ24OiZyK+8wj2i8AlBoS3A== + dependencies: + tslib "^2.0.0" + aria-query@^5.3.0: version "5.3.0" resolved "https://registry.npmjs.org/aria-query/-/aria-query-5.3.0.tgz" @@ -5535,6 +5764,11 @@ detect-libc@^1.0.3: resolved "https://registry.npmjs.org/detect-libc/-/detect-libc-1.0.3.tgz" integrity sha512-pGjwhsmsp4kL2RTz08wcOlGN83otlqHeD/Z5T8GXZB+/YcpQ/dgo+lbU8ZsGxV0HIvqqxo9l7mqYwyYMD9bKDg== +detect-node-es@^1.1.0: + version "1.1.0" + resolved "https://registry.yarnpkg.com/detect-node-es/-/detect-node-es-1.1.0.tgz#163acdf643330caa0b4cd7c21e7ee7755d6fa493" + integrity sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ== + didyoumean@^1.2.2: version "1.2.2" resolved "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz" @@ -6304,6 +6538,11 @@ get-intrinsic@^1.1.3, get-intrinsic@^1.2.1, get-intrinsic@^1.2.3, get-intrinsic@ has-symbols "^1.0.3" hasown "^2.0.0" +get-nonce@^1.0.0: + version "1.0.1" + resolved "https://registry.yarnpkg.com/get-nonce/-/get-nonce-1.0.1.tgz#fdf3f0278073820d2ce9426c18f07481b1e0cdf3" + integrity sha512-FJhYRoDaiatfEkUK8HKlicmu/3SGFD51q3itKDGoSTysQJBnfOcxU5GxnhE1E6soB76MbT0MBtnKJuXyAx+96Q== + get-port-please@^3.1.2: version "3.1.2" resolved "https://registry.npmjs.org/get-port-please/-/get-port-please-3.1.2.tgz" @@ -6603,6 +6842,13 @@ intl-messageformat@^10.1.0: "@formatjs/icu-messageformat-parser" "2.7.8" tslib "^2.4.0" +invariant@^2.2.4: + version "2.2.4" + resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.4.tgz#610f3c92c9359ce1db616e538008d23ff35158e6" + integrity sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA== + dependencies: + loose-envify "^1.0.0" + iron-webcrypto@^1.0.0: version "1.2.1" resolved "https://registry.npmjs.org/iron-webcrypto/-/iron-webcrypto-1.2.1.tgz" @@ -7139,7 +7385,7 @@ long@^5.2.3: resolved "https://registry.npmjs.org/long/-/long-5.2.3.tgz" integrity sha512-lcHwpNoggQTObv5apGNCTdJrO69eHOZMi4BNC+rTLER8iHAqGrUVeLh/irVIM7zTw2bOXA8T6uNPeujwOLg/2Q== -loose-envify@^1.1.0, loose-envify@^1.4.0: +loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.4.0: version "1.4.0" resolved "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz" integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q== @@ -8041,6 +8287,25 @@ react-is@^16.13.1: resolved "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz" integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ== +react-remove-scroll-bar@^2.3.6: + version "2.3.6" + resolved "https://registry.yarnpkg.com/react-remove-scroll-bar/-/react-remove-scroll-bar-2.3.6.tgz#3e585e9d163be84a010180b18721e851ac81a29c" + integrity sha512-DtSYaao4mBmX+HDo5YWYdBWQwYIQQshUV/dVxFxK+KM26Wjwp1gZ6rv6OC3oujI6Bfu6Xyg3TwK533AQutsn/g== + dependencies: + react-style-singleton "^2.2.1" + tslib "^2.0.0" + +react-remove-scroll@2.6.0: + version "2.6.0" + resolved "https://registry.yarnpkg.com/react-remove-scroll/-/react-remove-scroll-2.6.0.tgz#fb03a0845d7768a4f1519a99fdb84983b793dc07" + integrity sha512-I2U4JVEsQenxDAKaVa3VZ/JeJZe0/2DxPWL8Tj8yLKctQJQiZM52pn/GWFpSp8dftjM3pSAHVJZscAnC/y+ySQ== + dependencies: + react-remove-scroll-bar "^2.3.6" + react-style-singleton "^2.2.1" + tslib "^2.1.0" + use-callback-ref "^1.3.0" + use-sidecar "^1.1.2" + react-stately@^3.27.1: version "3.31.1" resolved "https://registry.npmjs.org/react-stately/-/react-stately-3.31.1.tgz" @@ -8070,6 +8335,15 @@ react-stately@^3.27.1: "@react-stately/tree" "^3.8.1" "@react-types/shared" "^3.23.1" +react-style-singleton@^2.2.1: + version "2.2.1" + resolved "https://registry.yarnpkg.com/react-style-singleton/-/react-style-singleton-2.2.1.tgz#f99e420492b2d8f34d38308ff660b60d0b1205b4" + integrity sha512-ZWj0fHEMyWkHzKYUr2Bs/4zU6XLmq9HsgBURm7g5pAVfyn49DgUiNgY2d4lXRlYSiCif9YBGpQleewkcqddc7g== + dependencies: + get-nonce "^1.0.0" + invariant "^2.2.4" + tslib "^2.0.0" + react@^18: version "18.3.1" resolved "https://registry.npmjs.org/react/-/react-18.3.1.tgz" @@ -8452,6 +8726,7 @@ strict-uri-encode@^2.0.0: integrity sha512-QwiXZgpRcKkhTj2Scnn++4PKtWsH0kpzZ62L2R6c/LUVYv7hVnZqcg2+sMuT6R7Jusu1vviK/MFsu6kNJfWlEQ== "string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0: + name string-width-cjs version "4.2.3" resolved "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz" integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g== @@ -8764,6 +9039,11 @@ tslib@1.14.1: resolved "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz" integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg== +tslib@^2.0.0: + version "2.8.1" + resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.8.1.tgz#612efe4ed235d567e8aba5f2a5fab70280ade83f" + integrity sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w== + tslib@^2.0.3, tslib@^2.1.0, tslib@^2.4.0: version "2.6.3" resolved "https://registry.npmjs.org/tslib/-/tslib-2.6.3.tgz" @@ -8951,6 +9231,21 @@ uri-js@^4.2.2: dependencies: punycode "^2.1.0" +use-callback-ref@^1.3.0: + version "1.3.2" + resolved "https://registry.yarnpkg.com/use-callback-ref/-/use-callback-ref-1.3.2.tgz#6134c7f6ff76e2be0b56c809b17a650c942b1693" + integrity sha512-elOQwe6Q8gqZgDA8mrh44qRTQqpIHDcZ3hXTLjBe1i4ph8XpNJnO+aQf3NaG+lriLopI4HMx9VjQLfPQ6vhnoA== + dependencies: + tslib "^2.0.0" + +use-sidecar@^1.1.2: + version "1.1.2" + resolved "https://registry.yarnpkg.com/use-sidecar/-/use-sidecar-1.1.2.tgz#2f43126ba2d7d7e117aa5855e5d8f0276dfe73c2" + integrity sha512-epTbsLuzZ7lPClpz2TyryBfztm7m+28DlEv2ZCQ3MDr5ssiwyOwGH/e5F9CkfWjJ1t4clvI58yF822/GUkjjhw== + dependencies: + detect-node-es "^1.1.0" + tslib "^2.0.0" + use-sync-external-store@1.2.0: version "1.2.0" resolved "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz" From 0f066af2360381594e77569953bd7a3517f3f983 Mon Sep 17 00:00:00 2001 From: 0xShikhar Date: Sun, 1 Dec 2024 05:00:25 +0530 Subject: [PATCH 02/26] feat: add radix components --- package.json | 1 + src/components/Sidebar.tsx | 94 +++++++++++++++++++++++++++++++++ src/components/ui/badge.tsx | 37 +++++++++++++ src/components/ui/separator.tsx | 31 +++++++++++ src/types/dashboard.ts | 23 ++++++++ yarn.lock | 7 +++ 6 files changed, 193 insertions(+) create mode 100644 src/components/ui/badge.tsx create mode 100644 src/components/ui/separator.tsx create mode 100644 src/types/dashboard.ts diff --git a/package.json b/package.json index f3f3da1..9b877b4 100644 --- a/package.json +++ b/package.json @@ -19,6 +19,7 @@ "@nibiruchain/nibijs": "^4.4.0", "@nibiruchain/protojs": "^0.21.16", "@radix-ui/react-icons": "^1.3.0", + "@radix-ui/react-separator": "^1.1.0", "chain-registry": "^1.63.0", "cosmos-kit": "^2.17.0", "framer-motion": "^11.2.12", diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx index e69de29..7fdd43d 100644 --- a/src/components/Sidebar.tsx +++ b/src/components/Sidebar.tsx @@ -0,0 +1,94 @@ +import Image from "next/image" +import Link from "next/link" +import { FaCube, FaDollarSign, FaSync } from "react-icons/fa" +import { Badge } from "@/components/ui/badge" +import { Button } from "@/components/ui/button" +import { Separator } from "@/components/ui/separator" +import type { SidebarLink } from "@/types/dashboard" + +const navigation: SidebarLink[] = [ + { + label: "Dashboard", + href: "/", + icon: FaCube, + }, + { + label: "Stake", + href: "/stake", + icon: FaDollarSign, + }, + { + label: "Restake", + href: "/restake", + icon: FaSync, + isComingSoon: true, + }, +] + +const footerLinks = [ + { label: "Terms of Service", href: "/terms" }, + { label: "Privacy Policy", href: "/privacy" }, + { label: "Cookie Policy", href: "/cookies" }, +] + +export function Sidebar() { + return ( +
+
+ NexusFi + +
+
+
+ + + + + + + + + +
+ +
+ {footerLinks.map((link) => ( + + {link.label} + + ))} +
+
+
+ ) +} + diff --git a/src/components/ui/badge.tsx b/src/components/ui/badge.tsx new file mode 100644 index 0000000..5f0d32f --- /dev/null +++ b/src/components/ui/badge.tsx @@ -0,0 +1,37 @@ +import * as React from "react" +import { cva, type VariantProps } from "class-variance-authority" + +import { cn } from "@/lib/utils" + +const badgeVariants = cva( + "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2", + { + variants: { + variant: { + default: + "border-transparent bg-primary text-primary-foreground hover:bg-primary/80", + secondary: + "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80", + destructive: + "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80", + outline: "text-foreground", + }, + }, + defaultVariants: { + variant: "default", + }, + } +) + +export interface BadgeProps + extends React.HTMLAttributes, + VariantProps { } + +function Badge({ className, variant, ...props }: BadgeProps) { + return ( +
+ ) +} + +export { Badge, badgeVariants } diff --git a/src/components/ui/separator.tsx b/src/components/ui/separator.tsx new file mode 100644 index 0000000..72ae59e --- /dev/null +++ b/src/components/ui/separator.tsx @@ -0,0 +1,31 @@ +"use client" + +import * as React from "react" +import * as SeparatorPrimitive from "@radix-ui/react-separator" + +import { cn } from "@/lib/utils" + +const Separator = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>( + ( + { className, orientation = "horizontal", decorative = true, ...props }, + ref + ) => ( + + ) +) +Separator.displayName = SeparatorPrimitive.Root.displayName + +export { Separator } diff --git a/src/types/dashboard.ts b/src/types/dashboard.ts new file mode 100644 index 0000000..dc3bb7d --- /dev/null +++ b/src/types/dashboard.ts @@ -0,0 +1,23 @@ +export interface UserBalance { + stNIBI: number; +} + +export interface DashboardStats { + pointsEarned: number; + tvl: number; + totalStNIBIIssued: number; + totalNIBIIssued: number; + totalBurned: { + amount: number; + usdValue: number; + }; + stakingReward: number; +} + +export interface SidebarLink { + label: string; + href: string; + icon: React.ComponentType; + isComingSoon?: boolean; +} + diff --git a/yarn.lock b/yarn.lock index 090373e..b6065a2 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2928,6 +2928,13 @@ "@radix-ui/react-use-callback-ref" "1.1.0" "@radix-ui/react-use-controllable-state" "1.1.0" +"@radix-ui/react-separator@^1.1.0": + version "1.1.0" + resolved "https://registry.yarnpkg.com/@radix-ui/react-separator/-/react-separator-1.1.0.tgz#ee0f4d86003b0e3ea7bc6ccab01ea0adee32663e" + integrity sha512-3uBAs+egzvJBDZAzvb/n4NxxOYpnspmWxO2u5NbZ8Y6FM/NdrGSF9bop3Cf6F6C71z1rTSn8KV0Fo2ZVd79lGA== + dependencies: + "@radix-ui/react-primitive" "2.0.0" + "@radix-ui/react-slot@1.1.0", "@radix-ui/react-slot@^1.1.0": version "1.1.0" resolved "https://registry.yarnpkg.com/@radix-ui/react-slot/-/react-slot-1.1.0.tgz#7c5e48c36ef5496d97b08f1357bb26ed7c714b84" From 95c201e8c58c2ff4514e87b246ab849c10057796 Mon Sep 17 00:00:00 2001 From: 0xShikhar Date: Sun, 1 Dec 2024 06:27:57 +0530 Subject: [PATCH 03/26] feat: new dashboard add --- package.json | 3 + public/logo.png | Bin 0 -> 8052 bytes src/app/dashboard/page.tsx | 121 +++--- src/app/layout.tsx | 19 +- src/app/page.tsx | 78 +++- src/components/Header.tsx | 28 ++ .../{Dashboard.tsx => OldDashboard.tsx} | 2 +- src/components/Sidebar.tsx | 19 +- src/components/connect-wallet.tsx | 45 +++ src/components/stats-card.tsx | 26 ++ src/components/ui/card.tsx | 79 ++++ src/components/ui/progress.tsx | 28 ++ src/components/ui/sheet.tsx | 140 +++++++ yarn.lock | 373 +++++++++++++++++- 14 files changed, 890 insertions(+), 71 deletions(-) create mode 100644 public/logo.png create mode 100644 src/components/Header.tsx rename src/components/{Dashboard.tsx => OldDashboard.tsx} (99%) create mode 100644 src/components/connect-wallet.tsx create mode 100644 src/components/stats-card.tsx create mode 100644 src/components/ui/card.tsx create mode 100644 src/components/ui/progress.tsx create mode 100644 src/components/ui/sheet.tsx diff --git a/package.json b/package.json index 9b877b4..b7881c6 100644 --- a/package.json +++ b/package.json @@ -18,8 +18,11 @@ "@interchain-ui/react": "^1.23.16", "@nibiruchain/nibijs": "^4.4.0", "@nibiruchain/protojs": "^0.21.16", + "@radix-ui/react-dialog": "^1.1.2", "@radix-ui/react-icons": "^1.3.0", + "@radix-ui/react-progress": "^1.1.0", "@radix-ui/react-separator": "^1.1.0", + "@radix-ui/themes": "^3.1.6", "chain-registry": "^1.63.0", "cosmos-kit": "^2.17.0", "framer-motion": "^11.2.12", diff --git a/public/logo.png b/public/logo.png new file mode 100644 index 0000000000000000000000000000000000000000..d920a3c0d1c295998353b0dc57d8b4efff50b868 GIT binary patch literal 8052 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 literal 0 HcmV?d00001 diff --git a/src/app/dashboard/page.tsx b/src/app/dashboard/page.tsx index 2bf25a8..2972c64 100644 --- a/src/app/dashboard/page.tsx +++ b/src/app/dashboard/page.tsx @@ -1,52 +1,79 @@ -import React from 'react'; +import { ConnectWallet } from "@/components/connect-wallet" +import { StatsCard } from "@/components/stats-card" +import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" +import { Progress } from "@/components/ui/progress" + +// This would typically come from an API +const mockData = { + balance: 15, + pointsEarned: 9432, + tvl: 2917644.46, + totalStNIBIIssued: 2784695.01, + totalNIBIIssued: 132459.05, + totalBurned: { + amount: 1747790.02, + usdValue: 22805.21, + }, + stakingReward: 10, +} + +export default function DashboardPage() { + const progress = (mockData.totalStNIBIIssued / (mockData.totalStNIBIIssued + mockData.totalNIBIIssued)) * 100 -export default function Home() { return ( -
-
-

nexusfi

- -
-
- -
-
-

Your balance

-
-
15 stNIBI
-
15 stNIBI
-
-
-

Points earned

-

9,432

-
-
-

TVL

-

$2,917,644.46

-
-
-
-
- Total stNIBI issued: $2,784,695.01 - Total NIBI issued: $132,465.05 -
-
-
-
Unbonding period
-
Total burned: 1,747,790.02 (/22,805.21)
-
Staking reward: 10 NIBI
-
+
+
+

Dashboard

+
+ +
+
+ +
+ + + +
+ + + + + TVL + + + +
+ $ {mockData.tvl.toLocaleString()} +
+ +
+
Total stNIBI issued: {mockData.totalStNIBIIssued.toLocaleString()}
+
Total NIBI issued: {mockData.totalNIBIIssued.toLocaleString()}
-
+ + + +
+ +
- ); -}; \ No newline at end of file + ) +} + diff --git a/src/app/layout.tsx b/src/app/layout.tsx index bf0a292..343be00 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -5,6 +5,8 @@ import { SignerOptions, wallets } from "cosmos-kit"; import { ChainProvider } from "@cosmos-kit/react"; import { assets, chains } from "chain-registry"; import { Toaster } from "react-hot-toast"; +import { Sidebar } from "@/components/sidebar" +import { Header } from "@/components/header" import Navbar from "@/components/navigation/navbar"; import "@interchain-ui/react/styles"; import "./globals.css"; @@ -23,7 +25,7 @@ export default function RootLayout({ }; return ( - + -
- +
+
+ +
+
+
+ {children} +
+
+
+ {/* + {children} */} - {children}
diff --git a/src/app/page.tsx b/src/app/page.tsx index 0cf903f..a8ff602 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -1,10 +1,84 @@ import Image from "next/image"; -import Dashboard from "@/components/Dashboard"; +// import Dashboard from "@/components/Dashboard"; +import { ConnectWallet } from "@/components/connect-wallet" +import { StatsCard } from "@/components/stats-card" +import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" +import { Progress } from "@/components/ui/progress" + +// This would typically come from an API +const mockData = { + balance: 15, + pointsEarned: 9432, + tvl: 2917644.46, + totalStNIBIIssued: 2784695.01, + totalNIBIIssued: 132459.05, + totalBurned: { + amount: 1747790.02, + usdValue: 22805.21, + }, + stakingReward: 10, +} + +const progress = (mockData.totalStNIBIIssued / (mockData.totalStNIBIIssued + mockData.totalNIBIIssued)) * 100 export default function Home() { return (
- + +
+
+

Dashboard

+
+ +
+
+ +
+ + + +
+ + + + + TVL + + + +
+ $ {mockData.tvl.toLocaleString()} +
+ +
+
Total stNIBI issued: {mockData.totalStNIBIIssued.toLocaleString()}
+
Total NIBI issued: {mockData.totalNIBIIssued.toLocaleString()}
+
+
+
+ +
+ + +
+
+
); } diff --git a/src/components/Header.tsx b/src/components/Header.tsx new file mode 100644 index 0000000..47c6b2f --- /dev/null +++ b/src/components/Header.tsx @@ -0,0 +1,28 @@ +'use client' + +import { useState } from 'react' +import { FaBars } from 'react-icons/fa' +import { ConnectWallet } from "@/components/connect-wallet" +import { Button } from "./ui/button" +import { Sheet, SheetContent, SheetTrigger } from "./ui/sheet" +import { Sidebar } from "@/components/Sidebar" + +export function Header() { + const [isSidebarOpen, setIsSidebarOpen] = useState(false) + return ( +
+ + + + + + + + + +
+ ) +} + diff --git a/src/components/Dashboard.tsx b/src/components/OldDashboard.tsx similarity index 99% rename from src/components/Dashboard.tsx rename to src/components/OldDashboard.tsx index 46f4cd8..c4a1eeb 100644 --- a/src/components/Dashboard.tsx +++ b/src/components/OldDashboard.tsx @@ -8,7 +8,7 @@ import { useChain } from "@cosmos-kit/react"; import { CHAIN_NAME, getChainLogo } from "@/lib/utils"; import { stat } from "fs"; -const Dashboard = () => { +const OldDashboard = () => { const { sendTransaction, fetchQuery } = useTransaction(); const { status, address } = useChain(CHAIN_NAME); console.log("status", status, "address", address) diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx index 7fdd43d..073acda 100644 --- a/src/components/Sidebar.tsx +++ b/src/components/Sidebar.tsx @@ -1,3 +1,4 @@ +import React from "react" import Image from "next/image" import Link from "next/link" import { FaCube, FaDollarSign, FaSync } from "react-icons/fa" @@ -5,6 +6,8 @@ import { Badge } from "@/components/ui/badge" import { Button } from "@/components/ui/button" import { Separator } from "@/components/ui/separator" import type { SidebarLink } from "@/types/dashboard" +import { FaTelegramPlane, FaDiscord, FaTwitter } from 'react-icons/fa'; + const navigation: SidebarLink[] = [ { @@ -33,27 +36,27 @@ const footerLinks = [ export function Sidebar() { return ( -
+
NexusFi -