From a5eb2d9ed1f5ec3a671929d49d129fbebcc53718 Mon Sep 17 00:00:00 2001
From: Bri <92327786+briwylde08@users.noreply.github.com>
Date: Mon, 17 Jul 2023 12:56:09 -0600
Subject: [PATCH 01/46] add new app example tutorial
---
.../account-creation.mdx | 24 +
.../anchor-integration.mdx | 91 ++
.../basic-wallet.mdx | 873 ------------------
.../connect-to-anchors/_category_.json | 7 -
.../deposit-anchored-assets.mdx | 453 ---------
.../connect-to-anchors/index.mdx | 14 -
.../setup-for-anchored-assets.mdx | 356 -------
.../withdraw-anchored-assets.mdx | 326 -------
.../custom-assets.mdx | 457 ---------
.../first-deposit.mdx | 60 --
.../manage-trust.mdx | 22 +
.../example-application-tutorial/overview.mdx | 39 +
.../path-payment.mdx | 18 +
.../example-application-tutorial/payment.mdx | 22 +
.../project-setup.mdx | 495 ----------
.../querying-data.mdx | 13 +
.../setup-custodial-account.mdx | 204 ----
.../xlm-payments.mdx | 736 ---------------
18 files changed, 229 insertions(+), 3981 deletions(-)
create mode 100644 docs/building-apps/example-application-tutorial/account-creation.mdx
create mode 100644 docs/building-apps/example-application-tutorial/anchor-integration.mdx
delete mode 100644 docs/building-apps/example-application-tutorial/basic-wallet.mdx
delete mode 100644 docs/building-apps/example-application-tutorial/connect-to-anchors/_category_.json
delete mode 100644 docs/building-apps/example-application-tutorial/connect-to-anchors/deposit-anchored-assets.mdx
delete mode 100644 docs/building-apps/example-application-tutorial/connect-to-anchors/index.mdx
delete mode 100644 docs/building-apps/example-application-tutorial/connect-to-anchors/setup-for-anchored-assets.mdx
delete mode 100644 docs/building-apps/example-application-tutorial/connect-to-anchors/withdraw-anchored-assets.mdx
delete mode 100644 docs/building-apps/example-application-tutorial/custom-assets.mdx
delete mode 100644 docs/building-apps/example-application-tutorial/first-deposit.mdx
create mode 100644 docs/building-apps/example-application-tutorial/manage-trust.mdx
create mode 100644 docs/building-apps/example-application-tutorial/overview.mdx
create mode 100644 docs/building-apps/example-application-tutorial/path-payment.mdx
create mode 100644 docs/building-apps/example-application-tutorial/payment.mdx
delete mode 100644 docs/building-apps/example-application-tutorial/project-setup.mdx
create mode 100644 docs/building-apps/example-application-tutorial/querying-data.mdx
delete mode 100644 docs/building-apps/example-application-tutorial/setup-custodial-account.mdx
delete mode 100644 docs/building-apps/example-application-tutorial/xlm-payments.mdx
diff --git a/docs/building-apps/example-application-tutorial/account-creation.mdx b/docs/building-apps/example-application-tutorial/account-creation.mdx
new file mode 100644
index 000000000..35bcf58be
--- /dev/null
+++ b/docs/building-apps/example-application-tutorial/account-creation.mdx
@@ -0,0 +1,24 @@
+---
+title: Account Creation
+sidebar_position: 20
+---
+
+Accounts are the central data structure in Stellar and can only exist with a valid keypair (a public and secret key) and the required minimum balance of XLM. Read more in the [Accounts section](../../fundamentals-and-concepts/stellar-data-structures/accounts).
+
+To start, we’ll have our user create an account. In BasicPay, the signup page will display a randomized public and secret keypair that the user can select with the option to choose a new set if preferred.
+
+:::info
+
+Since we are building a [non-custodial application](../application-design-considerations/non-custodial-service), the secret key will only ever live in the browser. It will never be shared with the server or anybody else.
+
+:::
+
+[ss1]
+
+Next, we’ll trigger the user to submit a pincode to encrypt their secret key before it gets saved to their browser’s `localStorage` (this is handled by the SDK). The user will need to remember their pincode for future logins and to submit transactions.
+
+With BasicPay, when the user clicks the “Signup” button, they will be asked to confirm their pincode. When they do, the `create_account` operation is triggered, and the user’s account is automatically funded with XLM for the minimum balance (starting with 100,000 XLM).
+
+[ss2]
+
+When you’re ready to move the application to Pubnet, accounts will need to be funded with real XLM. This is something the application can cover itself by depositing XLM into the user’s account (as we did with BasicPay on Testnet), with the use of [sponsored reserves](../../encyclopedia/sponsored-reserves), or the user can cover the required balance with their own XLM.
diff --git a/docs/building-apps/example-application-tutorial/anchor-integration.mdx b/docs/building-apps/example-application-tutorial/anchor-integration.mdx
new file mode 100644
index 000000000..2e68e0358
--- /dev/null
+++ b/docs/building-apps/example-application-tutorial/anchor-integration.mdx
@@ -0,0 +1,91 @@
+---
+title: Anchor Integration
+sidebar_position: 60
+---
+
+An anchor is a Stellar-specific term for the on and off-ramps that connect the Stellar network to traditional financial rails, such as financial institutions or fintech companies. When a user deposits with an anchor, that anchor will credit their Stellar account with the equivalent amount of digital tokens. The user can then hold, transfer, or trade those tokens just like any other Stellar asset. When a user withdraws those tokens, the anchor redeems them for cash in hand or money in the bank. Read more about anchors in our [Anchor Documentation](https://developers.stellar.org/docs/anchoring-assets/overview).
+
+When a customer downloads a wallet application that is connected to an anchor service, their Stellar account can either be created by the wallet application or the anchor service. In this example, the account has been created by the wallet application, BasicPay. Account creation strategies are described more in-depth [here](../application-design-considerations#account-creation-strategies).
+
+In this example, we’ll use an anchor on Stellar’s Testnet to simulate a bank transfer into and out of the user’s wallet using [SEP-6: Deposit and Withdrawal API](https://github.com/stellar/stellar-protocol/blob/master/ecosystem/sep-0006.md) and/or [SEP-24: Hosted Deposit and Withdrawal](https://github.com/stellar/stellar-protocol/blob/master/ecosystem/sep-0024.md).
+
+:::info
+
+SEPs define standards for interoperability on Stellar. Read more in our [SEPs section](../../fundamentals-and-concepts/stellar-ecosystem-proposals).
+
+:::
+
+Our integrations will also use the following SEPs:
+
+- [SEP-1: Stellar TOML](https://github.com/stellar/stellar-protocol/blob/master/ecosystem/sep-0001.md) - a file that provides a place for the Internet to find information about an organization’s Stellar integration
+- [SEP-9: Standard KYC Fields](https://github.com/stellar/stellar-protocol/blob/master/ecosystem/sep-0009.md) - defines a list of standard KYC fields for use in Stellar ecosystem protocols
+- [SEP-10: Stellar Web Authentication](https://github.com/stellar/stellar-protocol/blob/master/ecosystem/sep-0010.md) - defines the standard way for clients to create authenticated web sessions on behalf of a user who holds a Stellar account
+- [SEP-12: KYC API](https://github.com/stellar/stellar-protocol/blob/master/ecosystem/sep-0012.md) - defines a standard way for Stellar clients to upload KYC information to anchors
+
+### Setup for anchored assets
+
+First, we need to set up our application so it can communicate with anchors to get asset information.
+
+Do this by first querying an anchor’s stellar.toml file. The [stellar.toml file](https://developers.stellar.org/docs/issuing-assets/publishing-asset-info#completing-your-stellartoml) is a common place where the Internet can find information about an organization’s Stellar integration.
+
+For anchors, we’re interested in the `currencies` they issue, the `transfer_server` keyword that indicates if the anchor supports SEP-6, SEP-24, or both, and the `web_auth_endpoint` which allows a wallet to set up an authenticated user session.
+
+BasicPay is interoperating with the testing anchor located at `testanchor.stellar.org` and you can view its toml file [here](https://testanchor.stellar.org/.well-known/stellar.toml).
+
+### Anchor integration with SEP-6: Deposit and Withdrawal API
+
+SEP-6 allows wallets and other clients to interact with anchors directly without the user needing to leave the wallet to go to the anchor’s site. In this integration, a user’s KYC information is gathered and handled by the wallet.
+
+#### Authentication
+
+The user must prove they own the account before they can withdraw or deposit any assets as part of SEP-10: Stellar Web Authentication.
+
+To do this, the wallet makes a GET request with a public `account` param to the anchor, which sends back an unsigned Stellar transaction (called a challenge transaction) with an invalid sequence number so it doesn’t actually do anything when submitted to the network.
+
+In response, the user signs the transaction, and the application POSTs it back to the anchor. If the signature checks out, the success response will contain a [JSON Web Token (JWT)](https://jwt.io/), which is stored in the `webAuthStore` store to use for future interactions with the anchor.
+
+#### Get `/info`
+
+First, BasicPay requests the `/info` endpoint from the anchor to understand the supported transfer methods ([deposit, withdraw, deposit-exchange, and withdraw-exchange](https://github.com/stellar/stellar-protocol/blob/master/ecosystem/sep-0006.md)) and fee information.
+
+#### Initiate transfer
+
+The user then can initiate one of the transfer methods (in BasicPay, only deposits and withdraws are supported) by selecting “Deposit” or “Withdraw” from the drop-down menu and specifying the asset to be deposited or withdrawn. KYC
+
+BasicPay then queries the anchor’s `sep-12` endpoint for the required KYC fields and presents these fields to the user. The user inputs this information and BasicPay PUTs that information to the KYC `/customer` endpoint. BasicPay then waits for the user’s `status` with the anchor to be approved.
+
+#### Complete transfer
+
+BasicPay then prompts the user to input additional information such as transfer type, destination, and amount.
+
+Once approved, the user clicks “Next” and BasicPay initiates the transfer with the anchor.
+
+In a withdrawal transaction, BasicPay will also present the user with a pre-built transaction for them to sign with their pincode.
+
+:::info
+
+All the fields that have been collected during this process are wrapped into a URL that contains query parameters: [example](https://testanchor.stellar.org/sep6/deposit?account=GAXQIC2BSZ5HZP3BD6RZQSD3LB66TB6A2TA5W3LZX2VDFMBAKHC4B62J&asset_code=SRT&type=bank_account&amount=11)
+
+:::
+
+### Anchor integration with SEP-24: Hosted Deposit and Withdrawal
+
+SEP-24 provides a standard way for wallets and anchors to interact by having the user open a webview hosted by an anchor to collect and handle KYC information.
+
+#### Authentication
+
+The user must first prove they own the account before they can withdraw or deposit any assets as part of SEP-10: Stellar Web Authentication. In BasicPay, the user clicks on the “Authenticate” button, triggering a challenge transaction from the anchor to BasicPay as part of SEP-10: Stellar Web Authentication, which is then presented to the user to sign.
+
+Once signed, BasicPay sends the transaction back to the anchor and then receives a session auth token, which is stored in the `webAuthStore` store.
+
+#### Get `/info`
+
+Similar to SEP-6, our application will request the `/info` endpoint from the anchor to understand the supported transfer methods (deposit, withdraw, deposit-exchange, and withdraw-exchange) and fee information.
+
+#### Initiate and complete transfer
+
+The user then initiates a transfer method (in BasicPay, only deposits and withdraws are supported) by POSTing a request to either the “SEP-24 Deposit” or “SEP-24 Withdraw” endpoint. The anchor then sends an interactive URL that BasicPay opens for the user to complete and confirm the transaction.
+
+Once the user clicks “Submit”, they’ll be brought back to the application.
+
+In a withdrawal transaction, BasicPay will also present the user with a pre-built transaction for them to sign with their pincode. `callback` should be in the form of a `postMessage`. Our application listens for that `postMessage` during the withdrawal and opens up the transaction dialog when the interactive flow is completed.
diff --git a/docs/building-apps/example-application-tutorial/basic-wallet.mdx b/docs/building-apps/example-application-tutorial/basic-wallet.mdx
deleted file mode 100644
index 5a668d40a..000000000
--- a/docs/building-apps/example-application-tutorial/basic-wallet.mdx
+++ /dev/null
@@ -1,873 +0,0 @@
----
-title: Create a Basic Wallet
-sidebar_position: 40
----
-
-import { CodeExample } from "@site/src/components/CodeExample";
-import { Alert } from "@site/src/components/Alert";
-
-
-
-In this tutorial, the goal is to get to a place where a user can create, store, and access their Stellar account using an intuitive pincode encryption method. It assumes that you have already completed the [Project Setup section](./project-setup.mdx).
-
-
-
-[View the setup boilerplate code on GitHub][1]
-
-## User Flow
-
-Because we've decided to build a non-custodial wallet, we don’t need to communicate with a server or database at all: everything can happen locally right on a user’s device. We’ll be doing all our work inside of `src/components/wallet/`, so head over there now. We’re going to use the `StellarSdk.Keypair.random()` from the StellarSdk to generate a new valid Stellar keypair. That's the easy part. The hard work will be storing that vital information in a secure yet accessible manner.
-
-The user flow we're building will work like this: Click “Create Account” → UI modal popup asking for a pin code → Enter pin code, click “OK” → App encrypts a new Stellar keypair secret key with pin code → App saves encrypted secret to `localStorage`. On page reload, we’ll fetch the `publicKey` to “login” the user, but for any protected action such as “Copy Secret”, the modal will pop back up asking for the original pin code.
-
-## Create a Popup Modal
-
-To start, let's look at at the popup modal. We’ll be mimicking the browser’s `prompt` functionality with our own new, more powerful component. First things first we should generate a new component:
-
-
-
-```bash
-npm run generate
-```
-
-
-
-Call it `stellar-prompt`, and deselect both test files leaving only the styling. Once you have that, open `src/components/prompt/` and rename the `.css` file to `.scss`. Fill that style file with this:
-
-
-
-```scss
-@import "../../global/style.scss";
-
-:host {
- display: block;
- font-family: $font-family;
- font-size: 15px;
-
- .prompt-wrapper {
- sidebar_position: absolute;
- top: 0;
- left: 0;
- bottom: 0;
- right: 0;
- display: flex;
- align-items: center;
- justify-content: center;
- align-content: center;
- min-height: 100vh;
- min-width: 100vw;
- background-color: rgba(black, 0.2);
- z-index: 1;
- }
- .prompt {
- background-color: white;
- padding: 20px;
- max-width: 350px;
- width: 100%;
- sidebar_position: relative;
-
- p {
- margin-bottom: 10px;
- }
- input {
- width: 100%;
- margin: 0;
- padding: 5px;
- outline: none;
- bsidebar_position: 1px solid black;
- text-transform: uppercase;
-
- &:focus {
- border-color: blue;
- }
- }
- }
- .select-wrapper {
- sidebar_position: relative;
- display: inline-flex;
-
- select {
- border-color: blue;
- padding: 0 10px;
- min-width: 100px;
- }
-
- &:after,
- &:before {
- font-size: 12px;
- sidebar_position: absolute;
- right: 10px;
- color: blue;
- }
- &:after {
- content: "◀";
- top: calc(50% - 5px);
- transform: translate(0, -50%) rotate(90deg);
- }
- &:before {
- content: "▶";
- top: calc(50% + 5px);
- transform: translate(0, -50%) rotate(90deg);
- }
- }
- .actions {
- display: flex;
- justify-content: flex-end;
- margin-top: 10px;
-
- button {
- margin: 0;
- min-width: 50px;
- }
- .cancel {
- background: none;
- bsidebar_position: 1px solid blue;
- color: blue;
- }
- .submit {
- margin-left: 10px;
- }
- }
-}
-```
-
-
-
-Replace the `prompt.tsx` contents with this.
-
-
-
-```tsx
-import { Component, Prop, Element, Watch, h, State } from "@stencil/core";
-import { defer as loDefer } from "lodash-es";
-
-export interface Prompter {
- show: boolean;
- message?: string;
- placeholder?: string;
- options?: Array;
- resolve?: Function;
- reject?: Function;
-}
-
-@Component({
- tag: "stellar-prompt",
- styleUrl: "prompt.scss",
- shadow: true,
-})
-export class Prompt {
- @Element() private element: HTMLElement;
-
- @Prop({ mutable: true }) prompter: Prompter;
-
- @State() private input: string;
-
- @Watch("prompter")
- watchHandler(newValue: Prompter, oldValue: Prompter) {
- if (newValue.show === oldValue.show) return;
-
- if (newValue.show) {
- this.input = null;
-
- if (newValue.options)
- this.input =
- this.input ||
- `${newValue.options[0].code}:${newValue.options[0].issuer}`;
- else
- loDefer(() => this.element.shadowRoot.querySelector("input").focus());
- } else {
- this.prompter.message = null;
- this.prompter.placeholder = null;
- this.prompter.options = null;
- }
- }
-
- componentDidLoad() {
- addEventListener("keyup", (e: KeyboardEvent) => {
- if (this.prompter.show)
- e.keyCode === 13
- ? this.submit(e)
- : e.keyCode === 27
- ? this.cancel(e)
- : null;
- });
- }
-
- cancel(e: Event) {
- e.preventDefault();
-
- this.prompter = {
- ...this.prompter,
- show: false,
- };
- this.prompter.reject(null);
- }
-
- submit(e: Event) {
- e.preventDefault();
-
- this.prompter = {
- ...this.prompter,
- show: false,
- };
- this.prompter.resolve(this.input);
- }
-
- update(e) {
- this.input = e.target.value.toUpperCase();
- }
-
- render() {
- return this.prompter.show ? (
-
-
- {this.prompter.message ?
{this.prompter.message}
: null}
-
- {this.prompter.options ? (
-
-
-
- ) : (
- this.update(e)}
- >
- )}
-
-
-
-
-
-
-
- ) : null;
- }
-}
-```
-
-
-
-One of the first things you’ll notice is the use of `lodash-es`. Let’s make sure we’ve got that imported before moving forward:
-
-
-
-```bash
-npm i -D lodash-es
-```
-
-
-
-There’s a lot going on in this file, but since this isn’t a Stencil tutorial we’ll skip the details. What this allows us to do it to use a `` component elsewhere in our project. It's worth noting the variables available to us in the `prompter` property.
-
-
-
-```ts
-export interface Prompter {
- show: boolean;
- message?: string;
- placeholder?: string;
- options?: Array;
- resolve?: Function;
- reject?: Function;
-}
-```
-
-
-
-The values we’ll be making most use of are those first three: `show`, `message` and `placeholder`. The last two—`resolve` and `reject`—are for promisifying the prompt so we can await a response before continuing with further logic. Don't worry: that statement will make more sense in a moment once we include this component in `src/components/wallet/`. Speaking of, let’s swing over to that component now.
-
-We’ve got a lot of work to do in here so I’ll just paste the code in all its glory and we’ll walk through it block by block:
-
-
-
-```ts
-import { Component, State } from "@stencil/core";
-
-import componentWillLoad from "./events/componentWillLoad";
-import render from "./events/render";
-
-import createAccount from "./methods/createAccount";
-import copyAddress from "./methods/copyAddress";
-import copySecret from "./methods/copySecret";
-import signOut from "./methods/signOut";
-import setPrompt from "./methods/setPrompt";
-
-import { Prompter } from "@prompt/prompt";
-
-interface StellarAccount {
- publicKey: string;
- keystore: string;
-}
-
-@Component({
- tag: "stellar-wallet",
- styleUrl: "wallet.scss",
- shadow: true,
-})
-export class Wallet {
- @State() account: StellarAccount;
- @State() prompter: Prompter = { show: false };
- @State() error: any = null;
-
- // Component events
- componentWillLoad() {}
- render() {}
-
- // Stellar methods
- createAccount = createAccount;
- copyAddress = copyAddress;
- copySecret = copySecret;
- signOut = signOut;
-
- // Misc methods
- setPrompt = setPrompt;
-}
-
-Wallet.prototype.componentWillLoad = componentWillLoad;
-Wallet.prototype.render = render;
-```
-
-
-
-They say the beginning is a good place to start. Let’s do that:
-
-
-
-```js
-import { Component, State } from "@stencil/core";
-
-import componentWillLoad from "./events/componentWillLoad";
-import render from "./events/render";
-
-import createAccount from "./methods/createAccount";
-import copyAddress from "./methods/copyAddress";
-import copySecret from "./methods/copySecret";
-import signOut from "./methods/signOut";
-import setPrompt from "./methods/setPrompt";
-
-import { Prompter } from "@prompt/prompt";
-```
-
-
-
-Just one import from a library we should already have installed.
-
-The other relative path imports are all the _events_ and _methods_ we’ll create here in a moment. For now, just generate all those files in their appropriate directories. Ensure your console is at the root of the `stellar-wallet` project before running this string of commands:
-
-
-
-```bash
-mkdir -p src/components/wallet/{events,methods}
-touch src/components/wallet/events/{componentWillLoad.ts,render.tsx}
-touch src/components/wallet/methods/{createAccount,copyAddress,copySecret,signOut,setPrompt}.ts
-```
-
-
-
-Next we have this funky line which may seem like an npm team import, but is actually a fancy typescript module alias path.
-
-
-
-```ts
-import { Prompter } from "@prompt/prompt";
-```
-
-
-
-This allows us to avoid long error prone `../../../` paths and just use `@{alias}/{path?}/{module}`. In order to get this past both the linter and compiler we’ll need to modify a couple files.
-
-First, modify the `tsconfig.json` file to include these values in the `compilerOptions` object.
-
-
-
-```JSON
-{
- "compilerOptions": {
- "baseUrl": "./src",
- "paths": {
- "@prompt/*": ["components/prompt/*"],
- "@services/*": ["services/*"]
- },
- // ...
- },
- // ...
-}
-```
-
-
-
-Next,modify the `package.json` file to include a `_moduleAliases` key at the root of the object.
-
-
-
-```JSON
-{
- // ...
- "_moduleAliases": {
- "@prompt": "dist/collection/components/prompt",
- "@services": "dist/collection/services"
- }
-}
-```
-
-
-
-Finally, install the `module-alias` package and add it to the top of the `src/index.ts` file.
-
-
-
-```bash
-npm i -D module-alias
-```
-
-
-
-
-
-```ts
-import "module-alias/register";
-export * from "./components";
-```
-
-
-
-Cool! With any luck we should be able to use these slick alias imports for the prompt and services directories now.
-
-## Create Stellar Account Class
-
-
-
-```ts
-interface StellarAccount {
- publicKey: string;
- keystore: string;
-}
-```
-
-
-
-`interface` is just the TypeScript way of setting up a tidy typed class. `StellarAccount` will be our account class. It includes the `publicKey` for easy reference later in Horizon or Astrograph calls and the Top Secret `keystore` key containing the encrypted account secret cipher.
-
-
-
-```js
-@Component({
- tag: 'stellar-wallet',
- styleUrl: 'wallet.scss',
- shadow: true
-})
-export class Wallet {
- @State() account: StellarAccount
- @State() prompter: Prompter = {show: false}
- @State() error: any = null
-
- ...
-}
-```
-
-
-
-Pretty standard boring bits, setting up the `@Component` with its defining values and initializing with some `@State` and `@Prop` data. You can see we’re setting up an `account` state with our `StellarAccount` class as well as a `prompter` state with that `Prompter` class from the `stellar-prompt` we imported earlier. We’re initializing that `prompter` state with a `show` value of `false` so the prompt modal rendereth not initially.
-
-Everything after this is the assignment of our imported events and methods from up above. Let’s begin with the `./events/componentWillLoad.ts`
-
-
-
-```js
-import { handleError } from "@services/error";
-import { get } from "@services/storage";
-
-export default async function componentWillLoad() {
- try {
- let keystore = await get("keyStore");
-
- this.error = null;
-
- if (keystore) {
- keystore = atob(keystore);
-
- const { publicKey } = JSON.parse(atob(JSON.parse(keystore).adata));
-
- this.account = {
- publicKey,
- keystore,
- };
- }
- } catch (err) {
- this.error = handleError(err);
- }
-}
-```
-
-
-
-`componentWillLoad` is the Stencil way of pre-filling the state and prop values before actually rendering the component. In our case we’ll use this method to populate the `account` `@State` with the saved storage `keyStore` value if there is one. At first there won’t be, so we’ll come back to this once we’ve actually gone over how to create and save accounts. For now just know it’s here, and since you’re smart, I imagine you can already kind of see how it works.
-
-“But wait!” you say, “What are the `@services/error` and `@services/storage` packages?” Fine, yes, we should go over those. Remember the module alias stuff from earlier? Well one was for `@prompt` and the other was for `@services`. Go ahead and create these two files and add them to the `src/services` directory.
-
-
-
-```bash
-mkdir -p src/services
-touch src/services/{error,storage}.ts
-```
-
-
-
-`error.ts` will look like this.
-
-
-
-```ts
-import { get as loGet } from "lodash-es";
-
-export function handleError(err: any) {
- return loGet(err, "response.data", loGet(err, "message", err));
-}
-```
-
-
-
-Nothing fancy, just a clean little error handler we’ll make use of later when processing API requests.
-
-## Set Up Key Storage
-
-Next is `storage.ts`.
-
-
-
-```js
-import { Plugins } from "@capacitor/core";
-
-const { Storage } = Plugins;
-
-export async function set(key: string, value: any): Promise {
- await Storage.set({
- key,
- value,
- });
-}
-
-export async function get(key: string): Promise {
- const item = await Storage.get({ key });
- return item.value;
-}
-
-export async function remove(key: string): Promise {
- await Storage.remove({ key });
-}
-```
-
-
-
-You’ll notice a new package `@capacitor/core`. Let’s install and set that up.
-
-
-
-```bash
-# Install dependencies
-npm i -D @capacitor/core@2 @capacitor/cli@2
-
-# Initialize Capacitor
-npx cap init
-```
-
-
-
-
-
-```bash
-? App name Stellar Wallet
-? App Package ID (in Java package format, no dashes) com.wallet.stellar
-? Which npm client would you like to use? npm
-✔ Initializing Capacitor project in /Users/user/Stellar/docs-wallet in 1.91ms
-
-
-🎉 Your Capacitor project is ready to go! 🎉
-
-Add platforms using "npx cap add":
-
- npx cap add android
- npx cap add ios
- npx cap add electron
-
-Follow the Developer Workflow guide to get building:
-https://capacitor.ionicframework.com/docs/basics/workflow
-```
-
-
-
-We’re not really making full use of [ Capacitor ][2], but it is an amazing service so be sure and check it out! For now we just need it to make storing and retrieving our data a bit more stable.
-
-This storage service is simply a key setter and getter helper for storing and retrieving data. We’ll use this for any persistent data we want to store. For now, that's our Stellar account data.
-
-## Set Up Event Handling
-
-That’s everything we need for the `componentWillLoad` event. On to the `./events/render.tsx` file.
-
-
-
-```tsx
-import { h } from "@stencil/core";
-
-export default function render() {
- return [
- ,
- this.account ? (
- [
-
-
{this.account.publicKey}
-
-
-
,
- ]
- ) : (
-
- ),
-
- this.error ? (
-
{JSON.stringify(this.error, null, 2)}
- ) : null,
- this.account ? (
-
- ) : null,
- ];
-}
-```
-
-
-
-It looks messy, but it’s actually a pretty simple `.tsx` file rendering out our DOM based off a series of conditional values. You can see we’re including the `stellar-prompt` component, and setting the prompter prop to our `this.prompter` state. We then have a ternary operation toggling between a Create Account button and a basic account UI. If `this.account` has a truthy value, we’ll print out the account’s `publicKey` along with some interaction buttons. If `this.account` is falsey, we’ll print out a singular Create Account button connected to, you guessed it, the `createAccount` method. After that logic, we print out an error if there is one, and finally a Sign Out button if there’s an account to sign out of. Those are the two `Wallet` `@Component` events.
-
-## Create Methods
-
-Let’s look at the methods now beginning with the `./methods/createAccount.ts` file.
-
-
-
-```ts
-import sjcl from "@tinyanvil/sjcl";
-import { Keypair } from "stellar-sdk";
-
-import { handleError } from "@services/error";
-import { set } from "@services/storage";
-
-export default async function createAccount(e: Event) {
- try {
- e.preventDefault();
-
- const pincode_1 = await this.setPrompt("Enter a keystore pincode");
- const pincode_2 = await this.setPrompt("Enter keystore pincode again");
-
- if (!pincode_1 || !pincode_2 || pincode_1 !== pincode_2)
- throw "Invalid pincode";
-
- this.error = null;
-
- const keypair = Keypair.random();
-
- this.account = {
- publicKey: keypair.publicKey(),
- keystore: sjcl.encrypt(pincode_1, keypair.secret(), {
- adata: JSON.stringify({
- publicKey: keypair.publicKey(),
- }),
- }),
- };
-
- await set("keyStore", btoa(this.account.keystore));
- } catch (err) {
- this.error = handleError(err);
- }
-}
-```
-
-
-
-Aha! Finally something interesting. This method forms the meat of our component. Before we dive into it, though let’s install the missing `@tinyanvil/sjcl` package.
-
-
-
-```bash
-npm i -D @tinyanvil/sjcl
-```
-
-
-
-## Create an Account
-
-Essentially all we’re doing is making a request to create an account, which triggers the Prompt modal to ask for a pincode. That pincode will be used in the `sjcl.encrypt` method to encrypt the secret key from the `Keypair.random()` method. We set the `this.account` with the `publicKey`, which encrypted the `keystore` cipher, and now we're storing that cipher in base64 format in `localStorage` via our `set('keyStore')` method for easy retrieval when the browser reloads. We could also encode that cipher into a QR code or a link to share with other devices. Since it requires the pincode that encrypted cipher, it's as secure as the pincode you encrypt it with.
-
-## Copy Address
-
-Now that we’ve created an account, there are three more actions we'll enable: `copyAddress`, `copySecret`, and `signOut`.
-
-First `./methods/copyAddress.ts`
-
-
-
-```ts
-import copy from "copy-to-clipboard";
-
-export default async function copyAddress(e: Event) {
- e.preventDefault();
- copy(this.account.publicKey);
-}
-```
-
-
-
-Well there you go, the easiest code you’ll see all day. Just `copy` the `publicKey` from the `this.account` object to the clipboard. Before we jump though don’t forget to install that `copy-to-clipboard` package.
-
-
-
-```bash
-npm i -D copy-to-clipboard
-```
-
-
-
-## Copy Secret
-
-Next `./methods/copySecret.ts`
-
-
-
-```ts
-import sjcl from "@tinyanvil/sjcl";
-import copy from "copy-to-clipboard";
-
-import { handleError } from "@services/error";
-
-export default async function copySecret(e: Event) {
- try {
- e.preventDefault();
-
- const pincode = await this.setPrompt("Enter your keystore pincode");
-
- if (!pincode) return;
-
- this.error = null;
-
- const secret = sjcl.decrypt(pincode, this.account.keystore);
- copy(secret);
- } catch (err) {
- this.error = handleError(err);
- }
-}
-```
-
-
-
-You may not actually include this in your production wallet, but for now it's a simple demonstration of how to programmatically gain access to the secret key at a later date for making payments, creating trustlines, etc. It’s essentially the `createAccount` in reverse: it asks for the pincode to decrypt the keystore which, once decrypted, we `copy` into the clipboard.
-
-## Sign Out
-
-Finally `./methods/signOut.ts`
-
-
-
-```ts
-import { remove } from "@services/storage";
-import { handleError } from "@services/error";
-
-export default async function signOut(e: Event) {
- try {
- e.preventDefault();
-
- const confirmNuke = await this.setPrompt(
- "Are you sure? This will nuke your account",
- "Enter NUKE to confirm",
- );
-
- if (!confirm || !/nuke/gi.test(confirmNuke)) return;
-
- this.error = null;
-
- await remove("keyStore");
- location.reload();
- } catch (err) {
- this.error = handleError(err);
- }
-}
-```
-
-
-
-It’s important to allow users to nuke their account, but we need to be careful to confirm that action with our faithful `setPrompt`. Once they opt to “NUKE” the account we can remove the `keyStore` and reload the app.
-
-## Set Prompt
-
-Speaking of `setPrompt` the last method in our `wallet.ts` file is `./methods/setPrompt.ts`.
-
-
-
-```ts
-export default function setPrompt(
- message: string,
- placeholder?: string,
- options?: Array,
-): Promise {
- this.prompter = {
- ...this.prompter,
- show: true,
- message,
- placeholder,
- options,
- };
-
- return new Promise((resolve, reject) => {
- this.prompter.resolve = resolve;
- this.prompter.reject = reject;
- });
-}
-```
-
-
-
-In `setPrompt`, we see how the prompt state is set, and how the Promise is set up to allow us to wait on the prompt whenever we call this method. It’s actually pretty slick, and it might be worth looking back at the `src/components/prompt/prompt.tsx` to see how the `resolve` and `reject` functions get called. It’s not central to our wallet creation, but it’s a pretty handy little component that will serve us well in the future as we continue to request input from the user.
-
-That’s it folks! Restart the server with `npm start` and you’ve got a perfectly legitimate, minimal Stellar wallet key creation and storage Web Component! It's a solid foundation for a non-custodial wallet that relies on a simple pincode.
-
-[1]: https://github.com/stellar/docs-wallet/tree/setup
-[2]: https://capacitor.ionicframework.com/ "Capacitor"
diff --git a/docs/building-apps/example-application-tutorial/connect-to-anchors/_category_.json b/docs/building-apps/example-application-tutorial/connect-to-anchors/_category_.json
deleted file mode 100644
index 26c36affb..000000000
--- a/docs/building-apps/example-application-tutorial/connect-to-anchors/_category_.json
+++ /dev/null
@@ -1,7 +0,0 @@
-{
- "position": 70,
- "label": "Deposit and Withdraw From Anchors",
- "link": {
- "type": "generated-index"
- }
-}
\ No newline at end of file
diff --git a/docs/building-apps/example-application-tutorial/connect-to-anchors/deposit-anchored-assets.mdx b/docs/building-apps/example-application-tutorial/connect-to-anchors/deposit-anchored-assets.mdx
deleted file mode 100644
index 734a4bd3b..000000000
--- a/docs/building-apps/example-application-tutorial/connect-to-anchors/deposit-anchored-assets.mdx
+++ /dev/null
@@ -1,453 +0,0 @@
----
-title: Deposit Anchored Assets
-sidebar_position: 20
----
-
-import { CodeExample } from "@site/src/components/CodeExample";
-import { Alert } from "@site/src/components/Alert";
-
-
-
-This section of the tutorial takes the [basic wallet](../basic-wallet.mdx) with [trustlines](../custom-assets.mdx) and [anchor connections](./setup-for-anchored-assets.mdx) enabled and adds the ability to initiate in-app deposits with an Anchor. If you have all that ready, and the stellar.toml file is loaded into a `@Prop` on your component, you’re ready to begin the initial deposit of their asset into our wallet.
-
-
-
-## Create Deposit Method
-
-Let’s create `./methods/depositAsset.ts`.
-
-
-
-```ts
-import sjcl from "@tinyanvil/sjcl";
-import { Transaction, Keypair } from "stellar-sdk";
-import axios from "axios";
-import {
- get as loGet,
- each as loEach,
- findIndex as loFindIndex,
-} from "lodash-es";
-
-import { handleError } from "@services/error";
-
-export default async function depositAsset(e: Event) {
- try {
- e.preventDefault();
-
- let currency = await this.setPrompt(
- "Select the currency you'd like to deposit",
- null,
- this.toml.CURRENCIES,
- );
- currency = currency.split(":");
-
- const pincode = await this.setPrompt("Enter your keystore pincode");
-
- if (!pincode) return;
-
- const balances = loGet(this.account, "state.balances");
- const hasCurrency = loFindIndex(balances, {
- asset_code: currency[0],
- asset_issuer: currency[1],
- });
-
- if (hasCurrency === -1)
- await this.trustAsset(null, currency[0], currency[1], pincode);
-
- const info = await axios
- .get(`${this.toml.TRANSFER_SERVER}/info`)
- .then(({ data }) => data);
-
- console.log(info);
-
- const auth = await axios
- .get(`${this.toml.WEB_AUTH_ENDPOINT}`, {
- params: {
- account: this.account.publicKey,
- },
- })
- .then(async ({ data }) => {
- const transaction: any = new Transaction(
- data.transaction,
- data.network_passphrase,
- );
-
- this.error = null;
- this.loading = { ...this.loading, deposit: true };
-
- const keypair = Keypair.fromSecret(
- sjcl.decrypt(pincode, this.account.keystore),
- );
-
- transaction.sign(keypair);
- return transaction.toXDR();
- })
- .then((transaction) =>
- axios.post(
- `${this.toml.WEB_AUTH_ENDPOINT}`,
- { transaction },
- { headers: { "Content-Type": "application/json" } },
- ),
- )
- .then(({ data: { token } }) => token);
-
- console.log(auth);
-
- const formData = new FormData();
-
- loEach(
- {
- asset_code: currency[0],
- account: this.account.publicKey,
- lang: "en",
- },
- (value, key) => formData.append(key, value),
- );
-
- const interactive = await axios
- .post(
- `${this.toml.TRANSFER_SERVER}/transactions/deposit/interactive`,
- formData,
- {
- headers: {
- Authorization: `Bearer ${auth}`,
- "Content-Type": "multipart/form-data",
- },
- },
- )
- .then(({ data }) => data);
-
- console.log(interactive);
-
- const transactions = await axios
- .get(`${this.toml.TRANSFER_SERVER}/transactions`, {
- params: {
- asset_code: currency[0],
- limit: 1,
- kind: "deposit",
- },
- headers: {
- Authorization: `Bearer ${auth}`,
- },
- })
- .then(({ data: { transactions } }) => transactions);
-
- console.log(transactions);
-
- const urlBuilder = new URL(interactive.url);
- urlBuilder.searchParams.set("callback", "postMessage");
- const popup = open(urlBuilder.toString(), "popup", "width=500,height=800");
-
- if (!popup) {
- this.loading = { ...this.loading, deposit: false };
- throw "Popups are blocked. You'll need to enable popups for this demo to work";
- }
-
- window.onmessage = ({ data: { transaction } }) => {
- console.log(transaction.status, transaction);
-
- if (transaction.status === "completed") {
- this.updateAccount();
- this.loading = { ...this.loading, deposit: false };
- } else {
- setTimeout(() => {
- const urlBuilder = new URL(transaction.more_info_url);
- urlBuilder.searchParams.set("callback", "postMessage");
-
- popup.location.replace(urlBuilder.toString());
- }, 1000);
- }
- };
- } catch (err) {
- this.loading = { ...this.loading, deposit: false };
- this.error = handleError(err);
- }
-}
-```
-
-
-
-It’s a lot of code, but keep in mind this is everything we need to completely interoperate with financial infrastructure foreign to the Stellar ecosystem, which is a big ask and in ~130 lines of code. It’s a modern day miracle!
-
-## Currency Code and Issuer Prompt
-
-First things first install the missing `axios` package.
-
-
-
-```bash
-npm i -D axios
-```
-
-
-
-We’ll skip the rest of the top import stuff as you’re well aware of what that is, and we’ve installed and walked through anything noteworthy here already.
-
-
-
-```ts
-export default async function depositAsset(e: Event) {
- try {
- e.preventDefault()
-
- let currency = await this.setPrompt('Select the currency you\'d like to deposit', null, this.toml.CURRENCIES)
- currency = currency.split(':')
-
- const pincode = await this.setPrompt('Enter your keystore pincode')
-
- if (!pincode)
- return
-
- const keypair = Keypair.fromSecret(
- sjcl.decrypt(pincode, this.account.keystore)
- )
-```
-
-
-
-Only thing here we haven’t seen before is the prompt selection of the currency code and issuer we’d like to deposit. To get this, we send the `this.setPrompt` a final options array argument, in this case the values from `this.toml.CURRENCIES`. This will open the prompt with a select<\>options input field rather than a text input field.
-
-That selection will come back as a string in the form of `{code}:{issuer}` so we split that by the `:` so we’ll have a nice tidy array of `[{code}, {issuer}]` to use later.
-
-## Check Trustline
-
-
-
-```ts
-const balances = loGet(this.account, "state.balances");
-const hasCurrency = loFindIndex(balances, {
- asset_code: currency[0],
- asset_issuer: currency[1],
-});
-
-if (hasCurrency === -1)
- await this.trustAsset(null, currency[0], currency[1], pincode);
-```
-
-
-
-Once we’ve got the currency we’re dealing with we need to check if we have a trustline for that asset setup for our account. The anchor won’t be able to deposit their token into our account if we don’t have a trustline set for it first. So we get the balance from the `this.account.state` and then inspect the `balances` to see if that currency exists. If it doesn’t we trigger the `this.trustAsset` method with the arguments set to automatically add that trustline to our account.
-
-## Get Info
-
-
-
-```ts
-const info = await axios
- .get(`${this.toml.TRANSFER_SERVER}/info`)
- .then(({ data }) => data);
-
-console.log(info);
-```
-
-
-
-Once our account is setup, it’s time to start asking the Anchor some questions about itself and the features it supports. We get at that info by calling a GET on the `TRANSFER_SERVER/info` url from the anchor’s TOML file. We won’t make use of any of this data right now, but this is where you'd find fee and feature information which to display in you UI for your wallet user to review.
-
-## Create Authenticated User Session
-
-
-
-```ts
-const auth = await axios
- .get(`${this.toml.WEB_AUTH_ENDPOINT}`, {
- params: {
- account: this.account.publicKey,
- },
- })
- .then(async ({ data: { transaction, network_passphrase } }) => {
- const txn: any = new Transaction(transaction, network_passphrase);
-
- this.error = null;
- this.loading = { ...this.loading, withdraw: true };
-
- txn.sign(keypair);
- return txn.toXDR();
- })
- .then((transaction) =>
- axios.post(
- `${this.toml.WEB_AUTH_ENDPOINT}`,
- { transaction },
- { headers: { "Content-Type": "application/json" } },
- ),
- )
- .then(({ data: { token } }) => token);
-
-console.log(auth);
-```
-
-
-
-This call is actually a part of [SEP-0010](https://github.com/stellar/stellar-protocol/blob/master/ecosystem/sep-0010.md), which allows us to verify ownership of a user's public key so the Anchor knows the deposit request is coming from a valid entity. You don’t want someone else issuing deposit requests on your account, so to prove you control the Stellar account request the deposit, you sign a dummy authentication transaction and send it to the Anchor's web auth server. The server responds with a JWT token, which will be used to verify all further API calls to the anchor.
-
-The endpoint for creating an authenticated user session is specified the `WEB_AUTH_ENDPOINT` on an Anchor's stellar.toml file. The first thing our wallet does is make a GET request with a public `account` param which will send back an unsigned Stellar transaction for that account that has an invalid sequence number, so it doesn't actually _do_ anything when submitted to the network. In response you’ll sign that transaction on behalf of the user and POST it back. If the signature checks out, the success response will contain an Authorization Bearer header JWT which you’ll want to store and use for all future interactions with the Anchor.
-
-## Initiate Deposit
-
-
-
-```ts
-const formData = new FormData();
-
-loEach(
- {
- asset_code: currency[0],
- account: this.account.publicKey,
- lang: "en",
- },
- (value, key) => formData.append(key, value),
-);
-
-const interactive = await axios
- .post(
- `${this.toml.TRANSFER_SERVER}/transactions/withdraw/interactive`,
- formData,
- {
- headers: {
- Authorization: `Bearer ${auth}`,
- "Content-Type": "multipart/form-data",
- },
- },
- )
- .then(({ data }) => data);
-
-console.log(interactive);
-```
-
-
-
-This call is our first little bit of magic. Once we setup our `multipart/form-data` entry values we can POST them to the `${this.toml.TRANSFER_SERVER}/transactions/withdraw/interactive` endpoint along with our `auth` Authorization Bearer `auth` token we acquired earlier. The response to this call will contain a special url that allows a user to interact directly with the Anchor to provide the data required for a deposit.
-
-
-
-```json
-{
- "type": "interactive_customer_info_needed",
- "url": "https://testanchor.stellar.org/transactions/deposit/webapp?asset_code=SRT&transaction_id=3dcf204e-e3e8-4831-a840-8e36c0695a07&token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJodHRwczovL3N0ZWxsYXItYW5jaG9yLXNlcnZlci5oZXJva3VhcHAuY29tL3RyYW5zYWN0aW9ucy9kZXBvc2l0L2ludGVyYWN0aXZlIiwiaWF0IjoxNTgxNDUyMjI0Ljk4NzcyNjcsImV4cCI6MTU4MTQ1MjI1NC45ODc3MjY3LCJzdWIiOiJHQjM0QVU2NlRTR1Q1RlMzRVVMSk9UUjMyTVdLQU9NRlpLNk1QV003VjRTSUJOTE41UDVURlJKRyIsImp0aSI6IjNkY2YyMDRlLWUzZTgtNDgzMS1hODQwLThlMzZjMDY5NWEwNyJ9.N4N_vIUGu6y7-Hd5IlvevX4DLg9PjisuYEl98ejvhf8",
- "id": "3dcf204e-e3e8-4831-a840-8e36c0695a07"
-}
-```
-
-
-
-In a moment we’ll open that `url` in an iframe, popup, or new tab. Once we’ve sent that request, there will be a pending transaction request we can inspect at the `${this.toml.TRANSFER_SERVER}/transactions` route.
-
-## Check Transaction Status
-
-
-
-```ts
-const transactions = await axios
- .get(`${this.toml.TRANSFER_SERVER}/transactions`, {
- params: {
- asset_code: currency[0],
- limit: 1,
- kind: "deposit",
- },
- headers: {
- Authorization: `Bearer ${auth}`,
- },
- })
- .then(({ data: { transactions } }) => transactions);
-
-console.log(transactions);
-```
-
-
-
-This request should return the deposit status for the request we just made.
-
-
-
-```json
-{
- "transactions": [
- {
- "id": "3dcf204e-e3e8-4831-a840-8e36c0695a07",
- "kind": "deposit",
- "status": "incomplete",
- "status_eta": 3600,
- "amount_in": null,
- "amount_out": null,
- "amount_fee": null,
- "started_at": "2020-02-11T20:17:04.984590Z",
- "completed_at": null,
- "stellar_transaction_id": null,
- "external_transaction_id": null,
- "external_extra": null,
- "external_extra_text": null,
- "deposit_memo": null,
- "deposit_memo_type": "text",
- "more_info_url": "https://testanchor.stellar.org/transaction/more_info?id=3dcf204e-e3e8-4831-a840-8e36c0695a07",
- "to": "GB34AU66TSGT5FS3EULJOTR32MWKAOMFZK6MPWM7V4SIBNLN5P5TFRJG",
- "from": null
- }
- ]
-}
-```
-
-
-
-Once we’re certain we’ve got a `"status": "incomplete",` which is the correct response since we haven't served the user the URL that allows them to initiate a deposit, we know everything's working, so we can go back to the `interactive.url` route and open that to begin filling out the deposit requirements.
-
-## Serve the Anchor Webapp
-
-
-
-```ts
-const urlBuilder = new URL(interactive.url);
-urlBuilder.searchParams.set("callback", "postMessage");
-const popup = open(urlBuilder.toString(), "popup", "width=500,height=800");
-
-if (!popup) {
- this.loading = { ...this.loading, deposit: false };
- throw "Popups are blocked. You'll need to enable popups for this demo to work";
-}
-```
-
-
-
-We’ll opt for a popup. When you first open that url, it’s likely the anchor will ask for some level of KYC data from the user: name, email, address, verification docs like bank statements, passport, or license, etc. The SDF demo server we're using — which is hooked up to the testnet — will ask for name and email.
-
-After passing that screen your user enters the amount of an asset they'd like to deposit on the next screen. If, for instance, a user enters $500, once that deposit clears — and on this demo it clears automatically — the Anchor will credit the user's wallet with 500 of the token **less any fees**. In our case, the user ends up with 498.95: 1.05 is taken out in fees for a $500 deposit.
-
-If popups are disabled, we should kill the loader and show that error in the UI.
-
-
-
-```ts
- window.onmessage = ({data: {transaction}}) => {
- console.log(transaction.status, transaction)
-
- if (transaction.status === 'completed') {
- this.updateAccount()
- this.loading = {...this.loading, deposit: false}
- }
-
- else {
- setTimeout(() => {
- const urlBuilder = new URL(transaction.more_info_url)
- urlBuilder.searchParams.set('callback', 'postMessage')
-
- popup.location.replace(urlBuilder.toString())
- }, 1000)
- }
- }
- }
-
- catch (err) {
- this.loading = {...this.loading, deposit: false}
- this.error = handleError(err)
- }
-}
-```
-
-
-
-## Check Deposit Status
-
-SEP-0024 allows specifies two methods for further communication between the anchor window and the wallet: a POST JSON for when you have a server, message and postMessage for when you have a client-side service. We don’t have a server, so we opt for the `urlBuilder.searchParams.set('callback', 'postMessage')`. With that set, we can setup a window `'message'` event listener which will fire whenever the anchor popup window sends a `postMessage` to our popup `window`. From there we just listen to the popup message until `transaction.status` equals `'completed'`. At that point our deposit has succeeded, and we can `this.updateAccount()` and kill the loader. If the transaction is still in a pending status we’ll wait 1 second before reloading the anchor popup window and checking again.
-
-If at any point during this flow there’s an error we should catch that, kill the loader, and display the error to the user.
-
-Whew! \*wipes sweat from brow then hands on sleeves Nice work! “Just like that” we’ve deposited an anchored asset into our wallet! We can now make payments with that asset to anyone else who has a trustline enabled for this asset.
diff --git a/docs/building-apps/example-application-tutorial/connect-to-anchors/index.mdx b/docs/building-apps/example-application-tutorial/connect-to-anchors/index.mdx
deleted file mode 100644
index ee496b8f7..000000000
--- a/docs/building-apps/example-application-tutorial/connect-to-anchors/index.mdx
+++ /dev/null
@@ -1,14 +0,0 @@
----
-title: Interoperability Basics
-sidebar_position: 0
----
-
-Stellar makes it easy to issue assets and to connect them to existing banking rails so that users can move value onto — and off of — the network. The services that create those connections are called **anchors**.
-
-Most Anchors set up infrastructure to enable wallets to offer in-app deposits and withdrawals by following best practices specified in Stellar Ecosystem Proposals. SEPs are publicly created, open-source documents that live in a [Github repository](https://github.com/stellar/stellar-protocol/tree/master/ecosystem#stellar-ecosystem-proposals-seps). They define how different institutions (such as asset issuers, wallets, exchanges, and service providers) should interact and interoperate. If you're building an app, you can implement the client side of some key SEPs and immediately give your users access to a whole world of local fiat currencies
-
-This part of the tutorial will focus on the Interactive Anchor/Wallet Asset Transfer Server SEP (aka SEP-24), which defines the specs for deposit and withdrawal implementations. It's focused on the client side of interactive user flows — meaning flows where users interact with an Anchor-hosted interface rendered inside a wallet — and by the end, you should have an implementation which can be re-purposed to work with any SEP-supporting Anchor.
-
-When you implement SEP-0024, users can tokenize their grocery-buying dollars, pesos, or naira, use them on the Stellar network and, when they're ready, redeem them for cash in hand or money in the bank — and they can do it all from the comfort of your app.
-
-Most Anchors offer fiat-backed assets, and SEP-24 is set up to allow them to handle various KYC and AML requirements. But SEP-24 allows for the deposit and withdraw of cryptocurrencies like BTC, ETH, and ERC20 tokens like USDT. If the financial landscape is a bunch of lakes, SEP-0024 is a series of rivers by which you move your currency canoe in and out of the Stellar lake.
diff --git a/docs/building-apps/example-application-tutorial/connect-to-anchors/setup-for-anchored-assets.mdx b/docs/building-apps/example-application-tutorial/connect-to-anchors/setup-for-anchored-assets.mdx
deleted file mode 100644
index bbf10b5a9..000000000
--- a/docs/building-apps/example-application-tutorial/connect-to-anchors/setup-for-anchored-assets.mdx
+++ /dev/null
@@ -1,356 +0,0 @@
----
-title: Setup for Anchored Assets
-sidebar_position: 10
----
-
-import { CodeExample } from "@site/src/components/CodeExample";
-
-So how do we make use of SEP-0024 to allow deposits and withdrawals of anchored assets? First let’s boot up our project:
-
-[View trustline boilerplate code on GitHub][1]
-
-Next, let's think about our goals. What we’re trying to do is communicate with Anchors to get information about the assets they honor, and about the requirements and steps necessary to initiate a deposit or withdrawal on behalf of a user. When a user deposits with an Anchor — by sending dollars to their bank account via ACH, for example — the Anchor will credit their Stellar account with the equivalent amount of tokens. The user can then hold, transfer, or trade those tokens just like any other Stellar asset. When a user withdraws those tokens — generally by making a payment back to the Anchor's Stellar account — the Anchor redeems them for cash in hand or money in the bank. If you’re still a little lost it will all hopefully become clear as we get coding.
-
-This tutorial will consist of a few minor `./events/` updates and two new `./methods/`. Let’s start with the updates first. We actually need to update the core `wallet.ts` component.
-
-## Update Wallet Component
-
-
-
-```ts
-import { Component, State, Prop } from "@stencil/core";
-import { Server, ServerApi } from "stellar-sdk";
-
-import componentWillLoad from "./events/componentWillLoad"; // UPDATE
-import render from "./events/render"; // UPDATE
-
-import createAccount from "./methods/createAccount";
-import updateAccount from "./methods/updateAccount";
-import depositAsset from "./methods/depositAsset"; // NEW
-import withdrawAsset from "./methods/withdrawAsset"; // NEW
-import trustAsset from "./methods/trustAsset";
-import makePayment from "./methods/makePayment";
-import copyAddress from "./methods/copyAddress";
-import copySecret from "./methods/copySecret";
-import signOut from "./methods/signOut";
-import setPrompt from "./methods/setPrompt";
-
-import { Prompter } from "@prompt/prompt";
-
-interface StellarAccount {
- publicKey: string;
- keystore: string;
- state?: ServerApi.AccountRecord;
-}
-
-interface Loading {
- fund?: boolean;
- pay?: boolean;
- trust?: boolean;
- update?: boolean;
- deposit?: boolean; // NEW
- withdraw?: boolean; // NEW
-}
-
-@Component({
- tag: "stellar-wallet",
- styleUrl: "wallet.scss",
- shadow: true,
-})
-export class Wallet {
- @State() account: StellarAccount;
- @State() prompter: Prompter = { show: false };
- @State() loading: Loading = {};
- @State() error: any = null;
-
- @Prop() server: Server;
- @Prop() homeDomain: String; // NEW
- @Prop() toml: Object; // NEW
-
- // Component events
- componentWillLoad() {}
- render() {}
-
- // Stellar methods
- createAccount = createAccount;
- updateAccount = updateAccount;
- depositAsset = depositAsset; // NEW
- withdrawAsset = withdrawAsset; // NEW
- trustAsset = trustAsset;
- makePayment = makePayment;
- copyAddress = copyAddress;
- copySecret = copySecret;
- signOut = signOut;
-
- // Misc methods
- setPrompt = setPrompt;
-}
-
-Wallet.prototype.componentWillLoad = componentWillLoad;
-Wallet.prototype.render = render;
-```
-
-
-
-You can see from the `// NEW` and `// UPDATE` comments what we are adding and updating. Nothing worth noting here other than near the bottom two new `@Prop`’s.
-
-
-
-```ts
-@Prop() homeDomain: String // NEW
-@Prop() toml: Object // NEW
-```
-
-
-
-We’ll talk more about home domain’s and stellar.toml files in a moment, but take special note of these as they will play a critical roll in connecting tp the world outside of Stellar.
-
-## Add Deposit and Withdraw Buttons
-
-Next let’s add a couple buttons for deposit and withdraw to the `./events/render.tsx`.
-
-
-
-```tsx
-import { h } from "@stencil/core";
-import { has as loHas } from "lodash-es";
-
-export default function render() {
- return [
- ,
-
- this.account ? (
- [
-
- ) : null,
-
- this.account
- ? [
- ,
- ,
- ]
- : null,
- ];
-}
-```
-
-
-
-This is the same as what we did in the previous tutorial except that we're adding two buttons.
-
-
-
-```tsx
-,
-,
-```
-
-
-
-“Deposit Asset” and “Withdraw Asset” connect to the `this.depositAsset` and `this.withdrawAsset` methods respectively. We’ll create those methods momentarily.
-
-Before that though let’s make a change to the `./events/componentWillLoad.ts` file.
-
-## Update Components
-
-
-
-```ts
-import { Server, StellarTomlResolver } from "stellar-sdk";
-import { handleError } from "@services/error";
-import { get } from "@services/storage";
-
-export default async function componentWillLoad() {
- try {
- let keystore = await get("keyStore");
-
- this.error = null;
- this.server = new Server("https://horizon-testnet.stellar.org");
- this.homeDomain = "testanchor.stellar.org";
- this.toml = await StellarTomlResolver.resolve(this.homeDomain);
-
- if (keystore) {
- keystore = atob(keystore);
-
- const { publicKey } = JSON.parse(atob(JSON.parse(keystore).adata));
-
- this.account = {
- publicKey,
- keystore,
- };
-
- this.updateAccount();
- }
- } catch (err) {
- this.error = handleError(err);
- }
-}
-```
-
-
-
-Here, the only changes we're making are to include of the `StellarTomlResolver` from the `stellar-sdk` package and to set the values for `this.homeDomain` and `this.toml`.
-
-
-
-```ts
-this.homeDomain = "testanchor.stellar.org";
-this.toml = await StellarTomlResolver.resolve(this.homeDomain);
-```
-
-
-
-## About stellar.toml Files
-
-You know what, let’s just go ahead and cover stellar.toml files. A `stellar.toml` file is a static resource that organizations building on Stellar publish on their home domain at `https://{homeDomain}/.well-known/stellar.toml`. By linking their home domain to a Stellar account using a `set_options` operation, they create a verifiable connection from that account to the information published there. To find out everything you'd ever want to know about stellar.toml files, check out [SEP-1], which is the complete stellar.toml specification.
-
-Stellar.toml files contain all sorts of information about an organization, the assets they offer, and the integrations they support. Wallets can look at an account, find the home domain, and crawl a stellar.toml to find out pretty much everything they need to know about an Anchor, and that's exactly what the Stellar SDK `StellarTomlResolver.resolve` method does: it pulls in a stellar.toml and parses it.
-
-Let's look at some concrete examples: here’s [StellarX.com’s stellar.toml file][2].
-
-
-
-```toml
-# StellarX
-VERSION="2.2.0"
-FEDERATION_SERVER="https://federation.stellarx.com/federation"
-ACCOUNTS=[
-"GDM4UWTGHCWSTM7Z46PNF4BLH35GS6IUZYBWNNI4VU5KVIHYSIVQ55Y6"
-]
-[DOCUMENTATION]
-ORG_NAME="Ultra Stellar LLC"
-ORG_DBA="StellarX"
-ORG_URL="https://www.stellarx.com"
-ORG_LOGO="https://www.stellarx.com/emailAssets/stellarx.png"
-ORG_DESCRIPTION="The first full-featured trading app for Stellar's universal marketplace"
-ORG_PHYSICAL_ADDRESS="Tallinn, Estonia"
-ORG_OFFICIAL_EMAIL="support@stellarx.com"
-```
-
-
-
-And here's [AnchorUSD]'s[3].
-
-
-
-```toml
-# ----- AnchorUSD Stellar Anchor -----
-
-NETWORK_PASSPHRASE="Public Global Stellar Network ; September 2015"
-
-ACCOUNTS=["GDUKMGUGDZQK6YHYA5Z6AY2G4XDSZPSZ3SW5UN3ARVMO6QSRDWP5YLEX", "GASWJWFRYE55KC7MGANZMMRBK5NPXT3HMPDQ6SEXZN6ZPWYXVVYBFRTE"]
-TRANSFER_SERVER="https://api.anchorusd.com/transfer/"
-TRANSFER_SERVER_SEP0024="https://api.anchorusd.com/transfer/"
-WEB_AUTH_ENDPOINT="https://api.anchorusd.com/api/webauth"
-SIGNING_KEY="GASWJWFRYE55KC7MGANZMMRBK5NPXT3HMPDQ6SEXZN6ZPWYXVVYBFRTE"
-
-[DOCUMENTATION]
-ORG_NAME="AnchorCoin LLC"
-ORG_DBA="AnchorUSD"
-ORG_URL="https://www.anchorusd.com"
-ORG_LOGO="https://stablecoin.anchorusd.com/img/anchorusd.png"
-ORG_DESCRIPTION="AnchorUSD develops a stable cryptocurrency backed one-for-one to the US dollar."
-ORG_TWITTER="AnchorUSD"
-ORG_OFFICIAL_EMAIL="support@anchorusd.com"
-
-[[PRINCIPALS]]
-name="Jim Berkley-Danz"
-email="j@anchorusd.com"
-
-[[CURRENCIES]]
-code="USD"
-issuer="GDUKMGUGDZQK6YHYA5Z6AY2G4XDSZPSZ3SW5UN3ARVMO6QSRDWP5YLEX"
-display_decimals=2
-status="live"
-is_asset_anchored=true
-anchor_asset_type="fiat"
-anchor_asset="USD"
-name="US Dollar"
-desc="Cryptocurrency backed one-for-one to the US dollar. All dollar deposits are held in an audited, US-domiciled escrow account for the exclusive benefit of AnchorUSD token holders."
-image="https://stablecoin.anchorusd.com/img/usdx.png"
-```
-
-
-
-You can see the data provided by these companies that identifies who they are, what they do, and what services they provide. In this tutorial, we’re interested in the `[[CURRENCIES]]` they issue as that’s what we’re trying to get ahold of. We’re also looking for the `TRANSFER_SERVER` keyword, which indicates that an Anchor supports SEP-24, and the `WEB_AUTH_ENDPOINT`, which allows a wallet to set up an authenticated user session. Any time you find these three fields, and you’ve found an Anchor you can interoperate with.
-
-Once we’ve found an Anchor that supports deposit and withdrawal, we can begin the process of connecting with them from our wallet. This tutorial builds on the testnet, so from we’ll be use an SDF testing anchor server located at `testanchor.stellar.org` You can [view the TOML file for this entity][5] here.
-
-[1]: https://github.com/stellar/docs-wallet/tree/trustline
-[2]: https://www.stellarx.com/.well-known/stellar.toml
-[3]: https://stablecoin.anchorusd.com/.well-known/stellar.toml
-[4]: https://github.com/stellar/stellar-protocol/blob/master/ecosystem/sep-0001.md
-[5]: https://testanchor.stellar.org/.well-known/stellar.toml
diff --git a/docs/building-apps/example-application-tutorial/connect-to-anchors/withdraw-anchored-assets.mdx b/docs/building-apps/example-application-tutorial/connect-to-anchors/withdraw-anchored-assets.mdx
deleted file mode 100644
index 85813f156..000000000
--- a/docs/building-apps/example-application-tutorial/connect-to-anchors/withdraw-anchored-assets.mdx
+++ /dev/null
@@ -1,326 +0,0 @@
----
-title: Withdraw Anchored Assets
-sidebar_position: 30
----
-
-import { CodeExample } from "@site/src/components/CodeExample";
-import { Alert } from "@site/src/components/Alert";
-
-
-
-At this point, you should have a [basic wallet](../basic-wallet.mdx) that can handle [custom assets](../custom-assets.mdx), and you should have [enabled deposits](./deposit-anchored-assets.mdx) and used the SDF-maintained testnet [Anchor Reference Implementation](https://testanchor.stellar.org/.well-known/stellar.toml) to get some test tokens into your wallet. After you’ve had some fun with your new asset, it's time to learn to perform this process in reverse, and that's what we'll do here: set your wallet up to handle withdrawals.
-
-
-
-In a live situation, this is the step when a user takes a Stellar-based token and redeems it with an Anchor for the underlying asset it represents. It's how they'd move money off the network and back into their bank account, for instance.
-
-## Create Withdraw Method
-
-To start, create `./methods/withdrawAsset.ts` and pop this in.
-
-
-
-```ts
-import sjcl from "@tinyanvil/sjcl";
-import {
- Transaction,
- Keypair,
- Account,
- TransactionBuilder,
- BASE_FEE,
- Networks,
- Operation,
- Asset,
- Memo,
- MemoHash,
-} from "stellar-sdk";
-
-import axios from "axios";
-import {
- get as loGet,
- each as loEach,
- findIndex as loFindIndex,
-} from "lodash-es";
-
-import { handleError } from "@services/error";
-
-export default async function withdrawAsset(e: Event) {
- try {
- e.preventDefault();
-
- let currency = await this.setPrompt(
- "Select the currency you'd like to withdraw",
- null,
- this.toml.CURRENCIES,
- );
- currency = currency.split(":");
-
- const pincode = await this.setPrompt("Enter your keystore pincode");
-
- if (!pincode) return;
-
- const keypair = Keypair.fromSecret(
- sjcl.decrypt(pincode, this.account.keystore),
- );
-
- const balances = loGet(this.account, "state.balances");
- const hasCurrency = loFindIndex(balances, {
- asset_code: currency[0],
- asset_issuer: currency[1],
- });
-
- if (hasCurrency === -1)
- await this.trustAsset(null, currency[0], currency[1], pincode);
-
- const info = await axios
- .get(`${this.toml.TRANSFER_SERVER}/info`)
- .then(({ data }) => data);
-
- console.log(info);
-
- const auth = await axios
- .get(`${this.toml.WEB_AUTH_ENDPOINT}`, {
- params: {
- account: this.account.publicKey,
- },
- })
- .then(async ({ data: { transaction, network_passphrase } }) => {
- const txn: any = new Transaction(transaction, network_passphrase);
-
- this.error = null;
- this.loading = { ...this.loading, withdraw: true };
-
- txn.sign(keypair);
- return txn.toXDR();
- })
- .then((transaction) =>
- axios.post(
- `${this.toml.WEB_AUTH_ENDPOINT}`,
- { transaction },
- { headers: { "Content-Type": "application/json" } },
- ),
- )
- .then(({ data: { token } }) => token);
-
- console.log(auth);
-
- const formData = new FormData();
-
- loEach(
- {
- asset_code: currency[0],
- account: this.account.publicKey,
- lang: "en",
- },
- (value, key) => formData.append(key, value),
- );
-
- const interactive = await axios
- .post(
- `${this.toml.TRANSFER_SERVER}/transactions/withdraw/interactive`,
- formData,
- {
- headers: {
- Authorization: `Bearer ${auth}`,
- "Content-Type": "multipart/form-data",
- },
- },
- )
- .then(({ data }) => data);
-
- console.log(interactive);
-
- const transactions = await axios
- .get(`${this.toml.TRANSFER_SERVER}/transactions`, {
- params: {
- asset_code: currency[0],
- limit: 1,
- kind: "withdrawal",
- },
- headers: {
- Authorization: `Bearer ${auth}`,
- },
- })
- .then(({ data: { transactions } }) => transactions);
-
- console.log(transactions);
-
- const urlBuilder = new URL(interactive.url);
- urlBuilder.searchParams.set("callback", "postMessage");
- const popup = open(urlBuilder.toString(), "popup", "width=500,height=800");
-
- if (!popup) {
- this.loading = { ...this.loading, withdraw: false };
- throw "Popups are blocked. You'll need to enable popups for this demo to work";
- }
-
- await new Promise((resolve, reject) => {
- let submittedTxn;
-
- window.onmessage = ({ data: { transaction } }) => {
- console.log(transaction.status, transaction);
-
- if (transaction.status === "completed") {
- this.updateAccount();
- this.loading = { ...this.loading, withdraw: false };
- resolve();
- } else if (
- !submittedTxn &&
- transaction.status === "pending_user_transfer_start"
- ) {
- this.server
- .accounts()
- .accountId(keypair.publicKey())
- .call()
- .then(({ sequence }) => {
- const account = new Account(keypair.publicKey(), sequence);
- const txn = new TransactionBuilder(account, {
- fee: BASE_FEE,
- networkPassphrase: Networks.TESTNET,
- })
- .addOperation(
- Operation.payment({
- destination: transaction.withdraw_anchor_account,
- asset: new Asset(currency[0], currency[1]),
- amount: transaction.amount_in,
- }),
- )
- .addMemo(new Memo(MemoHash, transaction.withdraw_memo))
- .setTimeout(0)
- .build();
-
- txn.sign(keypair);
- return this.server.submitTransaction(txn);
- })
- .then((res) => {
- console.log(res);
- submittedTxn = res;
-
- const urlBuilder = new URL(transaction.more_info_url);
- urlBuilder.searchParams.set("callback", "postMessage");
-
- popup.location.replace(urlBuilder.toString());
- })
- .catch((err) => reject(err));
- } else {
- setTimeout(() => {
- const urlBuilder = new URL(transaction.more_info_url);
- urlBuilder.searchParams.set("callback", "postMessage");
-
- popup.location.replace(urlBuilder.toString());
- }, 1000);
- }
- };
- });
- } catch (err) {
- this.loading = { ...this.loading, withdraw: false };
- this.error = handleError(err);
- }
-}
-```
-
-
-
-We’ll actually skip everything except the stuff that is significantly different than the [deposit flow](./deposit-anchored-assets.mdx). The main difference between the two is who submits the Stellar transaction: in the deposit flow the anchor is sends the wallet a Stellar asset; in the withdraw flow the wallet sends the asset to the anchor. So for the withdraw flow, we’ll need to build and submit a payment transaction.
-
-## Create and Submit Payment Transaction
-
-
-
-```ts
- await new Promise((resolve, reject) => {
- let submittedTxn
-
- window.onmessage = ({data: {transaction}}) => {
- console.log(transaction.status, transaction)
-
- if (transaction.status === 'completed') {
- this.updateAccount()
- this.loading = {...this.loading, withdraw: false}
- resolve()
- }
-```
-
-
-
-First thing we’ll see is the use of a Promise. This allows us to respond to any errors in the transaction we’re about to build and submit. Inside the promise we have three if statement blocks. The first `if` statement is a response to a status of success, which is where we'll end up once the withdraw has registered and everything is hunky dory.
-
-
-
-```ts
- else if (
- !submittedTxn
- && transaction.status === 'pending_user_transfer_start'
- ) {
- this.server
- .accounts()
- .accountId(keypair.publicKey())
- .call()
- .then(({sequence}) => {
- const account = new Account(keypair.publicKey(), sequence)
- const txn = new TransactionBuilder(account, {
- fee: BASE_FEE,
- networkPassphrase: Networks.TESTNET
- })
- .addOperation(Operation.payment({
- destination: transaction.withdraw_anchor_account,
- asset: new Asset(currency[0], currency[1]),
- amount: transaction.amount_in
- }))
- .addMemo(new Memo(MemoHash, transaction.withdraw_memo))
- .setTimeout(0)
- .build()
-
- txn.sign(keypair)
- return this.server.submitTransaction(txn)
- })
- .then((res) => {
- console.log(res)
- submittedTxn = res
-
- const urlBuilder = new URL(transaction.more_info_url)
- urlBuilder.searchParams.set('callback', 'postMessage')
-
- popup.location.replace(urlBuilder.toString())
- })
- .catch((err) => reject(err))
- }
-```
-
-
-
-Otherwise if the transaction status is `pending_user_transfer_start` and we haven’t yet submitted a transaction to the Anchor, we attempt that. We load up the user's account to get the next valid sequence number, and build a Stellar [transaction](../../../fundamentals-and-concepts/stellar-data-structures/operations-and-transactions.mdx#transactions) consisting of a [payment operation](../../../fundamentals-and-concepts/stellar-data-structures/operations-and-transactions.mdx#operations) with all the details from the transaction object that the anchor is expecting. Once we have a valid transaction built, we’ll sign it with the keypair, submit the transaction to the network, and wait for a response. If the transaction is successful, we save that value to `submittedTxn` and reload the anchor popup to observe the pending status. Make sure to set the `submittedTxn` to a truthy value or else you run the risk of submitting the transaction multiple times, as the anchor may take a moment to realize you’ve successfully submitted a transaction to them.
-
-
-
-```ts
- else {
- setTimeout(() => {
- const urlBuilder = new URL(transaction.more_info_url)
- urlBuilder.searchParams.set('callback', 'postMessage')
-
- popup.location.replace(urlBuilder.toString())
- }, 1000)
- }
- }
- })
- }
-
- catch (err) {
- this.loading = {...this.loading, withdraw: false}
- this.error = handleError(err)
- }
-}
-```
-
-
-
-The last if block is that if all else fails just keep reloading the anchor popup every second until we get a `'completed'` status.
-
-Finally catch and respond to any errors.
-
-With this method saved and the server reloaded we have a fully functional SEP-0024 compliant wallet! Noice!
-
-[View this code on GitHub][1]
-
-[1]: https://github.com/stellar/docs-wallet/tree/sep24
diff --git a/docs/building-apps/example-application-tutorial/custom-assets.mdx b/docs/building-apps/example-application-tutorial/custom-assets.mdx
deleted file mode 100644
index c10a5115c..000000000
--- a/docs/building-apps/example-application-tutorial/custom-assets.mdx
+++ /dev/null
@@ -1,457 +0,0 @@
----
-title: Handle Custom Assets
-sidebar_position: 60
----
-
-import { CodeExample } from "@site/src/components/CodeExample";
-import { Alert } from "@site/src/components/Alert";
-
-
-
-In this section of the tutorial, we'll add the ability to hold and transfer custom assets to the basic wallet we built in previous sections. It assumes that you've already completed [Build a Basic Wallet](./basic-wallet.mdx) and [Make XLM Payments](./xlm-payments.mdx).
-
-
-
-[View pay boilerplate code on GitHub][1]
-
-## What's a Custom Asset?
-
-Stellar allows anyone to easily issue an asset, and all assets can be held, transferred, and traded just like XLM, the network token. Every asset _other_ than XLM exists on the network in the form of trustlines: an asset holder explicitly agrees to allow a balance of a specific token issued by a specific issuing account by creating a persistent ledger entry tied to the holding account. You can find out more in the guide to [creating custom assets](../../issuing-assets/anatomy-of-an-asset.mdx).
-
-Each trustline increases the user's [base reserve](../../fundamentals-and-concepts/lumens#base-reserves) by 0.5 XLM, and in this tutorial, we'll go over how to set up your wallet to create trustlines and manage the base reserve on behalf of a user.
-
-## Add Trustlines Button
-
-To enable custom asset handling, we need to modify three files and create one new one. Let’s start with our modifications. First up the `./events/render.tsx` file. We need to add a button for creating these new trustlines!
-
-
-
-```tsx
-import { h } from "@stencil/core";
-import { has as loHas } from "lodash-es";
-
-export default function render() {
- return [
- ,
-
- this.account ? (
- [
-
- ) : null,
-
- this.account
- ? [
- ,
- ,
- ]
- : null,
- ];
-}
-```
-
-
-
-If you look closely you’ll spot the Trust Asset button right below our `account-key` div. Nothing funky here, just a button that triggers `this.trustAsset` method which we’ll add in a moment.
-
-Next up, let’s update the `./methods/makePayment.ts` file.
-
-
-
-```ts
-import sjcl from "@tinyanvil/sjcl";
-import {
- Keypair,
- Account,
- TransactionBuilder,
- BASE_FEE,
- Networks,
- Operation,
- Asset,
-} from "stellar-sdk";
-import { has as loHas } from "lodash-es";
-
-import { handleError } from "@services/error";
-
-export default async function makePayment(e: Event) {
- try {
- e.preventDefault();
-
- let instructions = await this.setPrompt("{Amount} {Asset} {Destination}");
- instructions = instructions.split(" ");
-
- if (!/xlm/gi.test(instructions[1]))
- instructions[3] = await this.setPrompt(
- `Who issues the ${instructions[1]} asset?`,
- "Enter ME to refer to yourself",
- );
-
- const pincode = await this.setPrompt("Enter your keystore pincode");
-
- if (!instructions || !pincode) return;
-
- const keypair = Keypair.fromSecret(
- sjcl.decrypt(pincode, this.account.keystore),
- );
-
- if (/me/gi.test(instructions[3])) instructions[3] = keypair.publicKey();
-
- this.error = null;
- this.loading = { ...this.loading, pay: true };
-
- await this.server
- .accounts()
- .accountId(keypair.publicKey())
- .call()
- .then(({ sequence }) => {
- const account = new Account(keypair.publicKey(), sequence);
- const transaction = new TransactionBuilder(account, {
- fee: BASE_FEE,
- networkPassphrase: Networks.TESTNET,
- })
- .addOperation(
- Operation.payment({
- destination: instructions[2],
- asset: instructions[3]
- ? new Asset(instructions[1], instructions[3])
- : Asset.native(),
- amount: instructions[0],
- }),
- )
- .setTimeout(0)
- .build();
-
- transaction.sign(keypair);
- return this.server.submitTransaction(transaction).catch((err) => {
- if (
- // Paying an account which doesn't exist, create it instead
- loHas(err, "response.data.extras.result_codes.operations") &&
- err.response.data.status === 400 &&
- err.response.data.extras.result_codes.operations.indexOf(
- "op_no_destination",
- ) !== -1 &&
- !instructions[3]
- ) {
- const transaction = new TransactionBuilder(account, {
- fee: BASE_FEE,
- networkPassphrase: Networks.TESTNET,
- })
- .addOperation(
- Operation.createAccount({
- destination: instructions[2],
- startingBalance: instructions[0],
- }),
- )
- .setTimeout(0)
- .build();
-
- transaction.sign(keypair);
- return this.server.submitTransaction(transaction);
- } else throw err;
- });
- })
- .then((res) => console.log(res))
- .finally(() => {
- this.loading = { ...this.loading, pay: false };
- this.updateAccount();
- });
- } catch (err) {
- this.error = handleError(err);
- }
-}
-```
-
-
-
-This is a big file that was covered in great detail in the [Make XLM Payments](./xlm-payments.mdx) tutorial, so we’ll just focus on the changes we need to make to support custom asset payments.
-
-
-
-```ts
-let instructions = await this.setPrompt("{Amount} {Asset} {Destination}");
-instructions = instructions.split(" ");
-
-if (!/xlm/gi.test(instructions[1]))
- instructions[3] = await this.setPrompt(
- `Who issues the ${instructions[1]} asset?`,
- "Enter ME to refer to yourself",
- );
-```
-
-
-
-This change allows us to indicate a specific asset code we’d like use to make a payment and triggers an additional prompt to set the issuer for that asset if it’s not the native XLM.
-
-
-
-```ts
-if (/me/gi.test(instructions[3])) instructions[3] = keypair.publicKey();
-```
-
-
-
-This is just a nifty little helper shortcut to allow us to use the `ME` “issuer” to swap with our actual account publicKey. Niceties make the world go ‘round.
-
-
-
-```ts
-asset: instructions[3] ? new Asset(instructions[1], instructions[3]) : Asset.native(),
-```
-
-
-
-The final noteworthy change is a ternary operation that switches our payment asset between the native XLM and a custom asset based off of responses to our prompt. Essentially, if `instructions[3]` exists — meaning there is an issuer — use that issuer and custom token as the asset for the payment. Otherwise, just use the native `Asset`.
-
-The final changes are in the `wallet.ts` itself and tie together all the other updates as well as pull in the new `trustAsset` method.
-
-
-
-```ts
-import { Component, State, Prop } from "@stencil/core";
-import { Server, ServerApi } from "stellar-sdk";
-
-import componentWillLoad from "./events/componentWillLoad";
-import render from "./events/render";
-
-import createAccount from "./methods/createAccount";
-import updateAccount from "./methods/updateAccount";
-import trustAsset from "./methods/trustAsset"; // NEW
-import makePayment from "./methods/makePayment"; // UPDATE
-import copyAddress from "./methods/copyAddress";
-import copySecret from "./methods/copySecret";
-import signOut from "./methods/signOut";
-import setPrompt from "./methods/setPrompt";
-
-import { Prompter } from "@prompt/prompt";
-
-interface StellarAccount {
- publicKey: string;
- keystore: string;
- state?: ServerApi.AccountRecord;
-}
-
-interface Loading {
- // UPDATE
- fund?: boolean;
- pay?: boolean;
- trust?: boolean; // NEW
- update?: boolean;
-}
-
-@Component({
- tag: "stellar-wallet",
- styleUrl: "wallet.scss",
- shadow: true,
-})
-export class Wallet {
- @State() account: StellarAccount;
- @State() prompter: Prompter = { show: false };
- @State() loading: Loading = {};
- @State() error: any = null;
-
- @Prop() server: Server;
-
- // Component events
- componentWillLoad() {}
- render() {}
-
- // Stellar methods
- createAccount = createAccount;
- updateAccount = updateAccount;
- trustAsset = trustAsset; // NEW
- makePayment = makePayment; // UPDATE
- copyAddress = copyAddress;
- copySecret = copySecret;
- signOut = signOut;
-
- // Misc methods
- setPrompt = setPrompt;
-}
-
-Wallet.prototype.componentWillLoad = componentWillLoad;
-Wallet.prototype.render = render;
-```
-
-
-
-Only thing worth seeing here besides the inclusion of the new `trustAsset` method is the addition of the `trust?: boolean,` in the `Loading` class.
-
-## Add Trustlines
-
-Alright so, finally we get to the `./methods/trustAsset.ts` file!
-
-
-
-```ts
-import sjcl from "@tinyanvil/sjcl";
-import {
- Keypair,
- Account,
- TransactionBuilder,
- BASE_FEE,
- Networks,
- Operation,
- Asset,
-} from "stellar-sdk";
-
-import { handleError } from "@services/error";
-
-export default async function trustAsset(
- e?: Event,
- asset?: string,
- issuer?: string,
- pincode?: string,
-) {
- try {
- if (e) e.preventDefault();
-
- let instructions;
-
- if (asset && issuer) instructions = [asset, issuer];
- else {
- instructions = await this.setPrompt("{Asset} {Issuer}");
- instructions = instructions.split(" ");
- }
-
- pincode = pincode || (await this.setPrompt("Enter your keystore pincode"));
-
- if (!instructions || !pincode) return;
-
- const keypair = Keypair.fromSecret(
- sjcl.decrypt(pincode, this.account.keystore),
- );
-
- this.error = null;
- this.loading = { ...this.loading, trust: true };
-
- await this.server
- .accounts()
- .accountId(keypair.publicKey())
- .call()
- .then(({ sequence }) => {
- const account = new Account(keypair.publicKey(), sequence);
- const transaction = new TransactionBuilder(account, {
- fee: BASE_FEE,
- networkPassphrase: Networks.TESTNET,
- })
- .addOperation(
- Operation.changeTrust({
- asset: new Asset(instructions[0], instructions[1]),
- }),
- )
- .setTimeout(0)
- .build();
-
- transaction.sign(keypair);
- return this.server.submitTransaction(transaction);
- })
- .then((res) => console.log(res))
- .finally(() => {
- this.loading = { ...this.loading, trust: false };
- this.updateAccount();
- });
- } catch (err) {
- this.error = handleError(err);
- }
-}
-```
-
-
-
-This is similar to the `makePayment` method but there are a couple tiny tweaks worth noting:
-
-
-
-```ts
-export default async function trustAsset(
- e?: Event,
- asset?: string,
- issuer?: string,
- pincode?: string
-) {
- try {
- if (e)
- e.preventDefault()
-
- let instructions
-
- if (
- asset
- && issuer
- ) instructions = [asset, issuer]
-
- else {
- instructions = await this.setPrompt('{Asset} {Issuer}')
- instructions = instructions.split(' ')
- }
-
- pincode = pincode || await this.setPrompt('Enter your keystore pincode')
-```
-
-
-
-We’re allowing the inclusion of several arguments in this function, namely `asset`, `issuer`, and `pincode`. We won’t be making use of them here, but transparently creating trustlines from within other functions will prove useful later.
-
-If we have any of those variables set, we can “preload” our interface a bit, and even bypass user input altogether if a pincode is provided. Again, not something we’ll make use of quite yet, but once we look into depositing and withdrawing assets from an Anchor or accepting incoming payments for which we don’t yet have a trustline this functionality will prove useful.
-
-So there we have it! The ability to accept and pay with custom assets on Stellar!
-
-[1]: https://github.com/stellar/docs-wallet/tree/pay
-[3]: https://github.com/stellar/docs-wallet/tree/trustline
diff --git a/docs/building-apps/example-application-tutorial/first-deposit.mdx b/docs/building-apps/example-application-tutorial/first-deposit.mdx
deleted file mode 100644
index 39878e530..000000000
--- a/docs/building-apps/example-application-tutorial/first-deposit.mdx
+++ /dev/null
@@ -1,60 +0,0 @@
----
-title: Fund the Account and make the First Deposit
-sidebar_position: 65
----
-
-In this section, we will go over the new user account creation flow between non-custodial wallets and anchors with SEP-24 and/or SEP-6 implementations. Before we dive into the flow, it’s important to understand how Stellar accounts are created in the first place.
-
-The first step in creating a Stellar account is to generate a keypair. This keypair includes public and private keys. However, an account does not exist and does not warrant space on the ledger until it’s funded with the minimum balance of 1XLM by a [Create Account](../../fundamentals-and-concepts/list-of-operations.mdx#create-account) operation. This requirement was created to minimize unused accounts from bloating the ledger. For a more in-depth look at this topic, check out this [page](../../tutorials/create-account.mdx).
-
-## Who creates the new user accounts?
-
-When a new customer downloads the wallet application and goes through the deposit flow for the first time, their Stellar account can be created by either the user’s wallet application or the anchor facilitating the first deposit. This section describes the possible strategies and flows for you to consider.
-
-### Option 1: The anchor creates and funds the Stellar account
-
-For this option, the wallet needs to allow users to initiate their first deposit without having to add an asset/establish a trustline. The wallet then prompts the user to add the trustline once funds are received by the anchor. The flow looks like this:
-
-1. The wallet registers a new user and issues a keypair.
-1. The wallet initiates the first deposit on behalf of the user without requiring the user to add the asset/create the trustline.
-1. The anchor provides deposit instructions to the customer.
-1. The user transfers money from a bank account to the anchor’s bank account.
-1. Once the anchor receives the transfer, the anchor creates and funds the Stellar account for the customer.
-1. The wallet detects that the account has been created and a trustline must be established.
-1. The wallet prompts the user to add the asset/create the trustline.
-1. Finally, the anchor sends the deposit funds to the user’s Stellar account.
-
-**Note**: An anchor should always maintain a healthy amount of XLM in its distribution account to support new account creations. If doing so becomes unsustainable, it’s recommended that the anchor collaborates with wallets to determine a strategy based on the number of account creation requests. The recommended amount is 2XLM per user account creation (1XLM to meet the minimum balance requirement, and 1XLM for establishing trustlines and covering transaction fees).
-
-
-
-With the flow described above, the wallet and the anchor have to facilitate listening for and responding to the trustline status, which can create user experience frictions when waiting for the trustline to be established. To address this issue, Protocol 15 introduced [Claimable Balances](../../encyclopedia/claimable-balances.mdx), which enhance the flow by allowing users to start using the wallet without having to secure XLM wait to create the trustline after they made their first deposit. Both the wallet and the anchor have to implement Claimable Balance support in order to make this flow work.
-
-The flow with Claimable Balances looks like this:
-
-1. The wallet registers a new user, and generates a keypair.
-1. The wallet initiates a deposit on behalf of a user.
-1. The anchor provides deposit instructions to the wallet.
-1. The user transfers money from a bank account to the anchor’s account.
-1. The anchor creates and funds the user's Stellar account plus the amount required for trustlines and transaction fees. Again, we suggest 2 XLM to start.
-1. The anchor creates a Claimable Balance.
-1. The wallet detects the Claimable Balance for the account, claims the funds, and posts it in the wallet.
-
-
-
-### Option 2: The wallet creates and funds the Stellar account upon user sign-up
-
-For this option, the wallet creates and funds the Stellar account upon every new user sign-up with the minimum requirement of 1XLM, plus the .5XLM reserve for establishing the first trustline, plus a bit more to cover transaction fees. For more information on minimum balances, check out the [Lumens section](../../fundamentals-and-concepts/lumens.mdx#minimum-balance).
-
-The flow looks like this:
-
-1. Upon a new user signup, the wallet issues a keypair, then creates and funds the user's Stellar account with 2XLM.
-1. Then the wallet creates a trustline, and initiates the first deposit.
-1. Once the deposit request is sent to the anchor, the anchor provides instructions for the deposit.
-1. The customer transfer funds from a personal bank account to the anchor’s account.
-1. The anchor receives the funds, then sends them to the user’s Stellar account.
-1. The wallet detects that funds were sent and notifies the user.
-
-
-
-**Note**: In the examples above, we suggest having the anchor or wallet cover minimum balance and trustline XLM requirements by depositing funds directly into a user's account. We made that suggestion for the sake of simplicity, but in all cases, the anchor or wallet could instead use [Sponsored Reserves](../../encyclopedia/sponsored-reserves.mdx) to ensure that when a user closes a trustline or merges their account, the reserve reverts to the sponsoring account rather than to the user's account.
diff --git a/docs/building-apps/example-application-tutorial/manage-trust.mdx b/docs/building-apps/example-application-tutorial/manage-trust.mdx
new file mode 100644
index 000000000..08ad3ad2e
--- /dev/null
+++ b/docs/building-apps/example-application-tutorial/manage-trust.mdx
@@ -0,0 +1,22 @@
+---
+title: Manage Trust
+sidebar_position: 30
+---
+
+For an account to hold and trade assets other than XLM, it must establish a [trustline](../../fundamentals-and-concepts/stellar-data-structures/accounts#trustlines) with the issuing account of that particular asset. Each trustline increases the account’s [base reserve](../../fundamentals-and-concepts/stellar-data-structures/accounts#base-reserves-and-subentries) by 0.5 XLM, which means the account will have to hold more XLM in its minimum balance. In BasicPay, we’ve already funded the account on Testnet. When moving your application to Pubnet, you can either cover an account’s minimum balance using sponsored reserves, or the user will have to supply their own XLM.
+
+First, we’ll have the user create a trustline for an asset by navigating to the Assets page, selecting an asset, and clicking the “Add Asset” button. This triggers a modal form for them to confirm the transaction with their pincode. Once confirmed, a transaction containing the `changeTrust` operation is signed and submitted to the network, and a trustline is established with the issuing account for the asset.
+
+:::info
+
+Every transaction must contain a sequence number that is used to identify and verify the order of transactions with the account. A transaction’s sequence number must always increase by one. In BasicPay, fetching and incrementing the sequence number is handled automatically by the transaction builder.
+
+:::
+
+[ss3]
+
+The `changeTrust` operation can also be used to modify or remove trustlines.
+
+Trustlines hold the balances for all of their associated assets (except XLM, which are held at the account level), and you can display the user’s various balances in your application.
+
+[ss4]
diff --git a/docs/building-apps/example-application-tutorial/overview.mdx b/docs/building-apps/example-application-tutorial/overview.mdx
new file mode 100644
index 000000000..3697ee95e
--- /dev/null
+++ b/docs/building-apps/example-application-tutorial/overview.mdx
@@ -0,0 +1,39 @@
+---
+title: Overview
+sidebar_position: 10
+---
+
+In this tutorial, we’ll walk through the steps needed to build a basic payment application on Stellar’s Testnet. After this tutorial, you should have a good understanding of the fundamental Stellar concepts and a solid base for iterative development.
+
+For this tutorial, we’ll walk through the steps as we build a sample application we’ve called [BasicPay](https://basicpay.pages.dev), which will be used to showcase various features.
+
+:::caution
+
+**Although BasicPay is a full-fledged application on Stellar’s Testnet, it has been built solely to showcase Stellar functionality for the educational purposes of this tutorial, not to be copied, pasted, and used on Mainnet.**
+
+:::
+
+## Project setup
+
+### Project requirements
+
+To build a basic Stellar application, you’ll need:
+
+- Application framework (for BasicPay, we use SvelteKit opting for JavaScript with JSDoc typing, and we used [svelte-add](https://github.com/svelte-add/svelte-add) to get our project started)
+- Frontend framework (for BasicPay, we’re using Daisy UI to simplify the use of Tailwind CSS)
+- A way to interact with the Stellar network (for BasicPay, we use the [js-stellar-sdk](https://github.com/stellar/js-stellar-sdk), but you could use traditional fetch requests)
+- A way to interact with the user’s keypair (for BasicPay, we are using the [js-stellar-wallets SDK](https://github.com/stellar/js-stellar-wallets), but you can opt to use an existing wallet)
+
+While we are using the above components to construct our application, we have done our best to build it in such a way that dependency on any one of these things is minimized. Ideally, you should be able to use the JavaScript code we’ve written and plug it into any other framework you’d like with minimal effort.
+
+We’ve made the following choices during the development of this application that you may need to consider as you follow this project:
+
+- We’ve designed this app with a desktop in mind.
+- We’re using a dark mode theme. No light mode is available, so deal with it.
+- This is written as a client-side application. No server-side actions actually take place.
+- We’re deploying this as a static site with Cloudflare pages.
+
+### Dev helpers
+
+- [Friendbot](https://friendbot.stellar.org/): a bot that funds accounts with 10,000 fake XLM on Stellar’s Testnet
+- [Testnet toml file](https://testanchor.stellar.org/.well-known/stellar.toml)
diff --git a/docs/building-apps/example-application-tutorial/path-payment.mdx b/docs/building-apps/example-application-tutorial/path-payment.mdx
new file mode 100644
index 000000000..d1c3d28bf
--- /dev/null
+++ b/docs/building-apps/example-application-tutorial/path-payment.mdx
@@ -0,0 +1,18 @@
+---
+title: Path Payment
+sidebar_position: 50
+---
+
+A path payment is where the asset sent can be different from the asset received. There are two possible path payment operations: 1) `path_payment_strict_send`, which allows the user to specify the amount of the asset to send, and 2) `path_payment_strict_receive`, which allows the user to specify the amount of the asset received.
+
+With BasicPay, the user will input the public key of the destination address, specify the asset sent and the asset received, and the amount of asset either sent or received.
+
+[ss]
+
+The user will then sign and submit the transaction to the network.
+
+:::tip
+
+BasicPay also contains a swap feature, which allows the user to send themselves an asset in exchange for another asset. For example, receive USDC in exchange for your own XLM.
+
+:::
diff --git a/docs/building-apps/example-application-tutorial/payment.mdx b/docs/building-apps/example-application-tutorial/payment.mdx
new file mode 100644
index 000000000..e63b54764
--- /dev/null
+++ b/docs/building-apps/example-application-tutorial/payment.mdx
@@ -0,0 +1,22 @@
+---
+title: Payment
+sidebar_position: 40
+---
+
+A payment operation sends an amount in a specific asset (XLM or non-XLM) to a destination account. With a basic payment operation, the asset sent is the same as the asset received. BasicPay also allows for path payments (where the asset sent is different than the asset received), which we’ll talk about in the next section.
+
+In our BasicPay application, we’ll add a “Send Payment” button that allows the user to input the public key of a destination address with a specified asset they’d like to send along with the amount of the asset. The application will first verify that the destination account exists and is properly funded with XLM.
+
+:::info
+
+An asset is displayed as an asset code and issuer address. Learn more in our [Assets section](https://developers.stellar.org/docs/fundamentals-and-concepts/stellar-data-structures/assets).
+
+:::
+
+All Stellar transactions require a small fee to make it to the ledger. Read more in our [Fees, Surge Pricing, and Fee Strategies section](../../encyclopedia/fees-surge-pricing-fee-strategies).
+
+In BasicPay, we’ve set it up so that the user always pays a static fee of 100,000 [stroops](../../fundamentals-and-concepts/stellar-data-structures/assets#amount-precision) (one stroop equals 0.0000001 XLM) per operation. Alternatively, you can add a feature to your application that allows the user to set their own fee.
+
+[ss5]
+
+Finally, the user will click the “Send” button, which triggers a modal with the transaction preview where the user will input their pincode and click “Confirm” which signs and submits the transaction to the ledger.
diff --git a/docs/building-apps/example-application-tutorial/project-setup.mdx b/docs/building-apps/example-application-tutorial/project-setup.mdx
deleted file mode 100644
index fb7181d44..000000000
--- a/docs/building-apps/example-application-tutorial/project-setup.mdx
+++ /dev/null
@@ -1,495 +0,0 @@
----
-title: Project Setup
-sidebar_position: 20
----
-
-import { CodeExample } from "@site/src/components/CodeExample";
-
-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 Stellar wallet start to finish. Stellar also has a [suite of SDKs][1] 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.
-
-
-
-```bash
-npm init stencil
-```
-
-
-
-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
-
-
-
-```bash
-? Pick a starter › - Use arrow-keys. Return to submit.
-
- ionic-pwa Everything you need to build fast, production ready PWAs
- app Minimal starter for building a Stencil app or website
-❯ component Collection of web components that can be used anywhere
-```
-
-
-
-We’ll walk through the prompt, `cd` into the project and run `npm i ; npm start`
-
-
-
-```bash
-✔ Pick a starter › component
-✔ Project name › stellar-wallet
-
-✔ All setup in 9 ms
-
- $ npm start
- Starts the development server.
-
- $ npm run build
- Builds your components/app in production mode.
-
- $ npm test
- Starts the test runner.
-
- We suggest that you begin by typing:
-
- $ cd stellar-wallet
- $ npm i
- $ npm start
-
- Further reading:
-
- - https://github.com/ionic-team/stencil-component-starter
-
- Happy coding!
-```
-
-
-
-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:
-
-
-
-```bash
-$ npm run generate
-```
-
-
-
-This will initialize a component generation script. Enter a name of `stellar-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.
-
-
-
-```bash
-% npm run generate
-
-> stellar-wallet generate
-> stencil generate
-
-✔ Component tag name (dash-case): … stellar-wallet
-✔ Which additional files do you want to generate? › Stylesheet
-
-$ stencil generate stellar-wallet
-
-The following files have been generated:
- - src/components/wallet/wallet.tsx
- - src/components/wallet/wallet.css
-```
-
-
-
-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.
-
-
-
-```bash
-npm i -D @stencil/postcss@2 @stencil/sass@1 autoprefixer@9 @types/autoprefixer@9 rollup-plugin-node-polyfills
-```
-
-
-
-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:
-
-
-
-```ts
-import { Config } from "@stencil/core";
-import { sass } from "@stencil/sass";
-import { postcss } from "@stencil/postcss";
-import autoprefixer from "autoprefixer";
-import nodePolyfills from "rollup-plugin-node-polyfills";
-
-export const config: Config = {
- namespace: "stellar-wallet",
- outputTargets: [
- {
- type: "dist",
- esmLoaderPath: "../loader",
- },
- {
- type: "docs-readme",
- },
- {
- type: "www",
- serviceWorker: null, // disable service workers
- },
- ],
- globalStyle: "src/global/style.scss",
- commonjs: {
- namedExports: {
- "stellar-sdk": [
- "StrKey",
- "xdr",
- "Transaction",
- "Keypair",
- "Networks",
- "Account",
- "TransactionBuilder",
- "BASE_FEE",
- "Operation",
- "Asset",
- "Memo",
- "MemoHash",
- ],
- "@stellar/wallet-sdk": ["KeyManager", "KeyManagerPlugins", "KeyType"],
- },
- },
- plugins: [
- nodePolyfills(),
- sass(),
- postcss({
- plugins: [autoprefixer()],
- }),
- ],
- nodeResolve: {
- browser: true,
- preferBuiltins: true,
- },
-};
-```
-
-
-
-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.
-
-
-
-```scss
-@import "../../global/style.scss";
-
-:host {
- display: block;
- font-family: $font-family;
- font-size: 15px;
-
- p {
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
- display: block;
- }
- button {
- margin-bottom: 10px;
- }
-
- .account-key {
- display: flex;
- align-items: center;
- width: 100%;
- margin-bottom: 10px;
-
- .small {
- margin: 0 0 0 10px;
- flex-shrink: 0;
- }
- }
- .account-state,
- .error {
- overflow: scroll;
- padding: 10px;
- font-size: 12px;
- line-height: 1.2;
- font-family: $font-mono;
- margin-bottom: 10px;
- width: 100%;
- }
- .account-state {
- background-color: whitesmoke;
- }
- .error {
- background-color: orangered;
- color: white;
- }
-
- stellar-loader {
- sidebar_position: absolute;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
- }
-}
-```
-
-
-
-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`.
-
-
-
-```scss
-$font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif,
- Apple Color Emoji, Segoe UI Emoji;
-$font-mono: monospace;
-html,
-body,
-div,
-span,
-applet,
-object,
-iframe,
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-p,
-blockquote,
-pre,
-a,
-abbr,
-acronym,
-address,
-big,
-cite,
-code,
-del,
-dfn,
-em,
-img,
-ins,
-kbd,
-q,
-s,
-samp,
-small,
-strike,
-strong,
-sub,
-sup,
-tt,
-var,
-b,
-u,
-i,
-center,
-dl,
-dt,
-dd,
-ol,
-ul,
-li,
-fieldset,
-form,
-label,
-legend,
-table,
-caption,
-tbody,
-tfoot,
-thead,
-tr,
-th,
-td,
-article,
-aside,
-canvas,
-details,
-embed,
-figure,
-figcaption,
-footer,
-header,
-hgroup,
-menu,
-nav,
-output,
-ruby,
-section,
-summary,
-time,
-mark,
-audio,
-video {
- margin: 0;
- padding: 0;
- bsidebar_position: 0;
- font-size: 100%;
- font: inherit;
- vertical-align: baseline;
-}
-/* HTML5 display-role reset for older browsers */
-article,
-aside,
-details,
-figcaption,
-figure,
-footer,
-header,
-hgroup,
-menu,
-nav,
-section {
- display: block;
-}
-body {
- line-height: 1;
-}
-ol,
-ul {
- list-style: none;
-}
-blockquote,
-q {
- quotes: none;
-}
-blockquote:before,
-blockquote:after,
-q:before,
-q:after {
- content: "";
- content: none;
-}
-table {
- border-collapse: collapse;
- border-spacing: 0;
-}
-
-* {
- box-sizing: border-box;
-}
-input,
-button,
-select,
-textarea {
- font-family: $font-family;
- font-size: 15px;
- outline: none;
- appearance: none;
- border-radius: 0;
-}
-input,
-select,
-button {
- height: 30px;
-}
-button {
- bsidebar_position: none;
- appearance: none;
- sidebar_position: relative;
- background-color: blue;
- color: white;
- margin: 0;
- display: flex;
- align-items: center;
- align-content: center;
- justify-content: center;
- justify-items: center;
- padding: 0 10px;
- cursor: pointer;
-
- &.loading {
- color: transparent;
- pointer-events: none;
- }
- &.small {
- font-size: 12px;
- height: 20px;
- }
-}
-```
-
-
-
-Save those style files and update the `wallet.tsx` to point to our new styles like so:
-
-
-
-```tsx
-import { Component, h } from "@stencil/core";
-import * as StellarSdk from "stellar-sdk";
-
-@Component({
- tag: "stellar-wallet",
- styleUrl: "wallet.scss",
- shadow: true,
-})
-export class Wallet {
- render() {
- return [
-
- {!!StellarSdk
- ? "The StellarSdk is ready to rock 🤘"
- : "Uh oh, the StellarSdk is missing 😱"}
-
,
- ];
- }
-}
-```
-
-
-
-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.
-
-
-
-```bash
-npm i -D stellar-sdk js-xdr
-```
-
-
-
-The last mod: point the `src/index.html` file to use this brand new component. Modify that file to match this.
-
-
-
-```html
-
-
-
-
-
- Stellar Wallet
-
-
-
-
-
-
-
-
-```
-
-
-
-You should be all set up now. Restart the server and let’s get coding.
-
-
-
-```bash
-# Stop any current server and rerun
-$ npm start
-```
-
-
-
-[View the full setup code on GitHub][2]
-
-[1]: ../../tools-and-sdks.mdx#sdk-library
-[2]: https://github.com/stellar/docs-wallet/tree/setup
diff --git a/docs/building-apps/example-application-tutorial/querying-data.mdx b/docs/building-apps/example-application-tutorial/querying-data.mdx
new file mode 100644
index 000000000..021db5855
--- /dev/null
+++ b/docs/building-apps/example-application-tutorial/querying-data.mdx
@@ -0,0 +1,13 @@
+---
+title: Querying Data
+sidebar_position: 70
+---
+
+Throughout the application’s functionality, it will be querying data from Horizon, Stellar’s API. Information such as account balances, transaction history, sequence numbers for transactions, asset availability, and more are stored in Horizon’s database.
+
+Functions to query:
+
+- loadAccount: gives the account sequence number, asset balances, trustlines, and an account object that can be used in a transaction
+- fetchAccount: gives all the same information as loadAccount, but doesn’t have the account object
+- getAccountBalances
+- submitTransaction
diff --git a/docs/building-apps/example-application-tutorial/setup-custodial-account.mdx b/docs/building-apps/example-application-tutorial/setup-custodial-account.mdx
deleted file mode 100644
index b5561b28a..000000000
--- a/docs/building-apps/example-application-tutorial/setup-custodial-account.mdx
+++ /dev/null
@@ -1,204 +0,0 @@
----
-title: Set Up a Custodial Account
-sidebar_position: 45
----
-
-import { CodeExample } from "@site/src/components/CodeExample";
-import { Alert } from "@site/src/components/Alert";
-
-This guide describes how to add assets from the Stellar network to your custodial service. First, we walk through adding Stellar's native asset: lumens (XLM). Following that, we describe how to add other assets. This example uses Node.js and the [JS Stellar SDK](https://github.com/stellar/js-stellar-sdk), but it should be easy to adapt to other languages.
-
-## Account Setup
-
-### Pooled account
-
-Most custodial services, including cryptocurrency exchanges, choose to use a single pooled Stellar account to handle transactions on behalf of their users instead of creating a new Stellar account for each customer. Generally, they keep track of their customers in a separate, internal database and use the memo field of a Stellar transaction to map an incoming payment to the corresponding internal customer.
-
-The benefits of using a pooled account are _lower costs_ – no base reserves are needed for each account – and _lower key complexity_ – you only need to manage one account keypair. However, with a single pooled account, it is now your responsibility to manage all individual customer balances and payments. You can no longer rely on the Stellar ledger to accumulate value, handle errors and atomicity, or manage transactions on an account-by-account basis.
-
-## Code Framework
-
-You can use this code framework to integrate Stellar into your custodial service. For this guide, we use abstract placeholder functions for reading/writing to your internal customer database, since each organization will architect their infrastructure differently. Here are the functions we'll assume exist (along with their expected behavior):
-
-
-
-```js
-// We assume that these to correspond to your custodial account details.
-CUSTODIAL_KEY = StellarSdk.Keypair.fromSecret("...");
-custodialAcc = await server.loadAccount(CUSTODIAL_KEY.publicKey());
-
-/**
- * Credits a customer (`to`) with `amount` of a particular `asset`.
- *
- * @param {string} from The public key of the Stellar account that
- * submitted this deposit.
- * @param {any} to A string representing the customer that's part of
- * this pooled account. This could be a key, a database index, an object,
- * or some other abstraction. The main point is that this is *NOT* a
- * Stellar account. This value either directly comes from or somehow
- * resolves from the transaction memo field on the payment.
- * @param {Asset} asset The asset deposited into the customer's account.
- * @param {string} amount The quantity (as a string, conforming to the way
- * payments are submitted on the Stellar network) of `asset` being
- * credited.
- **/
-function depositIntoPool(from, to, asset, amount) {}
-
-/**
- * Withdraws an `amount` of `asset` from a customer (`from`).
- *
- * For simplicity, we assume that this function always works. However, you
- * should obviously be managing balances appropriately and ensuring that
- * a particular customer can in fact fulfill a requested withdrawal.
- *
- * Note that this should probably be executed *after* the requisite transaction
- * (see `createPayment()`) succeeds to ensure accounts aren't debited
- * unnecessarily.
- *
- * @param {any} from As in `depositIntoPool()`, this is some
- * representation of a customer that's part of a pooled account but not
- * on the Stellar network.
- * @param {Asset} asset The asset being debited from the customer.
- * @param {string} amount The quantity of `asset` to withdraw.
- **/
-function withdrawFromPool(from, asset, amount) {}
-
-/**
- * Creates a PaymentOp corresponding to a withdrawal.
- *
- * This is just a convenience method for submitting payments on behalf of
- * customers in a transaction. You may want to just do one operation per
- * transaction (for example to include the source customer's ID in the memo),
- * or you can batch many operations together; it's up to you.
- *
- * @param {string} to The Stellar account address of the recipient
- * @param {Asset} asset The asset to debit from the source customer
- * @param {string} amount The amount of `asset` to debit
- *
- * @return {xdr.paymentOp}
- */
-function createPayment(to, asset, amount) {
- return sdk.Operation.payment({
- source: custodialAcc.accountId(),
- destination: to,
- asset: asset,
- amount: amount,
- });
-}
-```
-
-
-
-## Integration points for listing XLM
-
-
-
-In the following code samples, proper error checking is omitted for brevity. However, you should _always_ validate your results, as there are many ways that requests can fail. You should refer to the guide on [Error Handling](../../encyclopedia/error-handling.mdx) for tips on error management strategies.
-
-
-
-### Setting the memo required flag on your account
-
-Before we get into the main integration points for adding XLM support to your product or service, make sure to configure your pooled account to require memos. This step is necessary to prevent users from forgetting to attach a memo, which can increase customer support requests and lead to a less desirable user experience for new customers. [This article](https://www.stellar.org/developers-blog/fixing-memo-less-payments) explains how to set that up.
-
-### Listening for incoming payments from the Stellar network
-
-First, you need to listen for payments to the pooled account and credit any user that receives XLM there. For every payment received by the pooled account:
-
-- check the memo field to determine which user should receive the payment, and
-- credit the user’s account with the amount of XLM they received.
-
-This is the role of `depositIntoPool`, described above. You pass this function as the `onmessage` option when you [stream payments](https://developers.stellar.org/docs/tutorials/follow-received-payments/):
-
-
-
-```js
-const stream = server
- .payments()
- .forAccount(custodialAcc)
- .join("transactions")
- .cursor("now")
- .stream({
- onmessage: (payment) => {
- const from = payment.source_account;
- const customerId = payment.transaction.memo;
- const amount = payment.amount;
-
- let asset = sdk.Asset.native();
- if (payment.asset_issuer) {
- asset = new sdk.Asset(payment.asset_code, payment.asset_issuer);
- }
-
- depositIntoPool(from, customerId, asset, amount);
- },
- });
-```
-
-
-
-When someone **outside** of your customer base wants to send XLM to one of your customers, instruct them to make an XLM payment to your pooled account address with the customer ID in the memo field of the transaction. Assuming you have set the `memo_required` configuration on your account (see [above](#setting-the-memo-required-flag-on-your-account)), [well-behaved](https://github.com/stellar/stellar-protocol/blob/master/ecosystem/sep-0029.md) wallets should enforce it and prevent users from forgetting to attach memos to incoming payments. To be on the safe side, however, you should make it incredibly clear to senders that their payment will end up in limbo if they fail to attach a valid one. You can learn more about the transaction memo field [here](https://developers.stellar.org/docs/encyclopedia/transactions/#memo).
-
-When someone **inside** of your customer base wants to send XLM to _another_ one of your customers, you have two choices: you can send a memo'd payment exactly as above — this lets you maintain an audit trail, ensures the balance exists in the custodial account, etc. — or you can do the exchange "off-chain", i.e. by exclusively adjusting balances within your database.
-
-### Submitting outgoing payments to the Stellar network
-
-When one of your customers wants to make an outgoing XLM payment, you must generate a Stellar transaction to send XLM. See [building transactions](https://stellar.github.io/js-stellar-sdk/TransactionBuilder.html) or the [payments tutorial](https://developers.stellar.org/docs/tutorials/send-and-receive-payments/#send-a-payment) for more information.
-
-The aforementioned `createPayment` function will prepare the corresponding operation whenever a withdrawal is requested (while `withdrawFromPool` should manage your balance sheet). You can use these to queue up transactions (for periodic or batched submission) or submit them immediately. It's up to you how to architect this portion; we adopt the (simpler) latter approach here:
-
-
-
-```js
-/**
- * Submit a payment requested from an internal customer.
- *
- * Here, `customerId` is your internal representation of a customer in the
- * pool, passed in here as the outgoing transaction's memo purely for
- * clarity. The required `destination` parameter, however, is the actual
- * Stellar address for the payment.
- */
-function onPooledPayment(customerId, destination, amount, asset) {
- let tx = new sdk.TransactionBuilder(custodialAcc, {
- fee: 100,
- networkPassphrase: sdk.Networks.TESTNET,
- memo: customerId,
- })
- .addOperation(createPayment(destination, amount, asset))
- .setTimeout(30)
- .build();
-
- tx.sign(CUSTODIAL_KEY);
- withdrawFromPool(customerId, asset, amount);
- return server.submitTransaction(tx).catch((err) => {
- return reverseWithdrawal(customerId, asset, amount, error);
- });
-}
-```
-
-
-
-This code would be called whenever one of your customers submitted a payment through your platform. Note that the balances are adjusted _before_ the transaction is confirmed, so you should take care to adjust them back if there's a failure (e.g. implement `reverseWithdrawal` for your architecture).
-
-## Listing Other Stellar Assets
-
-All of the code above is asset-agnostic, so accepting other (non-native/lumen) assets into your custodial account can be achieved after fulfilling a few prerequisites.
-
-### Account Setup
-
-First, you must [open a trustline](https://developers.stellar.org/docs/start/list-of-operations/#change-trust) with the issuing account of the asset you’d like to list – without this, you cannot begin accepting the asset. The [Issue an Asset](https://developers.stellar.org/docs/issuing-assets/how-to-issue-an-asset/) tutorial covers the code for this one-time process.
-
-Next, if the asset issuer has the `authorization_required` flag on their account set, you will need to wait for them to authorize the trustline before you can begin accepting the asset. Read more about trustline authorization [here](https://developers.stellar.org/docs/issuing-assets/control-asset-access/).
-
-
-
-_Note_: Users cannot send a non-native asset to your pooled account (nor receive one from your customers) unless they have opted into that asset by opening a trustline to its issuer.
-
-
-
-### Managing Supply
-
-Custodians usually hold a float of the assets they list on their platform. Unlike Stellar’s native asset (XLM), which can only be sourced from the Stellar Decentralized Exchange (SDEX), non-native assets can also be sourced directly from the asset’s issuer. For example, custodians can establish a [Circle Account](https://www.circle.com/blog/circle-account-and-api-services-now-support-stellar-usdc) to source Stellar USDC.
-
-Regardless of the strategies used to purchase the asset, you’ll need to adapt your balance sheet management (e.g. the internals of `depositIntoPool` and `withdrawFromPool`, [above](#code-framework)) to track things per-asset for each customer. Since this is backend-specific, we won’t provide example code here.
-
-For more information about non-native assets, check out the [asset issuing guide](../../issuing-assets/anatomy-of-an-asset.mdx).
diff --git a/docs/building-apps/example-application-tutorial/xlm-payments.mdx b/docs/building-apps/example-application-tutorial/xlm-payments.mdx
deleted file mode 100644
index 694b4fd70..000000000
--- a/docs/building-apps/example-application-tutorial/xlm-payments.mdx
+++ /dev/null
@@ -1,736 +0,0 @@
----
-title: Make XLM Payments
-sidebar_position: 50
----
-
-import { CodeExample } from "@site/src/components/CodeExample";
-import { Alert } from "@site/src/components/Alert";
-
-
-
-In this tutorial we’re going to modify our [base wallet app](./basic-wallet.mdx) to include functionality to send XLM to other Stellar accounts.
-
-
-
-[View keystore boilerplate code on GitHub][1]
-
-In the [Build a Basic Wallet section](./basic-wallet.mdx), we did the hard work of wiring up a secure client and rock-solid key creation and storage structure with a clear plan for key use and management. Now that we have a method for creating an account — and for storing that account's secrets so they're safe and easy to use — we're ready to start making payments. We'll start with XLM payments since they're a little simpler; in the [next section](./custom-assets.mdx), we'll look at how to support payments for other assets.
-
-There isn’t too much that's new or complicated here: we'll be building on what we already have. Again, most of the work will be in `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.
-
-## Add Loader Component
-
-Hopefully by now you’re familiar with how to generate new Stencil components.
-
-
-
-```bash
-npm run generate
-```
-
-
-
-We'll call the component `stellar-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:
-
-
-
-```tsx
-import { BaseN } from "js-combinatorics";
-import { Component, h, State, Prop } from "@stencil/core";
-import { isEqual as loIsEqual, sample as loSample } from "lodash-es";
-
-@Component({
- tag: "stellar-loader",
- styleUrl: "loader.scss",
- shadow: true,
-})
-export class Loader {
- @State() chances: any = [];
- @State() chance: any = null;
- @Prop() interval: any;
-
- componentWillLoad() {
- return new Promise((resolve) => {
- if (!this.chances.length) this.generateChances(9);
-
- if (!this.interval)
- this.interval = setInterval(() => this.getChance(), 100);
-
- resolve();
- });
- }
-
- generateChances(int: number) {
- const baseN = new BaseN([0, 1], int);
-
- this.chances = baseN.toArray();
- this.getChance();
- }
- getChance() {
- const chance = loSample(this.chances);
-
- if (loIsEqual(chance, this.chance)) this.getChance();
- else this.chance = chance;
- }
-
- render() {
- return (
-
- {this.chance.map((int, i) => (
-
- ))}
-
- );
- }
-}
-```
-
-
-
-Don’t forget to install new packages!
-
-
-
-```bash
-npm i -D js-combinatorics
-```
-
-
-
-It’s a fancy wackadoodle little component which at the end of the day just produces a little loader for use in our action buttons.
-
-## Import Methods
-
-We’re now ready to tackle the `src/components/wallet/wallet.ts` file.
-
-
-
-```ts
-import { Component, State, Prop } from "@stencil/core";
-import { Server, ServerApi } from "stellar-sdk";
-
-import componentWillLoad from "./events/componentWillLoad";
-import render from "./events/render";
-
-import createAccount from "./methods/createAccount";
-import updateAccount from "./methods/updateAccount";
-import makePayment from "./methods/makePayment";
-import copyAddress from "./methods/copyAddress";
-import copySecret from "./methods/copySecret";
-import signOut from "./methods/signOut";
-import setPrompt from "./methods/setPrompt";
-
-import { Prompter } from "@prompt/prompt";
-
-interface StellarAccount {
- publicKey: string;
- keystore: string;
- state?: ServerApi.AccountRecord;
-}
-
-interface Loading {
- fund?: boolean;
- pay?: boolean;
- update?: boolean;
-}
-
-@Component({
- tag: "stellar-wallet",
- styleUrl: "wallet.scss",
- shadow: true,
-})
-export class Wallet {
- @State() account: StellarAccount;
- @State() prompter: Prompter = { show: false };
- @State() loading: Loading = {};
- @State() error: any = null;
-
- @Prop() server: Server;
-
- // Component events
- componentWillLoad() {}
- render() {}
-
- // Stellar methods
- createAccount = createAccount;
- updateAccount = updateAccount;
- makePayment = makePayment;
- copyAddress = copyAddress;
- copySecret = copySecret;
- signOut = signOut;
-
- // Misc methods
- setPrompt = setPrompt;
-}
-
-Wallet.prototype.componentWillLoad = componentWillLoad;
-Wallet.prototype.render = render;
-```
-
-
-
-If you’ve followed other tutorials in this series much of this may be review, but we’ll just walk along this file and see exactly what’s going on.
-
-
-
-```ts
-import { Component, State, Prop } from "@stencil/core";
-import { Server, ServerApi } from "stellar-sdk";
-
-import componentWillLoad from "./events/componentWillLoad"; // UPDATE
-import render from "./events/render"; // UPDATE
-
-import createAccount from "./methods/createAccount"; // UPDATE
-import updateAccount from "./methods/updateAccount"; // NEW
-import makePayment from "./methods/makePayment"; // NEW
-import copyAddress from "./methods/copyAddress";
-import copySecret from "./methods/copySecret";
-import signOut from "./methods/signOut";
-import setPrompt from "./methods/setPrompt";
-
-import { Prompter } from "@prompt/prompt";
-```
-
-
-
-Imports galore! Nothing really noteworthy here other than you’ll notice we’re importing `./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.
-
-
-
-```ts
-interface StellarAccount {
- // UPDATE
- publicKey: string;
- keystore: string;
- state?: ServerApi.AccountRecord;
-}
-
-interface Loading {
- // NEW
- fund?: boolean;
- pay?: boolean;
- update?: boolean;
-}
-```
-
-
-
-Here we’re setting up two TypeScript classes: one for our account and the other for our loading states.
-
-
-
-```ts
-@Component({
- tag: 'stellar-wallet',
- styleUrl: 'wallet.scss',
- shadow: true
-})
-export class Wallet {
- @State() account: StellarAccount
- @State() prompter: Prompter = {show: false}
- @State() loading: Loading = {} // NEW
- @State() error: any = null
-
- @Prop() server: Server // NEW
-
- ...
-}
-```
-
-
-
-Here we set up our `@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 Stellar server instance.
-
-## Update Component Events
-
-Next let’s update our two component events `./events/componentWillLoad.ts` and `./events/render.tsx`:
-
-
-
-```ts
-import { Server } from "stellar-sdk";
-import { handleError } from "@services/error";
-import { get } from "@services/storage";
-
-export default async function componentWillLoad() {
- try {
- let keystore = await get("keyStore");
-
- this.error = null;
- this.server = new Server("https://horizon-testnet.stellar.org");
-
- if (keystore) {
- keystore = atob(keystore);
-
- const { publicKey } = JSON.parse(atob(JSON.parse(keystore).adata));
-
- this.account = {
- publicKey,
- keystore,
- };
-
- this.updateAccount();
- }
- } catch (err) {
- this.error = handleError(err);
- }
-}
-```
-
-
-
-In Stencil’s `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 `horizon-testnet` for now — we're just learning, and not ready to send live XLM — but in production you’d want to change this to the public `horizon` endpoint or, if you're running your own Horizon, to one of your own Horizon API endpoints.
-
-For the account we’re simply checking to see if a `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:
-
-
-
-```tsx
-import { h } from "@stencil/core";
-import { has as loHas } from "lodash-es";
-
-export default function render() {
- return [
- ,
-
- this.account ? (
- [
-
- ) : null,
-
- this.account
- ? [
- ,
- ,
- ]
- : null,
- ];
-}
-```
-
-
-
-Yikers amirite!? Don’t worry though: it’s actually quite simple if you’ve spent any time with HTML in JS before. What we're looking at are a few ternary operators toggling the UI between different states based on the account status. Basically just a bunch of buttons wired up to their subsequent actions. Turns out creating those buttons is next on our to-do list!
-
-## Create Buttons
-
-`updateAccount` and `makePayment` are new; `createAccount` will just need a few tweaks. Let’s start with that one.
-
-
-
-```ts
-import sjcl from "@tinyanvil/sjcl";
-import axios from "axios";
-import { Keypair } from "stellar-sdk";
-
-import { handleError } from "@services/error";
-import { set } from "@services/storage";
-
-export default async function createAccount(e: Event) {
- try {
- e.preventDefault();
-
- const pincode_1 = await this.setPrompt("Enter a keystore pincode");
- const pincode_2 = await this.setPrompt("Enter keystore pincode again");
-
- if (!pincode_1 || !pincode_2 || pincode_1 !== pincode_2)
- throw "Invalid pincode";
-
- this.error = null;
- this.loading = { ...this.loading, fund: true };
-
- const keypair = Keypair.random();
-
- await axios(
- `https://friendbot.stellar.org?addr=${keypair.publicKey()}`,
- ).finally(() => (this.loading = { ...this.loading, fund: false }));
-
- this.account = {
- publicKey: keypair.publicKey(),
- keystore: sjcl.encrypt(pincode_1, keypair.secret(), {
- adata: JSON.stringify({
- publicKey: keypair.publicKey(),
- }),
- }),
- };
-
- await set("keyStore", btoa(this.account.keystore));
-
- this.updateAccount();
- } catch (err) {
- this.error = handleError(err);
- }
-}
-```
-
-
-
-## Fund Account Using Friendbot
-
-The only new thing we’re adding here — other than a loading state and an initial `this.updateAccount()` call at the end — is the call to [friendbot.stellar.org][2], which is a testnet tool that we can use to automatically fund our new testnet account with 10,000 XLM. Nice little shortcut to kickstart our development.
-
-
-
-```ts
-await axios(
- `https://friendbot.stellar.org?addr=${keypair.publicKey()}`,
-).finally(() => (this.loading = { ...this.loading, fund: false }));
-```
-
-
-
-In production, you would have to find an actual source for funding the account. Some wallets fund users' accounts for them; some require the user to supply the funds.
-
-So that’s the updated `./methods/createAccount.ts` file.
-
-## Update Account Method
-
-Now let’s create two new files for updating the account and making XLM payments.
-
-
-
-```bash
-touch src/components/wallet/methods/{updateAccount,makePayment}.ts
-```
-
-
-
-Let’s start with the simpler one, `./methods/updateAccount.ts`
-
-
-
-```ts
-import { omit as loOmit, map as loMap } from "lodash-es";
-
-import { handleError } from "@services/error";
-
-export default async function updateAccount(e?: Event) {
- try {
- if (e) e.preventDefault();
-
- this.error = null;
- this.loading = { ...this.loading, update: true };
-
- await this.server
- .accounts()
- .accountId(this.account.publicKey)
- .call()
- .then((account) => {
- account.balances = loMap(account.balances, (balance) =>
- loOmit(balance, [
- "limit",
- "buying_liabilities",
- "selling_liabilities",
- "is_authorized",
- "last_modified_ledger",
- balance.asset_type !== "native" ? "asset_type" : null,
- ]),
- );
-
- this.account = {
- ...this.account,
- state: loOmit(account, [
- "id",
- "_links",
- "sequence",
- "subentry_count",
- "last_modified_ledger",
- "flags",
- "thresholds",
- "account_id",
- "signers",
- "paging_token",
- "data_attr",
- ]),
- };
- })
- .finally(() => (this.loading = { ...this.loading, update: false }));
- } catch (err) {
- this.error = handleError(err);
- }
-}
-```
-
-
-
-All we’re doing here is looking up the state of the Stellar account on the ledger and saving it to the `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.
-
-## Make Payment Method
-
-Next let’s break down the main subject method for this tutorial, `./methods/makePayment.ts`:
-
-
-
-```ts
-import sjcl from "@tinyanvil/sjcl";
-import {
- Keypair,
- Account,
- TransactionBuilder,
- BASE_FEE,
- Networks,
- Operation,
- Asset,
-} from "stellar-sdk";
-import { has as loHas } from "lodash-es";
-
-import { handleError } from "@services/error";
-
-export default async function makePayment(e: Event) {
- try {
- e.preventDefault();
-
- let instructions = await this.setPrompt("{Amount} {Destination}");
- instructions = instructions.split(" ");
-
- const pincode = await this.setPrompt("Enter your keystore pincode");
-
- if (!instructions || !pincode) return;
-
- const keypair = Keypair.fromSecret(
- sjcl.decrypt(pincode, this.account.keystore),
- );
-
- this.error = null;
- this.loading = { ...this.loading, pay: true };
-
- await this.server
- .accounts()
- .accountId(keypair.publicKey())
- .call()
- .then(({ sequence }) => {
- const account = new Account(keypair.publicKey(), sequence);
- const transaction = new TransactionBuilder(account, {
- fee: BASE_FEE,
- networkPassphrase: Networks.TESTNET,
- })
- .addOperation(
- Operation.payment({
- destination: instructions[1],
- asset: Asset.native(),
- amount: instructions[0],
- }),
- )
- .setTimeout(0)
- .build();
-
- transaction.sign(keypair);
- return this.server.submitTransaction(transaction).catch((err) => {
- if (
- // Paying an account which doesn't exist, create it instead
- loHas(err, "response.data.extras.result_codes.operations") &&
- err.response.data.status === 400 &&
- err.response.data.extras.result_codes.operations.indexOf(
- "op_no_destination",
- ) !== -1
- ) {
- const transaction = new TransactionBuilder(account, {
- fee: BASE_FEE,
- networkPassphrase: Networks.TESTNET,
- })
- .addOperation(
- Operation.createAccount({
- destination: instructions[1],
- startingBalance: instructions[0],
- }),
- )
- .setTimeout(0)
- .build();
-
- transaction.sign(keypair);
- return this.server.submitTransaction(transaction);
- } else throw err;
- });
- })
- .then((res) => console.log(res))
- .finally(() => {
- this.loading = { ...this.loading, pay: false };
- this.updateAccount();
- });
- } catch (err) {
- this.error = handleError(err);
- }
-}
-```
-
-
-
-This method is quite massive, so let’s break it down further so it's easier to understand exactly what is going on.
-
-
-
-```ts
-export default async function makePayment(e: Event) {
- try {
- e.preventDefault()
-
- let instructions = await this.setPrompt('{Amount} {Destination}')
- instructions = instructions.split(' ')
-
- const pincode = await this.setPrompt('Enter your keystore pincode')
-
- if (
- !instructions
- || !pincode
- ) return
-```
-
-
-
-We’re going to need a couple pieces of info from the user: the amount of XLM to send, what address to send it to, and the pincode for unlocking the keystore file. We request those asynchronously and cancel out of the method if they aren’t provided.
-
-
-
-```ts
-const keypair = Keypair.fromSecret(
- sjcl.decrypt(pincode, this.account.keystore),
-);
-
-this.error = null;
-this.loading = { ...this.loading, pay: true };
-```
-
-
-
-Next we unpack the keystore with the pincode, reset any existing errors, and trigger the `pay` loading boolean:
-
-
-
-```ts
- await this.server
- .accounts()
- .accountId(keypair.publicKey())
- .call()
- .then(({sequence}) => {
- const account = new Account(keypair.publicKey(), sequence)
- const transaction = new TransactionBuilder(account, {
- fee: BASE_FEE,
- networkPassphrase: Networks.TESTNET
- })
- .addOperation(Operation.payment({
- destination: instructions[1],
- asset: Asset.native(),
- amount: instructions[0]
- }))
- .setTimeout(0)
- .build()
-
- transaction.sign(keypair)
- return this.server.submitTransaction(transaction)
-```
-
-
-
-From there we call the keypair account to retrieve its current sequence number so we can prepare a transaction with a payment operation. We set the destination and amount using the instructions from the prompt we collected and split earlier. Finally, we build, sign, and submit that transaction to the Stellar Horizon API server.
-
-
-
-```ts
- .catch((err) => {
- if ( // Paying an account which doesn't exist, create it instead
- loHas(err, 'response.data.extras.result_codes.operations')
- && err.response.data.status === 400
- && err.response.data.extras.result_codes.operations.indexOf('op_no_destination') !== -1
- ) {
- const transaction = new TransactionBuilder(account, {
- fee: BASE_FEE,
- networkPassphrase: Networks.TESTNET
- })
- .addOperation(Operation.createAccount({
- destination: instructions[1],
- startingBalance: instructions[0]
- }))
- .setTimeout(0)
- .build()
-
- transaction.sign(keypair)
- return this.server.submitTransaction(transaction)
- }
-
- else throw err
- })
-```
-
-
-
-If the account we want to send XLM is unfunded (and therefore doesn't yet exist on the ledger), we'll get back `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.
-
-
-
-```ts
- })
- .then((res) => console.log(res))
- .finally(() => {
- this.loading = {...this.loading, pay: false}
- this.updateAccount()
- })
- }
-
- catch (err) {
- this.error = handleError(err)
- }
-}
-```
-
-
-
-Finally, we log any success transaction, kill the loader, and `updateAccount` to reflect the new balance in our account after successfully sending XLM. We also have our `catch` block that passes to the `handleError` service. We will render that in a nice error block in the UI.
-
-There we go! That wasn’t so bad right? Pretty simple, and yet from this tutorial we have the power to hold and observe balances, and to make payments using the power of the Stellar ledger. Amazing!
-
-[1]: https://github.com/stellar/docs-wallet/tree/keystore
-[2]: https://friendbot.stellar.org/
-[3]: https://github.com/stellar/docs-wallet/tree/pay
From e7238faa53d43679e3e6ed2c20e8d0d7bc7e9857 Mon Sep 17 00:00:00 2001
From: Bri <92327786+briwylde08@users.noreply.github.com>
Date: Mon, 17 Jul 2023 13:15:06 -0600
Subject: [PATCH 02/46] fix links
---
docs/anchoring-assets/overview.mdx | 2 +-
.../example-application-tutorial/account-creation.mdx | 2 +-
2 files changed, 2 insertions(+), 2 deletions(-)
diff --git a/docs/anchoring-assets/overview.mdx b/docs/anchoring-assets/overview.mdx
index b9ee74e84..a3913f72d 100644
--- a/docs/anchoring-assets/overview.mdx
+++ b/docs/anchoring-assets/overview.mdx
@@ -13,7 +13,7 @@ Stellar has anchor services operating worldwide. View the [Anchor Directory](htt
Anchors can issue their own assets on the Stellar network, or they can honor assets that already exist. To learn about issuing assets, check out the [Issue Assets section](https://developers.stellar.org/docs/category/issue-assets).
-This documentation will instruct you on how to become an anchor. To understand how to integrate anchor services into your blockchain-based application, check out the [Build Apps section](/docs/category/deposit-and-withdraw-from-anchors) and [Connect to Anchors section][/docs/category]. If you’re looking specifically for MoneyGram Access, see the [Integrate with MoneyGram Access tutorial](https://developers.stellar.org/docs/tutorials/moneygram-access-integration-guide).
+This documentation will instruct you on how to become an anchor. To understand how to integrate anchor services into your blockchain-based application, check out the [Build Apps section](/docs/build-an-application/example-application-tutorial/anchor-integration) and [Connect to Anchors section][/docs/category]. If you’re looking specifically for MoneyGram Access, see the [Integrate with MoneyGram Access tutorial](https://developers.stellar.org/docs/tutorials/moneygram-access-integration-guide).
## Stellar Ecosystem Proposals (SEPs) and interoperability
diff --git a/docs/building-apps/example-application-tutorial/account-creation.mdx b/docs/building-apps/example-application-tutorial/account-creation.mdx
index 35bcf58be..28f6e96a3 100644
--- a/docs/building-apps/example-application-tutorial/account-creation.mdx
+++ b/docs/building-apps/example-application-tutorial/account-creation.mdx
@@ -9,7 +9,7 @@ To start, we’ll have our user create an account. In BasicPay, the signup page
:::info
-Since we are building a [non-custodial application](../application-design-considerations/non-custodial-service), the secret key will only ever live in the browser. It will never be shared with the server or anybody else.
+Since we are building a [non-custodial application](../application-design-considerations#non-custodial-service), the secret key will only ever live in the browser. It will never be shared with the server or anybody else.
:::
From 4e7a8ef8fa9959d7686bfa5d264d68bdd3fd3824 Mon Sep 17 00:00:00 2001
From: Bri <92327786+briwylde08@users.noreply.github.com>
Date: Mon, 17 Jul 2023 17:01:04 -0600
Subject: [PATCH 03/46] fix link
---
docs/anchoring-assets/overview.mdx | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/docs/anchoring-assets/overview.mdx b/docs/anchoring-assets/overview.mdx
index a3913f72d..00442658d 100644
--- a/docs/anchoring-assets/overview.mdx
+++ b/docs/anchoring-assets/overview.mdx
@@ -13,7 +13,7 @@ Stellar has anchor services operating worldwide. View the [Anchor Directory](htt
Anchors can issue their own assets on the Stellar network, or they can honor assets that already exist. To learn about issuing assets, check out the [Issue Assets section](https://developers.stellar.org/docs/category/issue-assets).
-This documentation will instruct you on how to become an anchor. To understand how to integrate anchor services into your blockchain-based application, check out the [Build Apps section](/docs/build-an-application/example-application-tutorial/anchor-integration) and [Connect to Anchors section][/docs/category]. If you’re looking specifically for MoneyGram Access, see the [Integrate with MoneyGram Access tutorial](https://developers.stellar.org/docs/tutorials/moneygram-access-integration-guide).
+This documentation will instruct you on how to become an anchor. To understand how to integrate anchor services into your blockchain-based application, check out the [Build Apps section](../building-apps/example-application-tutorial/anchor-integration) and [Connect to Anchors section][/docs/category]. If you’re looking specifically for MoneyGram Access, see the [Integrate with MoneyGram Access tutorial](https://developers.stellar.org/docs/tutorials/moneygram-access-integration-guide).
## Stellar Ecosystem Proposals (SEPs) and interoperability
From a40a71c78194e7cd0b4906418750375b68777c51 Mon Sep 17 00:00:00 2001
From: Bri Wylde <92327786+briwylde08@users.noreply.github.com>
Date: Tue, 18 Jul 2023 09:47:10 -0600
Subject: [PATCH 04/46] testing image
---
.../example-application-tutorial/account-creation.mdx | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/docs/building-apps/example-application-tutorial/account-creation.mdx b/docs/building-apps/example-application-tutorial/account-creation.mdx
index 28f6e96a3..b1e09f013 100644
--- a/docs/building-apps/example-application-tutorial/account-creation.mdx
+++ b/docs/building-apps/example-application-tutorial/account-creation.mdx
@@ -13,7 +13,7 @@ Since we are building a [non-custodial application](../application-design-consid
:::
-[ss1]
+[](/assets/ss1-public-and-private-keys.jpg)
Next, we’ll trigger the user to submit a pincode to encrypt their secret key before it gets saved to their browser’s `localStorage` (this is handled by the SDK). The user will need to remember their pincode for future logins and to submit transactions.
From ba584381d386055a0d6d6c48a286387829ca4e90 Mon Sep 17 00:00:00 2001
From: Bri Wylde <92327786+briwylde08@users.noreply.github.com>
Date: Tue, 18 Jul 2023 09:56:45 -0600
Subject: [PATCH 05/46] testing image 2
---
.../example-application-tutorial/account-creation.mdx | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/docs/building-apps/example-application-tutorial/account-creation.mdx b/docs/building-apps/example-application-tutorial/account-creation.mdx
index b1e09f013..83353ba04 100644
--- a/docs/building-apps/example-application-tutorial/account-creation.mdx
+++ b/docs/building-apps/example-application-tutorial/account-creation.mdx
@@ -13,7 +13,7 @@ Since we are building a [non-custodial application](../application-design-consid
:::
-[](/assets/ss1-public-and-private-keys.jpg)
+
Next, we’ll trigger the user to submit a pincode to encrypt their secret key before it gets saved to their browser’s `localStorage` (this is handled by the SDK). The user will need to remember their pincode for future logins and to submit transactions.
From cf22fed444bdf5fb5d864e1cccdde9cdedb7f3a0 Mon Sep 17 00:00:00 2001
From: Bri Wylde <92327786+briwylde08@users.noreply.github.com>
Date: Tue, 18 Jul 2023 10:06:36 -0600
Subject: [PATCH 06/46] testing image 3
---
.../example-application-tutorial/account-creation.mdx | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/docs/building-apps/example-application-tutorial/account-creation.mdx b/docs/building-apps/example-application-tutorial/account-creation.mdx
index 83353ba04..cea978325 100644
--- a/docs/building-apps/example-application-tutorial/account-creation.mdx
+++ b/docs/building-apps/example-application-tutorial/account-creation.mdx
@@ -13,7 +13,7 @@ Since we are building a [non-custodial application](../application-design-consid
:::
-
+
Next, we’ll trigger the user to submit a pincode to encrypt their secret key before it gets saved to their browser’s `localStorage` (this is handled by the SDK). The user will need to remember their pincode for future logins and to submit transactions.
From 9cd9725de1cb72b944edc41357936e88fb2be9e2 Mon Sep 17 00:00:00 2001
From: Bri Wylde <92327786+briwylde08@users.noreply.github.com>
Date: Thu, 20 Jul 2023 08:32:48 -0600
Subject: [PATCH 07/46] add image
---
.../example-application-tutorial/account-creation.mdx | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/docs/building-apps/example-application-tutorial/account-creation.mdx b/docs/building-apps/example-application-tutorial/account-creation.mdx
index cea978325..07f9aadf5 100644
--- a/docs/building-apps/example-application-tutorial/account-creation.mdx
+++ b/docs/building-apps/example-application-tutorial/account-creation.mdx
@@ -13,7 +13,7 @@ Since we are building a [non-custodial application](../application-design-consid
:::
-
+
Next, we’ll trigger the user to submit a pincode to encrypt their secret key before it gets saved to their browser’s `localStorage` (this is handled by the SDK). The user will need to remember their pincode for future logins and to submit transactions.
From 7792448f20e1e7dac39f57178dfbafb2b9bb9495 Mon Sep 17 00:00:00 2001
From: Bri <92327786+briwylde08@users.noreply.github.com>
Date: Thu, 20 Jul 2023 10:09:17 -0600
Subject: [PATCH 08/46] screenshots that actually work!
---
.../account-creation.mdx | 4 ++--
.../manage-trust.mdx | 4 ++--
.../example-application-tutorial/payment.mdx | 2 +-
static/assets/add-asset.png | Bin 0 -> 95070 bytes
static/assets/display-assets.png | Bin 0 -> 26077 bytes
static/assets/funded-account.png | Bin 0 -> 61699 bytes
static/assets/public-and-private-keys.png | Bin 0 -> 36041 bytes
static/assets/send-payment.png | Bin 0 -> 195797 bytes
8 files changed, 5 insertions(+), 5 deletions(-)
create mode 100644 static/assets/add-asset.png
create mode 100644 static/assets/display-assets.png
create mode 100644 static/assets/funded-account.png
create mode 100644 static/assets/public-and-private-keys.png
create mode 100644 static/assets/send-payment.png
diff --git a/docs/building-apps/example-application-tutorial/account-creation.mdx b/docs/building-apps/example-application-tutorial/account-creation.mdx
index 07f9aadf5..a79797a89 100644
--- a/docs/building-apps/example-application-tutorial/account-creation.mdx
+++ b/docs/building-apps/example-application-tutorial/account-creation.mdx
@@ -17,8 +17,8 @@ Since we are building a [non-custodial application](../application-design-consid
Next, we’ll trigger the user to submit a pincode to encrypt their secret key before it gets saved to their browser’s `localStorage` (this is handled by the SDK). The user will need to remember their pincode for future logins and to submit transactions.
-With BasicPay, when the user clicks the “Signup” button, they will be asked to confirm their pincode. When they do, the `create_account` operation is triggered, and the user’s account is automatically funded with XLM for the minimum balance (starting with 100,000 XLM).
+With BasicPay, when the user clicks the “Signup” button, they will be asked to confirm their pincode. When they do, the `create_account` operation is triggered, and the user’s account is automatically funded with XLM for the minimum balance (starting with 10,000 XLM).
-[ss2]
+
When you’re ready to move the application to Pubnet, accounts will need to be funded with real XLM. This is something the application can cover itself by depositing XLM into the user’s account (as we did with BasicPay on Testnet), with the use of [sponsored reserves](../../encyclopedia/sponsored-reserves), or the user can cover the required balance with their own XLM.
diff --git a/docs/building-apps/example-application-tutorial/manage-trust.mdx b/docs/building-apps/example-application-tutorial/manage-trust.mdx
index 08ad3ad2e..db1c49cbb 100644
--- a/docs/building-apps/example-application-tutorial/manage-trust.mdx
+++ b/docs/building-apps/example-application-tutorial/manage-trust.mdx
@@ -13,10 +13,10 @@ Every transaction must contain a sequence number that is used to identify and ve
:::
-[ss3]
+
The `changeTrust` operation can also be used to modify or remove trustlines.
Trustlines hold the balances for all of their associated assets (except XLM, which are held at the account level), and you can display the user’s various balances in your application.
-[ss4]
+
diff --git a/docs/building-apps/example-application-tutorial/payment.mdx b/docs/building-apps/example-application-tutorial/payment.mdx
index e63b54764..e49bf9f49 100644
--- a/docs/building-apps/example-application-tutorial/payment.mdx
+++ b/docs/building-apps/example-application-tutorial/payment.mdx
@@ -17,6 +17,6 @@ All Stellar transactions require a small fee to make it to the ledger. Read more
In BasicPay, we’ve set it up so that the user always pays a static fee of 100,000 [stroops](../../fundamentals-and-concepts/stellar-data-structures/assets#amount-precision) (one stroop equals 0.0000001 XLM) per operation. Alternatively, you can add a feature to your application that allows the user to set their own fee.
-[ss5]
+
Finally, the user will click the “Send” button, which triggers a modal with the transaction preview where the user will input their pincode and click “Confirm” which signs and submits the transaction to the ledger.
diff --git a/static/assets/add-asset.png b/static/assets/add-asset.png
new file mode 100644
index 0000000000000000000000000000000000000000..1643434a9be444b186f14a94f93feac38f2e0f82
GIT binary patch
literal 95070
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