EncryptMessage.js Create EncryptMessage page
import { Account, Deadline, NetworkType, TransferTransaction, TransactionHttp, PublicAccount } from 'nem2-sdk'
import { Box, Button, Container, TextField, Typography } from '@material-ui/core'
import React, { Component } from 'react'
# 親の顔より見たコンポーネント
class EncryptMessage extends Component {
constructor(props) {
super(props)
this.state = {
input: {
public_key: '',
message: '',
},
}
}
# input: という書き方
handleFormInputChanged(event) {
this.setState({
input: {
...this.state.input,
[event.target.name]: event.target.value,
},
})
}
# 公開鍵をもらってくる、秘密鍵を作る、公開鍵で暗号化?
handleSendMessage() {
if (this.state.input.public_key.length === 64) {
try {
const privateKey = process.env.REACT_APP_PRIVATE_KEY
const account = Account.createFromPrivateKey(privateKey, NetworkType.MIJIN_TEST)
const RecipientAccount = PublicAccount.createFromPublicKey(this.state.input.public_key, NetworkType.MIJIN_TEST)
const encryptedMessage = account.encryptMessage(this.state.input.message, RecipientAccount)
const transferTransaction = TransferTransaction.create(
Deadline.create(),
RecipientAccount.address,
[],
encryptedMessage,
NetworkType.MIJIN_TEST
)
const signedTransaction = account.sign(transferTransaction, process.env.REACT_APP_NETWORK_GENERATION_HASH)
const transactionHttp = new TransactionHttp('http://localhost:3000')
# この書き方は重要かもしれない
transactionHttp.announce(signedTransaction).subscribe(x => console.log(x), err => console.error(err))
} catch (e) {
console.log(e)
}
}
}
render() {
return (
<Container maxWidth="md">
<Box m={2}>
<Box p={1}>
<Typography variant="h4" gutterBottom>
暗号化メッセージを含むトランザクションの作成
</Typography>
</Box>
<Box p={1}>
<Typography variant="body1" gutterBottom>
受け手の公開鍵
</Typography>
<TextField
label="Recipient Public Key"
name="public_key"
onChange={this.handleFormInputChanged.bind(this)}
value={this.state.input.public_key}
margin="normal"
fullWidth
/>
</Box>
<Box p={1}>
<Typography variant="body1" gutterBottom>
メッセージ
</Typography>
<TextField
label="メッセージ"
name="message"
onChange={this.handleFormInputChanged.bind(this)}
value={this.state.input.message}
margin="normal"
fullWidth
/>
<Button variant="contained" color="primary" onClick={this.handleSendMessage.bind(this)}>
送金
</Button>
</Box>
</Box>
</Container>
)
}
}
export default EncryptMessage
Account <!-- Create Account Page --!>
# モジュールのインポート
import React, { Component } from 'react'
import {
Box,
Button,
Container,
Paper,
Table,
TableBody,
TableCell,
TableHead,
TableRow,
TextField,
Typography,
} from '@material-ui/core'
import { AccountHttp, Address } from 'nem2-sdk'
# accountHttp
const accountHttp = new AccountHttp('http://localhost:3000')
# ファンクションコンポーネント?
class Account extends Component {
constructor(props) {
super(props)
# 三項演算子で判定して、nullだったら'',それ以外はlocalStorageの'address'の値を取得して代入
const address = localStorage.getItem('address') === null ? '' : JSON.parse(localStorage.getItem('address'))
this.state = {
input: {
address,
},
public_key: '',
mosaic: 0,
importance: 0,
}
}
# 関数の実行
componentDidMount() {
if (this.state.input.address.length === 40 || this.state.input.address.length === 46) {
try {
# addressの定義
const address = Address.createFromRawAddress(this.state.input.address)
# createFromRawAddress(str)はAddressで定義されているはず
accountHttp.getAccountInfo(address).subscribe(
accountInfo => {
this.setState({
#各種情報はacccountinfoに入っているはず
public_key: accountInfo.publicKey,
mosaic: accountInfo.mosaics[0].amount.compact(),
importance: accountInfo.importance.compact(),
})
console.log(accountInfo)
},
err => console.error(err)
)
} catch (e) {
console.log(e)
}
}
}
# this = 同じクラスの中で呼び出せる?
handleFormInputChanged(event) {
# stateにリストを定義する
# 参照:
-----
setState部分の解説
...lists, とは
...this.state.listsの部分では今のsetStateのlist配列を展開し、その後ろの
{ title: this.state.title, author: this.state.author }
の部分でフォームに入力されたtitle, authorの値を配列listsの最後に追加します。
...this.state.listsがないと2回目以降のonClickの際に、今までにlists:[]に追加した内容が消えてしまうので注意してください。
----
this.setState({
input: {
...this.state.input,
[event.target.name]: event.target.value,
},
})
localStorage.setItem(event.target.name, JSON.stringify(event.target.value))
}
handleGetAddressInfo() {
if (this.state.input.address.length === 40 || this.state.input.address.length === 46) {
try {
const address = Address.createFromRawAddress(this.state.input.address)
# accountInfoの中身を入れる
accountHttp.getAccountInfo(address).subscribe(
accountInfo => {
this.setState({
public_key: accountInfo.publicKey,
mosaic: accountInfo.mosaics[0].amount.compact(),
importance: accountInfo.importance.compact(),
})
console.log(accountInfo)
},
err => console.error(err)
)
} catch (e) {
console.log(e)
}
}
}
render() {
return (
<Container maxWidth="md">
<Box m={2}>
<Box p={1}>
<Typography variant="h4" gutterBottom>
NEMアカウント情報の取得
</Typography>
</Box>
<Box p={1}>
<Typography variant="body1" gutterBottom>
ネムのカタパルトユーザーのアドレスを入力
</Typography>
# bind:入れ子構造の中でthis=インスタンスを参照した際に親クラスのthisを参照できなくなってしまうことを防ぐ。つまり先程の入れ子のケースでは、入れ子になっていない(this
が本来の値を指している)場所でbind(this)
とすることで、this
の値が変わってしまうのを防ぐことが出来る。
# 参照:
<TextField
label="Address"
name="address"
onChange={this.handleFormInputChanged.bind(this)}
value={this.state.input.address}
margin="normal"
styles={{ width: '100%' }}
fullWidth
/>
<Button variant="contained" color="primary" onClick={this.handleGetAddressInfo.bind(this)}>
取得
</Button>
</Box>
<Box p={1}>
<Paper>
<Table>
<TableHead>
<TableRow>
<TableCell>ラベル</TableCell>
<TableCell>値</TableCell>
</TableRow>
</TableHead>
<TableBody style={{ wordBreak: 'break-all' }}>
<TableRow>
<TableCell>アドレス</TableCell>
<TableCell>{this.state.input.address}</TableCell>
</TableRow>
<TableRow>
<TableCell>公開鍵</TableCell>
<TableCell>{this.state.public_key}</TableCell>
</TableRow>
<TableRow>
<TableCell>モザイク</TableCell>
<TableCell>{this.state.mosaic}</TableCell>
</TableRow>
<TableRow>
<TableCell>インポータンス</TableCell>
<TableCell>{this.state.importance}</TableCell>
</TableRow>
</TableBody>
</Table>
</Paper>
</Box>
</Box>
</Container>
)
}
}
export default Account
Reactアプリケーションのソースコードを読む
別に仮想通貨に興味があるわけではないのだがReactを読みたいのでこちらのソースコードを解読する。
- 全体の構造
public
-favicon.icon
-index.html
-manifest.json
src
-components
--Layout.js
--RouteWithLayout.js
-pages
--Account.js
--EncryptMessage.js
--Home.js
--Monitoring.js
--NewAccount.js
--NewTransaction.js
--NewWallet.js
--SearchTx.js
--Transactions.js
-App.css
-App.js
-App.test.js
-index.css
-index.js
-logo.svg
-serviceWorker.js
.gitignore
Readme.MD
package.json
yarnlock
- 取り掛かる順番
おそらくpagesの中にロジックがあると思われる。
それをAppやindexで出力している。
そのためまずpagesのロジックを確認していく。
- 形式
一日一つ程度確認してアップする。
直近の勉強
- React
以下の書籍で勉強していた。
以下の書籍で勉強していた。
Amazon.co.jp: AWSコンテナ設計・構築[本格]入門 : 株式会社野村総合研究所, 新井雅也, 馬勝淳史, NRIネットコム株式会社, 佐々木拓郎: 本
この辺りの動画を見ていた。
- 次やること
これを掘って、React初級者になる
また、どうせPM(プロジェクトマネージャ、またはプロダクトマネージャ)になると思われるので、
こちらを読んで吸収していこうと思っている。
終わり
一週間でマスターするCをみてみた
- まとめ
自分が前にインターンでpythonなどを書いていたこともありなんだかんだで中身が読めるようになっている。しかしpythonで触っていなかったところが2つあった。
①再帰
②アドレス
関数を定義する前に関数を宣言すれば、関数を使って良い。
?
どんな処理になっているのかはよくわからないが、こんな感じ
def average(x,y):
x = 4
y = 3
i = average(x,y)
def average(x,y):
ave= (x + y)/2
return ave
みたいな感じ
- ポインタ
まとめ:ポインタを代入すると同じものになる。(pがあたかもその変数のように振る舞う。)
a = 4
b = 3
*p = 1
p = &a ←この瞬間にa と pのアドレスが同じ=同じものになる。特にaが*pになる