Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feat/backend #60

Merged
merged 3 commits into from
Feb 19, 2024
Merged

Feat/backend #60

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
33ed857
feat: UI/UX improvement
LinXJ1204 Feb 19, 2024
8bf8611
feat: extension checkout to mainnet
LinXJ1204 Feb 19, 2024
a78f60b
Merge branch 'main' into feat/backend
LinXJ1204 Feb 19, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions apps/extension_app/manifest.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
{
"version": "1.0.0",
"manifest_version": 3,
"name": "React Chrome Extension",
"name": "Psyduck Extension",
"action": {
"default_popup": "js/index.html",
"default_title": "React Chrome Extension"
"default_title": "Psyduck Extension"
},
"permissions": [
"tabs",
Expand Down
1 change: 1 addition & 0 deletions apps/extension_app/package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion apps/extension_app/src/App.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -753,7 +753,7 @@ td {
}

body {
--background-color: #7d6fbd9e;
--background-color: #11044c9e;
--text-color: #A1A1AA;

--card-background-color: rgba(255, 255, 255, .015);
Expand Down
5 changes: 2 additions & 3 deletions apps/extension_app/src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { store } from "./store";
import { createWeb3Modal, defaultWagmiConfig } from '@web3modal/wagmi/react'
import { WagmiConfig } from 'wagmi'
import { mainnet, goerli, opBNBTestnet } from 'viem/chains'
import { mainnet, goerli, opBNBTestnet, opBNB } from 'viem/chains'
import { Streamer } from './components/streamer';
import CreateNft from './components/createNft';

Expand All @@ -18,7 +18,7 @@ const metadata = {
icons: ['https://avatars.githubusercontent.com/u/37784886']
}

const chains = [mainnet, goerli, opBNBTestnet]
const chains = [opBNB]
const wagmiConfig = defaultWagmiConfig({ chains, projectId, metadata })

createWeb3Modal({ wagmiConfig, projectId, chains })
Expand All @@ -41,7 +41,6 @@ function App() {
<div className="App">
<Home />
<Streamer />
<CreateNft />
</div>
</Provider>
</WagmiConfig>
Expand Down
3 changes: 1 addition & 2 deletions apps/extension_app/src/components/createNft.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
import { createNewNft } from "../services/contract";
import { useAccount } from "wagmi"

export default function CreateNft(){
Expand Down Expand Up @@ -34,6 +33,6 @@ async function createHandler(address:string){
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))
//await createNewNft(address, name, Number(supply), Number(price))
}
}
119 changes: 42 additions & 77 deletions apps/extension_app/src/components/nftItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,90 +1,55 @@
import { useState } from "react";
import { getChannelinfoById } from "../services/api";
import { NftType } from "../type";
import { formatAddress } from "../utils/stingify";
import { useQuery } from "@tanstack/react-query";


export function NftItem(props:NftType){

return (
<div>
<div className="card" onClick={() => {
if (document) {
(
document.getElementById(
`my_modal_${props.nftId}`
) as HTMLFormElement
).showModal();
}
}}>
<span className="icon">
<svg
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="1.2"
stroke-linecap="round"
stroke-linejoin="round"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M14.5 3.5C14.5 3.5 14.5 5.5 12 5.5C9.5 5.5 9.5 3.5 9.5 3.5H7.5L4.20711 6.79289C3.81658 7.18342 3.81658 7.81658 4.20711 8.20711L6.5 10.5V20.5H17.5V10.5L19.7929 8.20711C20.1834 7.81658 20.1834 7.18342 19.7929 6.79289L16.5 3.5H14.5Z"
/>
</svg>
</span>
<h4>ID: {props.nftId}</h4>
<h4>Name: {props.name}</h4>
<h4>Creator: {formatAddress(props.creator)}</h4>
<div className="shine"></div>
<div className="background">
<div className="tiles">
<div className="tile tile-1"></div>
<div className="tile tile-2"></div>
<div className="tile tile-3"></div>
<div className="tile tile-4"></div>
const [imgUrl, setImgUrl] = useState<string>("")

<div className="tile tile-5"></div>
<div className="tile tile-6"></div>
<div className="tile tile-7"></div>
<div className="tile tile-8"></div>
const { isLoading, error, data } = useQuery({
queryKey: ["getChannelinfoById"],
queryFn: () => {
getChannelinfoById(props.creator).then(res => {
if(res?.avatar)setImgUrl(res?.avatar)
})
}
});

<div className="tile tile-9"></div>
<div className="tile tile-10"></div>
</div>

<div className="line line-1"></div>
<div className="line line-2"></div>
<div className="line line-3"></div>
</div>
</div>
if(isLoading) {
return <></>
} else {
return (
<div>
<dialog id={`my_modal_${props.nftId}`} className="modal">
<form method="dialog" className="modal-box bg-white py-10">
<h3 className="font-bold text-lg" style={{textAlign:"center"}}>DETAIL</h3>
<div className="px-16 mt-8 flex flex-col space-y-3">
<div className="flex">
<p>Provider</p>
<p className="ml-auto">{}</p>
</div>
<div className="flex ">
<p>Power Type</p>
<p className="ml-auto">

</p>
</div>
<div className="flex ">
<p>CO2 CID</p>
<p className="ml-auto">{}</p>
</div>
<div className="flex ">
<p>NFT Address</p>
<p className="ml-auto">{}</p>
<div className="card">
<h4>ID: {props.nftId}</h4>
<h4>Name: {props.name}</h4>
<h4>Creator: {formatAddress(props.creator)}</h4>
<div className="shine"></div>
<div className="background" style={{"backgroundImage": `url(${imgUrl})`}}>
<div className="tiles">
<div className="tile tile-1"></div>
<div className="tile tile-2"></div>
<div className="tile tile-3"></div>
<div className="tile tile-4"></div>

<div className="tile tile-5"></div>
<div className="tile tile-6"></div>
<div className="tile tile-7"></div>
<div className="tile tile-8"></div>

<div className="tile tile-9"></div>
<div className="tile tile-10"></div>
</div>

<div className="line line-1"></div>
<div className="line line-2"></div>
<div className="line line-3"></div>
</div>
</form>
<form method="dialog" className="modal-backdrop">
<button>close</button>
</form>
</dialog>
</div>
</div>
</div>
)
)
}
}
34 changes: 17 additions & 17 deletions apps/extension_app/src/components/nftSaleItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,41 +1,41 @@
import { useState } from "react";
import { buyNftByNftId } from "../services/contract";
import { NftType } from "../type";
import { formatAddress } from "../utils/stingify";
import { useAccount } from "wagmi"
import { useQuery } from "@tanstack/react-query";
import { getChannelinfoById } from "../services/api";


export function NftSaleItem(props:NftType){
const { address, isConnected } = useAccount()

const [imgUrl, setImgUrl] = useState<string>("")

const { isLoading, error, data } = useQuery({
queryKey: ["getChannelinfoById"],
queryFn: () => {
getChannelinfoById(props.creator).then(res => {
if(res?.avatar)setImgUrl(res?.avatar)
})
}
});

return (
<div>
<div className="card" onClick={() => {
if(isConnected){
if(address){
buyNftByNftId(props.eventId, props.nftId, 1, props.price)
buyNftByNftId(props.creator, props.nftId, 1, props.price, props.poolContractAddr)
}
}
}}>
<span className="icon">
<svg
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="1.2"
stroke-linecap="round"
stroke-linejoin="round"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M14.5 3.5C14.5 3.5 14.5 5.5 12 5.5C9.5 5.5 9.5 3.5 9.5 3.5H7.5L4.20711 6.79289C3.81658 7.18342 3.81658 7.81658 4.20711 8.20711L6.5 10.5V20.5H17.5V10.5L19.7929 8.20711C20.1834 7.81658 20.1834 7.18342 19.7929 6.79289L16.5 3.5H14.5Z"
/>
</svg>
</span>
<h4>ID: {props.nftId}</h4>
<h4>Price: {props.price}</h4>
<h4>Name: {props.name}</h4>
<h4>Creator: {formatAddress(props.creator)}</h4>
<div className="shine"></div>
<div className="background">
<div className="background" style={{"backgroundImage": `url(${imgUrl})`}}>
<div className="tiles">
<div className="tile tile-1"></div>
<div className="tile tile-2"></div>
Expand Down
5 changes: 1 addition & 4 deletions apps/extension_app/src/components/profile.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,6 @@ export function Profile(props:any){
}
if(data){
if(data.length>0){
console.log("HAHA")
return(
<>
<section>
Expand All @@ -53,14 +52,13 @@ export function Profile(props:any){
</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>
<section>
<h1>My NFT Collection</h1>
<div className="nftTable">
{data.map((item:any)=>{
return (
<NftItem eventId={0} nftId={item.nftId} creator={item.creator} price={0} url={""} name={item.name} supply={0} />
<NftItem poolContractAddr={item.poolContractAddr} nftId={item.nftId} creator={item.creatorId} price={0} url={""} name={item.nftName} supply={0} />
)
})}
</div>
Expand All @@ -78,7 +76,6 @@ export function Profile(props:any){
</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>
</>
)
Expand Down
15 changes: 9 additions & 6 deletions apps/extension_app/src/components/streamer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { useQuery } from "@tanstack/react-query";
import Loading from "./loading";
import { StreamerType } from "../type"
import { getNftcsByUserId } from "../services/api";
import { getNftcsByUserId, userId2Address } from "../services/api";
import { NftSaleItem } from "./nftSaleItem";
import { register } from "../services/contract";

Expand All @@ -16,13 +16,13 @@ export function Streamer(props:any){
}

res.nftList = await getNftcsByUserId(res.id).then(rres=>{
var nfts: { nftId: any; creator: any; price: any; url: string; name: any; supply: any; eventId:any;}[] = []
var nfts: { nftId: any; creator: any; price: any; url: string; name: any; supply: any; poolContractAddr:string;}[] = []
console.log(rres)

res.address = rres[0].creator
rres.map((item:any)=>{
console.log(item)
nfts.push({eventId: item.eventId, nftId: item.nftID, creator: item.creator, price: item.price , url:"", name: item.name, supply: item.Supply})
nfts.push({poolContractAddr: item.poolContractAddr, nftId: item.nftId, creator: item.creatorId, price: item.price , url:"", name: item.nftName, supply: item.Supply})
})

return nfts
Expand All @@ -46,13 +46,12 @@ export function Streamer(props:any){
<>
{data.nftList.map((item:any)=>{
return (
<NftSaleItem eventId={item.eventId} nftId={item.nftId} creator={item.creator} price={item.price} url={item.url} name={item.name} supply={item.supply} />
<NftSaleItem poolContractAddr={data.poolContractAddr} nftId={item.nftId} creator={item.creator} price={item.price} url={item.url} name={item.name} supply={item.supply} />
)
})}
</>

</div>
{data.nftList.length==0&&<button onClick={() => register(data.id)}>Register</button>}
</section>
)
}
Expand All @@ -68,14 +67,18 @@ async function streamer():Promise<StreamerType>{
var streamer:StreamerType = {
id: "",
address: "",
nftList: []
nftList: [],
poolContractAddr: ""
}
if(!tabs[0].url){
return streamer
}

streamer.id = url2StreamerId(tabs[0].url)

const rres:any = await userId2Address(streamer.id)
streamer.poolContractAddr = rres.poolContractAddr

return streamer
}

Expand Down
Loading