Search…
Project Setup
Throughout this tutorial we'll be making use of a little toolchain called StencilJs. It takes the best of modern frontend frameworks and pares everything back to small, blazing fast, 100% standards-based Web Components that run in every browser. Don’t worry if you've never heard of it: it's just TS (JS), SCSS (CSS) and JSX (HTML). You should be able to follow along just fine if you've ever built something with modern web dev tools.
We chose Stencil so you can learn by doing: it’s an easy way to create a web-based application, which means you can see the ins and outs of building a Bantu wallet start to finish. Bantu also has a suite of SDKs in various programming languages, so if Javascript isn’t your thing, you can follow along, and recreate the steps below using one of them.
To start the setup, open your terminal and initialize a new project.
1
npm init stencil
Copied!
After running init you will be provided with a prompt to choose the type of project to start. While Stencil can be used to create entire apps, we’ll choose the component as we’ll just be dealing with modular components rather than building an entire application
1
? Pick a starter › - Use arrow-keys. Return to submit.
2
3
ionic-pwa Everything you need to build fast, production ready PWAs
4
app Minimal starter for building a Stencil app or website
5
❯ component Collection of web components that can be used anywhere
Copied!
We’ll walk through the prompt, cd into the project and run npm i ; npm start
1
✔ Pick a starter › component
2
✔ Project name › Bantu-wallet
3
4
✔ All setup in 9 ms
5
6
$ npm start
7
Starts the development server.
8
9
$ npm run build
10
Builds your components/app in production mode.
11
12
$ npm test
13
Starts the test runner.
14
15
We suggest that you begin by typing:
16
17
$ cd bantu-wallet
18
$ npm i
19
$ npm start
20
21
Further reading:
22
23
- https://github.com/ionic-team/stencil-component-starter
24
25
Happy coding!
Copied!
Now that our project is initialized, let’s take a look at the directory structure and familiarize ourselves with where things are and what roles they play.
We’re mostly interested in the src/ directory. The dist/ and www/ directories are outputs for compiled code. In the src/components/ directory you’ll see a my-component/ folder. We’re about to generate our own component, so go ahead and delete that folder. You can also nuke the utils/ directory as we won’t be covering tests in this tutorial. Now run:
1
$ npm run generate
Copied!
This will initialize a component generation script. Enter a name of bantu-wallet. Disable Spec Test and E2E Test as we’re not interested in those Stencil features today. Press Return and your component will generate and wire up.
1
% npm run generate
2
3
> bantu-wallet generate
4
> stencil generate
5
6
✔ Component tag name (dash-case): … bantu-wallet
7
✔ Which additional files do you want to generate? › Stylesheet
8
9
$ stencil generate bantu-wallet
10
11
The following files have been generated:
12
- src/components/wallet/wallet.tsx
13
- src/components/wallet/wallet.css
Copied!
Amazing! Just a few more setup bits and we can get coding. I don’t know about you but I prefer to style in SCSS rather than CSS so let’s get some modern CSS dev tools setup.
1
npm i -D @stencil/postcss @stencil/sass autoprefixer @types/autoprefixer rollup-plugin-node-polyfills
Copied!
Once those packages have successfully installed, hop over to the stencil.config.ts file at the root of the project and modify it to this:
1
import { Config } from "@stencil/core";
2
import { sass } from "@stencil/sass";
3
import { postcss } from "@stencil/postcss";
4
import autoprefixer from "autoprefixer";
5
import nodePolyfills from "rollup-plugin-node-polyfills";
6
7
export const config: Config = {
8
namespace: "bantu-wallet",
9
outputTargets: [
10
{
11
type: "dist",
12
esmLoaderPath: "../loader",
13
},
14
{
15
type: "docs-readme",
16
},
17
{
18
type: "www",
19
serviceWorker: null, // disable service workers
20
},
21
],
22
globalStyle: "src/global/style.scss",
23
commonjs: {
24
namedExports: {
25
"stellar-sdk": [
26
"StrKey",
27
"xdr",
28
"Transaction",
29
"Keypair",
30
"Networks",
31
"Account",
32
"TransactionBuilder",
33
"BASE_FEE",
34
"Operation",
35
"Asset",
36
"Memo",
37
"MemoHash",
38
],
39
"@stellar/wallet-sdk": ["KeyManager", "KeyManagerPlugins", "KeyType"],
40
},
41
},
42
plugins: [
43
nodePolyfills(),
44
sass(),
45
postcss({
46
plugins: [autoprefixer()],
47
}),
48
],
49
nodeResolve: {
50
browser: true,
51
preferBuiltins: true,
52
},
53
};
Copied!
With that file saved, pop over to the src/components/wallet/ and rename the wallet.css to wallet.scss. While we’re here let’s go ahead and modify this new style file with some basic styling to put our project in a pretty place.
1
@import "../../global/style.scss";
2
3
:host {
4
display: block;
5
font-family: $font-family;
6
font-size: 15px;
7
8
p {
9
white-space: nowrap;
10
overflow: hidden;
11
text-overflow: ellipsis;
12
display: block;
13
}
14
button {
15
margin-bottom: 10px;
16
}
17
18
.account-key {
19
display: flex;
20
align-items: center;
21
width: 100%;
22
margin-bottom: 10px;
23
24
.small {
25
margin: 0 0 0 10px;
26
flex-shrink: 0;
27
}
28
}
29
.account-state,
30
.error {
31
overflow: scroll;
32
padding: 10px;
33
font-size: 12px;
34
line-height: 1.2;
35
font-family: $font-mono;
36
margin-bottom: 10px;
37
width: 100%;
38
}
39
.account-state {
40
background-color: whitesmoke;
41
}
42
.error {
43
background-color: orangered;
44
color: white;
45
}
46
47
stellar-loader {
48
position: absolute;
49
top: 50%;
50
left: 50%;
51
transform: translate(-50%, -50%);
52
}
53
}
Copied!
Before we update our wallet.tsx with this new stylesheet, note that we’re also importing a global stylesheet. Go ahead and create that file at the root of the src/ directory. So src/global/style.scss.
1
html,
2
body,
3
div,
4
span,
5
applet,
6
object,
7
iframe,
8
h1,
9
h2,
10
h3,
11
h4,
12
h5,
13
h6,
14
p,
15
blockquote,
16
pre,
17
a,
18
abbr,
19
acronym,
20
address,
21
big,
22
cite,
23
code,
24
del,
25
dfn,
26
em,
27
img,
28
ins,
29
kbd,
30
q,
31
s,
32
samp,
33
small,
34
strike,
35
strong,
36
sub,
37
sup,
38
tt,
39
var,
40
b,
41
u,
42
i,
43
center,
44
dl,
45
dt,
46
dd,
47
ol,
48
ul,
49
li,
50
fieldset,
51
form,
52
label,
53
legend,
54
table,
55
caption,
56
tbody,
57
tfoot,
58
thead,
59
tr,
60
th,
61
td,
62
article,
63
aside,
64
canvas,
65
details,
66
embed,
67
figure,
68
figcaption,
69
footer,
70
header,
71
hgroup,
72
menu,
73
nav,
74
output,
75
ruby,
76
section,
77
summary,
78
time,
79
mark,
80
audio,
81
video {
82
margin: 0;
83
padding: 0;
84
border: 0;
85
font-size: 100%;
86
font: inherit;
87
vertical-align: baseline;
88
}
89
/* HTML5 display-role reset for older browsers */
90
article,
91
aside,
92
details,
93
figcaption,
94
figure,
95
footer,
96
header,
97
hgroup,
98
menu,
99
nav,
100
section {
101
display: block;
102
}
103
body {
104
line-height: 1;
105
}
106
ol,
107
ul {
108
list-style: none;
109
}
110
blockquote,
111
q {
112
quotes: none;
113
}
114
blockquote:before,
115
blockquote:after,
116
q:before,
117
q:after {
118
content: "";
119
content: none;
120
}
121
table {
122
border-collapse: collapse;
123
border-spacing: 0;
124
}
125
126
* {
127
box-sizing: border-box;
128
}
129
input,
130
button,
131
select,
132
textarea {
133
font-family: $font-family;
134
font-size: 15px;
135
outline: none;
136
appearance: none;
137
border-radius: 0;
138
}
139
input,
140
select,
141
button {
142
height: 30px;
143
}
144
button {
145
border: none;
146
appearance: none;
147
position: relative;
148
background-color: blue;
149
color: white;
150
margin: 0;
151
display: flex;
152
align-items: center;
153
align-content: center;
154
justify-content: center;
155
justify-items: center;
156
padding: 0 10px;
157
cursor: pointer;
158
159
&.loading {
160
color: transparent;
161
pointer-events: none;
162
}
163
&.small {
164
font-size: 12px;
165
height: 20px;
166
}
167
}
Copied!
Save those style files and update the wallet.tsx to point to our new styles like so:
1
import { Component, h } from "@stencil/core";
2
import * as StellarSdk from "stellar-sdk";
3
4
@Component({
5
tag: "Bantu-wallet",
6
styleUrl: "wallet.scss",
7
shadow: true,
8
})
9
export class Wallet {
10
render() {
11
return [
12
<h1>
13
{!!StellarSdk
14
? "The StellarSdk is ready to rock 🤘"
15
: "Uh oh, the StellarSdk is missing 😱"}
16
</h1>,
17
];
18
}
19
}
Copied!
You’ll notice we also include a few extra setup lines to get the StellarSdk loaded in and ready to use. Let’s ensure all those dependencies are loaded and ready to rock.
1
npm i -D stellar-sdk js-xdr
Copied!
The last mod: point the src/index.html file to use this brand new component. Modify that file to match this.
1
<!DOCTYPE html>
2
<html dir="ltr" lang="en">
3
<head>
4
<meta charset="utf-8" />
5
<meta
6
name="viewport"
7
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0"
8
/>
9
<title>Bantu Wallet</title>
10
<link rel="stylesheet" href="https://unpkg.com/reset-css/reset.css" />
11
<script type="module" src="/build/bantu-wallet.esm.js"></script>
12
<script nomodule src="/build/bantu-wallet.js"></script>
13
</head>
14
<body>
15
<bantu-wallet />
16
</body>
17
</html>
Copied!
You should be all set up now. Restart the server and let’s get coding.
1
# Stop any current server and rerun
2
$ npm start
Copied!
Last modified 11mo ago
Copy link