Blockchain code Metaverse VR

Crypto×VR×SmartContract(540)

スポンサーリンク

//tips

//smart contract

loading.ioのSVGアニメーション取得を行なっていく。

サイト内で取得したいfree svgをgoogleアカウントでログインし取得。

<div>
<img src="/Spinner-1s-200px.svg"/>
<div>Loading...</div>
</div>

Publicフォルダに配置し、こちらで表示させてみる。

きちんとloading時に表示された素晴らしい。ただ背景が灰色のため少し目立つ。

背景白にして、TransparentをONにしたら無事に背景透過できた。ありがたや。

やっとloadingアイコンが表示できるようになったと思ったら、firebaseの方で画像に関するエラーが多発している。

error - unhandledRejection: FirebaseError: Firebase Storage: User does not have permission to access 'admin/Logo.png'. (storage/unauthorized)

error - unhandledRejection: FirebaseError: Firebase Storage: User does not have permission to access 'admin/WhatsApp_Logo_2.png'. (storage/unauthorized)

Firestorageのルールを見てみるとタイムスタンプで制限がかかっていた。

rules_version = '2';
service firebase.storage {
match /b/{bucket}/o {
match /{allPaths=**} {
allow read, write: if
request.time < timestamp.date(2022, 4, 19);
}
}

ここを allow read, write: if true;に変更。無事に解決した。

アイコンを画面中央に表示させたかったのでmakestyleで整えようとしたがうまくいかず、最終的にはgridを使用することにした。

import { Grid } from '@mui/material';

export default function Loader(){

const classes=useStyles()

return(
<div  >
<Grid container
direction="row"
justifyContent="center"
alignItems="center"
>
<img src="/Spin-1.9s-68px.svg"/>
</Grid>

</div>
)

}

こちらにてloading中の画面情報の中央にloadingアイコンが表示される。

文字の色を変更。シンプルにタグ内にstyleを設定した。

<Typography variant="h4" component="h1" style={{color: '#99ccff'}} gutterBottom>

https://surajsharma.net/blog/react-material-ui-set-typography-color

Layout上部の下記内容部分に自分のNFTまたはimageをstoreから参照して表示できるようにする。

{/* <Typography>
Mario
</Typography> */}

また、NFTであることを示すためのintroduce linkなども欲しいかもしれない。

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

まずはlayoutからimageの参照ができるのか確認する。このlayoutが組み込まれているのが_app.jsなので引数でデータ内容を受けられないので、データベースの接続などは自前で行う必要がありそう。

人気の記事

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.