chore(pay): use app directory in pay

GaloyMoney · Feb 13, 2024 · 97c6853 · 97c6853
1 parent 1f330dc
commit 97c6853
Show file tree

Hide file tree

Showing 29 changed files with 504 additions and 529 deletions.
diff --git a/apps/pay/app/[username]/layout.tsx b/apps/pay/app/[username]/layout.tsx
@@ -0,0 +1,15 @@
+import React from "react"
+
+import AppLayout from "@/components/Layouts/AppLayout"
+
+export default function UserNameLayout({
+  children,
+  params,
+}: {
+  children: React.ReactNode
+  params: {
+    username: string
+  }
+}) {
+  return <AppLayout username={params.username}>{children}</AppLayout>
+}
diff --git a/apps/pay/pages/[username].tsx → apps/pay/app/[username]/page.tsx b/apps/pay/pages/[username].tsx → apps/pay/app/[username]/page.tsx
@@ -1,5 +1,5 @@
+"use client"
 import Link from "next/link"
-import { useRouter } from "next/router"
 import React from "react"
 import Container from "react-bootstrap/Container"
 import Image from "react-bootstrap/Image"
@@ -8,15 +8,18 @@ import Head from "next/head"
 
 import { gql } from "@apollo/client"
 
-import ParsePayment from "../components/ParsePOSPayment"
-import PinToHomescreen from "../components/PinToHomescreen"
+import { useSearchParams } from "next/navigation"
 
-import CurrencyDropdown from "../components/Currency/currency-dropdown"
+import ParsePayment from "../../components/ParsePOSPayment"
+import PinToHomescreen from "../../components/PinToHomescreen"
 
-import { useAccountDefaultWalletsQuery } from "../lib/graphql/generated"
+import CurrencyDropdown from "../../components/Currency/currency-dropdown"
 
-import reducer, { ACTIONS } from "./_reducer"
-import styles from "./_user.module.css"
+import { useAccountDefaultWalletsQuery } from "../../lib/graphql/generated"
+
+import reducer, { ACTIONS } from "../_reducer"
+
+import styles from "../_user.module.css"
 
 gql`
   query accountDefaultWallets($username: Username!) {
@@ -28,11 +31,18 @@ gql`
   }
 `
 
-function ReceivePayment() {
-  const router = useRouter()
-  const { username, memo, display } = router.query
-  const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent)
-  const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent)
+type ReceivePaymentProps = {
+  params: {
+    username: string
+  }
+}
+
+function ReceivePayment({ params }: ReceivePaymentProps) {
+  const searchParams = useSearchParams()
+  const query = searchParams ? Object.fromEntries(searchParams.entries()) : {}
+
+  const { memo, display } = query
+  const { username } = params
 
   let accountUsername: string
   if (!username) {
@@ -81,7 +91,7 @@ function ReceivePayment() {
 
   return (
     <>
-      {router.query.username ? (
+      {username ? (
         <Container className={styles.payment_container}>
           <Head>
             <link
@@ -124,7 +134,7 @@ function ReceivePayment() {
                     style={{
                       border: "none",
                       outline: "none",
-                      width: isIOS || isSafari ? "72px" : "56px",
+                      width: "56px",
                       height: "42px",
                       fontSize: "18px",
                       backgroundColor: "white",
@@ -134,16 +144,17 @@ function ReceivePayment() {
                     showOnlyFlag={true}
                     onSelectedDisplayCurrencyChange={(newDisplayCurrency) => {
                       localStorage.setItem("display", newDisplayCurrency)
-                      router.push(
-                        {
-                          query: { ...router.query, display: newDisplayCurrency },
-                        },
-                        undefined,
-                        { shallow: true },
+                      window.history.pushState(
+                        {},
+                        "",
+                        `${window.location.pathname}?${new URLSearchParams({
+                          ...query,
+                          display: newDisplayCurrency,
+                        }).toString()}`,
                       )
+
                       setTimeout(() => {
-                        // hard reload to re-calculate currency
-                        // in a future PR we can manage state globally for selected display currency
+                        // Hard reload to re-calculate currency
                         window.location.reload()
                       }, 100)
                     }}
@@ -157,6 +168,7 @@ function ReceivePayment() {
                 dispatch={dispatch}
                 defaultWalletCurrency={data?.accountDefaultWallet.walletCurrency}
                 walletId={data?.accountDefaultWallet.id}
+                username={accountUsername}
               />
             </>
           )}

diff --git a/apps/pay/pages/[username]/print.tsx → apps/pay/app/[username]/print/page.tsx b/apps/pay/pages/[username]/print.tsx → apps/pay/app/[username]/print/page.tsx
@@ -1,18 +1,22 @@
-import Row from "react-bootstrap/Row"
+"use client"
 import Col from "react-bootstrap/Col"
+import Row from "react-bootstrap/Row"
 import Card from "react-bootstrap/Card"
 import Container from "react-bootstrap/Container"
 import ReactToPrint from "react-to-print"
 import { bech32 } from "bech32"
 import { QRCode } from "react-qrcode-logo"
 import { useRef } from "react"
-import { useRouter } from "next/router"
 
-export default function Print() {
+export default function Print({
+  params,
+}: {
+  params: {
+    username: string
+  }
+}) {
+  const { username } = params
   const componentRef = useRef<HTMLDivElement | null>(null)
-
-  const router = useRouter()
-  const username = router.query.username as string
   const url = new URL(window.location.href)
   const unencodedLnurl = `${url.protocol}//${url.host}/.well-known/lnurlp/${username}`
   const lnurl = bech32.encode(

diff --git a/apps/pay/pages/_reducer.tsx → apps/pay/app/_reducer.tsx b/apps/pay/pages/_reducer.tsx → apps/pay/app/_reducer.tsx
diff --git a/apps/pay/pages/_user.module.css → apps/pay/app/_user.module.css b/apps/pay/pages/_user.module.css → apps/pay/app/_user.module.css
diff --git a/apps/pay/pages/index.css → apps/pay/app/globals.css b/apps/pay/pages/index.css → apps/pay/app/globals.css
@@ -1,17 +1,13 @@
-@import url("https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@200;300;400;600;700&display=swap");
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
 
 body {
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu",
-    "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace;
-}
-
 .error {
   color: red;
   margin: 20px auto;

diff --git a/apps/pay/pages/_app.tsx → apps/pay/app/layout.tsx b/apps/pay/pages/_app.tsx → apps/pay/app/layout.tsx
@@ -1,29 +1,28 @@
-// Disable no-unassigned-import rule because we are importing css files
-// eslint-disable-next-line
-import "bootstrap/dist/css/bootstrap.min.css"
-// eslint-disable-next-line
-import "./index.css"
-import Script from "next/script"
-import { NextPage } from "next"
-import dynamic from "next/dynamic"
+import type { Metadata } from "next"
+import { Inter_Tight } from "next/font/google"
+
+// eslint-disable-next-line import/no-unassigned-import
+import "./globals.css"
+
+// eslint-disable-next-line import/no-unassigned-import
+import "bootstrap/dist/css/bootstrap.css"
+
 import Head from "next/head"
-import { useRouter } from "next/router"
+import Script from "next/script"
+
+import { ApolloWrapper } from "@/components/apollo-wrapper"
+import { APP_DESCRIPTION } from "@/config/config"
 
-import AppLayout from "../components/Layouts/AppLayout"
-import { APP_DESCRIPTION } from "../config/config"
+const inter = Inter_Tight({ subsets: ["latin"] })
 
-const GraphQLProvider = dynamic(() => import("../lib/graphql"), { ssr: false })
+export const metadata: Metadata = {
+  title: "Blink Cash Register",
+  description: "Blink official lightning network node",
+}
 
-export default function Layout({
-  Component,
-  pageProps,
-}: {
-  Component: NextPage
-  pageProps: Record<string, unknown>
-}) {
-  const { username } = useRouter().query
+export default function RootLayout({ children }: { children: React.ReactNode }) {
   return (
-    <>
+    <html lang="en">
       <Head>
         <meta charSet="utf-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1" />
@@ -44,11 +43,9 @@ export default function Layout({
       gtag('config', 'UA-181044262-1');
     `}
       </Script>
-      <GraphQLProvider>
-        <AppLayout username={username}>
-          <Component {...pageProps} />
-        </AppLayout>
-      </GraphQLProvider>
-    </>
+      <body className={inter.className}>
+        <ApolloWrapper>{children}</ApolloWrapper>
+      </body>
+    </html>
   )
 }
diff --git a/apps/pay/pages/index.tsx → apps/pay/app/page.tsx b/apps/pay/pages/index.tsx → apps/pay/app/page.tsx
@@ -1,4 +1,5 @@
-import React from "react"
+"use client"
+import React, { useEffect } from "react"
 import Card from "react-bootstrap/Card"
 import Col from "react-bootstrap/Col"
 import Container from "react-bootstrap/Container"
@@ -7,7 +8,7 @@ import ListGroup from "react-bootstrap/ListGroup"
 import Row from "react-bootstrap/Row"
 import { gql, useQuery } from "@apollo/client"
 
-import { useRouter } from "next/router"
+import { useRouter } from "next/navigation"
 
 import CurrencyDropdown from "../components/Currency/currency-dropdown"
 import { getClientSideGqlConfig } from "../config/config"
@@ -25,24 +26,22 @@ function Home() {
     ? `https://mempool.space/signet/lightning/node/`
     : `https://mempool.space/lightning/node/`
   const { loading, error, data } = useQuery(GET_NODE_STATS)
-  const [selectedDisplayCurrency, setSelectedDisplayCurrency] = React.useState(
-    localStorage.getItem("display") ?? "USD",
-  )
+  const [selectedDisplayCurrency, setSelectedDisplayCurrency] =
+    React.useState<string>("USD")
+
+  useEffect(() => {
+    const displayCurrency = localStorage.getItem("display")
+    if (displayCurrency) {
+      setSelectedDisplayCurrency(displayCurrency)
+    }
+  }, [])
 
   const router = useRouter()
   const [username, setUsername] = React.useState<string>("")
 
   const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
     event.preventDefault()
-
-    router.push(
-      {
-        pathname: username,
-        query: { display: selectedDisplayCurrency },
-      },
-      undefined,
-      { shallow: true },
-    )
+    router.push(`${username}?display=${selectedDisplayCurrency}`, { scroll: true })
   }
 
   return (

diff --git a/apps/pay/pages/setuppwa/index.tsx → apps/pay/app/setuppwa/page.tsx b/apps/pay/pages/setuppwa/index.tsx → apps/pay/app/setuppwa/page.tsx
@@ -1,15 +1,38 @@
-import { useRouter } from "next/router"
-import React from "react"
+"use client"
+import { useRouter } from "next/navigation"
+import React, { useEffect } from "react"
 
 import CurrencyDropdown from "../../components/Currency/currency-dropdown"
 
 const SetupPwa = () => {
   const router = useRouter()
   const [username, setUsername] = React.useState<string>("")
-  const username_from_local = localStorage.getItem("username")
-  const display_currency_from_local = localStorage.getItem("display")
+
+  let username_from_local: string | null = null
+  let display_currency_from_local: string | null = null
+
+  useEffect(() => {
+    username_from_local = localStorage.getItem("username")
+    display_currency_from_local = localStorage.getItem("display")
+  }, [])
+
   const [selectedDisplayCurrency, setSelectedDisplayCurrency] = React.useState("USD")
 
+  React.useEffect(() => {
+    if (username_from_local) {
+      window.history.pushState(
+        {},
+        "",
+        `${username_from_local}??display=${display_currency_from_local}`,
+      )
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [username_from_local])
+
+  if (!username_from_local || !display_currency_from_local) {
+    return
+  }
+
   const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
     event.preventDefault()
 
@@ -21,30 +44,9 @@ const SetupPwa = () => {
       localStorage.setItem("display", selectedDisplayCurrency)
     }
 
-    router.push(
-      {
-        pathname: `${username}`,
-        query: { display: selectedDisplayCurrency },
-      },
-      undefined,
-      { shallow: true },
-    )
+    router.push(`${username}?display=${selectedDisplayCurrency}`)
   }
 
-  React.useEffect(() => {
-    if (username_from_local) {
-      router.push(
-        {
-          pathname: `${username_from_local}`,
-          query: { display: display_currency_from_local },
-        },
-        undefined,
-        { shallow: true },
-      )
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [username_from_local])
-
   if (!username_from_local) {
     return (
       <div className="setup-pwa">