From 3e27ff1f28beb7f0277b42523eb01139cf602117 Mon Sep 17 00:00:00 2001 From: Burnt Nerve Date: Tue, 26 Mar 2024 13:08:39 -0500 Subject: [PATCH 1/2] Did mobile pass --- apps/abstraxion-dashboard/app/layout.tsx | 4 +- apps/abstraxion-dashboard/app/page.tsx | 75 +++++++++++++------ .../components/Abstraxion/index.tsx | 10 +-- .../components/AbstraxionWallets/index.tsx | 2 +- .../components/Icons/Close.tsx | 23 ++++++ .../components/Icons/index.ts | 1 + .../components/Sidebar.tsx | 30 +++++--- .../components/WalletReceive/index.tsx | 2 +- .../components/WalletSend/WalletSendForm.tsx | 5 +- packages/ui/src/dialog.tsx | 2 +- packages/ui/src/modal.tsx | 2 +- 11 files changed, 110 insertions(+), 46 deletions(-) create mode 100644 apps/abstraxion-dashboard/components/Icons/Close.tsx diff --git a/apps/abstraxion-dashboard/app/layout.tsx b/apps/abstraxion-dashboard/app/layout.tsx index fb8c8a2d..0dc78d2d 100644 --- a/apps/abstraxion-dashboard/app/layout.tsx +++ b/apps/abstraxion-dashboard/app/layout.tsx @@ -44,9 +44,7 @@ export default function RootLayout({ return ( - -
{children}
- + {children} diff --git a/apps/abstraxion-dashboard/app/page.tsx b/apps/abstraxion-dashboard/app/page.tsx index a14fd6d8..c5c635d9 100644 --- a/apps/abstraxion-dashboard/app/page.tsx +++ b/apps/abstraxion-dashboard/app/page.tsx @@ -1,5 +1,5 @@ "use client"; -import { useContext } from "react"; +import { useContext, useState } from "react"; import { useSearchParams } from "next/navigation"; import { AccountInfo } from "@/components/AccountInfo"; import { AbstraxionContext } from "@/components/AbstraxionContext"; @@ -7,6 +7,7 @@ import { Overview } from "@/components/Overview"; import { Sidebar } from "@/components/Sidebar"; import { Abstraxion } from "@/components/Abstraxion"; import { AbstraxionAccount, useAbstraxionAccount } from "../hooks"; +import Image from "next/image"; export default function Home() { const searchParams = useSearchParams(); @@ -16,7 +17,9 @@ export default function Home() { const stake = Boolean(searchParams.get("stake")); const bank = searchParams.get("bank"); const grantee = searchParams.get("grantee"); - const { isOpen, setIsOpen } = useContext(AbstraxionContext); + const { isOpen, setIsOpen, isMainnet } = useContext(AbstraxionContext); + + const [showMobileSiderbar, setShowMobileSiderbar] = useState(false); return ( <> @@ -25,30 +28,58 @@ export default function Home() { null} isOpen={true} /> ) : ( - <> - -
-
- setIsOpen(false)} isOpen={isOpen} /> - {/* Tiles */} -
- {/* Left Tiles */} -
-

- Overview -

- -

- Account Info -

- +
+ {showMobileSiderbar ? ( +
+ setShowMobileSiderbar(false)} /> +
+ ) : null} +
+ +
+ +
+
+
+ XION Logo +
+ {isMainnet ? "MAINNET" : "TESTNET"} +
+
+
setShowMobileSiderbar(true)}> +
+
+
+
+
+
+ setIsOpen(false)} isOpen={isOpen} /> + {/* Tiles */} +
+ {/* Left Tiles */} +
+

+ Overview +

+ +

+ Account Info +

+ +
+ {/* Right Tiles */} +
- {/* Right Tiles */} -
- +
)} ); diff --git a/apps/abstraxion-dashboard/components/Abstraxion/index.tsx b/apps/abstraxion-dashboard/components/Abstraxion/index.tsx index d22ae3f3..fee25da6 100644 --- a/apps/abstraxion-dashboard/components/Abstraxion/index.tsx +++ b/apps/abstraxion-dashboard/components/Abstraxion/index.tsx @@ -87,8 +87,8 @@ export const Abstraxion = ({ isOpen, onClose }: ModalProps) => { {/* TOS Footer */} {!isConnected && ( -
-
+
+
By continuing, you agree to and acknowledge that you have read and understand the @@ -98,15 +98,15 @@ export const Abstraxion = ({ isOpen, onClose }: ModalProps) => { .
-
+

Powered by

-
+
diff --git a/apps/abstraxion-dashboard/components/AbstraxionWallets/index.tsx b/apps/abstraxion-dashboard/components/AbstraxionWallets/index.tsx index f945f387..d0a65863 100644 --- a/apps/abstraxion-dashboard/components/AbstraxionWallets/index.tsx +++ b/apps/abstraxion-dashboard/components/AbstraxionWallets/index.tsx @@ -243,7 +243,7 @@ export const AbstraxionWallets = () => { {isGeneratingNewWallet ? ( ) : ( -
+

Welcome diff --git a/apps/abstraxion-dashboard/components/Icons/Close.tsx b/apps/abstraxion-dashboard/components/Icons/Close.tsx new file mode 100644 index 00000000..3d28da26 --- /dev/null +++ b/apps/abstraxion-dashboard/components/Icons/Close.tsx @@ -0,0 +1,23 @@ +export const CloseIcon = ({ + color = "black", + onClick, +}: { + color?: string; + onClick: VoidFunction; +}) => ( + + + +); diff --git a/apps/abstraxion-dashboard/components/Icons/index.ts b/apps/abstraxion-dashboard/components/Icons/index.ts index 0e9db569..6523e037 100644 --- a/apps/abstraxion-dashboard/components/Icons/index.ts +++ b/apps/abstraxion-dashboard/components/Icons/index.ts @@ -6,3 +6,4 @@ export { CopyIcon } from "./Copy"; export { AvatarIcon } from "./Avatar"; export { ChevronDownIcon } from "./ChevronDown"; export { WalletIcon } from "./Wallet"; +export { CloseIcon } from "./Close"; diff --git a/apps/abstraxion-dashboard/components/Sidebar.tsx b/apps/abstraxion-dashboard/components/Sidebar.tsx index 530a8b7b..3b3bb889 100644 --- a/apps/abstraxion-dashboard/components/Sidebar.tsx +++ b/apps/abstraxion-dashboard/components/Sidebar.tsx @@ -5,11 +5,15 @@ import { usePathname } from "next/navigation"; import Image from "next/image"; import { useContext } from "react"; import { AbstraxionContext, AbstraxionContextProps } from "./AbstraxionContext"; -import { WalletIcon } from "./Icons"; +import { CloseIcon, WalletIcon } from "./Icons"; const NAV_OPTIONS = [{ text: "home", path: "/" }]; -export function Sidebar() { +interface SidebarProps { + onClose?: VoidFunction; +} + +export function Sidebar({ onClose }: SidebarProps) { const pathname = usePathname(); const { isMainnet, setIsOpen } = useContext( AbstraxionContext, @@ -57,15 +61,19 @@ export function Sidebar() {
XION Logo -
- {isMainnet ? "MAINNET" : "TESTNET"} -
+ {!onClose ? ( +
+ {isMainnet ? "MAINNET" : "TESTNET"} +
+ ) : ( + + )}
diff --git a/apps/abstraxion-dashboard/components/WalletReceive/index.tsx b/apps/abstraxion-dashboard/components/WalletReceive/index.tsx index 6e50446c..e57e0183 100644 --- a/apps/abstraxion-dashboard/components/WalletReceive/index.tsx +++ b/apps/abstraxion-dashboard/components/WalletReceive/index.tsx @@ -28,7 +28,7 @@ export function WalletReceive({ className="ui-text-white" onPointerDownOutside={(e: any) => e.preventDefault()} > - +
diff --git a/apps/abstraxion-dashboard/components/WalletSend/WalletSendForm.tsx b/apps/abstraxion-dashboard/components/WalletSend/WalletSendForm.tsx index 458d05cb..2461c1d8 100644 --- a/apps/abstraxion-dashboard/components/WalletSend/WalletSendForm.tsx +++ b/apps/abstraxion-dashboard/components/WalletSend/WalletSendForm.tsx @@ -241,7 +241,10 @@ export function WalletSendForm({
-

+

{account.id}

diff --git a/packages/ui/src/dialog.tsx b/packages/ui/src/dialog.tsx index d1af9e32..ed713701 100644 --- a/packages/ui/src/dialog.tsx +++ b/packages/ui/src/dialog.tsx @@ -34,7 +34,7 @@ const DialogContent = React.forwardRef<
Date: Tue, 26 Mar 2024 13:11:13 -0500 Subject: [PATCH 2/2] Added changeset --- .changeset/kind-beans-return.md | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 .changeset/kind-beans-return.md diff --git a/.changeset/kind-beans-return.md b/.changeset/kind-beans-return.md new file mode 100644 index 00000000..8c2f73bd --- /dev/null +++ b/.changeset/kind-beans-return.md @@ -0,0 +1,6 @@ +--- +"abstraxion-dashboard": minor +"@burnt-labs/ui": minor +--- + +Adapted dashboard for better mobile UI