build: update env variables according to nextjs docs

.env

@@ -0,0 +1,12 @@
+APP_NAME=Bitcoin Beach
+APP_URI=https://bitcoinbeach.com
+GRAPHQL_HOSTNAME=api.mainnet.galoy.io
+GRAPHQL_HOSTNAME_INTERNAL=api.galoy-name-galoy.svc.cluster.local
+
+PLAY_STORE_LINK=https://play.google.com/store/apps/details?id=com.galoyapp
+APP_STORE_LINK=https://apps.apple.com/app/bitcoin-beach-wallet/id1531383905
+APK_LINK=https://storage.googleapis.com/bitcoin-beach-wallet/latest.apk
+
+GRAPHQL_URI=https://$GRAPHQL_HOSTNAME/graphql
+GRAPHQL_SUBSCRIPTION_URI=wss://$GRAPHQL_HOSTNAME/graphql
+GRAPHQL_URI_INTERNAL=http://$GRAPHQL_HOSTNAME_INTERNAL/graphql

.gitignore

@@ -14,14 +14,10 @@ tsconfig.tsbuildinfo
 
 # misc
 .DS_Store
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
+.env*.local
 
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 public/env.js
-.env
 .vscode/

README.md

@@ -15,7 +15,7 @@ Galoy-Pay uses query, mutation, and subscription operations from the Galoy's gra
 In the project directory, create a file name `.env.local` and fill it with
 
 ```
-NEXT_PUBLIC_GRAPHQL_HOSTNAME='api.staging.galoy.io'
+GRAPHQL_HOSTNAME='api.staging.galoy.io'
 ```
 
 (or use your custom API URL), then run

components/header.tsx

@@ -2,16 +2,14 @@ import Navbar from "react-bootstrap/Navbar"
 import Container from "react-bootstrap/Container"
 import Image from "react-bootstrap/Image"
 
-function Header() {
+export default function Header({ link }: { link: string }) {
   return (
     <Navbar bg="dark">
       <Container>
-        <Navbar.Brand href="https://bitcoinbeach.com">
+        <Navbar.Brand href={link}>
           <Image src="/BBLogo.png" rounded />
         </Navbar.Brand>
       </Container>
     </Navbar>
   )
 }
-
-export default Header

lib/download.ts

@@ -24,7 +24,3 @@ export const getOS = () => {
 
   return undefined
 }
-
-export const playStoreLink = "https://play.google.com/store/apps/details?id=com.galoyapp"
-export const appStoreLink = "https://apps.apple.com/app/bitcoin-beach-wallet/id1531383905"
-export const apkLink = "https://storage.googleapis.com/bitcoin-beach-wallet/latest.apk"

lib/graphql.tsx

@@ -8,15 +8,16 @@ import {
 } from "@apollo/client"
 import { WebSocketLink } from "@apollo/client/link/ws"
 import { getMainDefinition } from "@apollo/client/utilities"
+import getConfig from "next/config"
 
-import { GRAPHQL_URI, GRAPHQL_SUBSCRIPTION_URI } from "./config"
+const { publicRuntimeConfig } = getConfig()
 
 const httpLink = new HttpLink({
-  uri: GRAPHQL_URI,
+  uri: publicRuntimeConfig.graphqlUri,
 })
 
 const wsLink = new WebSocketLink({
-  uri: GRAPHQL_SUBSCRIPTION_URI,
+  uri: publicRuntimeConfig.graphqlSubscriptionUri,
   options: {
     reconnect: true,
   },

next.config.js

@@ -4,4 +4,22 @@ module.exports = {
       { source: "/.well-known/lnurlp/:username", destination: "/api/lnurlp/:username" },
     ]
   },
+  serverRuntimeConfig: {
+    // we need an internal dns to properly propagate the ip related headers to api
+    // if we use the api endpoints, nginx will rewrite the header to prevent spoofing
+    // for example: "api.galoy-name-galoy.svc.cluster.local"
+    graphqlUriInternal: process.env.GRAPHQL_URI_INTERNAL,
+  },
+  publicRuntimeConfig: {
+    appName: process.env.APP_NAME,
+    appUri: process.env.APP_URI,
+    graphqlUri: process.env.GRAPHQL_URI,
+    graphqlSubscriptionUri: process.env.GRAPHQL_SUBSCRIPTION_URI,
+    storeLinks: {
+      android: process.env.PLAY_STORE_LINK,
+      ios: process.env.APP_STORE_LINK,
+      huawei: process.env.APK_LINK,
+      apk: process.env.APK_LINK,
+    },
+  },
 }

pages/[username].tsx

@@ -3,13 +3,18 @@ import Row from "react-bootstrap/Row"
 import Col from "react-bootstrap/Col"
 import Card from "react-bootstrap/Card"
 import Container from "react-bootstrap/Container"
+import Button from "react-bootstrap/Button"
 import Image from "react-bootstrap/Image"
 import { gql, useQuery } from "@apollo/client"
 
 import ReceiveAmount from "../components/receive-amount"
 import ReceiveNoAmount from "../components/receive-no-amount"
+import getConfig from "next/config"
 
-import { getOS, playStoreLink, appStoreLink } from "../lib/download"
+import { getOS } from "../lib/download"
+
+const { publicRuntimeConfig } = getConfig()
+const stores = publicRuntimeConfig.storeLinks
 
 const RECIPIENT_WALLET_ID = gql`
   query accountDefaultWallet($username: Username!) {
@@ -30,12 +35,12 @@ export default function Receive() {
     },
   })
 
-  const os = getOS()
-
   if (error) return <div className="error">{error.message}</div>
   if (loading) return <div className="loading">Loading...</div>
   if (!data) return null
 
+  const os = getOS()
+
   const { id: recipientWalletId, walletCurrency: recipientWalletCurrency } =
     data.accountDefaultWallet
 
@@ -67,22 +72,33 @@ export default function Receive() {
 
             <Card.Body>
               {os === "android" && (
-                <a href={playStoreLink}>
+                <a href={stores.android}>
                   <Image src="/google-play-badge.png" height="40px" rounded />
                 </a>
               )}
               {os === "ios" && (
-                <a href={playStoreLink}>
+                <a href={stores.ios}>
                   <Image src="/apple-app-store.png" height="40px" rounded />
                 </a>
               )}
+              {os === "huawei" && (
+                <Button
+                  style={{ width: 150 }}
+                  href={stores.apk}
+                  block
+                  variant="outline-dark"
+                >
+                  Download APK
+                  <br /> for Android
+                </Button>
+              )}
               {os === undefined && (
                 <div>
-                  <a href={appStoreLink}>
+                  <a href={stores.ios}>
                     <Image src="/apple-app-store.png" height="45px" rounded />
                   </a>
                   &nbsp;
-                  <a href={playStoreLink}>
+                  <a href={stores.android}>
                     <Image src="/google-play-badge.png" height="45px" rounded />
                   </a>
                 </div>

pages/_app.tsx

@@ -4,11 +4,14 @@ import "./index.css"
 import Head from "next/head"
 import dynamic from "next/dynamic"
 import { NextPage } from "next"
+import getConfig from "next/config"
 
 import Header from "../components/header"
 
 const GraphQLProvider = dynamic(() => import("../lib/graphql"), { ssr: false })
 
+const { publicRuntimeConfig } = getConfig()
+
 export default function Layout({
   Component,
   pageProps,
@@ -24,7 +27,7 @@ export default function Layout({
         <meta name="theme-color" content="#000000" />
         <meta
           name="description"
-          content="Bitcoin Beach official lightning network node"
+          content={publicRuntimeConfig.appName + " official lightning network node"}
         />
 
         <script
@@ -42,10 +45,10 @@ export default function Layout({
     `,
           }}
         />
-        <title>BitcoinBeach Lightning Node</title>
+        <title>{publicRuntimeConfig.appName} Lightning Node</title>
       </Head>
       <GraphQLProvider>
-        <Header />
+        <Header link={publicRuntimeConfig.appUri} />
         <Component {...pageProps} />
       </GraphQLProvider>
     </>

pages/api/lnurlp/[username].ts

@@ -9,8 +9,9 @@ import {
   InMemoryCache,
 } from "@apollo/client"
 import type { NextApiRequest, NextApiResponse } from "next"
+import getConfig from "next/config"
 
-import { GRAPHQL_URI_INTERNAL } from "../../../lib/config"
+const { serverRuntimeConfig } = getConfig()
 
 const ipForwardingMiddleware = new ApolloLink((operation, forward) => {
   operation.setContext(({ headers = {} }) => ({
@@ -28,7 +29,7 @@ const client = new ApolloClient({
   link: concat(
     ipForwardingMiddleware,
     new HttpLink({
-      uri: GRAPHQL_URI_INTERNAL,
+      uri: serverRuntimeConfig.graphqlUriInternal,
     }),
   ),
   cache: new InMemoryCache(),

pages/download.tsx

@@ -4,41 +4,44 @@ import Container from "react-bootstrap/Container"
 import Row from "react-bootstrap/Row"
 import Col from "react-bootstrap/Col"
 import Button from "react-bootstrap/Button"
+import getConfig from "next/config"
 
-import { getOS, playStoreLink, appStoreLink, apkLink } from "../lib/download"
+import { getOS } from "../lib/download"
+
+const { publicRuntimeConfig } = getConfig()
+const ios = publicRuntimeConfig.storeLinks.ios
+const stores = {
+  ...publicRuntimeConfig.storeLinks,
+  ios: (ios || "").replace("https://apps.apple.com/", "itms-apps://itunes.apple.com/"),
+}
 
 function DownloadApp() {
   const os = getOS()
-
-  if (os === "android") {
-    window.location.replace("https://play.google.com/store/apps/details?id=com.galoyapp")
-  } else if (os === "ios") {
-    window.location.replace(
-      "itms-apps://itunes.apple.com/app/bitcoin-beach-wallet/id1531383905",
-    )
+  if (os) {
+    window.location.replace(stores[os])
   }
 
   return (
     <Container>
       <br />
-      <h3>Download the Bitcoin Beach Wallet</h3>
+      <h3>Download the {publicRuntimeConfig.appName} Wallet</h3>
       <br />
       <Row>
         <Col>
-          <a href={appStoreLink}>
+          <a href={ios}>
             <Image src="/apple-app-store.png" rounded />
           </a>
           <br />
           <br />
         </Col>
         <Col>
-          <a href={playStoreLink}>
+          <a href={stores.android}>
             <Image src="/google-play-badge.png" rounded />
           </a>
         </Col>
         <Col>
           <div style={{ width: 200 }}>
-            <Button href={apkLink} block variant="outline-dark">
+            <Button href={stores.apk} block variant="outline-dark">
               Download APK
               <br /> for Android
             </Button>
@@ -47,13 +50,13 @@ function DownloadApp() {
       </Row>
       <Row>
         <Col>
-          <QRCode value={appStoreLink} size={200} />
+          <QRCode value={ios} size={200} />
         </Col>
         <Col>
-          <QRCode value={playStoreLink} size={200} />
+          <QRCode value={stores.android} size={200} />
         </Col>
         <Col>
-          <QRCode value={apkLink} size={200} />
+          <QRCode value={stores.apk} size={200} />
         </Col>
       </Row>
     </Container>

pages/index.tsx

@@ -5,8 +5,7 @@ import Card from "react-bootstrap/Card"
 import ListGroup from "react-bootstrap/ListGroup"
 import Jumbotron from "react-bootstrap/Jumbotron"
 import { gql, useQuery } from "@apollo/client"
-
-import { GRAPHQL_URI } from "../lib/config"
+import getConfig from "next/config"
 
 const GET_NODE_STATS = gql`
   query nodeIds {
@@ -16,9 +15,11 @@ const GET_NODE_STATS = gql`
   }
 `
 
+const { publicRuntimeConfig } = getConfig()
+
 function Home() {
   const nodeUrl =
-    GRAPHQL_URI.indexOf("testnet") === -1
+    publicRuntimeConfig.graphqlUri.indexOf("staging") === -1
       ? `https://1ml.com/node/`
       : `https://1ml.com/testnet/node/`
 
@@ -29,7 +30,7 @@ function Home() {
       <br />
       <Row>
         <Col>
-          <h2>Connect to the Bitcoin Beach Lightning Node</h2>
+          <h2>Connect to the {publicRuntimeConfig.appName} Lightning Node</h2>
           <br />
           <Jumbotron>
             <Container>
@@ -54,8 +55,11 @@ function Home() {
                           ) : loading ? (
                             "Loading..."
                           ) : (
-                            <a href={nodeUrl + `${data.globals.nodesIds[0]}`}>
-                              Connect the Bitcoin Beach Lightning node
+                            <a
+                              target="_blank"
+                              href={nodeUrl + `${data.globals.nodesIds[0]}`}
+                            >
+                              Connect to the {publicRuntimeConfig.appName} Lightning node
                             </a>
                           )}
                         </ListGroup.Item>