Add account dashboard application (#32)

* Moved dashboard to monorepo

* Fixed submodule issue

* Successfully added dashboard

* Update module resolution strategy in tsconfig

The module resolution strategy in the TypeScript configuration for the Abstraxion Dashboard app has been updated. Previously, it was set to "bundler", but has now been changed to "node" fixing an known
issue with the abstraxion package.

* Add initial commit of dashboard

A new file has been created for the initial setup of the dashboard. This forms part of the foundation for the "abstraxion-dashboard".

* Moved abstraxion to dashboard

* Resolved build errors

---------

Co-authored-by: Burnt Nerve <[email protected]>

.changeset/twenty-carrots-occur.md

@@ -0,0 +1,5 @@
+---
+"abstraxion-dashboard": patch
+---
+
+Initial commit of dashbaord

apps/abstraxion-dashboard/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

apps/abstraxion-dashboard/.gitignore

@@ -0,0 +1,36 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

apps/abstraxion-dashboard/README.md

@@ -0,0 +1,36 @@
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

apps/abstraxion-dashboard/app/globals.css

@@ -0,0 +1,8 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+@layer utilities {
+    .flex-2 {
+        flex: 2;
+    }
+}

apps/abstraxion-dashboard/app/layout.tsx

@@ -0,0 +1,54 @@
+import type { Metadata } from "next";
+import localFont from "next/font/local";
+import { Providers } from "./providers";
+
+import "@burnt-labs/ui/styles.css";
+
+import "./globals.css";
+
+const akkuratLL = localFont({
+  src: [
+    {
+      path: "../public/fonts/AkkuratLLWeb-Thin.woff2",
+      weight: "100",
+    },
+    {
+      path: "../public/fonts/AkkuratLLWeb-Light.woff2",
+      weight: "200 300",
+    },
+    {
+      path: "../public/fonts/AkkuratLLWeb-Regular.woff2",
+      weight: "400",
+    },
+    {
+      path: "../public/fonts/AkkuratLLWeb-Bold.woff2",
+      weight: "500 700",
+    },
+    {
+      path: "../public/fonts/AkkuratLLWeb-Black.woff2",
+      weight: "800 900",
+    },
+  ],
+  variable: "--font-akkuratLL",
+});
+
+export const metadata: Metadata = {
+  title: "Xion Account Dashboard",
+  description: "A dashboard for managing Xion accounts.",
+};
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <html lang="en">
+      <body className={akkuratLL.variable}>
+        <Providers>
+          <div className="ui-flex">{children}</div>
+        </Providers>
+      </body>
+    </html>
+  );
+}

apps/abstraxion-dashboard/app/page.tsx

@@ -0,0 +1,79 @@
+"use client";
+
+import { AccountInfo } from "@/components/AccountInfo";
+import { Overview } from "@/components/Overview";
+
+import { useState } from "react";
+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 interface AccountWithAuthenticator extends AbstraxionAccount {
+  authenticators: Authenticators;
+}
+
+export default function Home() {
+  const [isOpen, setIsOpen] = useState(false);
+  const { data: account } = useAbstraxionAccount();
+  const { client } = useAbstraxionSigningClient();
+  const accountBalance = useAccountBalance(account, client);
+
+  return (
+    <>
+      {!account?.bech32Address ? (
+        <div className="ui-flex ui-h-screen ui-flex-1 ui-items-center ui-justify-center ui-overflow-y-auto ui-p-6">
+          <Abstraxion onClose={() => null} isOpen={true} />
+        </div>
+      ) : (
+        <>
+          <Sidebar />
+          <div className="ui-h-screen 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">
+                    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">
+                    Account Info
+                  </h3>
+                  <AccountInfo account={account as AccountWithAuthenticator} />
+                </div>
+                {/* Right Tiles */}
+                <div className="ui-flex ui-flex-1 ui-flex-col"></div>
+              </div>
+            </div>
+          </div>
+        </>
+      )}
+    </>
+  );
+}

apps/abstraxion-dashboard/app/providers.tsx

@@ -0,0 +1,14 @@
+"use client";
+
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { AbstraxionProvider } from "../components/Abstraxion";
+
+const queryClient = new QueryClient();
+
+export function Providers({ children }: { children: React.ReactNode }) {
+  return (
+    <QueryClientProvider client={queryClient}>
+      <AbstraxionProvider>{children}</AbstraxionProvider>
+    </QueryClientProvider>
+  );
+}

apps/abstraxion-dashboard/components/Abstraxion/index.tsx

@@ -0,0 +1,77 @@
+import { useContext, useEffect, useRef } from "react";
+import { GrazProvider } from "graz";
+import { StytchProvider } from "@stytch/nextjs";
+import { ApolloProvider } from "@apollo/client";
+import {
+  AbstraxionContext,
+  AbstraxionContextProps,
+  AbstraxionContextProvider,
+} from "@/components/AbstraxionContext";
+import { apolloClient, stytchClient } from "@/lib";
+import { ModalAnchor, Modal } from "@burnt-labs/ui";
+import { AbstraxionSignin } from "@/components/AbstraxionSignin";
+import { useAbstraxionAccount } from "@/hooks";
+import { Loading } from "@/components/Loading";
+import { AbstraxionWallets } from "@/components/AbstraxionWallets";
+import { ErrorDisplay } from "@/components/ErrorDisplay";
+
+export interface ModalProps {
+  onClose: VoidFunction;
+  isOpen: boolean;
+}
+
+export const Abstraxion = ({ isOpen, onClose }: ModalProps) => {
+  const modalRef = useRef<HTMLDivElement>(null);
+
+  const { abstraxionError } = useContext(
+    AbstraxionContext,
+  ) as AbstraxionContextProps;
+
+  const { isConnected, isConnecting, isReconnecting } = useAbstraxionAccount();
+
+  useEffect(() => {
+    const closeOnEscKey = (e: any) => (e.key === "Escape" ? onClose() : null);
+    document.addEventListener("keydown", closeOnEscKey);
+    return () => {
+      document.removeEventListener("keydown", closeOnEscKey);
+    };
+  }, [onClose]);
+
+  if (!isOpen) return null;
+
+  return (
+    <ModalAnchor ref={modalRef} onClick={onClose}>
+      <Modal
+        onClick={(e: any) => {
+          e.stopPropagation();
+        }}
+      >
+        {abstraxionError ? (
+          <ErrorDisplay message={abstraxionError} onClose={onClose} />
+        ) : isConnecting || isReconnecting ? (
+          <Loading />
+        ) : isConnected ? (
+          <AbstraxionWallets />
+        ) : (
+          <AbstraxionSignin />
+        )}
+      </Modal>
+    </ModalAnchor>
+  );
+};
+
+export const AbstraxionProvider = ({
+  children,
+}: {
+  children: React.ReactNode;
+}) => {
+  return (
+    <AbstraxionContextProvider>
+      <StytchProvider stytch={stytchClient}>
+        <ApolloProvider client={apolloClient}>
+          <GrazProvider>{children}</GrazProvider>
+        </ApolloProvider>
+      </StytchProvider>
+    </AbstraxionContextProvider>
+  );
+};

apps/abstraxion-dashboard/components/AbstraxionContext/index.tsx

@@ -0,0 +1,45 @@
+import { ReactNode, createContext, useState } from "react";
+
+export interface AbstraxionContextProps {
+  connectionType: "stytch" | "graz" | "none";
+  setConnectionType: React.Dispatch<
+    React.SetStateAction<"stytch" | "graz" | "none">
+  >;
+  abstractAccount: any; // TODO: Properly define interface here
+  setAbstractAccount: React.Dispatch<any>;
+  abstraxionError: string;
+  setAbstraxionError: React.Dispatch<React.SetStateAction<string>>;
+}
+
+export const AbstraxionContext = createContext<AbstraxionContextProps>(
+  {} as AbstraxionContextProps,
+);
+
+export const AbstraxionContextProvider = ({
+  children,
+}: {
+  children: ReactNode;
+}) => {
+  const [connectionType, setConnectionType] = useState<
+    "stytch" | "graz" | "none"
+  >("none");
+  const [abstractAccount, setAbstractAccount] = useState<any | undefined>(
+    undefined,
+  );
+  const [abstraxionError, setAbstraxionError] = useState("");
+
+  return (
+    <AbstraxionContext.Provider
+      value={{
+        connectionType,
+        setConnectionType,
+        abstractAccount,
+        setAbstractAccount,
+        abstraxionError,
+        setAbstraxionError,
+      }}
+    >
+      {children}
+    </AbstraxionContext.Provider>
+  );
+};