Merge pull request #127 from burnt-labs/nerve/dashboardMainnetReskin

Dashboard Re-skin for Mainnet
burnt-labs · Mar 7, 2024 · 49dc124 · 49dc124
2 parents 7fe6f1d + 00167f0
commit 49dc124
Show file tree

Hide file tree

Showing 10 changed files with 82 additions and 48 deletions.
diff --git a/.changeset/khaki-bats-try.md b/.changeset/khaki-bats-try.md
@@ -0,0 +1,5 @@
+---
+"abstraxion-dashboard": minor
+---
+
+Updated UI for mainnet release
diff --git a/apps/abstraxion-dashboard/app/page.tsx b/apps/abstraxion-dashboard/app/page.tsx
@@ -1,21 +1,21 @@
 "use client";
-import { useState } from "react";
+import { useContext } from "react";
 import { useSearchParams } from "next/navigation";
 import { AccountInfo } from "@/components/AccountInfo";
+import { AbstraxionContext } from "@/components/AbstraxionContext";
 import { Overview } from "@/components/Overview";
 import { Sidebar } from "@/components/Sidebar";
 import { useAccountBalance } from "@/hooks/useAccountBalance";
-import { ChevronDownIcon, WalletIcon } from "@/components/Icons";
 import { Abstraxion } from "@/components/Abstraxion";
 import {
   AbstraxionAccount,
   useAbstraxionAccount,
   useAbstraxionSigningClient,
 } from "../hooks";
 
+
 export default function Home() {
   const searchParams = useSearchParams();
-  const [isOpen, setIsOpen] = useState(false);
   const { data: account } = useAbstraxionAccount();
   const { client } = useAbstraxionSigningClient();
   const accountBalance = useAccountBalance(account, client);
@@ -24,6 +24,7 @@ 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);
 
   return (
     <>
@@ -34,36 +35,18 @@ export default function Home() {
       ) : (
         <>
           <Sidebar />
-          <div className="ui-h-screen ui-flex-1 ui-overflow-y-auto ui-p-6">
+          <div className="ui-h-screen ui-bg-black ui-flex-1 ui-overflow-y-auto ui-p-6">
             <div className="ui-relative">
               <Abstraxion onClose={() => setIsOpen(false)} isOpen={isOpen} />
-              {/* Header */}
-              <div className="ui-mb-8 ui-flex ui-items-center ui-justify-between">
-                <h1 className="ui-font-akkuratLL ui-leading-wide ui-text-4xl ui-font-bold">
-                  Welcome Home!
-                </h1>
-                <button
-                  className="ui-flex ui-h-12 ui-w-52 ui-items-center ui-rounded ui-bg-slate-100"
-                  onClick={() => setIsOpen(true)}
-                >
-                  <div className="ui-mx-2 ui-h-8 ui-w-8 ui-items-center ui-justify-center ui-rounded-full ui-bg-black">
-                    <WalletIcon color="white" backgroundColor="black" />
-                  </div>
-                  <p className="ui-font-akkuratLL ui-font-medium">
-                    Personal Account
-                  </p>
-                  <ChevronDownIcon />
-                </button>
-              </div>
               {/* Tiles */}
               <div className="ui-mx-auto ui-flex ui-max-w-7xl">
                 {/* Left Tiles */}
                 <div className="ui-flex-grow-2 ui-flex ui-flex-col">
-                  <h3 className="ui-font-akkuratLL ui-mb-4 ui-text-base ui-font-bold">
+                  <h3 className="ui-font-akkuratLL ui-mb-4 ui-text-2xl ui-text-white ui-font-bold">
                     Overview
                   </h3>
                   <Overview balanceInfo={accountBalance} />
-                  <h3 className="ui-font-akkuratLL ui-mb-4 ui-mt-8 ui-text-base ui-font-bold ui-text-black">
+                  <h3 className="ui-font-akkuratLL ui-mb-4 ui-mt-8 ui-text-2xl ui-font-bold ui-text-white">
                     Account Info
                   </h3>
                   <AccountInfo account={account as AbstraxionAccount} />

diff --git a/apps/abstraxion-dashboard/components/AbstraxionContext/index.tsx b/apps/abstraxion-dashboard/components/AbstraxionContext/index.tsx
@@ -14,6 +14,8 @@ export interface AbstraxionContextProps {
   apiUrl: string;
   chainInfo: ChainInfo;
   isMainnet: boolean;
+  isOpen: boolean;
+  setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
 }
 
 export const AbstraxionContext = createContext<AbstraxionContextProps>(
@@ -30,6 +32,7 @@ export const AbstraxionContextProvider = ({
     undefined,
   );
   const [abstraxionError, setAbstraxionError] = useState("");
+  const [isOpen, setIsOpen] = useState(false);
 
   const serializedChainInfo = getEnvStringOrThrow(
     "NEXT_PUBLIC_DEFAULT_CHAIN_INFO",
@@ -60,6 +63,8 @@ export const AbstraxionContextProvider = ({
         apiUrl,
         chainInfo,
         isMainnet,
+        isOpen,
+        setIsOpen,
       }}
     >
       {children}

diff --git a/apps/abstraxion-dashboard/components/AccountInfo.tsx b/apps/abstraxion-dashboard/components/AccountInfo.tsx
@@ -14,13 +14,13 @@ export const AccountInfo = ({ account }: { account?: AbstraxionAccount }) => {
       return (
         <div
           key={authenticator.id}
-          className="ui-flex ui-items-center ui-px-4 ui-mb-3 ui-h-16 ui-bg-neutral-50 ui-rounded-lg"
+          className="ui-flex ui-items-center ui-px-4 ui-mb-3 ui-h-16 ui-bg-black ui-rounded-lg"
         >
-          <div className="ui-flex ui-w-10 ui-h-10 ui-bg-black ui-items-center ui-justify-center ui-rounded-full">
+          <div className="ui-flex ui-w-10 ui-h-10 ui-bg-white/20 ui-items-center ui-justify-center ui-rounded-full">
             <ScanIcon color="white" />
           </div>
           <div className="ui-ml-4 ui-flex ui-flex-1 ui-items-center ui-justify-between">
-            <p className="ui-text-black ui-text-base ui-font-normal ui-font-akkuratLL ui-leading-normal">
+            <p className="ui-text-white ui-text-base ui-font-normal ui-font-akkuratLL ui-leading-normal">
               {String(authenticator.type).toUpperCase()}
             </p>
           </div>
@@ -29,23 +29,23 @@ export const AccountInfo = ({ account }: { account?: AbstraxionAccount }) => {
     });
   };
   return (
-    <div className="ui-border ui-border-black/20 ui-p-6">
-      <h3 className="ui-text-black ui-text-sm ui-font-bold ui-font-akkuratLL ui-leading-none ui-mb-6">
+    <div className="ui-bg-white/10 ui-p-6 ui-rounded-2xl">
+      <h3 className="ui-text-white ui-text-sm ui-font-bold ui-font-akkuratLL ui-leading-none ui-mb-6">
         XION Address
       </h3>
       <div
         onClick={copyXionAddress}
-        className="ui-flex ui-cursor-pointer ui-items-center ui-justify-between ui-mb-10 ui-px-4 ui-w-full ui-h-16 ui-bg-neutral-50 ui-rounded-lg"
+        className="ui-flex ui-cursor-pointer ui-items-center ui-justify-between ui-mb-10 ui-px-4 ui-w-full ui-h-16 ui-bg-black ui-rounded-lg"
       >
-        <p className="ui-text-stone-500 ui-text-base ui-font-normal ui-font-akkuratLL ui-leading-normal">
+        <p className="ui-text-white ui-text-base ui-font-normal ui-font-akkuratLL ui-leading-normal">
           {truncateAddress(account?.id)}
         </p>
-        <CopyIcon color="black" />
+        <CopyIcon color="white" />
       </div>
       <div className="ui-flex">
         <div className="ui-flex ui-flex-1 ui-flex-col">
           <div className="ui-flex ui-items-center ui-justify-between ui-mb-6">
-            <h3 className="ui-text-black ui-text-sm ui-font-bold ui-font-akkuratLL ui-leading-none">
+            <h3 className="ui-text-white ui-text-sm ui-font-bold ui-font-akkuratLL ui-leading-none">
               Your Logins
             </h3>
             {/* TODO: Add ability to add authenticator */}

diff --git a/apps/abstraxion-dashboard/components/Icons/Wallet.tsx b/apps/abstraxion-dashboard/components/Icons/Wallet.tsx
@@ -8,17 +8,25 @@ export const WalletIcon = ({
   outlineColor?: string;
 }) => (
   <svg
-    width="32"
-    height="32"
-    viewBox="0 0 32 32"
+    width="21"
+    height="17"
+    viewBox="0 0 21 17"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
   >
-    <rect width="32" height="32" rx="16" fill={backgroundColor} />
+    <rect
+      x="1"
+      y="0.5"
+      width="17.2353"
+      height="11.9412"
+      rx="1.5"
+      stroke={color}
+    />
     <path
-      stroke={outlineColor}
-      d="M22.5967 20.5526V21.2895C22.5967 22.1 21.9335 22.7632 21.123 22.7632H10.8072C9.98929 22.7632 9.3335 22.1 9.3335 21.2895V10.9737C9.3335 10.1632 9.98929 9.5 10.8072 9.5H21.123C21.9335 9.5 22.5967 10.1632 22.5967 10.9737V11.7105H15.9651C15.1472 11.7105 14.4914 12.3737 14.4914 13.1842V19.0789C14.4914 19.8895 15.1472 20.5526 15.9651 20.5526H22.5967ZM15.9651 19.0789H23.3335V13.1842H15.9651V19.0789ZM18.9124 17.2368C18.3009 17.2368 17.8072 16.7432 17.8072 16.1316C17.8072 15.52 18.3009 15.0263 18.9124 15.0263C19.524 15.0263 20.0177 15.52 20.0177 16.1316C20.0177 16.7432 19.524 17.2368 18.9124 17.2368Z"
-      fill={color}
+      d="M1 14.1186V3.7511C1.00389 3.75308 1.00778 3.75504 1.01168 3.75699C1.56022 4.03126 2.2516 4.03078 2.79374 4.0304C2.81368 4.03039 2.83342 4.03037 2.85294 4.03037H18.1471C19.1704 4.03037 20 4.85996 20 5.88332V14.1186C20 15.142 19.1704 15.9715 18.1471 15.9715H2.85294C1.82959 15.9715 1 15.142 1 14.1186Z"
+      fill={backgroundColor}
+      stroke={color}
     />
+    <line x1="4.0293" y1="7.14844" x2="16.3822" y2="7.14844" stroke={color} />
   </svg>
 );
diff --git a/apps/abstraxion-dashboard/components/Overview.tsx b/apps/abstraxion-dashboard/components/Overview.tsx
@@ -10,14 +10,19 @@ export const Overview = ({ balanceInfo }: OverviewProps) => {
   );
 
   return (
-    <div className="ui-w-full ui-bg-gradient-to-l ui-from-slate-300 ui-via-slate-400 ui-to-slate-400 ui-rounded-2xl ui-p-6">
+    <div
+      style={{
+        backgroundImage: `url('/overviewBackground.png')`,
+      }}
+      className="ui-w-full ui-bg-cover ui-bg-no-repeat ui-bg-center ui-rounded-2xl ui-p-6 bg-fixed"
+    >
       <div className="ui-mb-6 ui-flex ui-items-center">
         <h1 className="ui-font-akkuratLL ui-mr-6 ui-text-2xl ui-font-bold ui-leading-7 ui-text-white">
           Personal Account
         </h1>
         {/* <ScanIcon color="white" /> */}
       </div>
-      <h3 className="ui-font-akkuratLL ui-text-sm ui-font-bold ui-text-white ui-text-opacity-50">
+      <h3 className="ui-font-akkuratLL ui-text-sm ui-text-white/50 ui-mb-2">
         Current Balance
       </h3>
       <div className="ui-flex ui-items-center ui-justify-between">
@@ -37,7 +42,7 @@ export const Overview = ({ balanceInfo }: OverviewProps) => {
         </div> */}
       </div>
       {/* Divider */}
-      <div className="ui-my-6 ui-h-[1px] ui-w-full ui-bg-white ui-bg-opacity-20"></div>
+      <div className="ui-my-6 ui-h-[1px] ui-w-full ui-bg-white/20"></div>
       {/* Wait for USDC */}
       {/* <div className="flex justify-between items-center mb-3">
         <p className="text-white text-base font-normal font-akkuratLL leading-normal">
@@ -61,7 +66,7 @@ export const Overview = ({ balanceInfo }: OverviewProps) => {
             <p className="ui-font-akkuratLL ui-text-base ui-font-normal ui-leading-normal ui-text-white">
               {xionBalance.amount} XION
             </p>
-            <p className="ui-font-akkuratLL ui-ml-6 ui-text-right ui-text-base ui-font-normal ui-leading-normal ui-text-white ui-text-opacity-70">
+            <p className="ui-font-akkuratLL ui-ml-6 ui-text-right ui-text-base ui-font-normal ui-leading-normal ui-text-white/70">
               ${Number(xionBalance.amount) * XION_TO_USDC_CONVERSION} USDC
             </p>
           </div>

diff --git a/apps/abstraxion-dashboard/components/Sidebar.tsx b/apps/abstraxion-dashboard/components/Sidebar.tsx
@@ -5,12 +5,15 @@ import { usePathname } from "next/navigation";
 import Image from "next/image";
 import { useContext } from "react";
 import { AbstraxionContext, AbstraxionContextProps } from "./AbstraxionContext";
+import { ChevronDownIcon, WalletIcon } from "./Icons";
 
 const NAV_OPTIONS = [{ text: "home", path: "/" }];
 
 export function Sidebar() {
   const pathname = usePathname();
-  const { isMainnet } = useContext(AbstraxionContext) as AbstraxionContextProps;
+  const { isMainnet, setIsOpen } = useContext(
+    AbstraxionContext,
+  ) as AbstraxionContextProps;
 
   const renderNavOptions = () => {
     return NAV_OPTIONS.map((option) => {
@@ -51,7 +54,7 @@ export function Sidebar() {
   };
 
   return (
-    <div className="ui-h-screen ui-bg-primary ui-text-white ui-flex ui-flex-col ui-w-64">
+    <div className="ui-h-screen ui-bg-primary ui-border-[#6C6A6A] ui-border-r-[1px] ui-text-white ui-flex ui-flex-col ui-w-64">
       <div className="ui-flex ui-items-center ui-justify-between ui-px-8 ui-pt-8">
         <Image src="/logo.png" alt="Xion Logo" width="90" height="32" />
         <div
@@ -75,6 +78,27 @@ export function Sidebar() {
           History
         </a>
       </div>
+      <div className="ui-flex ui-justify-between ui-px-4 ui-h-12 ui-w-full ui-items-center ui-rounded ui-bg-black ui-mx-auto ui-my-0">
+        <div className="ui-flex ui-items-center">
+          <div className="ui-flex ui-mr-1 ui-h-8 ui-w-8 ui-items-center ui-justify-center ui-rounded-full ui-bg-black">
+            <WalletIcon color="white" backgroundColor="black" />
+          </div>
+          <p className="ui-font-akkuratLL ui-text-white ui-font-medium">
+            Personal Account
+          </p>
+        </div>
+
+        <div
+          onClick={() => setIsOpen(true)}
+          className="ui-flex ui-items-center ui-ml-2 ui-justify-center ui-border-white/40 ui-border-[1px] ui-rounded-full ui-h-8 ui-w-8 ui-cursor-pointer"
+        >
+          <div className="ui-flex ui-flex-col">
+            <div className="ui-h-1 ui-w-1 ui-bg-white/40 ui-rounded-full ui-mb-0.5" />
+            <div className="ui-h-1 ui-w-1 ui-bg-white/40 ui-rounded-full ui-mb-0.5" />
+            <div className="ui-h-1 ui-w-1 ui-bg-white/40 ui-rounded-full" />
+          </div>
+        </div>
+      </div>
       {/* TODO: Display User Info */}
       {/* <div className="p-8">
         <div className="flex items-center">

diff --git a/apps/abstraxion-dashboard/public/overviewBackground.png b/apps/abstraxion-dashboard/public/overviewBackground.png
diff --git a/apps/abstraxion-dashboard/tailwind.config.ts b/apps/abstraxion-dashboard/tailwind.config.ts
@@ -5,6 +5,10 @@ const config: Config = {
   content: ["./components/**/*.{js,ts,jsx,tsx,mdx}", "./app/page.tsx"],
   theme: {
     extend: {
+      backgroundImage: {
+        "overview-bg":
+          "url('/apps/abstraxion-dashboard/public/overviewBackground.png')",
+      },
       colors: {
         primary: "#000",
         mainnet: "#CAF033",

diff --git a/apps/demo-app/src/app/page.tsx b/apps/demo-app/src/app/page.tsx
@@ -43,7 +43,7 @@ export default function Page(): JSX.Element {
   const oneYearFromNow = new Date();
   oneYearFromNow.setFullYear(oneYearFromNow.getFullYear() + 1);
 
-  async function handleSign() {
+  async function handleSign(): Promise<void> {
     if (client?.granteeAddress) {
       const response = await signArb?.(client.granteeAddress, arbitraryMessage);
       // eslint-disable-next-line no-console -- We log this for testing purposes.
@@ -125,7 +125,7 @@ export default function Page(): JSX.Element {
               }}
               structure="base"
             >
-              {"LOGOUT"}
+              LOGOUT
             </Button>
           ) : null}
           {signArb ? (