feat: payment gateway

.circleci/config.yml

@@ -49,6 +49,7 @@ workflows:
   ci:
     jobs:
       - build_test:
+          context: GC_FE_TEST
           node_version: *node_version
       - security:
           node_version: *node_version

.env.example

@@ -0,0 +1,27 @@
+NEXT_PUBLIC_WEB3AUTH_NETWORK=
+NEXT_PUBLIC_WEB3AUTH_CLIENT_ID=
+NEXT_PUBLIC_GHOSTCLOUD_RPC_TARGET=
+NEXT_PUBLIC_GHOSTCLOUD_CHAIN_NAMESPACE=
+NEXT_PUBLIC_GHOSTCLOUD_DISPLAY_NAME=
+NEXT_PUBLIC_GHOSTCLOUD_CHAIN_ID=
+NEXT_PUBLIC_GHOSTCLOUD_ADDRESS_PREFIX=
+NEXT_PUBLIC_GHOSTCLOUD_DENOM=
+NEXT_PUBLIC_GHOSTCLOUD_URL_SCHEME=
+NEXT_PUBLIC_GHOSTCLOUD_URL_DOMAIN=
+NEXT_PUBLIC_GHOSTCLOUD_GAS_PRICE=
+NEXT_PUBLIC_GHOSTCLOUD_GAS_LIMIT_MULTIPLIER=
+NEXT_PUBLIC_GHOSTCLOUD_BANK_ACCOUNT_ADDRESS=
+NEXT_PUBLIC_NOWPAYMENT_API_KEY=
+NEXT_PUBLIC_NOWPAYMENT_API_SUBDOMAIN=
+NEXT_PUBLIC_NOWPAYMENT_PRICE_CURRENCY=
+NEXT_PUBLIC_NOWPAYMENT_PAY_CURRENCY=
+NEXT_PUBLIC_NOWPAYMENT_IS_FIXED_RATE=
+NEXT_PUBLIC_NOWPAYMENT_IS_FEE_PAID_BY_USER=
+NEXT_PUBLIC_NOWPAYMENT_PRICE_AMOUNT=
+NEXT_PUBLIC_NOWPAYMENT_IPN_CALLBACK_URL=
+NEXT_PUBLIC_NOWPAYMENT_SUCCESS_REDIRECT_URL=
+BANK_ACCOUNT_KEY=
+TRANSFER_AMOUNT=
+TRANSFER_AMOUNT_GAS_BUFFER=
+IPN_SECRET_KEY=
+LOG_LEVEL=

.gitignore

@@ -33,3 +33,5 @@ yarn-error.log*
 next-env.d.ts
 
 .idea/
+.env.local
+.env.production.local

__tests__/components/address-display.test.tsx

@@ -4,9 +4,6 @@ import { render, screen } from "@testing-library/react"
 import { useQuery } from "react-query"
 import AddressDisplay from "../../components/address-display"
 
-jest.mock("react-query", () => ({
-  useQuery: jest.fn(),
-}))
 describe("AddressDisplay", () => {
   it("renders correct elements", () => {
     useQuery.mockReturnValue({

__tests__/components/balance-display.test.tsx

@@ -4,10 +4,6 @@ import { render, screen } from "@testing-library/react"
 import { useQuery } from "react-query"
 import BalanceDisplay from "../../components/balance-display"
 
-jest.mock("react-query", () => ({
-  useQuery: jest.fn(),
-}))
-
 describe("BalanceDisplay", () => {
   it("renders correct elements", () => {
     useQuery.mockReturnValue({

__tests__/components/create-deployment.test.tsx

@@ -2,12 +2,6 @@
 import { render, screen, fireEvent, waitFor } from "@testing-library/react"
 import CreateDeploymentModal from "../../components/create-deployment"
 
-jest.mock("react-query", () => ({
-  useQuery: jest.fn(),
-  useQueryClient: jest.fn(),
-  useMutation: jest.fn(),
-}))
-
 describe("CreateDeploymentModal", () => {
   it("renders form elements", async () => {
     render(<CreateDeploymentModal isOpen={true} onClose={jest.fn()} />)

__tests__/components/dashboard.test.tsx

@@ -4,19 +4,6 @@ import { useQuery } from "react-query"
 import Dashboard from "../../components/dashboard"
 import useWeb3AuthStore from "../../store/web3-auth"
 
-jest.mock("react-query", () => ({
-  useQuery: jest.fn(),
-  useQueryClient: jest.fn(),
-  useMutation: jest.fn(),
-}))
-jest.mock("../../store/web3-auth", () => jest.fn())
-jest.mock("../../hooks/useAuthHandlers", () => {
-  return jest.fn().mockReturnValue({
-    handleLogin: jest.fn(),
-    handleLogout: jest.fn(),
-  })
-})
-
 describe("Dashboard", () => {
   beforeEach(() => {
     useWeb3AuthStore.mockReturnValue({

__tests__/components/header.test.tsx

@@ -2,13 +2,6 @@ import "@testing-library/jest-dom"
 import { render, screen } from "@testing-library/react"
 import Header from "../../components/header"
 
-jest.mock("../../hooks/useAuthHandlers", () => {
-  return jest.fn().mockReturnValue({
-    handleLogin: jest.fn(),
-    handleLogout: jest.fn(),
-  })
-})
-
 describe("Header", () => {
   it("renders correct components", () => {
     render(<Header />)

__tests__/components/menu.test.tsx

@@ -1,58 +1,34 @@
 // @ts-nocheck
 import { render, screen, fireEvent } from "@testing-library/react"
 import Menu from "../../components/menu"
+import { handleLogin, handleLogout } from "../../jest.setup"
 import useWeb3AuthStore from "../../store/web3-auth"
-import useAuthHandlers from "../../hooks/useAuthHandlers"
-
-jest.mock("../../store/web3-auth", () => jest.fn())
-jest.mock("../../hooks/useAuthHandlers", () =>
-  jest.fn().mockReturnValue({
-    handleLogin: jest.fn(),
-    handleLogout: jest.fn(),
-  }),
-)
 
 describe("Menu", () => {
+  beforeEach(() => {
+    useWeb3AuthStore.mockReturnValue({ provider: null })
+  })
+
   it("renders Login button when provider is not available", () => {
-    useWeb3AuthStore.mockReturnValue({
-      provider: null,
-    })
     render(<Menu />)
     expect(screen.getByText("Login")).toBeInTheDocument()
   })
 
   it("renders Dashboard and Logout buttons when provider is available", () => {
-    useWeb3AuthStore.mockReturnValue({
-      provider: {},
-    })
+    useWeb3AuthStore.mockReturnValue({ provider: {} })
     render(<Menu />)
     expect(screen.getByText("Dashboard")).toBeInTheDocument()
     expect(screen.getByText("Logout")).toBeInTheDocument()
   })
 
   it("calls handleLogin when Login button is clicked", () => {
-    useWeb3AuthStore.mockReturnValue({
-      provider: null,
-    })
-    const handleLogin = jest.fn()
-    useAuthHandlers.mockReturnValue({
-      handleLogin,
-      handleLogout: jest.fn(),
-    })
     render(<Menu />)
     fireEvent.click(screen.getByText("Login"))
     expect(handleLogin).toHaveBeenCalled()
   })
 
   it("calls handleLogout when Logout button is clicked", () => {
-    useWeb3AuthStore.mockReturnValue({
-      provider: "mockProvider",
-    })
-    const handleLogout = jest.fn()
-    useAuthHandlers.mockReturnValue({
-      handleLogin: jest.fn(),
-      handleLogout,
-    })
+    useWeb3AuthStore.mockReturnValue({ provider: {} })
     render(<Menu />)
     fireEvent.click(screen.getByText("Logout"))
     expect(handleLogout).toHaveBeenCalled()

__tests__/pages/dashboard.test.tsx

@@ -4,7 +4,6 @@ import { render, screen } from "@testing-library/react"
 import Dashboard from "../../pages/dashboard"
 import useWeb3AuthStore from "../../store/web3-auth"
 
-jest.mock("../../store/web3-auth", () => jest.fn())
 describe("Dashboard", () => {
   it("renders login message if not connected", () => {
     useWeb3AuthStore.mockReturnValue({

__tests__/pages/index.test.tsx

@@ -2,13 +2,6 @@ import "@testing-library/jest-dom"
 import { render, screen } from "@testing-library/react"
 import Home from "../../pages"
 
-jest.mock("../../hooks/useAuthHandlers", () => {
-  return jest.fn().mockReturnValue({
-    handleLogin: jest.fn(),
-    handleLogout: jest.fn(),
-  })
-})
-
 describe("Home", () => {
   it("renders the home page", () => {
     render(<Home />)

components/address-display.tsx

@@ -8,7 +8,7 @@ import {
 } from "@chakra-ui/react"
 import { LuCopy, LuCopyCheck } from "react-icons/lu"
 import { truncateAddress } from "../helpers/address"
-import { useFetchAddress } from "../lib/ghostcloud"
+import { useFetchAddress } from "../hooks/ghostcloud"
 
 export default function AddressDisplay() {
   const addrBgColor = useColorModeValue(

components/balance-display.tsx

@@ -1,5 +1,5 @@
-import { useFetchBalance } from "../lib/ghostcloud"
 import { Box, Flex, Spinner, useColorModeValue } from "@chakra-ui/react"
+import { useFetchBalance } from "../hooks/ghostcloud"
 
 export default function BalanceDisplay() {
   const { data: balance, isLoading: isBalanceLoading } = useFetchBalance()

components/create-deployment.tsx

@@ -15,9 +15,9 @@ import {
   Text,
   Textarea,
 } from "@chakra-ui/react"
-import { useCreateDeployment } from "../lib/ghostcloud"
 import FileUpload from "./file-upload"
-import { useDisplayError } from "../helpers/errors"
+import { useCreateDeployment } from "../hooks/ghostcloud"
+import { useDisplayError } from "../helpers/toast"
 
 export interface DeploymentData {
   name: string

components/dashboard.tsx

@@ -13,7 +13,6 @@ import {
   HStack,
 } from "@chakra-ui/react"
 import { DeleteIcon, EditIcon } from "@chakra-ui/icons"
-import { useFetchMetas } from "../lib/ghostcloud"
 import { useEffect, useState } from "react"
 import CreateDeploymentModal from "./create-deployment"
 import UpdateDeploymentModal from "./update-deployment"
@@ -24,6 +23,7 @@ import {
 } from "../config/ghostcloud-chain"
 import useWeb3AuthStore from "../store/web3-auth"
 import { truncateAddress } from "../helpers/address"
+import { useListDeployments } from "../hooks/ghostcloud"
 
 function createUrl(name: string, address: string) {
   return `${GHOSTCLOUD_URL_SCHEME}://${name}-${address}.${GHOSTCLOUD_URL_DOMAIN}`
@@ -40,7 +40,7 @@ const Dashboard = () => {
   const [selectedDeploymentDomain, setSelectedDeploymentDomain] =
     useState<string>("")
   const [address, setAddress] = useState<string>("")
-  const { data: metas, isLoading: isMetaLoading } = useFetchMetas()
+  const { data: metas, isLoading: isMetaLoading } = useListDeployments()
   const store = useWeb3AuthStore()
 
   useEffect(() => {

components/header.tsx

@@ -18,6 +18,8 @@ import Menu from "./menu"
 import AddressDisplay from "./address-display"
 import useWeb3AuthStore from "../store/web3-auth"
 import BalanceDisplay from "./balance-display"
+import { useEffect } from "react"
+import { useHandleLogin } from "../hooks/auth/handle-login"
 
 function Header() {
   const { colorMode, toggleColorMode } = useColorMode()
@@ -26,8 +28,7 @@ function Header() {
     "modes.dark.background",
   )
   const logo = useColorModeValue(logoLight, logoDark)
-  const store = useWeb3AuthStore()
-  const isConnected = store.isConnected()
+  const { isConnected } = useWeb3AuthStore()
 
   return (
     <header>
@@ -46,7 +47,7 @@ function Header() {
               justifyContent={"flex-start"}
               py={2}
             >
-              {isConnected ? (
+              {isConnected() ? (
                 <VStack alignItems={"start"}>
                   <AddressDisplay />
                   <BalanceDisplay />

components/menu.tsx

@@ -9,14 +9,18 @@ import {
 import useWeb3AuthStore from "../store/web3-auth"
 import { TfiMenu } from "react-icons/tfi"
 import Link from "next/link"
-import useAuthHandlers from "../hooks/useAuthHandlers"
 import React from "react"
+import useHandlePayment from "../hooks/payment/handle-payment"
+import { useHandleLogin } from "../hooks/auth/handle-login"
+import { useHandleLogout } from "../hooks/auth/handle-logout"
 
 type LoginProps = {}
 
 const Menu: React.FC<LoginProps> = () => {
   const store = useWeb3AuthStore() // To access the provider
-  const { handleLogin, handleLogout } = useAuthHandlers()
+  const { mutate: handleLogin } = useHandleLogin()
+  const { mutate: handleLogout } = useHandleLogout()
+  const { handlePayment } = useHandlePayment()
 
   return (
     <ChakraMenu>
@@ -32,13 +36,14 @@ const Menu: React.FC<LoginProps> = () => {
       <MenuList>
         {store.provider ? (
           <>
+            <MenuItem onClick={handlePayment}>Buy Tokens</MenuItem>
             <Link href="/dashboard" passHref>
               <MenuItem>Dashboard</MenuItem>
             </Link>
-            <MenuItem onClick={handleLogout}>Logout</MenuItem>
+            <MenuItem onClick={() => handleLogout()}>Logout</MenuItem>
           </>
         ) : (
-          <MenuItem onClick={handleLogin}>Login</MenuItem>
+          <MenuItem onClick={() => handleLogin()}>Login</MenuItem>
         )}
       </MenuList>
     </ChakraMenu>

components/remove-deployment.tsx

@@ -13,8 +13,8 @@ import {
 } from "@chakra-ui/react"
 import { Formik, Form, Field, ErrorMessage, FormikHelpers } from "formik"
 import * as Yup from "yup"
-import { useRemoveDeployment } from "../lib/ghostcloud"
-import { useDisplayError } from "../helpers/errors"
+import { useRemoveDeployment } from "../hooks/ghostcloud"
+import { useDisplayError } from "../helpers/toast"
 
 const RemoveDeploymentModal = ({
   isOpen,

components/update-deployment.tsx

@@ -15,9 +15,9 @@ import {
   Text,
   Textarea,
 } from "@chakra-ui/react"
-import { useUpdateDeployment } from "../lib/ghostcloud"
 import FileUpload from "./file-upload"
-import { useDisplayError } from "../helpers/errors"
+import { useDisplayError } from "../helpers/toast"
+import { useUpdateDeployment } from "../hooks/ghostcloud"
 
 export interface DeploymentData {
   name: string

config/ghostcloud-chain.ts

@@ -34,6 +34,15 @@ export const GHOSTCLOUD_MODAL_PRIMARY_COLOR = "gray"
 export const GHOSTCLOUD_GAS_PRICE = GasPrice.fromString(
   GHOSTCLOUD_GAS_PRICE_AMOUNT.concat(GHOSTCLOUD_GAS_PRICE_DENOM),
 )
+export const GHOSTCLOUD_BANK_ACCOUNT_ADDRESS = getBankAccountAddress()
+
+export function getBankAccountAddress() {
+  const address = process.env.NEXT_PUBLIC_GHOSTCLOUD_BANK_ACCOUNT_ADDRESS
+  if (!address) {
+    throw new Error("Bank account address is not set")
+  }
+  return address
+}
 
 export const GHOSTCLOUD_CHAIN_CONFIG = {
   chainNamespace: GHOSTCLOUD_CHAIN_NAMESPACE,