Skip to content

Commit b432cc3

Browse files
author
xulei
committed
update tronweb demo
1 parent 5fe79d5 commit b432cc3

File tree

17 files changed

+224
-112
lines changed

17 files changed

+224
-112
lines changed

‎demo/tron-dapp-react-demo/package.json

+6-12
Original file line numberDiff line numberDiff line change
@@ -3,20 +3,11 @@
33
"version": "1.0.0",
44
"private": true,
55
"dependencies": {
6-
"@testing-library/jest-dom": "^5.11.4",
7-
"@testing-library/react": "^11.1.0",
8-
"@testing-library/user-event": "^12.1.10",
9-
"react": "^17.0.1",
10-
"react-dom": "^17.0.1",
11-
"react-scripts": "4.0.1",
12-
"web-vitals": "^0.2.4",
6+
"@ant-design/icons": "^4.7.0",
137
"antd": "^4.8.3",
14-
"axios": "^0.21.0",
158
"bignumber.js": "^9.0.1",
169
"cross-env": "^7.0.2",
1710
"customize-cra": "^1.0.0",
18-
"echarts": "^4.9.0",
19-
"echarts-for-react": "^2.0.16",
2011
"husky": "^4.3.0",
2112
"ismobilejs": "^1.1.1",
2213
"lint-staged": "^10.5.0",
@@ -25,13 +16,16 @@
2516
"mobx-react": "^6.2.2",
2617
"prettier": "^2.1.2",
2718
"qrcode.react": "^1.0.0",
19+
"react": "^16.8.0 || 16.9.0-alpha.0",
2820
"react-app-rewired": "^2.1.6",
29-
"react-countup": "^4.3.3",
21+
"react-dom": "^16.0.1",
3022
"react-intl-universal": "^2.2.5",
3123
"react-router-dom": "^5.2.0",
24+
"react-scripts": "4.0.1",
3225
"sass": "^1.26.8",
3326
"styled-components": "^5.2.1",
34-
"tronweb": "^3.2.3"
27+
"tronweb": "^4.1.0",
28+
"web-vitals": "^0.2.4"
3529
},
3630
"scripts": {
3731
"start": "PORT=18113 cross-env REACT_APP_ENV=test react-app-rewired start",

‎demo/tron-dapp-react-demo/public/index.html

+43
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
7+
<meta name="theme-color" content="#000000" />
8+
<meta
9+
name="description"
10+
content="tronweb demo"
11+
/>
12+
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
13+
<!--
14+
manifest.json provides metadata used when your web app is installed on a
15+
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
16+
-->
17+
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
18+
<!--
19+
Notice the use of %PUBLIC_URL% in the tags above.
20+
It will be replaced with the URL of the `public` folder during the build.
21+
Only files inside the `public` folder can be referenced from the HTML.
22+
23+
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
24+
work correctly both with client-side routing and a non-root public URL.
25+
Learn how to configure a non-root public URL by running `npm run build`.
26+
-->
27+
<title>TronWeb Demo</title>
28+
</head>
29+
<body>
30+
<noscript>You need to enable JavaScript to run this app.</noscript>
31+
<div id="root" class="root"></div>
32+
<!--
33+
This HTML file is a template.
34+
If you open it directly in the browser, you will see an empty page.
35+
36+
You can add webfonts, meta tags, or analytics to this file.
37+
The build step will place the bundled scripts into the <body> tag.
38+
39+
To begin the development, run `npm start` or `yarn start`.
40+
To create a production bundle, use `npm run build` or `yarn build`.
41+
-->
42+
</body>
43+
</html>

‎demo/tron-dapp-react-demo/src/assets/css/index.scss

+4-3
Original file line numberDiff line numberDiff line change
@@ -155,9 +155,9 @@ button,
155155
}
156156

157157
@font-face {
158-
font-family: 'Roboto';
159-
src: url('../font/Roboto/Roboto-Black.ttf');
160-
src: url('../font/Roboto/Roboto-Black.ttf') format('truetype');
158+
// font-family: 'Roboto';
159+
// src: url('../font/Roboto/Roboto-Black.ttf');
160+
// src: url('../font/Roboto/Roboto-Black.ttf') format('truetype');
161161
}
162162

163163
body {
@@ -185,6 +185,7 @@ body {
185185
margin: auto;
186186
width: 85px;
187187
}
188+
188189
.main-content {
189190
margin-left: 220px;
190191
padding: 30px;

‎demo/tron-dapp-react-demo/src/components/Header.js

+54
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
import React from 'react';
2+
import isMobile from 'ismobilejs';
3+
import intl from 'react-intl-universal';
4+
import { inject, observer } from 'mobx-react';
5+
import { Link } from 'react-router-dom';
6+
import { Layout, Select, Menu, Modal, Drawer, Tooltip, Popover, Button } from 'antd';
7+
8+
import { cutMiddle, copyToClipboard } from '../utils/helper';
9+
import '../assets/css/header.scss';
10+
import walletSuccess from '../assets/images/walletSuccess.svg';
11+
import walletFail from '../assets/images/walletFail.svg';
12+
import logoSingle from '../assets/images/mainLogo.png';
13+
import tronlink from '../assets/images/tronlinkLogo.svg';
14+
import tronlinkBlue from '../assets/images/tronlinkBlue.svg';
15+
import tronlinkRightArrow from '../assets/images/tronlinkRightArrow.svg';
16+
import { PieChartOutlined, DesktopOutlined, ContainerOutlined } from '@ant-design/icons';
17+
18+
const { Option } = Select;
19+
const { SubMenu } = Menu;
20+
21+
@inject('network')
22+
@observer
23+
class LeftMenu extends React.Component {
24+
constructor(props) {
25+
super(props);
26+
this.state = {};
27+
}
28+
29+
componentDidMount() {
30+
this.props.instantActions && this.props.instantActions(); // should excute when componentDidMount, we need not check if a user logined or not
31+
if (!this.props.network.isConnected) {
32+
this.props.network.initTronLinkWallet(
33+
() => {
34+
this.props.mountedActions && this.props.mountedActions();
35+
},
36+
() => {
37+
// if a user do not login TronLink wallet, we should do something
38+
this.props.unmountedActions && this.props.unmountedActions();
39+
}
40+
);
41+
} else {
42+
this.props.mountedActions && this.props.mountedActions();
43+
}
44+
// when a user change a node or change a account or change a chain type,
45+
// we shoule listen TronLink to reload the webpage to get new account info
46+
this.props.network.listenTronLink();
47+
}
48+
49+
render() {
50+
return <></>;
51+
}
52+
}
53+
54+
export default LeftMenu;

‎demo/tron-dapp-react-demo/src/components/Home.js

+30
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import React from 'react';
2+
import { inject, observer } from 'mobx-react';
3+
import HeaderPage from './Header';
4+
import UserList from './UserList';
5+
6+
@inject('dapp')
7+
@observer
8+
class Home extends React.Component {
9+
constructor(props) {
10+
super(props);
11+
this.state = {};
12+
}
13+
14+
componentDidMount = async () => {};
15+
16+
mountedActions = async () => {
17+
await this.props.dapp.getUserList();
18+
};
19+
20+
render() {
21+
return (
22+
<div>
23+
<HeaderPage mountedActions={this.mountedActions} />
24+
<UserList />
25+
</div>
26+
);
27+
}
28+
}
29+
30+
export default Home;

‎demo/tron-dapp-react-demo/src/components/UserList.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -101,7 +101,7 @@ class UserList extends React.Component {
101101
title: intl.get('table.balance'),
102102
dataIndex: 'balance',
103103
key: '3',
104-
render: (text, item) => <span> {formatNumber({ text })}</span>
104+
render: (text, item) => <span> {isNaN(text) ? '--' : formatNumber({ text })}</span>
105105
},
106106
{
107107
title: intl.get('table.transfer'),

‎demo/tron-dapp-react-demo/src/config.js

+4
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,10 @@ const Config = {
66
privateKey: '01',
77
fullHost: 'https://api.trongrid.io'
88
},
9+
trongrid: {
10+
host: 'https://api.trongrid.io',
11+
key: 'xxxxxx'
12+
},
913
service: {},
1014
contract: {
1115
usdt: 'TR7NHqjeKQxGTCi8q8ZY4pL8otSzgjLj6t'

‎demo/tron-dapp-react-demo/src/locales/en-US.json

+1-34
Original file line numberDiff line numberDiff line change
@@ -1,39 +1,10 @@
11
{
2-
"navi": {
3-
"wallet_linkbtn": "Connect Wallet",
4-
"index_btn": "Home",
5-
"index_btn1": "Home1",
6-
"index_btn2": "Home2",
7-
"white_paper": "Whitepaper",
8-
"report": "Audit Report",
9-
"twitter": "Twitter",
10-
"telegram": "Telegram",
11-
"help": "Help"
12-
},
13-
"login_modal": {
14-
"tronlink": "TronLink Wallet",
15-
"no_tronlink_tip": {
16-
"tip1": "Haven't installed TronLink yet?",
17-
"tip2": "Click here>>"
18-
},
19-
"initializing": "Initializing...",
20-
"login_tips": "Go to <a href='https://chrome.google.com/webstore/detail/tronlink%EF%BC%88%E6%B3%A2%E5%AE%9D%E9%92%B1%E5%8C%85%EF%BC%89/ibnejdfjmmkpcnlpebklmnkoeoihofec'>TronLink Wallet</a> for connection."
21-
},
222
"account_modal": {
233
"account": "Account",
244
"connect_with_tronlink": "Connected with TronLink",
255
"copy": "Copy",
266
"copied": "Copied"
277
},
28-
"wallet": {
29-
"accept_tips": "Choosing to connect indicates that you have accepted",
30-
"service": "Terms of Use",
31-
"privacy": "Privacy Policy",
32-
"no_wallet": "No TronLink Wallet?",
33-
"click_to_get": "Click to download TronLink",
34-
"authorize_justlend": "You need to confirm in your wallet for connection to JustLend",
35-
"use_justlend": "Please connect to TronLink wallet to use JustLend"
36-
},
378
"deposit": {
389
"deposit": "Supply",
3910
"withdraw": "Withdraw",
@@ -69,9 +40,5 @@
6940
"to": "Recieve Address",
7041
"confirm": "Transfer"
7142
},
72-
"no_data": "No Data",
73-
"footer": {
74-
"audit": "Audit Report",
75-
"develop": "API Doc"
76-
}
43+
"no_data": "No Data"
7744
}

‎demo/tron-dapp-react-demo/src/locales/zh-CN.json

+1-34
Original file line numberDiff line numberDiff line change
@@ -1,39 +1,10 @@
11
{
2-
"navi": {
3-
"wallet_linkbtn": "连接钱包",
4-
"index_btn": "首页",
5-
"index_btn1": "首页1",
6-
"index_btn2": "首页2",
7-
"white_paper": "白皮书",
8-
"report": "审计报告",
9-
"twitter": "推特",
10-
"telegram": "电报",
11-
"help": "帮助"
12-
},
13-
"login_modal": {
14-
"tronlink": "TronLink 钱包",
15-
"no_tronlink_tip": {
16-
"tip1": "还没安装 TronLink？",
17-
"tip2": "请点击此处>>"
18-
},
19-
"initializing": "正在初始化...",
20-
"login_tips": "请使用 <a href='https://chrome.google.com/webstore/detail/tronlink%EF%BC%88%E6%B3%A2%E5%AE%9D%E9%92%B1%E5%8C%85%EF%BC%89/ibnejdfjmmkpcnlpebklmnkoeoihofec'>TronLink 钱包 </a>进行连接"
21-
},
222
"account_modal": {
233
"account": "账户",
244
"connect_with_tronlink": "已连接 TronLink",
255
"copy": "复制",
266
"copied": "已复制"
277
},
28-
"wallet": {
29-
"accept_tips": "连接则代表您已接受",
30-
"service": "服务条款",
31-
"privacy": "隐私协议",
32-
"no_wallet": "还没有TronLink钱包？",
33-
"click_to_get": "点击获取",
34-
"authorize_justlend": "您需要在钱包中确认以连接JustLend",
35-
"use_justlend": "请连接钱包以开始使用JustLend"
36-
},
378
"deposit": {
389
"deposit": "存款",
3910
"withdraw": "提现",
@@ -69,9 +40,5 @@
6940
"to": "接受地址",
7041
"confirm": "确认"
7142
},
72-
"no_data": "无数据",
73-
"footer": {
74-
"audit": "审计报告",
75-
"develop": "API文档"
76-
}
43+
"no_data": "无数据"
7744
}

‎demo/tron-dapp-react-demo/src/routes/Home.js

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import React from 'react';
2+
import { inject, observer } from 'mobx-react';
3+
4+
import HomePage from '../components/Home';
5+
6+
@inject('network')
7+
@observer
8+
class Home extends React.Component {
9+
render() {
10+
return <HomePage />;
11+
}
12+
}
13+
14+
export default Home;

‎demo/tron-dapp-react-demo/src/stores/dapp.js

+1-7
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,4 @@
1-
import React from 'react';
21
import { observable } from 'mobx';
3-
import { notification } from 'antd';
4-
import intl from 'react-intl-universal';
5-
import Config from '../config';
6-
import { tronscanTX } from '../utils/helper';
7-
import Tip from '../components/Tip';
82
import { getUserList } from '../utils/backend';
93
export default class NetworkStore {
104
@observable userList = [];
@@ -20,7 +14,7 @@ export default class NetworkStore {
2014
};
2115

2216
getUserList = async () => {
23-
const account = this.rootStore.network.defaultAccount;
17+
const account = window.defaultAccount;
2418
if (!account) return;
2519
const res = await getUserList(account);
2620
if (!res.success) return;

‎demo/tron-dapp-react-demo/src/stores/index.js

-4
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,7 @@
1-
import { observable } from 'mobx';
2-
31
import NetworkStore from './network';
42
import System from './system';
53
import Dapp from './dapp';
64

7-
import Config from '../config';
8-
95
class RootStore {
106
constructor() {
117
this.network = new NetworkStore(this);

0 commit comments

Comments
 (0)