Blockchain code Metaverse VR

Crypto×VR×SmartContract(544)

スポンサーリンク

//tips

久しぶりにopen sea開いたらAnti Hitler Shitler Clubのintel dropが入っていた。勝手に送付されるspamNFTの類はHiddenに自動で振り分けられるはずなんだが、掻い潜ってきたよう。危ないのがきたらHiddenへ。

//smart contract

NFTであることを示すためのopen seaなどのリンク場所を作成。

各人が異なるリンクを持ち、それを[id]の情報に基づいて表示させることになるので、リンク登録時にはuseridなどと一緒に登録される形にし、getStaticPropsより受け取るninja配列の中身の一つとして取得できるようにする。

pile.nftlink = data.nftlink ?data.nftlink:null

Render部分への内容記載。

Set Avatar Link
<form noValidate autoComplete="off" onSubmit={()=>console.log('hi,there')}>

<TextField
onChange={(e)=>setnftLink(e.target.value)}
variant="outlined"
color="secondary"
defaultValue='NFT Link ex.Open Sea'
fullWidth
required
/>

<Box textAlign="center">
<Button
type="submit"
varient="contained"
onClick={()=>console.log('aa')}
>
submit
</Button>
</Box>
</form>

イベント関数はこちらにした。

async function handleOnNFTLink(e) {
e.preventDefault();

addDoc(colRef,{

userid:ninja[0].userid,
username:ninja[0].username,
date:Date.now(),
nftlink:nftlink

}).then(()=>{
setnftLink('')
}).then(()=>{router.reload()})

}

さて、問題なのはlinkを自分でカスタムするときには先のnftlinkの登録部分が事前にgetstaticprops側で設定できないため、こちら側で個数を決めて扱えるようにしてあげる必要がある。

例えば、customlink1, customcomment1のセットを3パターン作成するか。

#customcomment1をクリックするとcutomlink1のページに飛ぶようにすればいいかもしれない。

自分のnftのリンク先としてはopenseaよりもOncyberの方が良さそう。openseaでは自分の集めたものを見るにはそのアカウントにログインする必要があった。色々参考にしてnaki museumを作成。https://oncyber.io/naki-museum。

参考:

【超簡単】NFTギャラリー"Oncyber"の使い方を画像で解説

きちんとデータベースでのurl登録が確認できた。

Nft画像部分をクリックするとこのリンクへ遷移させる。

リンクへの遷移部分はtwitterなどの画像クリックの仕組みと同じで良さそう。

const handleClickImagetw = (e) => {
if(twitterlink){
document.location.href = twitterlink
console.log('twitterlink');
console.log(twitterlink);
}
}

データベースから取得したリンクを格納するための変数を作成。
const [nftlinkget, setnftLinkget] = useState('')

if(Item.nftlink !=null||Item.nftlink !=undefined){

if(nftlinkget==undefined||nftlinkget==null||nftlinkget==''){
setnftLinkget(Item.nftlink)
}
}

これでnftlinkgetの中にデータベースからのurl情報が格納されたのでクリックタイミングでこちらに遷移できるようにすれば良い。

const handleClickNFTImage = (e) => {
if(nftlinkget){
document.location.href = nftlinkget
console.log('nftlinkget');
console.log(nftlinkget);
}
}

<img src={image} alt="" width="250" height="250" onClick={handleClickNFTImage}/>

これできちんとnftimag部分をクリックするとOncyberに遷移した。

真ん中の柱が気になったので別のmuseum作成。https://oncyber.io/nakilab。

別のurlを追加した際には更新処理をさせたいのでそちらのコードも追加。

下記のように分岐させれば良い。

async function handleOnNewaddress(e) {
e.preventDefault();

console.log('handleOnNewaddress')

var currentad=null;
var currentaddocid=null;

ninja.forEach((element) =>
{
if(element.address!=null){
currentad=element.address
currentaddocid=element.docid
}
})

if(currentad===null){

addDoc(colRef,{

userid:ninja[0].userid,
username:ninja[0].username,
date:Date.now(),
mail:ninja[0].mail,
address:newaddress
})
}else{

const updateRef = doc(firebaseApp,'mydata',currentaddocid);

updateDoc(updateRef, {
address: newaddress
});

}
router.reload()

}

この分岐判断はnftlinkgetが存在するかどうかでわかりそう。

if(Item.nftlink !=null||Item.nftlink !=undefined){

if(nftlinkget==undefined||nftlinkget==null||nftlinkget==''){
setnftLinkget(Item.nftlink)
}
}

あまり繰り返し処理はしたくないので最初に一気に取得できるように構成を後で見直してみるか。

Updateの際にdocidを取るために再度ninja.forEach((element) をさせたくない。

先のforeachループに取得手続きを組み込んでみる。

const [nftdocidget, setnftdocidget] = useState('')

setnftdocidget(Item.docid)

この方がスムーズのように思われる。

async function handleOnNFTLink(e) {
e.preventDefault();

console.log('nftlinkget')
console.log(nftlinkget)

if(nftlinkget===null){
addDoc(colRef,{

userid:ninja[0].userid,
username:ninja[0].username,
date:Date.now(),
nftlink:nftlink

}).then(()=>{
setnftLink('')
}).then(()=>{router.reload()})

}else{

const updateRef = doc(firebaseApp,'mydata',nftdocidget);
console.log(nftdocidget+'nftdocidget')

updateDoc(updateRef, {
nftlink: nftlink
});

}

}

まずはリンクを変えてみる。成功した。きちんとrouter.reload()を最後に追加。更新しないと最初に設定したリンクの値が残っているため画像を押すと以前のリンクに飛ぶ。

Linkを自動でカスタムして生成できる仕組みも組み込む。

人気の記事

1

コロナによる需要変化 コロナパンデミックの影響で、人々は外に出られなくなり、自宅で過ごす時間が増えました。 この自粛ムードの中、下記のようなビジネスの需要変化が引き起こされています。 【利用者減少】 ...

2

米国レストランの決済時に毎日お世話になっていた「Square」のビジネスモデルについて本日はふれていきたいと思います。 「Square」とは、ネットにつながったモバイル端末と専用のカードリーダーを用意 ...

3

無料でネットショップを開けるアプリとして多くの人に驚きを与えたBASE株式会社が、2019年10月25日東証マザーズに上場しました。2020年2月時点で90万店を超えるショップを抱えるまでに成長してい ...

4

2011年にサービスを開始してから圧倒的な成長率を誇るインテリア通販サイト 【FLYMEe/フライミー】を皆さんご存じでしょうか。 「自分のイメージするインテリア、本当に欲しいインテリアがどこにあるの ...

5

ナイキのSNKRSが、なぜこれほどまでに人気なのか?調べてみました。 きっかけは米国での友達との会話。彼は自分のシューズをみせて、「これ20万円もしたんだぜ。」と語ってくれました。 あまり靴に興味がな ...

-Blockchain, code, Metaverse, VR
-, ,

Copyright© BUSINESS HACKER , 2022 All Rights Reserved Powered by AFFINGER5.