Merge pull request #407 from shawakash/fund

feat: adds endpoint to get the quote, webhook for moonpay to call, and changes some db attribute

.changeset/large-icons-lie.md

@@ -0,0 +1,7 @@
+---
+"@paybox/api": patch
+"@paybox/backend-common": patch
+"@paybox/openapi": patch
+---
+
+feat: adds endpoint to get the quote, webhook for moonpay to call, and changes some db attribute

.github/workflows/backend-api.yml

@@ -45,6 +45,9 @@ jobs:
           printf 'CHAT_KAFKA_ID=%s\n' "${{secrets.CHAT_KAFKA_ID}}" >> .env
           printf 'CHAT_KAFKA_URL=%s\n' "${{secrets.CHAT_KAFKA_URL}}" >> .env
           printf 'PROCESS=%s\n' "${{secrets.PROCESS}}" >> .env
+          printf 'MOONPAY_WEBHOOK_KEY=%s\n' "${{secrets.MOONPAY_WEBHOOK_KEY}}" >> .env
+          printf 'MOONPAY_API_KEY=%s\n' "${{secrets.MOONPAY_API_KEY}}" >> .env
+          printf 'MOONPAY_SECRET_KEY=%s\n' "${{secrets.MOONPAY_SECRET_KEY}}" >> .env
           cd ../..
 
       - name: docker login

apps/web/app/account/[id]/page.tsx

@@ -15,6 +15,7 @@ import { CodeWrapper } from "./Code-wrapper";
 import { Share } from "./share";
 import { CLIENT_URL } from "@paybox/common";
 import BuyButton from "./buy-button";
+import { loadMoonPay } from '@moonpay/moonpay-js';
 
 interface PageProps {
     params: { id: string }
@@ -23,6 +24,7 @@ export default async function Page({
     params,
 }: PageProps) {
     //todo: fetch all the monitor detaial like txn etc
+
 
     return (
         <>

apps/web/app/fromClient/page.tsx

@@ -1,7 +1,9 @@
 "use client";
+import { loadMoonPay } from "@moonpay/moonpay-js";
 import { getSession, useSession } from "next-auth/react";
 import { useRouter } from "next/navigation";
 import { useState, useEffect } from "react";
+import { MoonPayBuyWidget, MoonPayProvider } from '@moonpay/moonpay-react';
 
 export default function APITestPage() {
   const [name, setName] = useState<string>();
@@ -11,19 +13,38 @@ export default function APITestPage() {
    */
   const session = useSession();
   const router = useRouter();
+  const [visible, setVisible] = useState(false);
   // useEffect(() => {
   //   fetch("/api/whoami",
   //   {     cache: "no-store",
   //       next: { revalidate: 10 }})
   //     .then((res) => res.json())
   //     .then((data) => {console.log(data); setName(data.name)});
   // }, [session]);
+
   return (
     <div>
-      <div>
-        API Route From <span className="font-bold underline">Client</span>
-      </div>
-      <div onClick={() => router.push("/fromServer")}>Name: {name}</div>
+      <MoonPayProvider
+        apiKey="pk_test_vbgzACHz9ggzGLm9vEEwAWZQlnjiZ4Ux"
+        debug
+      >
+        <div>
+          API Route From <span className="font-bold underline">Client</span>
+        </div>
+        <MoonPayBuyWidget
+            variant="embedded"
+            baseCurrencyCode="usd"
+            baseCurrencyAmount="100"
+            defaultCurrencyCode="eth"
+            visible={visible}
+            paymentMethod="mobile_wallet"
+        />
+        <button onClick={() => setVisible(!visible)}>
+            Toggle widget
+        </button>
+
+        <div onClick={() => router.push("/fromServer")}>Name: {name}</div>
+      </MoonPayProvider>
     </div>
   );
 }

apps/web/components/fund-dialog.tsx

@@ -1,16 +1,21 @@
 import { Button } from "@/components/ui/button"
 import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
+    Dialog,
+    DialogContent,
+    DialogDescription,
+    DialogFooter,
+    DialogHeader,
+    DialogTitle,
+    DialogTrigger,
 } from "@/components/ui/dialog"
 import { Input } from "@/components/ui/input"
 import { Label } from "@/components/ui/label"
 import { Network } from "@paybox/common"
+import { accountAtom } from "@paybox/recoil"
+import React, { useEffect } from "react"
+import { useRecoilValue } from "recoil"
+import SolanaIcon from "./icon/SolanaIcon"
+import EthIcon from "./icon/Eth"
 
 export function FundDialog({
     open,
@@ -21,31 +26,84 @@ export function FundDialog({
     setOpen: React.Dispatch<React.SetStateAction<boolean>>,
     token: Network,
 }) {
+    const account = useRecoilValue(accountAtom);
+    const [tabData, setTabData] = React.useState<{
+        name: string,
+        publicKey: string,
+        icon: React.ElementType,
+        value: "Solana" | "Ethereum" | "Bitcoin",
+        selectedCurrency: "USD" | "SOL" | "ETH" | "BTC"
+    } | null>(null);
+    const ref = React.useRef<HTMLInputElement>(null);
+
+    useEffect(() => {
+        if (token == Network.Sol && account?.sol) {
+            setTabData({
+                name: account?.name,
+                publicKey: account?.sol.publicKey,
+                icon: SolanaIcon,
+                value: "Solana",
+                selectedCurrency: "SOL"
+            })
+        } else if (token == Network.Eth && account?.eth) {
+            setTabData({
+                name: account?.name,
+                publicKey: account?.eth.publicKey,
+                icon: EthIcon,
+                value: "Ethereum",
+                selectedCurrency: "ETH"
+            })
+        }
+    }, [token]);
+
+    const getUrl = async () => {
+        if(ref.current?.value) {
+            //todo: fetch the api to get the url
+            const call = async () => {
+
+            }
+            console.log(ref.current.value)
+        }
+    }
+
     return (
         <Dialog open={open} onOpenChange={setOpen}>
             <DialogContent className="sm:max-w-[425px]">
                 <DialogHeader>
-                    <DialogTitle>Fund your {token} Account</DialogTitle>
+                    <DialogTitle>Fund your {tabData?.value} Account</DialogTitle>
                     <DialogDescription>
-                        Make changes to your profile here. Click save when you're done.
+                        It's safe and secure to fund your account with {tabData?.value} tokens.
                     </DialogDescription>
+                    <div className="flex flex-col gap-y-2 items-center justify-center">
+                        <div className="text-xl font-semibold">Buy {tabData?.value}</div>
+                        {tabData && <tabData.icon className="w-12 h-12" />}
+                    </div>
                 </DialogHeader>
                 <div className="grid gap-4 py-4">
-                    <div className="grid grid-cols-4 items-center gap-4">
-                        <Label htmlFor="name" className="text-right">
-                            Name
-                        </Label>
-                        <Input id="name" value="Pedro Duarte" className="col-span-3" />
+                    <div
+                        className="dark:bg-primary-foreground border flex gap-x-4 px-4 py-[5px] rounded justify-start cursor-not-allowed"
+                    >
+                        <span className="text-white">
+                            {tabData?.name}
+                        </span>
+                        <div className="text-muted-foreground">({tabData?.publicKey.slice(0, 4)}...{tabData?.publicKey.slice(tabData.publicKey.length - 5)})</div>
                     </div>
-                    <div className="grid grid-cols-4 items-center gap-4">
-                        <Label htmlFor="username" className="text-right">
-                            Username
+                    <div className="flex relative items-center ">
+                        <Label htmlFor="username" className="text-right absolute right-3 text-muted-foreground">
+                            {tabData?.selectedCurrency}
                         </Label>
-                        <Input id="username" value="@peduarte" className="col-span-3" />
+                        <Input
+                            ref={ref}
+                            required
+                            id="amount"
+                            type="number"
+                            placeholder="Amount"
+                            className="w-full px-4 py-[5px] [&::-webkit-inner-spin-button]:appearance-none [appearance:textfield]"
+                        />
                     </div>
                 </div>
                 <DialogFooter>
-                    <Button type="submit">Save changes</Button>
+                    <Button onClick={getUrl} type="submit">Save changes</Button>
                 </DialogFooter>
             </DialogContent>
         </Dialog>

apps/web/package.json

@@ -15,6 +15,8 @@
     "@emoji-mart/react": "^1.1.1",
     "@faker-js/faker": "^8.4.0",
     "@hookform/resolvers": "^3.3.4",
+    "@moonpay/moonpay-js": "^0.5.0",
+    "@moonpay/moonpay-react": "^1.6.1",
     "@paybox/common": "^0.1.0",
     "@paybox/openapi": "^0.1.0",
     "@paybox/recoil": "^0.1.0",

backend/api/.api/api.json

@@ -0,0 +1,11 @@
+{
+  "version": "1.0",
+  "apis": [
+    {
+      "identifier": "moonpaydocs",
+      "source": "@moonpaydocs/v2.0#32ihyjlt7c7ssg",
+      "integrity": "sha512-Vny4J0pYsnFE8vIDvlOOHBIQ58YbcxT3zZFozSa5cAip4yd9gT88N44hUE5ur60DN2LoMLsuBzZbkklsaGF2YA==",
+      "installerVersion": "6.1.1"
+    }
+  ]
+}