Blockchain code Metaverse VR

Crypto×VR×SmartContract(401)

スポンサーリンク

//tips

//smart contract

Redeployする際にはfactory.jsの中にあるアドレスも更新する必要がある。

今、depoly.jsの問題については確認中なので実際の展開はできないが流れだけは追っていく。

Index.jsでのgetInitialProps()と同様に生成した既存のcampaigns情報をshow.jsでも取得できるようにする。

class CampaignShow extends Component{

static async getInitialProps(props){
//ユーザーに見せたいcampaignのアドレス表示

props.query.address;

}

ただ、この際にキャンペーンアドレスのみしか渡せるようになっていないので、campagin.jsでインスタンス生成することで、コントラクトの情報を取得できるようにする。

import web3 from './web3';
import Campaign from './build/Campaign.json';

//show.jsのCampaignshowで表示させる内容

export default (address)=>{
return new web3.eth.Contract(
JSON.parse(Campaign.interface),
address

);
}

Show.jsの方は大元のコントラクトに蓄積されている情報を取得するため下記のような構成にしている。

class CampaignShow extends Component{

static async getInitialProps(props){
//ユーザーに見せたいcampaignのアドレス表示
const campaign=Campaign(props.query.address);

//先に.solの方に刻んだgetSummaryの内容を組み込めば良い
const summary=await campaign.methods.getSummary().call();
//console.log(summary);

//sumarryの呼び出し結果はobjectなので要素で取り出してあげる
return{
minimumContribution:summary[0],
balance:summary[1],
requestsCount:summary[2],
approversCount:summary[3],
manager:summary[4]

}

Porpsは何だったかわからなくなったので調べると、Next.jsを使用する際、ページロード時にデータを取得するには、getInitialPropsという非同期で静的なメソッドを使い、このメソッドは、JavaScriptの単純なObjectを非同期に取得し、返り値はpropsに注入するとのこと。

なのでpropsの一部を表示したい場合には、下記のようにする。

renderCards(){

//上のreturn項目を渡したい
const {
balance,
manager,
minimumContribution,
requestsCount,
approversCount
}=this.props;

const items=[
{
header: manager,
meta: 'Address of Manager',
description:'The manager created this campaign and can create requests to withdraw money'
}
];
return <Card.Group items ={items} />;
}

最終的にレンダリングするために、render()以下に内容を記載、{this.renderCards()}で表示させ、style:{overflowWrap:'break-word’}で溢れた文字をカードに収めるようにしている。

const items=[
{
header: manager,
meta: 'Address of Manager',
description:'The manager created this campaign and can create requests to withdraw money',
style:{overflowWrap:'break-word'}//文字を折り畳んでカードに収める
}
];
return <Card.Group items ={items} />;
}

render(){
return(
<Layout>
<h3>CampaignShow</h3>
{this.renderCards()}
</Layout>
);
}

同様にmanager以外のヘッダーを作成。その後に寄付ボタンをcampaign詳細ページにも表示させたいので、これは先のコードを貼り付けるのではなく、寄付ボタン部分をコンポーネント化して組み込み対応する方法で考える。

import React, {Component} from 'react';
import {Button, Form,Input,Message} from 'semantic-ui-react';

class ContributeForm extends Component{
//donateボタンコンポーネントの部品化
render(){
return(
<Form>
<Form.Field>
<label>Amount to contribute</label>
<Input
label="ether" labelPosition="right"

/>
</Form.Field>
<Button primary>
Contribute!
</Button>
</Form>
);

}
}

export default ContributeForm;

このようにdonate部分のコンポーネント化を行い、show.jsにインポート。レンダリング部分に内容を追加する。

render(){
return(
<Layout>
<h3>CampaignShow</h3>
{this.renderCards()}
<ContributeForm />
</Layout>
);
}

人気の記事

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.