├── .env.production
├── .gitignore
├── .travis.yml
├── Procfile
├── README.md
├── app.js
├── package-lock.json
├── package.json
├── public
├── CNAME
├── assets
│ ├── bancor.png
│ ├── chainMonsters.png
│ ├── changelly.png
│ ├── coinbase.png
│ ├── cryptoCities.png
│ ├── cryptoFighters.png
│ ├── cryptodungeons.png
│ ├── cryptoracing.png
│ ├── decentraland.png
│ ├── efolio.png
│ ├── ercdex.png
│ ├── etherbots.png
│ ├── etheremon.png
│ ├── fishbank.io.png
│ ├── hexel.png
│ ├── indacoin.png
│ ├── indacoin.webp
│ ├── kyber.png
│ ├── peepeth.png
│ ├── powh3d.png
│ ├── rarebits.png
│ ├── simplex.png
│ ├── token.store.png
│ ├── wyre.png
│ └── yticons.png
├── favicon.ico
├── index.html
├── logo_solid_square_blue.png
└── manifest.json
└── src
├── App.css
├── App.js
├── App.test.js
├── components
├── ContactUs.js
├── DAppCard.js
├── DAppItem.js
├── DAppItems.js
├── DAppTopCards.js
├── DApps.js
├── DAppsCategory.js
├── DAppsDisabled.js
├── NonWeb3Browser.js
├── Sandbox.js
└── systemchecks
│ ├── BrowserVersion.js
│ ├── ConnectionStatus.js
│ └── NetworkIdentity.js
├── dapps
├── BuyCrypto
│ ├── components
│ │ ├── ProviderItem.js
│ │ ├── ProviderItems.js
│ │ └── ServiceProviders.js
│ └── index.js
└── GetEther
│ ├── components
│ ├── ProviderItem.js
│ ├── ProviderItems.js
│ └── ServiceProviders.js
│ └── index.js
├── favicon.ico
├── index.css
├── index.js
├── logo.svg
├── logo_solid_square_blue.svg
├── network
├── TrustClient.js
└── TrustWeb3.js
├── networks.js
├── registerServiceWorker.js
└── utils
├── provider.js
└── utils.js
/.env.production:
--------------------------------------------------------------------------------
1 | REACT_APP_GENERATE_SOURCEMAP=false
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_STORE
2 | node_modules
3 | *~
4 | *.pyc
5 | .grunt
6 | _SpecRunner.html
7 | __benchmarks__
8 | build/
9 | remote-repo/
10 | coverage/
11 | flow-coverage/
12 | .module-cache
13 | fixtures/dom/public/react-dom.js
14 | fixtures/dom/public/react.js
15 | test/the-files-to-test.generated.js
16 | *.log*
17 | chrome-user-data
18 | *.sublime-project
19 | *.sublime-workspace
20 | .idea
21 | *.iml
22 | .vscode
23 | *.swp
24 | *.swo
25 |
--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
1 | language: node_js
2 |
3 | node_js:
4 | - "10.12.0"
5 |
6 | before_install:
7 | - npm i -g npm@6.4.1
8 |
9 | script:
10 | - npm run build
--------------------------------------------------------------------------------
/Procfile:
--------------------------------------------------------------------------------
1 | web: node app.js
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # dapps-browser
2 | DApps browser
3 |
4 | ## Get Started
5 | ```
6 | git clone https://github.com/trustwallet/dapps-browser.git
7 | cd dapps-browser
8 | npm install
9 | npm start
10 | ```
11 |
12 | ## Deployment
13 | Automatic deploys from `master` using Heroku
14 | > Every push to master will deploy a new version of this app. Deploys happen automatically: be sure that this branch in GitHub is always in a deployable state and any tests have passed before you push.
15 |
16 | ## ESLint
17 | Run `npm run lint` for ESLintDApps browser
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
--------------------------------------------------------------------------------
/public/logo_solid_square_blue.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/trustwallet/dapps-browser/e78cb107d5e6c5791fdc90dbbd558e3a69a00dfc/public/logo_solid_square_blue.png
--------------------------------------------------------------------------------
/public/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "short_name": "React App",
3 | "name": "Create React App Sample",
4 | "icons": [
5 | {
6 | "src": "favicon.ico",
7 | "sizes": "64x64 32x32 24x24 16x16",
8 | "type": "image/x-icon"
9 | }
10 | ],
11 | "start_url": ".",
12 | "display": "standalone",
13 | "theme_color": "#000000",
14 | "background_color": "#ffffff"
15 | }
16 |
--------------------------------------------------------------------------------
/src/App.css:
--------------------------------------------------------------------------------
1 | .App {
2 | text-align: center;
3 | margin-top: 20vh;
4 | justify-content: center;
5 | }
6 |
7 | .App-logo {
8 | height: 80px;
9 | }
10 |
11 | .App-header {
12 | height: 150px;
13 | color: white;
14 | }
15 |
16 | .App-title {
17 | font-size: 1.5em;
18 | color: #222;
19 | }
20 |
21 | .App-intro {
22 | font-size: large;
23 | font-weight: 100;
24 | color: rgba(44,62,80,0.6);
25 | max-width: 580px;
26 | display: inline-table;
27 | margin: 3px;
28 | }
29 |
30 | header.App-btn {
31 | margin-top: 20px;
32 | display: flex;
33 | justify-content: center;
34 | align-items: center;
35 | }
36 |
37 | button {
38 | border: none;
39 | font-family: inherit;
40 | font-size: 12px;
41 | cursor: pointer;
42 | padding: 17px;
43 | display: inline-block;
44 | text-transform: uppercase;
45 | letter-spacing: 1px;
46 | font-weight: 600;
47 | outline: none;
48 | position: relative;
49 | -webkit-transition: all .3s;
50 | -o-transition: all .3s;
51 | transition: all .3s;
52 | background: #2e91db;
53 | color: #fff;
54 | -webkit-transition: none;
55 | -o-transition: none;
56 | transition: none;
57 | border-radius: 5px;
58 | }
59 |
60 | h3.title {
61 | display: flex;
62 | justify-content: center;
63 | align-items: center;
64 | font-weight: 530;
65 | padding: 16px;
66 | font-size: 18px;
67 | }
68 |
69 | .DApp-desc {
70 | font-size: 13.5px;
71 | font-weight: 100;
72 | color: rgba(44,62,80,0.6);
73 | display: inline-table;
74 | margin: 10px;
75 | display: flex;
76 | justify-content: center;
77 | align-items: center;
78 | margin-bottom: 30px;
79 | }
80 |
81 | h2.categories {
82 | margin-left: 10px;
83 | margin-top: 10px;
84 | padding-top: 12px;
85 | padding-bottom: 10px;
86 | font-weight: 550;
87 | font-size: 18px;
88 | color: #2C3E50;
89 | text-transform: capitalize;
90 | letter-spacing: 1.2px;
91 | border-bottom: 1px solid #f1f1f1;
92 | }
93 |
94 | .media-body {
95 | margin-left: 8px;
96 | -ms-flex: 1;
97 | flex: 1 1;
98 | line-height: 16px;
99 | font-size: 14px;
100 | font-weight: 300;
101 | color: rgba(44,62,80,0.6);
102 | }
103 |
104 | .media-block {
105 | border-radius: 10px;
106 | border-color: #FF5722;
107 | border-width: 2px;
108 | padding-top: 0px;
109 | margin-bottom: 10px;
110 | }
111 | .media-logo {
112 | width: 44px;
113 | vertical-align: middle;
114 | border-style: none;
115 | height: auto;
116 | }
117 |
118 | h4.media-heading {
119 | font-size: 18px;
120 | font-weight: 400;
121 | letter-spacing: 1px;
122 | color: #233240;
123 | }
124 |
125 | dappItem {
126 | color: #233240;
127 | opacity: 0.9;
128 | text-decoration: none;
129 | background-color: transparent;
130 | }
131 |
132 | a:hover {
133 | opacity: 0.75;
134 | text-decoration: none;
135 | }
136 |
137 | .mt-1.align.media {
138 | padding-bottom: 5px;
139 | }
140 |
141 | a.media-left.media-bottom {
142 | margin-left: 10px;
143 | }
144 |
145 | .media-logo {
146 | border-radius: 6px;
147 | }
148 |
149 | .footer {
150 | padding: 10px;
151 | font-size: 14px;
152 | color: #6c757d;
153 | }
154 |
155 | .footer .contact-us {
156 | margin-top: 5px;
157 | }
158 |
159 | .footer .contact-us .contact-us-link {
160 | color: dodgerblue;
161 | }
162 |
163 | .contact-us-group {
164 | color: rgb(48, 39, 40);
165 | margin-top: 10%;
166 | line-height: 75px;
167 | }
168 |
169 | .contact-us-div {
170 | color: dodgerblue;
171 | padding: 15px;
172 | }
173 |
174 | .cards-row {
175 | display: flex;
176 | flex-direction: row;
177 | overflow-x: auto;
178 | margin-top: 10px;
179 | margin-bottom: -15px;
180 | }
181 |
182 | .cards-row::-webkit-scrollbar {
183 | width: 0;
184 | }
185 |
186 | .card-body {
187 | flex-shrink: 0;
188 | flex-grow: 0;
189 | padding: 0;
190 | -webkit-box-shadow: 0px 0px 3px -0.3px #999;
191 | -moz-box-shadow: 0px 0px 3px -0.3px #999;
192 | box-shadow: 0px 0px 3px -0.3px #999;
193 | border: 0px solid #f4f4f4;
194 | width: 150px;
195 | height: 228px;
196 | border-radius: 8px;
197 | margin-top:10px;
198 | margin-left: 10px;
199 | margin-right: 20px;
200 | margin-bottom: 14px;
201 | }
202 |
203 | .media-card-logo {
204 | border-top-left-radius: 6px;
205 | border-top-right-radius: 6px;
206 | width: 150px;
207 | }
208 |
209 | .card-body-title {
210 | padding-top: 1px;
211 | font-size: 14px;
212 | font-weight: 600;
213 | margin-bottom: 22px;
214 | text-align: center;
215 | color: #233240;
216 | }
217 |
218 | .card-body-description{
219 | margin: -23px 4px 4px 4px;
220 | line-height: 13px;
221 | border-radius: 10px;
222 | text-align: center;
223 | font-size: 11.8px;
224 | color: rgba(44,62,80,0.6);
225 | }
--------------------------------------------------------------------------------
/src/App.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import {
3 | BrowserRouter as Router,
4 | Switch,
5 | Route,
6 | } from 'react-router-dom';
7 | import { Container } from 'reactstrap';
8 | import './App.css';
9 | import DApps from './components/DApps.js';
10 | import DAppsCategory from './components/DAppsCategory.js';
11 | import ContactUs from './components/ContactUs.js';
12 | import GetEther from './dapps/GetEther/index';
13 | import BuyCrypto from './dapps/BuyCrypto/index';
14 | import SandBox from './components/Sandbox';
15 | // import { NonWeb3Browser } from "./components/NonWeb3Browser";
16 | // import { TrustWeb3 } from "./network//TrustWeb3";
17 |
18 | const DAppsCategoryComponent = ({ match }) => (
19 |
20 |
22 | );
23 |
24 | const SystemChecks = () => (
25 |
26 | );
27 |
28 | class ModalSwitch extends React.Component {
29 | componentWillUpdate(nextProps) {
30 | const { location } = this.props;
31 |
32 | if ( nextProps.history.action !== 'POP' && (!location.state || !location.state.modal)) {
33 | this.previousLocation = this.props.location;
34 | }
35 | }
36 |
37 | previousLocation = this.props.location;
38 |
39 | render() {
40 | const { location } = this.props;
41 | const isModal = !!(
42 | location.state &&
43 | location.state.modal &&
44 | this.previousLocation !== location
45 | );
46 | // const isTrust = new TrustWeb3().isTrust()
47 |
48 | // if (!isTrust) {
49 | // return (
50 | //
51 | //
Have that app already?
52 | //
58 |
59 |
60 |
67 |
68 |
69 | );
70 | }
71 | }
72 |
73 | const App = () => (
74 |
75 |
77 | );
78 |
79 | export default App;
80 |
--------------------------------------------------------------------------------
/src/App.test.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import App from './App';
4 |
5 | it('renders without crashing', () => {
6 | const div = document.createElement('div');
7 | ReactDOM.render(
7 | Contact Us
8 |
9 | Submit DApp
11 |
12 |
13 | Twitter
15 |
16 |
17 | Facebook
19 |
20 |
21 |
23 | Email: support@trustwallet.com
24 |
25 |
26 |
27 | );
28 | }
29 |
30 | export default ContactUs;
31 |
--------------------------------------------------------------------------------
/src/components/DAppCard.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Media } from 'reactstrap';
3 | import { trunc } from '../utils/utils';
4 |
5 | class DAppCard extends React.Component {
6 | render() {
7 | const item = this.props.item;
8 | const url = item.url;
9 | return (
10 |
11 |
12 |
13 |
{item.name}
14 |
{trunc(item.description, 80, true)}
15 |
17 | );
18 | }
19 | }
20 |
21 | export default DAppCard;
22 |
--------------------------------------------------------------------------------
/src/components/DAppItem.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Media } from 'reactstrap';
3 |
4 | class DAppItem extends React.Component {
5 | render() {
6 | const item = this.props.item;
7 | const url = item.url;
8 | return (
9 |
10 |
11 |
12 |
14 |
15 |
16 | {item.name}
17 |
18 | {item.description}
19 |
20 |
21 |
22 | );
23 | }
24 | }
25 |
26 | export default DAppItem;
27 |
--------------------------------------------------------------------------------
/src/components/DAppItems.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import {
3 | Row,
4 | Col,
5 | } from 'reactstrap';
6 | import DAppItem from './DAppItem';
7 |
8 | class DAppItems extends React.Component {
9 | render() {
10 | return (
11 |
12 |
13 | {this.props.items.map((dapp, index) => (
14 |
19 |
20 | );
21 | }
22 | }
23 |
24 | export default DAppItems;
25 |
--------------------------------------------------------------------------------
/src/components/DAppTopCards.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import DAppCard from './DAppCard';
3 |
4 | class DAppTopCards extends React.Component {
5 | render() {
6 | return (
7 |
8 | {this.props.items.map((dapp, index) => (
9 |
12 | );
13 | }
14 | }
15 |
16 | export default DAppTopCards;
17 |
--------------------------------------------------------------------------------
/src/components/DApps.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Link } from 'react-router-dom';
3 | import '../App.css';
4 | import DAppItems from './DAppItems';
5 | import DAppTopCards from './DAppTopCards';
6 | import { TrustClient } from '../network/TrustClient';
7 | import { TrustWeb3 } from "../network/TrustWeb3";
8 |
9 | class DApps extends React.Component {
10 | constructor(props) {
11 | super(props);
12 | this.state = { data: [] };
13 | this.trustClient = new TrustClient();
14 | this.trustWeb3 = new TrustWeb3();
15 | }
16 |
17 | componentWillMount() {
18 | this.fetch();
19 | }
20 |
21 | fetch = async() => {
22 | try {
23 | const networkId = await this.trustWeb3.getNetwork();
24 | const bootstrap = await this.trustClient.fetchBootstrap(networkId);
25 | this.setState({ data: bootstrap.data.docs });
26 | } catch (error) {
27 | console.log(`Error at fetch()`, error)
28 | }
29 | }
30 |
31 | render() {
32 | const elements = this.state.data || [];
33 | const categoryID = '5abcceb4682db901241a0636';
34 | const newDApp = elements.filter((item) => {
35 | return item.category._id === categoryID;
36 | });
37 | const othersDApp = elements.filter((item) => {
38 | return item.category._id !== categoryID;
39 | });
40 |
41 | return (
42 |
43 |
44 | {newDApp.map(element => (
45 |
46 |
{element.category.name}
48 |
49 |
51 | ))}
52 |
53 |
54 | {othersDApp.map(element => (
55 |
56 |
{element.category.name}
58 |
59 |
61 | ))}
62 |
63 |
64 |
75 |
76 |
77 |
78 | We do not control or endorse the Dapps listed,
79 | simply provide them as a list of convenience for you.
80 | Please investigate and proceed at your own risk.
81 |
82 |
84 |
88 |
89 |
94 | );
95 | }
96 | }
97 |
98 | export default DApps;
99 |
--------------------------------------------------------------------------------
/src/components/DAppsCategory.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import '../App.css';
3 | import DAppItems from './DAppItems';
4 | import { TrustClient } from '../network/TrustClient';
5 | import { TrustWeb3 } from "../network/TrustWeb3";
6 |
7 | class DAppsCategory extends React.Component {
8 | constructor(props) {
9 | super(props);
10 | this.state = { list: [], category: {} };
11 | this.trustClient = new TrustClient();
12 | this.trustWeb3 = new TrustWeb3();
13 | console.log(props);
14 | }
15 |
16 | componentWillMount() {
17 | this.fetch();
18 | }
19 |
20 | async fetch() {
21 | try {
22 | const network = await this.trustWeb3.getNetwork();
23 | const dapps = await this.trustClient.fetchDAppsByCategoryID(this.props.id, network)
24 | const list = dapps.data.docs;
25 | const category = dapps.data.category;
26 |
27 | this.setState({category, list});
28 | } catch (error) {
29 | console.log(`Error at fetch() `, error)
30 | }
31 | }
32 |
33 | render() {
34 | const name = this.state.category.name || 'Loading...';
35 | console.log(this.state.category);
36 | return (
37 |
38 |
{name}
39 |
7 |
8 | Web3 DApp Browser
9 |
14 |
15 | )
16 | }
17 | }
18 |
19 | export default DAppsDisabled;
20 |
--------------------------------------------------------------------------------
/src/components/NonWeb3Browser.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | // import ConnectionStatus from './systemchecks/ConnectionStatus';
3 | // import NetworkIdentity from './systemchecks/NetworkIdentity';
4 |
5 | function NonWeb3Browser() {
6 | return (
7 |
8 | {/*
Sandbox
9 |
8 |
Sandbox
9 |
34 |
Is Connected
35 | Check Status
36 | {this.state.isConnected}
37 |
38 | );
39 | }
40 | }
41 |
42 | export default ConnectionStatus;
43 |
--------------------------------------------------------------------------------
/src/components/systemchecks/NetworkIdentity.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import networks from '../../networks';
3 | import { TrustWeb3 } from "../../network/TrustWeb3";
4 |
5 | let transientState = {};
6 |
7 | class NetworkIdentity extends React.Component {
8 | trustWeb3 = new TrustWeb3()
9 |
10 | componentWillMount() {
11 | this.changeState({ networkID: 'unknown' });
12 | }
13 |
14 | checkID = async () => {
15 | try {
16 | const networkId = await this.trustWeb3.getNetwork();
17 | const network = networks.find(network => network.id === networkId);
18 |
19 | if (network !== undefined) {
20 | this.changeState({ networkID: `${network.id} - ${network.name}` });
21 | } else {
22 | console.log(`couldn't find network in list with networkId of '${networkId}'`);
23 | this.changeState({ networkID: `${networkId} - unknown` });
24 | }
25 | } catch (error) {
26 | console.log(`Error checkID()`, error)
27 | this.changeState({ networkID: 'error' });
28 | }
29 | }
30 |
31 | changeState(values) {
32 | transientState = Object.assign(transientState, values);
33 | this.setState(transientState);
34 | }
35 |
36 | render() {
37 | const networkIdentityClass = this.state.networkID === 'unknown' ? 'alert alert-secondary' : 'alert alert-success';
38 |
39 | return (
40 |
41 |
Get Network ID
42 | Check Network ID
43 | {this.state.networkID}
44 |
45 | );
46 | }
47 | }
48 |
49 | export default NetworkIdentity;
50 |
--------------------------------------------------------------------------------
/src/dapps/BuyCrypto/components/ProviderItem.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Media } from 'reactstrap';
3 |
4 | class ProviderItem extends React.Component {
5 | render() {
6 | const item = this.props.item;
7 | const url = item.url(this.props.address);
8 |
9 | return (
10 |
11 |
12 |
13 |
15 |
16 |
17 | {item.name}
18 |
19 |
20 | {item.description}
21 |
22 |
23 | Fees : {item.fees}. {item.delivery}
24 |
25 |
26 |
27 |
28 | );
29 | }
30 | }
31 |
32 | export default ProviderItem;
33 |
--------------------------------------------------------------------------------
/src/dapps/BuyCrypto/components/ProviderItems.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import {
3 | Row,
4 | Col,
5 | } from 'reactstrap';
6 | import ProviderItem from './ProviderItem';
7 |
8 | class ProviderItems extends React.Component {
9 | render() {
10 | return (
11 |
12 |
13 | {this.props.items.map((dapp, index) => (
14 |
19 |
Loading all the things
);
45 | }
46 | const providers = ServiceProviders.filter(provider => provider.currencies.has(currency));
47 |
48 | if (providers.length > 0) {
49 | const content =
50 | return await this.setStateAsync({content})
51 | }
52 |
53 | const content = No providers supported in your country!
54 | await this.setStateAsync({content})
55 |
56 | } catch (error) {
57 | console.log(`Error content() `, error)
58 | }
59 | }
60 |
61 | render() {
62 | return (
63 |
64 |
Buy ETH with Credit/Debit Card
65 | {this.state.content}
66 |
67 | {/*
68 | This provider list is made for your convenience only. By proceeding you are agreeing to take full responsibility for the transaction and to the fact that Trust Wallet is not accountable for any issues that result in full or partial loss of any digital assets.
69 | */}
70 |
11 |
12 |
13 |
15 |
16 |
17 | {item.name}
18 |
19 | {/*
20 | {item.description}
21 | */}
22 |
23 | Fees : {item.fees}
24 |
25 |
26 | Limits : {item.limits}
27 |
28 |
29 | Delivery : {item.delivery}
30 |
31 |
32 |
33 |
34 | );
35 | }
36 | }
37 |
38 | export default ProviderItem;
39 |
--------------------------------------------------------------------------------
/src/dapps/GetEther/components/ProviderItems.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import {
3 | Row,
4 | Col,
5 | } from 'reactstrap';
6 | import ProviderItem from './ProviderItem';
7 |
8 | class ProviderItems extends React.Component {
9 | render() {
10 | return (
11 |
12 |
13 | {this.props.items.map((dapp, index) => (
14 |
19 |
Loading all the things
);
45 | }
46 | const providers = ServiceProviders.filter(provider => provider.networks.has(network));
47 |
48 | if (!address) {
49 | const content = No wallet address provided or not supported network!
50 | return await this.setStateAsync({content})
51 |
52 | } else if (providers.length > 0) {
53 | const content =
54 | return await this.setStateAsync({content})
55 | }
56 |
57 | const content = No providers supported in your country!
58 | await this.setStateAsync({content})
59 |
60 | } catch (error) {
61 | console.log(`Error content() `, error)
62 | }
63 | }
64 |
65 | render() {
66 | return (
67 |
68 |
Get ETH with Credit/Debit Card
69 | {this.state.content}
70 |
71 |
72 | This provider list is made for your convenience only. By proceeding you are agreeing to take full responsibility for the transaction and to the fact that Trust Wallet is not accountable for any issues that result in full or partial loss of any digital assets.
73 |
74 |
2 |
3 |
7 |
8 |
--------------------------------------------------------------------------------
/src/logo_solid_square_blue.svg:
--------------------------------------------------------------------------------
1 |
2 | logo_solid_square_blue
3 | Created using Figma
4 |
5 |
6 |
7 |
9 |
10 |
12 |
13 |
14 |
15 |
18 |
19 |
--------------------------------------------------------------------------------
/src/network/TrustClient.js:
--------------------------------------------------------------------------------
1 | import axios from 'axios';
2 |
3 | const url = 'https://api.trustwallet.com';
4 |
5 | export class TrustClient {
6 | fetchDAppsByCategoryID(id, network) {
7 | return axios.post(`${url}/v2/dapps/category/${id}`, {
8 | networks: [network]
9 | });
10 | }
11 |
12 | fetchBootstrap(network) {
13 | return axios.post(`${url}/v2/dapps/main`, {
14 | networks: [network]
15 | });
16 | }
17 | }
18 |
--------------------------------------------------------------------------------
/src/network/TrustWeb3.js:
--------------------------------------------------------------------------------
1 | import getWeb3 from "../utils/provider";
2 | import { getCoinId } from "../utils/utils";
3 |
4 | export class TrustWeb3 {
5 |
6 | constructor() {
7 | this.web3 = getWeb3()
8 | }
9 |
10 | isTrust = () => {
11 | console.log("Is trust ", this.web3)
12 | return this.web3.isTrust
13 | }
14 |
15 | getNetwork = () => {
16 | return new Promise((resolve, reject) => {
17 | this.web3.version.getNetwork((err, networkId) => {
18 | if (err) {
19 | return reject(err)
20 | }
21 |
22 | return resolve(getCoinId(parseInt(networkId, 10)))
23 | })
24 | })
25 | }
26 |
27 | getAddress = () => {
28 | return new Promise((resolve, reject) => {
29 | this.web3.eth.getAccounts((err, accounts) => {
30 | if (err) {
31 | return reject(err)
32 | }
33 | return resolve(accounts[0])
34 | })
35 | })
36 | }
37 |
38 | }
--------------------------------------------------------------------------------
/src/networks.js:
--------------------------------------------------------------------------------
1 | export default [
2 | { id: '1', name: 'main' },
3 | ];
4 |
5 |
--------------------------------------------------------------------------------
/src/registerServiceWorker.js:
--------------------------------------------------------------------------------
1 | // In production, we register a service worker to serve assets from local cache.
2 |
3 | // This lets the app load faster on subsequent visits in production, and gives
4 | // it offline capabilities. However, it also means that developers (and users)
5 | // will only see deployed updates on the "N+1" visit to a page, since previously
6 | // cached resources are updated in the background.
7 |
8 | // To learn more about the benefits of this model, read https://goo.gl/KwvDNy.
9 | // This link also includes instructions on opting out of this behavior.
10 |
11 | const isLocalhost = Boolean(window.location.hostname === 'localhost' ||
12 | // [::1] is the IPv6 localhost address.
13 | window.location.hostname === '[::1]' ||
14 | // 127.0.0.1/8 is considered localhost for IPv4.
15 | window.location.hostname.match(/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/));
16 |
17 | export default function register() {
18 | if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
19 | // The URL constructor is available in all browsers that support SW.
20 | const publicUrl = new URL(process.env.PUBLIC_URL, window.location);
21 | if (publicUrl.origin !== window.location.origin) {
22 | // Our service worker won't work if PUBLIC_URL is on a different origin
23 | // from what our page is served on. This might happen if a CDN is used to
24 | // serve assets; see https://github.com/facebookincubator/create-react-app/issues/2374
25 | return;
26 | }
27 |
28 | window.addEventListener('load', () => {
29 | const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
30 |
31 | if (isLocalhost) {
32 | // This is running on localhost. Lets check if a service worker still exists or not.
33 | checkValidServiceWorker(swUrl);
34 |
35 | // Add some additional logging to localhost, pointing developers to the
36 | // service worker/PWA documentation.
37 | navigator.serviceWorker.ready.then(() => {
38 | console.log('This web app is being served cache-first by a service ' +
39 | 'worker. To learn more, visit https://goo.gl/SC7cgQ');
40 | });
41 | } else {
42 | // Is not local host. Just register service worker
43 | registerValidSW(swUrl);
44 | }
45 | });
46 | }
47 | }
48 |
49 | function registerValidSW(swUrl) {
50 | navigator.serviceWorker
51 | .register(swUrl)
52 | .then((registration) => {
53 | registration.onupdatefound = () => {
54 | const installingWorker = registration.installing;
55 | installingWorker.onstatechange = () => {
56 | if (installingWorker.state === 'installed') {
57 | if (navigator.serviceWorker.controller) {
58 | // At this point, the old content will have been purged and
59 | // the fresh content will have been added to the cache.
60 | // It's the perfect time to display a "New content is
61 | // available; please refresh." message in your web app.
62 | console.log('New content is available; please refresh.');
63 | } else {
64 | // At this point, everything has been precached.
65 | // It's the perfect time to display a
66 | // "Content is cached for offline use." message.
67 | console.log('Content is cached for offline use.');
68 | }
69 | }
70 | };
71 | };
72 | })
73 | .catch((error) => {
74 | console.error('Error during service worker registration:', error);
75 | });
76 | }
77 |
78 | function checkValidServiceWorker(swUrl) {
79 | // Check if the service worker can be found. If it can't reload the page.
80 | fetch(swUrl)
81 | .then((response) => {
82 | // Ensure service worker exists, and that we really are getting a JS file.
83 | if (
84 | response.status === 404 ||
85 | response.headers.get('content-type').indexOf('javascript') === -1
86 | ) {
87 | // No service worker found. Probably a different app. Reload the page.
88 | navigator.serviceWorker.ready.then((registration) => {
89 | registration.unregister().then(() => {
90 | window.location.reload();
91 | });
92 | });
93 | } else {
94 | // Service worker found. Proceed as normal.
95 | registerValidSW(swUrl);
96 | }
97 | })
98 | .catch(() => {
99 | console.log('No internet connection found. App is running in offline mode.');
100 | });
101 | }
102 |
103 | export function unregister() {
104 | if ('serviceWorker' in navigator) {
105 | navigator.serviceWorker.ready.then((registration) => {
106 | registration.unregister();
107 | });
108 | }
109 | }
110 |
--------------------------------------------------------------------------------
/src/utils/provider.js:
--------------------------------------------------------------------------------
1 | import Web3 from 'web3';
2 |
3 | const context = (typeof window === 'object') ? window : global;
4 |
5 | let provider,
6 | bundledWeb3;
7 |
8 | export function getProvider() {
9 | if (!provider) {
10 | if (context.web3 === undefined) {
11 | // throw Error('this application needs to run in a DApp browser');
12 | provider = undefined
13 | } else {
14 | provider = context.web3.currentProvider;
15 | }
16 | }
17 |
18 | return provider;
19 | }
20 |
21 | export default function getWeb3() {
22 | if (!bundledWeb3) {
23 | // even if web3 is already defined we use the web3 library bundled
24 | // with the application instead of some unknown version injected by the browser
25 | bundledWeb3 = new Web3(getProvider());
26 | }
27 |
28 | return bundledWeb3;
29 | }
30 |
--------------------------------------------------------------------------------
/src/utils/utils.js:
--------------------------------------------------------------------------------
1 | export function trunc(string, n, useWordBoundary) {
2 | if (string.length <= n) {
3 | return string
4 | }
5 | const subString = string.substr(0, n - 1);
6 | return `${useWordBoundary
7 | ? subString.substr(0, subString.lastIndexOf(' '))
8 | : subString} ... `;
9 | }
10 |
11 | export function getCoinId(chainId) {
12 | switch (chainId) {
13 | case 1:
14 | return 60 // Ethereum
15 | case 60:
16 | return 6060 // Go Chain
17 | case 61:
18 | return 61 // Ethereum Classic
19 | case 74:
20 | return 818 // VeChain
21 | case 88:
22 | return 889 // TomoChain
23 | case 99:
24 | return 178 // POA Network
25 | case 108:
26 | return 1001 // ThunderCore
27 | case 700:
28 | return 700 // xDai
29 | case 820:
30 | return 820 // Callisto Network
31 | default:
32 | return 60
33 | }
34 | }
--------------------------------------------------------------------------------
13 |