feat: added transaction and balance in basboard (#3352)

* feat(dashboard): added transaction and balance in basboard * fix(dashboard): added BUCK back * chore(dashboard): linux EOL * fix(dashboard): pnpm out of sync rebase * fix(dashboard): fix formatting * chore: address pr feedback * feat: misc Ui changes * chore(feat): address pr feedback, Ui changes rebase * chore: remove logo from public * chore: misc changes * chore: address pr feedback * chore: address pr feedback * chore: sync pnpm --------- Co-authored-by: Siddharth <[email protected]>
GaloyMoney · Oct 17, 2023 · 5562bc6 · 5562bc6
1 parent c570942
commit 5562bc6
Show file tree

Hide file tree

Showing 41 changed files with 4,722 additions and 1,622 deletions.
diff --git a/apps/dashboard/.env b/apps/dashboard/.env
@@ -1,5 +1,5 @@
+# REPLACE THIS IT IS FOR TESTING
 NEXTAUTH_URL=https://c890-2405-201-301c-5b67-89d6-bd56-6afb-6294.ngrok-free.app
-PORT=3001
 NEXTAUTH_SECRET="thisismysecret"
 # 2db7666c39074da4b399e8b5116ef2c6 
 # 2cc1869e52ad47df848a6519b63bb4f4
diff --git a/apps/dashboard/.gitignore b/apps/dashboard/.gitignore
@@ -33,3 +33,7 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+
+
+.env.local
diff --git a/apps/dashboard/app/api/auth/[...nextauth]/route.ts b/apps/dashboard/app/api/auth/[...nextauth]/route.ts
@@ -1,49 +1,65 @@
+import NextAuth, { AuthOptions } from "next-auth";
 import { fetchUserData } from "@/services/graphql/queries/me-data";
-import NextAuth from "next-auth"
+import { env } from "@/env";
+import { ApolloQueryResult } from "@apollo/client";
+import { MeQuery } from "@/services/graphql/generated";
 
-const type = "oauth" as const // as ProviderType
+declare module "next-auth" {
+  interface Profile {
+    id: string;
+  }
+  interface Session {
+    sub: string | null;
+    accessToken: string;
+    userData: ApolloQueryResult<MeQuery>;
+  }
+}
 
-export const authOptions = {
-  // Configure one or more authentication providers
+const type = "oauth" as const;
+export const authOptions: AuthOptions = {
   providers: [
     {
       id: "blink",
-      clientId: process.env.CLIENT_ID,
-      clientSecret: process.env.CLIENT_SECRET,
-      wellKnown: "http://127.0.0.1:4444/.well-known/openid-configuration",
-      useSecureCookies: false,
+      clientId: env.CLIENT_ID,
+      clientSecret: env.CLIENT_SECRET,
+      wellKnown: `${env.HYDRA_PUBLIC}/.well-known/openid-configuration`,
       authorization: {
         params: { scope: "offline transactions:read payments:send" },
       },
       idToken: false,
       name: "Blink",
       type,
       profile(profile) {
-        console.log({ profile }, "profile123");
         return {
           id: profile.sub,
-          // email: profile.email,
         };
       },
     },
-    // ...add more providers here
   ],
   debug: true,
-  secret: process.env.NEXTAUTH_SECRET as string,
+  secret: env.NEXTAUTH_SECRET,
   callbacks: {
     async jwt({ token, account, profile }) {
       // Persist the OAuth access_token and or the user id to the token right after signin
       if (account) {
         token.accessToken = account.access_token;
         token.expiresAt = account.expires_at;
         token.refreshToken = account.refresh_token;
-        token.id = profile.id;
+        token.id = profile?.id;
       }
       return token;
     },
     async session({ session, token, user }) {
-      const userData = await fetchUserData(token.accessToken); 
-      // Send properties to the client, like an access_token from a provider.
+      if (
+        !token.accessToken ||
+        !token.sub ||
+        typeof token.accessToken !== "string" ||
+        typeof token.sub !== "string"
+      ) {
+        throw new Error("Invalid token");
+      }
+
+      const userData = await fetchUserData(token.accessToken);
       session.sub = token.sub;
       session.accessToken = token.accessToken;
       session.userData = userData;
@@ -52,6 +68,6 @@ export const authOptions = {
   },
 };
 
-const handler = NextAuth(authOptions)
+const handler = NextAuth(authOptions);
 
-export { handler as GET, handler as POST }
+export { handler as GET, handler as POST };
diff --git a/apps/dashboard/app/favicon.ico b/apps/dashboard/app/favicon.ico
diff --git a/apps/dashboard/app/globals.css b/apps/dashboard/app/globals.css
@@ -1,3 +1,43 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+:root {
+  --transparent: rgba(0, 0, 0, 0);
+  --white: #ffffff;
+  --black: #000000;
+  --lightGrey: #cfd9e2;
+  --lighterGrey: #e6ebef;
+  --lightBlue: #3553ff;
+  --darkGrey: #1d1d1d;
+  --blue: #3050c4;
+  --orange: #ff7e1c;
+  --sky: #c3ccff;
+  --primary: #fc5805;
+  --primary3: #fd800b;
+  --primary4: #fe990d;
+  --primary5: #ffad0d;
+  --blue5: #4453e2;
+  --grey0: #3a3c51;
+  --grey1: #61637a;
+  --grey2: #9292a0;
+  --grey3: #aeaeb8;
+  --grey4: #e2e2e4;
+  --grey5: #f2f2f4;
+  --loaderForeground: #ecebeb;
+  --loaderBackground: #f3f3f3;
+  --green: #00a700;
+  --error: #dc2626;
+  --error9: #fee2e2;
+  --warning: #f59e0b;
+}
+
+[data-joy-color-scheme="light"] {
+  --inputColor: var(--black);
+  --primaryColor: var(--primary);
+}
+
+[data-joy-color-scheme="dark"] {
+  --inputColor: var(--white);
+  --primaryColor: var(--primary4);
+}
diff --git a/apps/dashboard/app/layout.tsx b/apps/dashboard/app/layout.tsx
@@ -1,13 +1,11 @@
 import SessionProvider from "@/components/session-provider";
 import "./globals.css";
 import type { Metadata } from "next";
-import { getServerSession } from "next-auth";
-import { Inter_Tight } from "next/font/google";
 import { authOptions } from "./api/auth/[...nextauth]/route";
-import Sidebar from "@/components/side-bar";
 import Header from "@/components/header";
-
-const inter = Inter_Tight({ subsets: ["latin"] });
+import Sidebar from "@/components/side-bar";
+import { getServerSession } from "next-auth";
+import ThemeRegistry from "@/theme/theme-registry";
 
 export const metadata: Metadata = {
   title: "Create Next App",
@@ -23,16 +21,22 @@ export default async function RootLayout({
 
   return (
     <html lang="en">
-      <body className={inter.className}>
-        <SessionProvider session={session}>
-          <div style={{ display: "flex", minHeight: "100vh" }}>
-            <Sidebar />
-            <div style={{ flexGrow: 1, overflow: "auto" }}>
-              <Header />
-              {children}
-            </div>
-          </div>
-        </SessionProvider>
+      <body>
+        <ThemeRegistry>
+          <SessionProvider session={session}>
+            {session?.sub ? (
+              <div style={{ display: "flex", minHeight: "100vh" }}>
+                <Sidebar />
+                <div style={{ flexGrow: 1, overflow: "auto" }}>
+                  <Header />
+                  {children}
+                </div>
+              </div>
+            ) : (
+              <>{children}</>
+            )}
+          </SessionProvider>
+        </ThemeRegistry>
       </body>
     </html>
   );

diff --git a/apps/dashboard/app/loading.tsx b/apps/dashboard/app/loading.tsx
@@ -0,0 +1,12 @@
+import { CircularProgress } from "@mui/joy";
+import React from "react";
+
+function Loading() {
+  return (
+    <div className="flex justify-center items-center min-h-screen">
+      <CircularProgress />
+    </div>
+  );
+}
+
+export default Loading;
diff --git a/apps/dashboard/app/page.tsx b/apps/dashboard/app/page.tsx
@@ -1,39 +1,18 @@
-import { NextRequest } from "next/server";
 import { getServerSession } from "next-auth";
 import { authOptions } from "./api/auth/[...nextauth]/route";
-import { apollo } from "../services/graphql";
-import Link from "next/link";
 import PriceContainer from "@/components/price-container/price-container";
-import { Container } from "@mui/material";
+import ContentContainer from "@/components/content-container";
 
-export default async function Home(req: NextRequest) {
+export default async function Home() {
   const session = await getServerSession(authOptions);
-  const isAuthed = session?.sub ?? false;
-  if (!isAuthed) {
-    return (
-      <>
-        <p>not logged in</p>
-        <a href="/api/auth/signin">Sign in</a>
-      </>
-    );
-  }
-
-  const AccountDetails = session.userData.data.me.defaultAccount.wallets;
-  const DefaultAccountId = session.userData.data.me.defaultAccount.id;
+  const walletDetails =
+    session?.userData?.data?.me?.defaultAccount?.wallets || [];
 
   return (
     <main>
-      {isAuthed && (
-        <Container>
-          <PriceContainer
-            DefaultAccountId={DefaultAccountId}
-            AccountDetails={AccountDetails}
-          ></PriceContainer>
-          <p>logged in </p>
-          <p>UserId: {session.sub}</p>
-          <Link href={`/transaction`}>transactions</Link>
-        </Container>
-      )}
+      <ContentContainer>
+        <PriceContainer walletDetails={walletDetails}></PriceContainer>
+      </ContentContainer>
     </main>
   );
 }
diff --git a/apps/dashboard/app/transaction/page.tsx b/apps/dashboard/app/transaction/page.tsx
diff --git a/apps/dashboard/app/transactions/page.tsx b/apps/dashboard/app/transactions/page.tsx
@@ -0,0 +1,58 @@
+import { getServerSession } from "next-auth";
+import React from "react";
+import { authOptions } from "../api/auth/[...nextauth]/route";
+import TransactionDetails from "@/components/transaction-details/transaction-details-table";
+import ContentContainer from "@/components/content-container";
+import {
+  fetchFirstTransactions,
+  fetchPaginatedTransactions,
+} from "@/services/graphql/queries/get-transactions";
+import TransactionCard from "@/components/transaction-details/transaction-card-item";
+import PageNumber from "@/components/transaction-details/page-number";
+
+interface TransactionDetailsSearchParams {
+  cursor: string;
+  direction: "next" | "previous";
+}
+
+export default async function page({
+  searchParams,
+}: {
+  searchParams: TransactionDetailsSearchParams;
+}) {
+  const { cursor, direction } = searchParams;
+  const session = await getServerSession(authOptions);
+  const token = session?.accessToken;
+  if (!token || typeof token !== "string") {
+    throw new Error("invalid token");
+  }
+
+  const numberOfTransactions = 50;
+  let response;
+  if (cursor && direction) {
+    response = await fetchPaginatedTransactions(
+      token,
+      direction,
+      cursor,
+      numberOfTransactions,
+    );
+  } else {
+    response = await fetchFirstTransactions(token, numberOfTransactions);
+  }
+
+  const rows = response?.edges?.map((edge) => ({ node: edge.node })) ?? [];
+  const pageInfo = response?.pageInfo;
+  return (
+    <ContentContainer>
+      {rows.length > 0 ? (
+        <>
+          <TransactionDetails rows={rows} />
+          <TransactionCard rows={rows} />
+          <PageNumber pageInfo={pageInfo}></PageNumber>
+        </>
+      ) : (
+        <span>No Transactions Found</span>
+      )}
+    </ContentContainer>
+  );
+}
diff --git a/apps/dashboard/app/url.ts b/apps/dashboard/app/url.ts
@@ -0,0 +1,9 @@
+interface UrlInfo {
+  title: string;
+  protected: boolean;
+}
+
+export const URLS: Record<string, UrlInfo> = {
+  "/": { title: "Home", protected: true },
+  "/transactions": { title: "Transactions", protected: true },
+};
diff --git a/apps/dashboard/components/colot-toggle.tsx → apps/dashboard/components/color-toggle.tsx b/apps/dashboard/components/colot-toggle.tsx → apps/dashboard/components/color-toggle.tsx
@@ -1,4 +1,4 @@
-"use client"
+"use client";
 import * as React from "react";
 import { useColorScheme } from "@mui/joy/styles";
 import IconButton, { IconButtonProps } from "@mui/joy/IconButton";

diff --git a/apps/dashboard/components/content-container.tsx b/apps/dashboard/components/content-container.tsx
@@ -0,0 +1,40 @@
+import { Box } from "@mui/joy";
+import React from "react";
+
+interface ContentContainerProps {
+  children: React.ReactNode;
+}
+
+function ContentContainer({ children }: ContentContainerProps) {
+  return (
+    <Box
+      component="main"
+      className="MainContent"
+      sx={{
+        px: {
+          xs: 2,
+          md: 6,
+        },
+        pt: {
+          xs: 3,
+          sm: 3,
+          md: 3,
+        },
+        pb: {
+          xs: 2,
+          sm: 2,
+          md: 3,
+        },
+        flex: 1,
+        display: "flex",
+        flexDirection: "column",
+        minWidth: 0,
+        gap: 1,
+      }}
+    >
+      {children}
+    </Box>
+  );
+}
+
+export default ContentContainer;