//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のセットを３パターン作成するか。
#customcomment1をクリックするとcutomlink1のページに飛ぶようにすればいいかもしれない。
自分のnftのリンク先としてはopenseaよりもOncyberの方が良さそう。openseaでは自分の集めたものを見るにはそのアカウントにログインする必要があった。色々参考にしてnaki museumを作成。https://oncyber.io/naki-museum。
参考：
きちんとデータベースでの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を自動でカスタムして生成できる仕組みも組み込む。
