//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なので引数でデータ内容を受けられないので、データベースの接続などは自前で行う必要がありそう。
