Skip to content

Commit 0a816a8

Browse files
umurbumurb
committed
Web Wallet Start
1 parent 4cd2be0 commit 0a816a8

File tree

30 files changed

+1461
-2
lines changed

30 files changed

+1461
-2
lines changed

‎.eslintrc

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
{
2+
"parser": "babel-eslint",
3+
"parserOptions": {
4+
"sourceType": "module",
5+
"allowImportExportEverywhere": true
6+
},
7+
"extends": ["airbnb", "prettier"],
8+
"env": {
9+
"browser": true,
10+
"node": true
11+
},
12+
"rules": {
13+
"prefer-destructuring": "off",
14+
"arrow-parens": ["off"],
15+
"arrow-body-style": "off",
16+
"compat/compat": "error",
17+
"consistent-return": "off",
18+
"comma-dangle": "off",
19+
"no-shadow": "off",
20+
"react/no-array-index-key": "off",
21+
"generator-star-spacing": "off",
22+
"import/no-named-as-default": "off",
23+
"import/no-named-as-default-member": "off",
24+
"import/no-useless-path-segments": "off",
25+
"import/no-unresolved": "error",
26+
"import/no-extraneous-dependencies": "off",
27+
"jsx-a11y/anchor-is-valid": "off",
28+
"jsx-a11y/no-static-element-interactions": "off",
29+
"jsx-a11y/click-events-have-key-events": "off",
30+
"lines-between-class-members": "off",
31+
"no-console": "off",
32+
"no-use-before-define": "off",
33+
"no-multi-assign": "off",
34+
"no-nested-ternary": "off",
35+
"promise/param-names": "error",
36+
"promise/always-return": "error",
37+
"promise/catch-or-return": "error",
38+
"promise/no-native": "off",
39+
"react/destructuring-assignment": "off",
40+
"react/jsx-one-expression-per-line": "off",
41+
"react/jsx-wrap-multilines": "off",
42+
"react/no-access-state-in-setstate": "off",
43+
"react/no-did-update-set-state": "off",
44+
"react/prop-types": "off",
45+
"react/sort-comp": [
46+
"error",
47+
{
48+
"order": [
49+
"type-annotations",
50+
"static-methods",
51+
"lifecycle",
52+
"everything-else",
53+
"render"
54+
]
55+
}
56+
],
57+
"react/jsx-no-bind": "off",
58+
"react/jsx-filename-extension": [
59+
"error",
60+
{ "extensions": [".js", ".jsx"] }
61+
],
62+
"react/prefer-stateless-function": "off",
63+
"react/require-default-props": "off"
64+
},
65+
"plugins": ["import", "promise", "compat", "react"]
66+
}

‎.gitignore

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2+
3+
# dependencies
4+
/node_modules
5+
/.pnp
6+
.pnp.js
7+
8+
# testing
9+
/coverage
10+
11+
# production
12+
/build
13+
14+
# misc
15+
.DS_Store
16+
.env.local
17+
.env.development.local
18+
.env.test.local
19+
.env.production.local
20+
21+
npm-debug.log*
22+
yarn-debug.log*
23+
yarn-error.log*

‎README.md

100644100755
Lines changed: 64 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,64 @@
1-
# ConseilJS-Tutorials
2-
Various tutorials to interact with the ConseilJS Library
1+
# ConseilJS Tutorials: Building a simple web wallet for the Tezos Alphanet
2+
3+
Welcome!
4+
5+
In this tutorial we will be building a very simple web wallet for the Tezos Alphanet using React and ConseilJS.
6+
7+
**IMPORTANT NOTE: DO NOT USE THIS WALLET WITH TEZOS MAINNET!**
8+
9+
Do not use the wallet you create at the end of this tutorial on Mainnet. The main and only purpose of this tutorial is to show you how to integrate ConseilJS into a React project, and not to build a wallet suitable for the Tezos Mainnet. We will be using Tezos Alphanet throughout this tutorial.
10+
11+
## ConseilJS API Documentation
12+
13+
API Documentation for the ConseilJS Library can be found here: https://cryptonomic.github.io/ConseilJS/
14+
15+
## How to navigate around the tutorial
16+
17+
Every step in this tutorial has its own dedicated branch. You can jump between these branches by running the following command:
18+
19+
```bash
20+
git checkout [BRANCH_NAME]
21+
```
22+
See below for the branch structure for this tutorial.
23+
24+
```
25+
|
26+
|- web-wallet/start (YOU ARE HERE)
27+
|- web-wallet/step1
28+
|- web-wallet/step1-complete
29+
|- web-wallet/step2
30+
|- web-wallet/step2-complete
31+
|- web-wallet/step3
32+
|- web-wallet/step3-complete
33+
```
34+
35+
If you ever get stuck during any of the steps, you can consult the `-complete` version of it for solutions.
36+
37+
## Preparing the environment
38+
39+
We are about to start with step-1. Let's go ahead and prepare the environment for your project to run.
40+
41+
To import ConseilJS to your project, you will need to add ConseilJS as a dependency in your `package.json` file. This file has already been provided within this tutorial. Go ahead and open the `package.json` using your favorite code editor and double check that `"conseiljs": "^0.2.0"` is listed under dependencies. See it there? Awesome! Let's go ahead and install all the dependencies you will need by running this command:
42+
43+
```bash
44+
npm install
45+
```
46+
This will take sometime as npm will install all the dependencies you will be using during the project. As soon as the install is complete, go ahead and run below command and see if everything is installed fine and your project is running:
47+
48+
```bash
49+
npm start
50+
```
51+
52+
It is expected to get some compilation warnings after running this command, which will be resolved after you complete the next step of this tutorial. Just make sure that you see the user interface for our simple wallet when you open [localhost:3000](http://localhost:3000/) in a browser.
53+
54+
# Congratulations!
55+
56+
You have initialized your project successfully. Hit `Ctrl + C` to stop the development server and switch to `web-wallet/step-1` branch by running the following command.
57+
58+
```bash
59+
git checkout web-wallet/step-1
60+
```
61+
62+
Also open up its README in your browser to follow it easier: [web-wallet/step-1](https://github.com/Cryptonomic/ConseilJS-Tutorials/tree/web-wallet/step-1)
63+
64+
See you there!

‎package.json

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
{
2+
"name": "conseiljs-tutorial",
3+
"version": "0.1.0",
4+
"private": true,
5+
"dependencies": {
6+
"bignumber.js": "^8.0.2",
7+
"conseiljs": "^0.2.0",
8+
"react": "^16.7.0",
9+
"react-dom": "^16.7.0",
10+
"react-scripts": "2.1.3",
11+
"styled-components": "^4.1.3"
12+
},
13+
"scripts": {
14+
"start": "react-scripts start",
15+
"build": "react-scripts build",
16+
"test": "react-scripts test",
17+
"eject": "react-scripts eject"
18+
},
19+
"eslintConfig": {
20+
"extends": "react-app"
21+
},
22+
"browserslist": [
23+
">0.2%",
24+
"not dead",
25+
"not ie <= 11",
26+
"not op_mini all"
27+
],
28+
"devDependencies": {
29+
"eslint": "5.6.0",
30+
"eslint-config-airbnb": "^17.1.0",
31+
"eslint-config-prettier": "^3.6.0",
32+
"eslint-formatter-pretty": "^2.1.1",
33+
"eslint-plugin-compat": "^2.6.3",
34+
"eslint-plugin-import": "^2.15.0",
35+
"eslint-plugin-jsx-a11y": "^6.1.2",
36+
"eslint-plugin-promise": "^4.0.1",
37+
"eslint-plugin-react": "^7.12.4",
38+
"eslint-plugin-testcafe": "^0.2.1"
39+
}
40+
}

‎public/favicon.ico

3.78 KB
Binary file not shown.

‎public/font.css

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
2+
@font-face {
3+
font-family: 'Tezos-icons';
4+
src: url('./resources/TezosIcons/Tezos-icons.ttf') format('truetype');
5+
font-weight: normal;
6+
font-style: normal;
7+
}

‎public/index.html

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
6+
<meta
7+
name="viewport"
8+
content="width=device-width, initial-scale=1, shrink-to-fit=no"
9+
/>
10+
<meta name="theme-color" content="#000000" />
11+
<!--
12+
manifest.json provides metadata used when your web app is added to the
13+
homescreen on Android. See https://developers.google.com/web/fundamentals/web-app-manifest/
14+
-->
15+
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
16+
<link rel="stylesheet" type="text/css" href="%PUBLIC_URL%/font.css" />
17+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
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>ConseilJS Tutorial</title>
28+
</head>
29+
<body>
30+
<div id="root"></div>
31+
<!--
32+
This HTML file is a template.
33+
If you open it directly in the browser, you will see an empty page.
34+
35+
You can add webfonts, meta tags, or analytics to this file.
36+
The build step will place the bundled scripts into the <body> tag.
37+
38+
To begin the development, run `npm start` or `yarn start`.
39+
To create a production bundle, use `npm run build` or `yarn build`.
40+
-->
41+
</body>
42+
</html>

‎public/manifest.json

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
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+
}

‎public/resources/TezosIcons/Tezos-icons.eot

8.44 KB
Binary file not shown.

0 commit comments

Comments
 (0)