feat(pay): ui improvement

rebase

apps/pay/app/[username]/layout.tsx

@@ -1,19 +1,45 @@
 import React from "react"
 
+import { getClient } from "../ssr-client"
+
+import { defaultCurrencyMetadata } from "../currency-metadata"
+
 import UsernameLayoutContainer from "@/components/layouts/username-layout"
+import { InvoiceProvider } from "@/context/invoice-context"
+import {
+  AccountDefaultWalletsDocument,
+  AccountDefaultWalletsQuery,
+} from "@/lib/graphql/generated"
 
-export default function UsernameLayout({
-  children,
-  params,
-}: {
+type Props = {
   children: React.ReactNode
   params: {
     username: string
   }
-}) {
+}
+
+export default async function UsernameLayout({ children, params }: Props) {
+  const response = await getClient().query<AccountDefaultWalletsQuery>({
+    query: AccountDefaultWalletsDocument,
+    variables: { username: params.username },
+  })
+
+  const initialState = {
+    currentAmount: "0",
+    createdInvoice: false,
+    walletCurrency: response.data.accountDefaultWallet.walletCurrency,
+    walletId: response.data.accountDefaultWallet.id,
+    username: params.username,
+    pinnedToHomeScreenModalVisible: false,
+    memo: "",
+    displayCurrencyMetaData: defaultCurrencyMetadata,
+  }
+
   return (
-    <UsernameLayoutContainer username={params.username}>
-      {children}
-    </UsernameLayoutContainer>
+    <InvoiceProvider initialState={initialState}>
+      <UsernameLayoutContainer username={params.username}>
+        {children}
+      </UsernameLayoutContainer>
+    </InvoiceProvider>
   )
 }

apps/pay/app/[username]/page.tsx

@@ -1,28 +1,20 @@
 "use client"
-import Link from "next/link"
-import React from "react"
+import React, { useEffect } from "react"
 import Container from "react-bootstrap/Container"
 import Image from "react-bootstrap/Image"
 
 import Head from "next/head"
 
 import { gql } from "@apollo/client"
 
-import { useSearchParams } from "next/navigation"
-
 import ParsePayment from "../../components/parse-pos-payment"
-import PinToHomescreen from "../../components/pin-to-homescreen"
-
-import CurrencyDropdown from "../../components/currency/currency-dropdown"
-
-import { useAccountDefaultWalletsQuery } from "../../lib/graphql/generated"
 
-import reducer, { ACTIONS } from "../reducer"
+import { ACTIONS } from "../reducer"
 
 import styles from "./username.module.css"
 
 import LoadingComponent from "@/components/loading"
-import { extractSearchParams } from "@/utils/utils"
+import { useInvoiceContext } from "@/context/invoice-context"
 
 gql`
   query accountDefaultWallets($username: Username!) {
@@ -35,71 +27,30 @@ gql`
 `
 
 type Props = {
-  params: {
-    username: string
+  searchParams: {
+    memo: string
+    amount: string
   }
 }
 
-function updateCurrencyAndReload(newDisplayCurrency: string): void {
-  localStorage.setItem("display", newDisplayCurrency)
-
-  const currentURL = new URL(window.location.toString())
-  const searchParams = new URLSearchParams(window.location.search)
-  searchParams.set("display", newDisplayCurrency)
-  currentURL.search = searchParams.toString()
-
-  window.history.pushState({}, "", currentURL.toString())
-  setTimeout(() => {
-    window.location.reload()
-  }, 100)
-}
-
-function ReceivePayment({ params }: Props) {
-  const searchParams = useSearchParams()
-  const { memo } = extractSearchParams(searchParams)
+function ReceivePayment({ searchParams }: Props) {
+  const { memo, amount } = searchParams
+  const { state, dispatch } = useInvoiceContext()
+  const { username } = state
 
-  const { username } = params
+  const manifestParams = new URLSearchParams()
 
-  let accountUsername: string
-  if (!username) {
-    accountUsername = ""
-  } else {
-    accountUsername = username.toString()
-  }
+  useEffect(() => {
+    dispatch({
+      type: ACTIONS.SET_AMOUNT_FROM_PARAMS,
+      payload: amount ?? "0",
+    })
+  }, [])
 
-  const manifestParams = new URLSearchParams()
   if (memo) {
     manifestParams.set("memo", memo.toString())
   }
 
-  const {
-    data,
-    error: usernameError,
-    loading: usernameLoading,
-  } = useAccountDefaultWalletsQuery({
-    variables: { username: accountUsername },
-    skip: !accountUsername,
-  })
-
-  const [state, dispatch] = React.useReducer(reducer, {
-    currentAmount: "",
-    createdInvoice: false,
-    walletCurrency: data?.accountDefaultWallet.walletCurrency,
-    username: accountUsername,
-    pinnedToHomeScreenModalVisible: false,
-  })
-
-  React.useEffect(() => {
-    if (state.walletCurrency === data?.accountDefaultWallet.walletCurrency) {
-      return
-    }
-    dispatch({
-      type: ACTIONS.UPDATE_WALLET_CURRENCY,
-      payload: data?.accountDefaultWallet.walletCurrency,
-    })
-    dispatch({ type: ACTIONS.UPDATE_USERNAME, payload: username })
-  }, [state, username, data])
-
   return username ? (
     <Container className={styles.payment_container}>
       <Head>
@@ -109,62 +60,42 @@ function ReceivePayment({ params }: Props) {
           id="manifest"
         />
       </Head>
-      {usernameError ? (
+      {/* {false ? (
         <div className={styles.error}>
           <p>{`${usernameError.message}.`}</p>
           <p>Please check the username in your browser URL and try again.</p>
           <Link href={"/setuppwa"} onClick={() => localStorage.removeItem("username")}>
             Back
           </Link>
         </div>
-      ) : (
-        <>
-          <PinToHomescreen
-            pinnedToHomeScreenModalVisible={state.pinnedToHomeScreenModalVisible}
-            dispatch={dispatch}
-          />
-          <div className={styles.username_container}>
-            {state.createdInvoice && (
-              <button onClick={() => dispatch({ type: ACTIONS.BACK })}>
-                <Image
-                  src="/icons/chevron-left-icon.svg"
-                  alt="back button"
-                  width="10px"
-                  height="12px"
-                />
-              </button>
-            )}
-            <p className={styles.username}>{`Pay ${username}`}</p>
-            <div style={{ marginLeft: "12px", marginTop: "9px" }}>
-              <CurrencyDropdown
-                style={{
-                  border: "none",
-                  outline: "none",
-                  width: "56px",
-                  height: "42px",
-                  fontSize: "18px",
-                  backgroundColor: "white",
-                  textAlign: "center",
-                  verticalAlign: "middle",
-                }}
-                showOnlyFlag={true}
-                onSelectedDisplayCurrencyChange={updateCurrencyAndReload}
+      ) : ( */}
+      <>
+        <div className={styles.username_container}>
+          {state.createdInvoice && (
+            <button onClick={() => dispatch({ type: ACTIONS.BACK })}>
+              <Image
+                src="/icons/chevron-left-icon.svg"
+                alt="back button"
+                width="10px"
+                height="12px"
               />
-            </div>
-          </div>
-          {data && !usernameLoading && accountUsername && state ? (
-            <ParsePayment
-              state={state}
-              dispatch={dispatch}
-              defaultWalletCurrency={data?.accountDefaultWallet.walletCurrency}
-              walletId={data?.accountDefaultWallet.id}
-              username={accountUsername}
-            />
-          ) : (
-            <LoadingComponent />
+            </button>
           )}
-        </>
-      )}
+          <p className={styles.username}>{`Pay ${username}`}</p>
+        </div>
+        {username && state ? (
+          <ParsePayment
+            state={state}
+            dispatch={dispatch}
+            defaultWalletCurrency={state.walletCurrency}
+            walletId={state?.walletId}
+            username={username}
+          />
+        ) : (
+          <LoadingComponent />
+        )}
+      </>
+      {/* )} */}
     </Container>
   ) : null
 }

apps/pay/app/currency-metadata.ts

@@ -0,0 +1,10 @@
+import { Currency } from "@/lib/graphql/generated"
+
+export const defaultCurrencyMetadata: Currency = {
+  id: "USD",
+  flag: "🇺🇸",
+  name: "US Dollar",
+  symbol: "$",
+  fractionDigits: 2,
+  __typename: "Currency",
+}

apps/pay/app/reducer.tsx

@@ -2,6 +2,8 @@ import React from "react"
 
 import { MAX_INPUT_VALUE_LENGTH } from "../config/config"
 
+import { Currency } from "@/lib/graphql/generated"
+
 export const ACTIONS = {
   ADD_DIGIT: "add-digit",
   DELETE_DIGIT: "delete-digit",
@@ -14,11 +16,12 @@ export const ACTIONS = {
   PINNED_TO_HOMESCREEN_MODAL_VISIBLE: "pin-to-home-screen-modal-visible",
   BACK: "back-by-one-history",
   ADD_MEMO: "add-memo",
+  UPDATE_DISPLAY_CURRENCY_METADATA: "update-display-currency-metadata",
 }
 
 export type ACTION_TYPE = {
   type: string
-  payload?: string | string[] | (() => void) | boolean | undefined
+  payload?: string | string[] | (() => void) | boolean | undefined | Currency
 }
 
 function reducer(state: React.ComponentState, { type, payload }: ACTION_TYPE) {
@@ -39,11 +42,16 @@ function reducer(state: React.ComponentState, { type, payload }: ACTION_TYPE) {
       }
       return {
         ...state,
-        currentAmount: `${state.currentAmount || ""}${payload}`,
+        currentAmount: `${state.currentAmount || "0"}${payload}`,
       }
 
     case ACTIONS.DELETE_DIGIT:
-      if (state.currentAmount == null) return state
+      if (
+        state.currentAmount == null ||
+        state.currentAmount === "" ||
+        state.currentAmount === "0"
+      )
+        return state
       return {
         ...state,
         currentAmount: state.currentAmount?.slice(0, -1),
@@ -127,6 +135,12 @@ function reducer(state: React.ComponentState, { type, payload }: ACTION_TYPE) {
         memo: payload,
       }
 
+    case ACTIONS.UPDATE_DISPLAY_CURRENCY_METADATA:
+      return {
+        ...state,
+        displayCurrency: payload,
+      }
+
     default:
       return state
   }

apps/pay/app/sats-currency.ts

@@ -0,0 +1,10 @@
+import { Currency } from "@/lib/graphql/generated"
+
+export const satsCurrencyMetadata: Currency = {
+  id: "SAT",
+  flag: "Sats ₿",
+  name: "Satoshi",
+  symbol: "sats",
+  fractionDigits: 0,
+  __typename: "Currency",
+}

apps/pay/app/ssr-client.ts

@@ -0,0 +1,27 @@
+import { HttpLink } from "@apollo/client"
+import { registerApolloClient } from "@apollo/experimental-nextjs-app-support/rsc"
+import {
+  NextSSRApolloClient,
+  NextSSRInMemoryCache,
+} from "@apollo/experimental-nextjs-app-support/ssr"
+
+import { getClientSideGqlConfig } from "@/config/config"
+
+export const { getClient } = registerApolloClient(() => {
+  return new NextSSRApolloClient({
+    cache: new NextSSRInMemoryCache(),
+    link: new HttpLink({
+      uri: getClientSideGqlConfig().coreGqlUrl,
+      fetchOptions: { cache: "no-store" },
+
+      //   fetch: (uri, options) => {
+      //     const headersWithTrace = options?.headers || {}
+      //     propagation.inject(context.active(), headersWithTrace)
+      //     return fetch(String(uri), {
+      //       ...options,
+      //       headers: headersWithTrace,
+      //     })
+      //   },
+    }),
+  })
+})

apps/pay/components/apollo-wrapper.tsx

@@ -23,7 +23,7 @@ function makeClient() {
 
   const wsLink = new GraphQLWsLink(
     createClient({
-      url: getClientSideGqlConfig().coreGqlWebSocketUrl,
+      url: "wss://ws.blink.sv/graphql",
       retryAttempts: 12,
       connectionParams: {},
       shouldRetry: (errOrCloseEvent) => {