Merge pull request #25 from hollow-leaf/fix/backend

feat: extension createNft

apps/extension_app/src/App.tsx

@@ -7,6 +7,7 @@ import { createWeb3Modal, defaultWagmiConfig } from '@web3modal/wagmi/react'
 import { WagmiConfig } from 'wagmi'
 import { mainnet, goerli, opBNBTestnet } from 'viem/chains'
 import { Streamer } from './components/streamer';
+import CreateNft from './components/createNft';
 
 const projectId = '966691db73928f3c8a904ea62261b457'
 
@@ -26,7 +27,7 @@ const queryClient = new QueryClient({
   defaultOptions: {
     queries: {
       retry: 10,
-      cacheTime: 1000 * 60 * 3,
+      cacheTime: 1000 * 10,
     },
   },
 });
@@ -40,6 +41,7 @@ function App() {
           <div className="App">
             <Home />
             <Streamer />
+            <CreateNft />
           </div>
         </Provider>
       </WagmiConfig>

apps/extension_app/src/components/balance.tsx

@@ -1,20 +1,26 @@
 import { useAccount, useBalance } from "wagmi";
+import { useQuery } from "@tanstack/react-query";
+import { PDBalance } from "../services/contract"
 
 
-export function Balance(){
+export function Balance(props:any){
 
-    const { address } = useAccount()
-
-    const { data, isError, isLoading } = useBalance({
-        address: address,
-      })
+    const { isLoading, error, data } = useQuery({
+        queryKey: ["getBalance"],
+        queryFn: () => 
+            PDBalance(props.address).then(res=>{
+                console.log(res)
+                return res
+            })
+
+    });
 
     if (isLoading) return <div>Fetching balance…</div>
-    if (isError) return <div>Error fetching balance</div>
+    if (error) return <div>Error fetching balance</div>
 
     return (
         <div>
-            Balance: {data?.formatted} {data?.symbol}
+            Balance: {Number(data)}
         </div>
     )
 }

apps/extension_app/src/components/createNft.tsx

@@ -0,0 +1,39 @@
+import { createNewNft } from "../services/contract";
+import { useAccount } from "wagmi"
+
+export default function CreateNft(){
+
+    const { address } = useAccount()
+
+
+    return (
+        <section>
+            <h6>Create NFT</h6>
+            <div className="nice-form-group">
+                <label>Name</label>
+                <input id="name" type="text" placeholder=""  />
+            </div>
+            <div className="nice-form-group">
+                <label>Price</label>
+                <input id="price" type="number" placeholder=""  />
+            </div>
+            <div className="nice-form-group">
+                <label>Supply</label>
+                <input id="supply" type="number" placeholder=""  />
+            </div>
+            <div className="nice-form-group">
+                <button id="createbutton" className="button-13" role="button" onClick={()=>{if(address){createHandler(address)}}}>Create</button>
+            </div>
+        </section>
+    )
+}
+
+async function createHandler(address:string){
+    var name = (document.getElementById("name") as HTMLInputElement)?.value;
+    var price = (document.getElementById("price") as HTMLInputElement)?.value;
+    var supply = (document.getElementById("supply") as HTMLInputElement)?.value;
+    console.log(name, price, supply)
+    if(name&&price&&supply){
+        await createNewNft(address, name, Number(supply), Number(price))
+    }
+}

apps/extension_app/src/components/profile.tsx

@@ -29,7 +29,7 @@ export function Profile(props:any){
                 <section>
                     <section>
                         <p>Your Address: {address}</p>
-                        <Balance />
+                        <Balance address={address} />
                     </section>
                     <DisconnectButton />
                     <button style={{marginLeft: "25px"}} onClick={() => open({ view: 'Networks' })}>Network</button>
@@ -43,6 +43,7 @@ export function Profile(props:any){
     }
     if(data){
         if(data.length>0){
+            console.log("HAHA")
             return(
                 <>
                     <section>
@@ -67,20 +68,21 @@ export function Profile(props:any){
                 </>
 
             )
+        }else{
+            return (
+                <>
+                    <section>
+                        <section>
+                            <p>Your Address: {address}</p>
+                            <Balance />
+                        </section>
+                        <DisconnectButton />
+                        <button style={{marginLeft: "25px"}} onClick={() => open({ view: 'Networks' })}>Network</button>
+                        {address&&<button style={{marginLeft: "25px"}} onClick={() => ERC20Faucet(address?.toString(), 1000)}>Faucet</button>}
+                    </section>
+                </> 
+            )
         }
     }
-    return(
-        <>
-            <section>
-                <section>
-                    <p>Your Address: {address}</p>
-                    <Balance />
-                </section>
-                <DisconnectButton />
-                <button style={{marginLeft: "25px"}} onClick={() => open({ view: 'Networks' })}>Network</button>
-                {address&&<button style={{marginLeft: "25px"}} onClick={() => ERC20Faucet(address?.toString(), 1000)}>Faucet</button>}
-            </section>
-        </> 
-    )
 }
 

apps/extension_app/src/components/streamer.tsx

@@ -41,7 +41,6 @@ export function Streamer(props:any){
             return (
                 <section>
                     <h1>{data.id}</h1>
-                    <button onClick={() => register(data.id)}>Register</button>
                     <h1>NFT List</h1>
                     <div className="nftTable">
                         <>
@@ -53,6 +52,7 @@ export function Streamer(props:any){
                         </>
 
                     </div>
+                    {data.nftList.length==0&&<button onClick={() => register(data.id)}>Register</button>}
                 </section>
             )
         }

apps/extension_app/src/services/api.ts

@@ -48,3 +48,25 @@ export async function getNftosByAddress(address:string) {
     }
 }
 
+export async function address2eventId(address:string){
+    try {
+
+        let form = new FormData()
+        form.append("address", address)
+
+        const res = await fetch(HOST + '/address2eventId', {
+            method: 'POST',
+            body: form
+          })
+        if(res){
+            const rres = await res.json()
+            return rres.data
+        }else{
+            return -1
+        }
+    }
+    catch (err) {
+        console.log("error", err);
+        return -1
+    }
+}

apps/extension_app/src/services/contract.ts

@@ -1,5 +1,7 @@
 import { writeContract, readContract } from '@wagmi/core';
 import { FactoryABI, ERC20ABI, GlobalABI } from './contractAbi';
+import { useAccount } from "wagmi"
+import { address2eventId } from './api';
 
 const FactoryADDRESS = "0x5360d0Bb8Eb03C7C988b2D3B9162028e287b63A2"
 const ERC20ADDRESS = "0x92b9Ff2903F668B1C715cC8079e2ebC2D39ba4b7"
@@ -12,7 +14,7 @@ export async function eventId2Address(eventId:number){
         address: FactoryADDRESS,
         abi: FactoryABI,
         //TODO: enter right function
-        functionName: 'eventIdToAddr',
+        functionName: 'addrToEventId',
         args: [eventId],
     })
 
@@ -25,6 +27,42 @@ export async function eventId2Address(eventId:number){
     return ""
 }
 
+export async function addrToEventId(addr:string){
+    const data:any = await readContract({
+        address: FactoryADDRESS,
+        abi: FactoryABI,
+        //TODO: enter right function
+        functionName: 'addrToEventId',
+        args: [addr],
+    })
+
+    console.log(data)
+
+    if(data){
+        return data
+    }
+
+    return ""
+}
+
+export async function PDBalance(address:string){
+
+    const data:any = await readContract({
+        address: ERC20ADDRESS,
+        abi: ERC20ABI,
+        //TODO: enter right function
+        functionName: 'balanceOf',
+        args: [address],
+    })
+
+    console.log(data)
+
+    if(data){
+        return data
+    }
+    return ""
+}
+
 
 export async function buyNftByNftId(minter:string, eventId:number, nftId:number, amount:number, price:number){
     alert("Approve transaction on your device!")
@@ -78,4 +116,25 @@ export async function register(userId:string){
     })
 
     return hash
+}
+
+export async function createNewNft(address:string, name:string, supply:number, price:number){
+
+
+    if(address){
+        console.log(address)
+        const eventId = await address2eventId(address)
+        if(eventId>-1){
+            const { hash } = await writeContract({
+                address: FactoryADDRESS,
+                abi: FactoryABI,
+                functionName: 'addNewERC1155',
+                args: [eventId, price, supply, name, ""],
+            })
+        }else{
+            alert("You have to register!")
+        }
+
+    }
+
 }