chore: fix dashboard bug for invalid token, added dev mode for captcha (

#3410) * chore: fix display dashboard bug for invalid token, added dev mode for captcha rebase rebase * chore: changes in captcha dev mode * chore: addressing comments rebase rebase * fix: next_auth_url port * fix; price notation for small amount * chore: misc chagnes --------- Co-authored-by: Siddharth <[email protected]>
GaloyMoney · Oct 28, 2023 · dc58090 · dc58090
1 parent 90762bc
commit dc58090
Show file tree

Hide file tree

Showing 5 changed files with 89 additions and 21 deletions.
diff --git a/apps/consent/app/components/captcha-challenge/index.tsx b/apps/consent/app/components/captcha-challenge/index.tsx
@@ -1,8 +1,15 @@
 "use client"
 import { memo, useCallback, useEffect } from "react"
+
 import { toast } from "react-toastify"
 
 import { sendPhoneCode } from "@/app/login/phone/server-actions"
+declare global {
+  interface Window {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    initGeetest: (options: any, callback: (captchaObj: any) => void) => void
+  }
+}
 
 const CaptchaChallengeComponent: React.FC<{
   id: string
@@ -14,7 +21,6 @@ const CaptchaChallengeComponent: React.FC<{
   }
 }> = ({ id, challenge, formData }) => {
   const captchaHandler = useCallback(
-    /* eslint @typescript-eslint/ban-ts-comment: "off" */
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     (captchaObj: any) => {
       const onSuccess = async () => {
@@ -38,7 +44,6 @@ const CaptchaChallengeComponent: React.FC<{
   )
 
   useEffect(() => {
-    // @ts-ignore-next-line error
     window.initGeetest(
       {
         gt: id,

diff --git a/apps/consent/app/login/phone/server-actions.ts b/apps/consent/app/login/phone/server-actions.ts
@@ -9,6 +9,7 @@ import { GetCaptchaChallengeResponse, SendPhoneCodeResponse } from "./phone-logi
 import { LoginType, SubmitValue } from "@/app/index.types"
 import authApi from "@/services/galoy-auth"
 import { hydraClient } from "@/services/hydra"
+import { env } from "@/env"
 
 export const getCaptchaChallenge = async (
   _prevState: unknown,
@@ -64,6 +65,23 @@ export const getCaptchaChallenge = async (
   const res = await authApi.requestPhoneCaptcha(customHeaders)
   const id = res.id
   const challenge = res.challengeCode
+
+  if (env.NODE_ENV === "development") {
+    const params = new URLSearchParams({
+      login_challenge,
+    })
+    cookies().set(
+      login_challenge,
+      JSON.stringify({
+        loginType: LoginType.phone,
+        value: phone,
+        remember: remember,
+      }),
+      { secure: true },
+    )
+    redirect(`/login/verification?${params}`)
+  }
+
   return {
     error: false,
     message: "success",

diff --git a/apps/consent/env.ts b/apps/consent/env.ts
@@ -10,12 +10,14 @@ export const env = createEnv({
     GRAPHQL_ENDPOINT: z.string().default("http://localhost:4455/graphql"),
     OTEL_EXPORTER_OTLP_ENDPOINT: z.string().default("http://localhost:4318"),
     TRACING_SERVICE_NAME: z.string().default("consent"),
+    NODE_ENV: z.string(),
   },
   runtimeEnv: {
     CORE_AUTH_URL: process.env.CORE_AUTH_URL,
     HYDRA_ADMIN_URL: process.env.HYDRA_ADMIN_URL,
     GRAPHQL_ENDPOINT: process.env.GRAPHQL_ENDPOINT,
     OTEL_EXPORTER_OTLP_ENDPOINT: process.env.OTEL_EXPORTER_OTLP_ENDPOINT,
     TRACING_SERVICE_NAME: process.env.TRACING_SERVICE_NAME,
+    NODE_ENV: process.env.NODE_ENV,
   },
 })
diff --git a/apps/dashboard/app/layout.tsx b/apps/dashboard/app/layout.tsx
@@ -1,3 +1,4 @@
+import { redirect } from "next/navigation"
 import type { Metadata } from "next"
 import { getServerSession } from "next-auth"
 
@@ -19,7 +20,9 @@ export const metadata: Metadata = {
 
 export default async function RootLayout({ children }: { children: React.ReactNode }) {
   const session = await getServerSession(authOptions)
-
+  if (!session || !session?.userData || !session?.accessToken) {
+    redirect("/api/auth/signin")
+  }
   return (
     <html lang="en">
       <body>

diff --git a/apps/dashboard/components/price-container/price-container.tsx b/apps/dashboard/components/price-container/price-container.tsx
@@ -2,6 +2,7 @@ import React from "react"
 import { Box } from "@mui/joy"
 
 import PriceContainerCard from "./price-card-container"
+
 export interface WalletData {
   __typename: string
   accountId: string
@@ -15,6 +16,23 @@ export interface PriceContainerProps {
   walletDetails: ReadonlyArray<WalletData>
 }
 
+const formatBalance = (
+  balance: number,
+  walletCurrency: "BTC" | "USD",
+): [number, string] => {
+  if (walletCurrency === "BTC") {
+    const btcBalance = balance / 100000000
+    if (btcBalance < 0.00001) {
+      return [balance, "sats"]
+    } else {
+      return [btcBalance, "BTC"]
+    }
+  } else {
+    const usdBalance = balance / 100
+    return [usdBalance, "USD"]
+  }
+}
+
 const PriceContainer: React.FC<PriceContainerProps> = ({ walletDetails }) => {
   const btcWallet = walletDetails.find((wallet) => wallet.walletCurrency === "BTC")
   const usdWallet = walletDetails.find((wallet) => wallet.walletCurrency === "USD")
@@ -34,24 +52,46 @@ const PriceContainer: React.FC<PriceContainerProps> = ({ walletDetails }) => {
           flexWrap: "wrap",
         }}
       >
-        {btcWallet && (
-          <PriceContainerCard
-            id={btcWallet.id}
-            walletCurrency={btcWallet.walletCurrency}
-            balance={btcWallet.balance / 100000000}
-            pendingIncomingBalance={btcWallet.pendingIncomingBalance / 100000000}
-            currencySymbol="BTC"
-          />
-        )}
-        {usdWallet && (
-          <PriceContainerCard
-            id={usdWallet.id}
-            walletCurrency={usdWallet.walletCurrency}
-            balance={usdWallet.balance / 100}
-            pendingIncomingBalance={usdWallet.pendingIncomingBalance / 100}
-            currencySymbol="USD"
-          />
-        )}
+        {btcWallet &&
+          (() => {
+            const [balance, currencySymbol] = formatBalance(
+              btcWallet.balance,
+              btcWallet.walletCurrency,
+            )
+            const [pendingBalance] = formatBalance(
+              btcWallet.pendingIncomingBalance,
+              btcWallet.walletCurrency,
+            )
+            return (
+              <PriceContainerCard
+                id={btcWallet.id}
+                walletCurrency={btcWallet.walletCurrency}
+                balance={balance}
+                pendingIncomingBalance={pendingBalance}
+                currencySymbol={currencySymbol}
+              />
+            )
+          })()}
+        {usdWallet &&
+          (() => {
+            const [balance, currencySymbol] = formatBalance(
+              usdWallet.balance,
+              usdWallet.walletCurrency,
+            )
+            const [pendingBalance] = formatBalance(
+              usdWallet.pendingIncomingBalance,
+              usdWallet.walletCurrency,
+            )
+            return (
+              <PriceContainerCard
+                id={usdWallet.id}
+                walletCurrency={usdWallet.walletCurrency}
+                balance={balance}
+                pendingIncomingBalance={pendingBalance}
+                currencySymbol={currencySymbol}
+              />
+            )
+          })()}
       </Box>
     </Box>
   )