Blockchain code Metaverse VR

Crypto×VR×SmartContract(398)

スポンサーリンク

//tips

//smart contract

実装を進める中でブラウザ表示にエラーが出ることがわかる。それは以前のreactでのアプリ作成と違いnext.jsを使用するとサーバーでのレンダリングとなり、web3.jsのwindow変数が理解されないからである。

その代わりにメタマスクをユーザーが使用しなくても、ページをみれるように設計できる。

サーバーとブラウザ上で2度レンダリングされる下記を編集する。

import Web3 from 'web3';
//現在では下記の記述が必要になっている
window.ethereum.request({ method: "eth_requestAccounts" });

const web3 = new Web3(window.ethereum);

export default web3;

これをサーバーでもブラウザでもアクセスできるようにする。

import Web3 from "web3";

let web3;

if (typeof window !== "undefined" && typeof window.ethereum !== "undefined") {
// We are in the browser and metamask is running.
window.ethereum.request({ method: "eth_requestAccounts" });
web3 = new Web3(window.ethereum);
} else {
// We are on the server *OR* the user is not running metamask
//ここで自身のproviderを作成している
const provider = new Web3.providers.HttpProvider(
"https://rinkeby.infura.io/v3/15c1d32581894b88a92d8d9e519e476c'"
);
web3 = new Web3(provider);
}

export default web3;

さらにnext.jsのサーバーを使用することで気をつけなければいけないのはブラウザ表示する内容のcomponentDidMountはそのままでは実行されないので、加工して実行させる必要がある。

CampaignIndex を書いてあるIndex.jsを加工する。

class CampaignIndex extends Component{

static async getInitialProps(){
const campaigns=await factory.methods.getDeployedCampaigns.call();
//factoryインスタンスからgetDeployedCampaignsを呼び出し

return {campaigns};

}

render(){
return<div>Campaigns Index!</div>//{this.props.campaigns[0]}
}
}

ここからはセマンティックUI reactという補助キットを使用することでページのhtmlやcssを構築していく。

npm install --save semantic-ui-react
npm install --save semantic-ui-css

その上で、index.jsを下記のように修正。jsだけなく、cssもきちんと追加することを忘れない。

render(){

return(
<div>

<link
rel="stylesheet"
href="//cdnjs.cloudflare.com/ajax/libs/semantic-react-ui/2.2.12/semantic.min.css"

/>
<h3>Open Campaign</h3>
{this.renderCampaigns()}

<Button
content="Create Campaign"
icon="add"
primary

/>
</div>
);
}

この中に複数ページで使いまわせる部品を挿入したい場合にはlayout componentとして別の手段を取る。

新たにconponentsフォルダを作成。

import React from "react";

const Layout = (props) => {
return(
<div>
<h1>Im a header</h1>
{props.children}
<h1>Im a footer</h1>
</div>
);
};
export default Layout;

面白いのが、このようにlayout.jsを作成し、

return(
<Layout>
<div>
・・・
</div>
</Layout>

このように挟むことで、挟んだ部分が {props.children}として認識されること。

さらにヘッダーのmenu部分をコンポーネントとして作り込むために別ファイルを作成する。semantic-ui-reactをベースにメニュー機能を取り入れている。

import React from 'react';
import {Menu, MenuHeader} from 'semantic-ui-react';

const Layout = (props) => {
return(
<Menu>
<Menu.Item>
Crowdcoin
</Menu.Item>

<Menu.Menu position="right">
<Menu.Item>
Campaigns
</Menu.Item>

<Menu.Item>
+
</Menu.Item>

</Menu.Menu>
</Menu>
);
};
export default Layout;

これを先のlayoutにインポートして使用する。

const Layout = (props) => {
return(
<div>
<Header />
{props.children}
</div>
);

シンプルにコンポーネントを格納できた。素晴らしい。

今度は新たな遷移先ページを作成していく。

これはpagesフォルダ内にjsで作成する。

現在はindex.jsとshow.jsのみ。show.jsは削除していく。campaignsフォルダを中に作成し、new.jsを組み込んだ。このように新たなキャンペーンはこちらに追加されるようにする。

New.jsを作成する。

import React,{Comment, Component} from 'react';

class CampaignNew extends Component{

render(){

return <h1>New Campaign!</h1>
}

}

export default CampaignNew;

 

人気の記事

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.