Merge pull request #141 from public-awesome/develop

Sync development >main
This commit is contained in:
Adnan Deniz corlu 2023-04-03 13:06:11 +03:00 committed by GitHub
commit c91e808fc0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 263 additions and 75 deletions

View File

@ -1,4 +1,4 @@
APP_VERSION=0.5.4 APP_VERSION=0.5.5
NEXT_PUBLIC_PINATA_ENDPOINT_URL=https://api.pinata.cloud/pinning/pinFileToIPFS NEXT_PUBLIC_PINATA_ENDPOINT_URL=https://api.pinata.cloud/pinning/pinFileToIPFS
NEXT_PUBLIC_SG721_CODE_ID=1911 NEXT_PUBLIC_SG721_CODE_ID=1911

View File

@ -1,6 +1,6 @@
{ {
"name": "stargaze-studio", "name": "stargaze-studio",
"version": "0.5.4", "version": "0.5.5",
"workspaces": [ "workspaces": [
"packages/*" "packages/*"
], ],

View File

@ -1063,15 +1063,28 @@ const CollectionCreationPage: NextPage = () => {
{transactionHash} {transactionHash}
</Anchor> </Anchor>
</Conditional> </Conditional>
<Button className="mt-2"> <Conditional test={minterType === 'vending'}>
<Anchor <Button className="mt-2">
className="text-white" <Anchor
external className="text-white"
href={`${STARGAZE_URL}/launchpad/${vendingMinterContractAddress as string}`} external
> href={`${STARGAZE_URL}/launchpad/${vendingMinterContractAddress as string}`}
View on Launchpad >
</Anchor> View on Launchpad
</Button> </Anchor>
</Button>
</Conditional>
<Conditional test={minterType === 'base'}>
<Button className="mt-2">
<Anchor
className="text-white"
external
href={`${STARGAZE_URL}/marketplace/${sg721ContractAddress as string}?sort=price_asc`}
>
View on Marketplace
</Anchor>
</Button>
</Conditional>
</div> </div>
</Alert> </Alert>
</Conditional> </Conditional>

View File

@ -4,16 +4,19 @@
/* eslint-disable @typescript-eslint/no-unsafe-member-access */ /* eslint-disable @typescript-eslint/no-unsafe-member-access */
/* eslint-disable @typescript-eslint/restrict-template-expressions */ /* eslint-disable @typescript-eslint/restrict-template-expressions */
import { toUtf8 } from '@cosmjs/encoding'
import axios from 'axios' import axios from 'axios'
import { Alert } from 'components/Alert' import { Alert } from 'components/Alert'
import { Anchor } from 'components/Anchor' import { Anchor } from 'components/Anchor'
import { Conditional } from 'components/Conditional' import { Conditional } from 'components/Conditional'
import { ContractPageHeader } from 'components/ContractPageHeader' import { ContractPageHeader } from 'components/ContractPageHeader'
import { Tooltip } from 'components/Tooltip'
import { useWallet } from 'contexts/wallet' import { useWallet } from 'contexts/wallet'
import type { NextPage } from 'next' import type { NextPage } from 'next'
import { NextSeo } from 'next-seo' import { NextSeo } from 'next-seo'
import { useCallback, useEffect, useState } from 'react' import { useCallback, useEffect, useState } from 'react'
import { FaRocket, FaSlidersH } from 'react-icons/fa' import { FaCopy, FaRocket, FaSlidersH, FaStore } from 'react-icons/fa'
import { copy } from 'utils/clipboard'
import { API_URL, STARGAZE_URL } from 'utils/constants' import { API_URL, STARGAZE_URL } from 'utils/constants'
import { withMetadata } from 'utils/layout' import { withMetadata } from 'utils/layout'
import { links } from 'utils/links' import { links } from 'utils/links'
@ -21,6 +24,41 @@ import { links } from 'utils/links'
const CollectionList: NextPage = () => { const CollectionList: NextPage = () => {
const wallet = useWallet() const wallet = useWallet()
const [myCollections, setMyCollections] = useState<any[]>([]) const [myCollections, setMyCollections] = useState<any[]>([])
const [myOneOfOneCollections, setMyOneOfOneCollections] = useState<any[]>([])
const [myStandardCollections, setMyStandardCollections] = useState<any[]>([])
async function getMinterContractType(minterContractAddress: string) {
if (wallet.client && minterContractAddress.length > 0) {
const client = wallet.client
const data = await client.queryContractRaw(
minterContractAddress,
toUtf8(Buffer.from(Buffer.from('contract_info').toString('hex'), 'hex').toString()),
)
const contractType: string = JSON.parse(new TextDecoder().decode(data as Uint8Array)).contract
return contractType
}
}
const filterMyCollections = () => {
setMyOneOfOneCollections([])
setMyStandardCollections([])
if (myCollections.length > 0) {
myCollections.map(async (collection: any) => {
await getMinterContractType(collection.minter)
.then((contractType) => {
if (contractType?.includes('sg-base-minter')) {
setMyOneOfOneCollections((prevState) => [...prevState, collection])
} else if (contractType?.includes('sg-minter')) {
setMyStandardCollections((prevState) => [...prevState, collection])
}
})
.catch((err) => {
console.log(err)
console.log('Unable to retrieve contract type')
})
})
}
}
useEffect(() => { useEffect(() => {
const fetchCollections = async () => { const fetchCollections = async () => {
@ -35,76 +73,213 @@ const CollectionList: NextPage = () => {
fetchCollections().catch(console.error) fetchCollections().catch(console.error)
}, [wallet.address]) }, [wallet.address])
useEffect(() => {
filterMyCollections()
}, [myCollections])
const renderTable = useCallback(() => { const renderTable = useCallback(() => {
return ( return (
<div className="overflow-x-auto w-full"> <div className="overflow-x-auto w-full no-scrollbar">
{myCollections.length > 0 && ( {myCollections.length > 0 && (
<table className="table w-full"> <div>
<thead> {myStandardCollections.length > 0 && (
<tr> <div className="bg-transparent">
<th className="pl-36 text-lg font-bold text-left bg-black">Collection Name</th> <span className="text-2xl font-bold text-blue-300">Standard Collections</span>
<th className="text-lg font-bold bg-black">Contract Address</th> <table className="table w-full">
<th className="bg-black" /> <thead>
</tr> <tr>
</thead> <th className="pl-36 text-lg font-bold text-left bg-transparent">Collection Name</th>
<tbody> <th className="text-lg font-bold bg-transparent">Contract Address</th>
{myCollections.map((collection: any, index: any) => { <th className="bg-transparent" />
return ( </tr>
<tr key={index}> </thead>
<td className="w-[55%] bg-black"> <tbody>
<div className="flex items-center space-x-3"> {myStandardCollections.map((collection: any, index: any) => {
<div className="avatar"> return (
<div className="w-28 h-28 mask mask-squircle"> <tr key={index}>
<img <td className="w-[55%] bg-black">
alt="Cover" <div className="flex items-center space-x-3">
src={ <div className="avatar">
(collection?.image as string).startsWith('ipfs') <div className="w-28 h-28 mask mask-squircle">
? `https://ipfs-gw.stargaze-apis.com/ipfs/${(collection?.image as string).substring( <img
7, alt="Cover"
)}` src={
: collection?.image (collection?.image as string).startsWith('ipfs')
} ? `https://ipfs-gw.stargaze-apis.com/ipfs/${(
/> collection?.image as string
</div> ).substring(7)}`
</div> : collection?.image
<div className="pl-2"> }
<p className="overflow-auto max-w-xs font-bold no-scrollbar ">{collection.name}</p> />
<p className="max-w-xs text-sm truncate opacity-50">{collection.description}</p> </div>
</div> </div>
</div> <div className="pl-2">
</td> <p className="overflow-auto max-w-xs font-bold no-scrollbar ">{collection.name}</p>
<td className="w-[35%] bg-black"> <p className="max-w-xs text-sm truncate opacity-50">{collection.description}</p>
{collection.contractAddress} </div>
{/* <br /> */} </div>
{/* <span className="badge badge-ghost badge-sm"></span> */} </td>
</td> <td className="w-[35%] bg-black">
<th className="bg-black"> <div className="flex flex-row items-center space-x-3">
<div className="flex items-center space-x-8"> Minter:
<Anchor <span className="ml-2">
className="text-xl text-plumbus" <Tooltip
href={`/collections/actions?sg721ContractAddress=${collection.contractAddress}&minterContractAddress=${collection.minter}`} backgroundColor="bg-blue-500"
> label="Click to copy the Vending Minter contract address"
<FaSlidersH /> >
</Anchor> <button
className="group flex space-x-2 font-mono text-base text-white/80 hover:underline"
onClick={() => void copy(collection.minter as string)}
type="button"
>
<span>{collection.minter}</span>
<FaCopy className="opacity-0 group-hover:opacity-100" />
</button>
</Tooltip>
</span>
</div>
<div className="flex flex-row items-center space-x-3">
SG721:
<span className="ml-2">
<Tooltip backgroundColor="bg-blue-500" label="Click to copy the SG721 contract address">
<button
className="group flex space-x-2 font-mono text-base text-white/80 hover:underline"
onClick={() => void copy(collection.contractAddress as string)}
type="button"
>
<span>{collection.contractAddress}</span>
<FaCopy className="opacity-0 group-hover:opacity-100" />
</button>
</Tooltip>
</span>
</div>
</td>
<th className="bg-black">
<div className="flex items-center space-x-8">
<Anchor
className="text-xl text-plumbus"
href={`/collections/actions?sg721ContractAddress=${collection.contractAddress}&minterContractAddress=${collection.minter}`}
>
<FaSlidersH />
</Anchor>
<Anchor
className="text-xl text-plumbus"
external
href={`${STARGAZE_URL}/launchpad/${collection.minter}`}
>
<FaRocket />
</Anchor>
</div>
</th>
</tr>
)
})}
</tbody>
</table>
</div>
)}
{myOneOfOneCollections.length > 0 && (
<div className="mt-4">
<span className="text-2xl font-bold text-blue-300">1/1 Collections</span>
<table className="table w-full">
<thead>
<tr>
<th className="pl-36 text-lg font-bold text-left bg-transparent">Collection Name</th>
<th className="text-lg font-bold bg-transparent">Contract Address</th>
<th className="bg-transparent" />
</tr>
</thead>
<tbody>
{myOneOfOneCollections.map((collection: any, index: any) => {
return (
<tr key={index}>
<td className="w-[55%] bg-black">
<div className="flex items-center space-x-3">
<div className="avatar">
<div className="w-28 h-28 mask mask-squircle">
<img
alt="Cover"
src={
(collection?.image as string).startsWith('ipfs')
? `https://ipfs-gw.stargaze-apis.com/ipfs/${(
collection?.image as string
).substring(7)}`
: collection?.image
}
/>
</div>
</div>
<div className="pl-2">
<p className="overflow-auto max-w-xs font-bold no-scrollbar ">{collection.name}</p>
<p className="max-w-xs text-sm truncate opacity-50">{collection.description}</p>
</div>
</div>
</td>
<td className="w-[35%] bg-black">
<div className="flex flex-row items-center space-x-3">
Minter:
<span className="ml-2">
<Tooltip
backgroundColor="bg-blue-500"
label="Click to copy the Base Minter contract address"
>
<button
className="group flex space-x-2 font-mono text-base text-white/80 hover:underline"
onClick={() => void copy(collection.minter as string)}
type="button"
>
<span>{collection.minter}</span>
<FaCopy className="opacity-0 group-hover:opacity-100" />
</button>
</Tooltip>
</span>
</div>
<div className="flex flex-row items-center space-x-3">
SG721:
<span className="ml-2">
<Tooltip backgroundColor="bg-blue-500" label="Click to copy the SG721 contract address">
<button
className="group flex space-x-2 font-mono text-base text-white/80 hover:underline"
onClick={() => void copy(collection.contractAddress as string)}
type="button"
>
<span>{collection.contractAddress}</span>
<FaCopy className="opacity-0 group-hover:opacity-100" />
</button>
</Tooltip>
</span>
</div>
</td>
<th className="bg-black">
<div className="flex items-center space-x-8">
<Anchor
className="text-xl text-plumbus"
href={`/collections/actions?sg721ContractAddress=${collection.contractAddress}&minterContractAddress=${collection.minter}`}
>
<FaSlidersH />
</Anchor>
<Anchor <Anchor
className="text-xl text-plumbus" className="text-xl text-plumbus"
external external
href={`${STARGAZE_URL}/launchpad/${collection.minter}`} href={`${STARGAZE_URL}/marketplace/${collection.contractAddress}?sort=price_asc`}
> >
<FaRocket /> <FaStore />
</Anchor> </Anchor>
</div> </div>
</th> </th>
</tr> </tr>
) )
})} })}
</tbody> </tbody>
</table> </table>
</div>
)}
</div>
)} )}
</div> </div>
) )
}, [myCollections, wallet.address]) }, [myCollections, myStandardCollections, myOneOfOneCollections, wallet.address])
return ( return (
<section className="py-6 px-12 space-y-4"> <section className="py-6 px-12 space-y-4">