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

皆さん、ついに、エアラインでも、サブスクリプションが始まったのはご存じですか? まだ実験段階ですが、ANAが、定額全国住み放題サービスを提供する「ADDress」と組んで、国内線を4回まで定額利用可能 ...

2

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

3

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

4

ついに、noteの月間アクティブユーザー数が4400万人(2020年3月時点)に到達しました。 そもそも、「note」とは、クリエイターが、文章やマンガ、写真、音声を投稿することができ、ユーザーはその ...

5

ボードゲームカフェが1日2回転で儲かるという記事をみつけたので興味を持ち、調べてみました。 まずは、需要がどれくらいあるのか、市場のようすからみていきましょう。 世界最大のボードゲーム市場はドイツで、 ...

-Blockchain, code, Metaverse, VR
-, ,

Copyright© BUSINESS HUNTER , 2023 All Rights Reserved Powered by AFFINGER5.