Blockchain code Metaverse VR

Crypto×VR×SmartContract(530)

スポンサーリンク

//tips

//smart contract

まずはMediumカードの整理。

Mediumは下記のような内容に変更。リンクはつけたが文章などがないと空白が目立つ。

return (
<div>
<h1>Medium</h1>

{data.map((item,index) => (

<Card key={index} elevation={3}>

<CardHeader
title={item.title}
subheader={item.author}
/>

<CardContent>
<MuiLink href={item.link} target="_blank" variant="h6" rel="noopener noreferrer">Go to My Medium</MuiLink>
</CardContent>

</Card>

))}

</div>

文章も追加した。

if(data[0]){

details=data[0].content;

let parser = new DOMParser();
let doc = parser.parseFromString(details, 'text/html');
var p_element = doc.querySelectorAll("p");

var detailnew="";

p_element.forEach(function(userItem) {
if(userItem.textContent !=undefined){
detailnew += userItem.textContent+'.'
}
});

details=detailnew;

}

気づいた点は同一useridに複数のアドレスが格納されており、その一つが表示されているということ。

基本的には同じもののみ格納でき、それ以外は更新させるようにしたい。

Address: {address}

if(Item.address !=null||Item.address !=undefined){
if(address==undefined||address==null||address==''){
setaddress(Item.address)
}
}

編集マークを追加し、ボタンを押したらaddressを追加できるようにする。<br />での空行も追加。

<Grid item xs={12} md={8} lg={9}>
<div>
<Typography variant="h5" >
Address: {address}<EditOutlinedIcon />
</Typography>

<br />

[id].jsではAddressはデータベースにあれば表示、なければ非表示とし、editのみで編集できるものとする。

Address: {address}<EditOutlinedIcon onClick={()=>console.log('edit address')}/>

こちらの編集マークをクリックするとonclick効果が発動することを確認できたので、フラグを作り、クリックを押されたタイミングでフィールドに記入できるものに表示を切り替える。

const [addressflag,setAddress]=useState(false)

Address: {address}<EditOutlinedIcon onClick={()=>{setAddress(!addressflag)}}/>

onChange={(e)=>setNewaddress(e.target.value)}
const [newaddress,setNewaddress]=useState(false)

最新テキスト入力時にデータベースを更新できるようにする。
<form noValidate autoComplete="off" onSubmit={handleOnNewaddress}>

イベント関数handleOnNewaddressを新たに生成。

ここも既に存在していればupdate,存在しなければ追加での対応となる。

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()

}

これらはdebankの仕組みの焼き直しで対応可能。ばっちり機能した。

各SNSのアイコンを探していたらまとまっているものを見つけた。

https://osunbook6.com/official-logo-download/

こちらからtwitter,discord,youtube,teleglam,whatsappなどの公式アイコンを探して導入していく。

まずはtwitterから。

https://about.twitter.com/en/who-we-are/brand-toolkit

Youtubeは記入フォームがあったので記入して提出。

https://www.youtube.com/intl/ja/howyoutubeworks/resources/brand-resources/#logos-icons-colors

同じページからロゴも取得。

Discordは下記から取得。

https://discord.com/branding

Teleglamのロゴはここから取得。

https://telegram.org/tour/screenshots

whatsappはここから。

https://www.facebook.com/brand/resources/whatsapp/whatsapp-brand

あとはimageの大きさを合わせてペチペチ貼っていく。これらのリンク先登録場所は別途作る必要がありそう。

firebase storageにAdminフォルダを追加し、そちらに取得したロゴデータたちを格納していく。

現在のimage表示は<img src={image} alt="" width="250" height="250"/>として行っているので、大きさなどはこちらで調整するか。

現在NFTの表示は各々のユーザーのidを参照して行っているのでそちらをadminを参照させれば良い。

//image表示
const gsReference = ref(
firestorage,
"gs://myapp-8e583.appspot.com/"+ninja[0].userid+"/image.jpg"
)

getDownloadURL(gsReference)
.then(url => {
setImage(url)
})
.catch(err => console.log(err))

そういえば自分のnft imageのアップロードの仕組みはまだ組み込めていなかったか。ここは後で追加。

const [twitterimage,setImagetw]=useState('')
const [discordimage,setImageds]=useState('')
const [youtubeimage,setImageyt]=useState('')
const [teleimage,setImagetl]=useState('')
const [whatsimage,setImagewts]=useState('')

表示できたのはいいがそれぞれのロゴのサイズに表示領域を合わせる必要がある。

隣同士のアイコンの間に隙間を設けたいのでmakestyleでそこを調整するか。もう少し。

参考:

https://maku.blog/p/fw7gpx7/

他の機能としてはfollow,followert機能の追加を最後にし、Topページの作成、全体表示、[id].jsを整えて、完成とするか。

chat、掲示板機能は他の接続snsで代替できるのでどうするか検討。

人気の記事

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.