src/components/wallet/
; however, before we dive into that file let’s clean up our project just a touch and add some helpful polish. Namely a loader component.bantu-loader
, and deselect both test files leaving only the styling. Once you've done that, open src/components/loader/
and rename the .css
file to .scss
. Then replace the loader.tsx
contents with this:src/components/wallet/wallet.ts
file../methods/updateAccount
and ./methods/makePayment
methods which we’ll be creating soon. There are a number of updates in the other methods from previous tutorials, and we’ll walk through all of those in a moment as well.@State
’s, those dynamic properties with values that will change and alter the DOM of the component, and our @Prop
, which in this case will hold a static reference to our Bantu server instance../events/componentWillLoad.ts
and ./events/render.tsx
:componentWillLoad
method, we set up default values for the States and Props we initialized earlier. Most notably, we’re setting our server and account. You’ll notice we’re using the public Expansion-testnet
for now — we're just learning, and not ready to send live XBN — but in production you’d want to change this to the public Expansion
endpoint or, if you're running your own Expansion, to one of your own Expansion API endpoints.keyStore
value has been stored, and if so we’re grabbing the public key and keystore from it and adding those to the account @State
. The state
value, which is optional, is not set here as we’ll need to run the method updateAccount()
to find if the account exists, and if so what the state of that account looks like. We’ll get to that method shortly. For now let’s update our render.tsx
method:updateAccount
and makePayment
are new; createAccount
will just need a few tweaks. Let’s start with that one.this.updateAccount()
call at the end — is the call to Friendbot, which is a testnet tool that we can use to automatically fund our new testnet account with 10,000 XBN. Nice little shortcut to kickstart our development../methods/createAccount.ts
file../methods/updateAccount.ts
this.account.state
. You’ll also notice we’re omitting several fields from the account and balances for easier readability. You may choose to save these and selectively display the values you care about, but in our example we’re just displaying the raw JSON, so cleaning things up a little is the right move.this.account = {...this.account, state: loOmit(account, ['id', ...])}
may feel odd, but it’s just the Stencil way of updating a state’s object key to trigger a re-render of the DOM. You’ll notice this.loading
follows the same pattern. We’ll make use of this data further down in the render
method, but for now just know this is how we would grab ahold of the account to get the latest state../methods/makePayment.ts
:pay
loading boolean:op_no_destination
. This catch
handles that issue by trying again with a createAccount
operation. For any other issues we just pass the error on unmodified.updateAccount
to reflect the new balance in our account after successfully sending XBN. We also have our catch
block that passes to the handleError
service. We will render that in a nice error block in the UI.