lukechilds
/
docs
mirror of https://github.com/lukechilds/docs.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

fix: docs for specifying network when transaction signing

feat/new-clarity-onboarding
Hank Stoever 4 years ago
parent
590b70bb5b
commit
a5f457de04
3 changed files with 61 additions and 20 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      src/pages/build-apps/guides/authentication.md
  2. 2
      src/pages/build-apps/guides/data-storage.md
  3. 77
      src/pages/build-apps/guides/transaction-signing.md

2
src/pages/build-apps/guides/authentication.md
View File

@ -23,7 +23,7 @@ See the Todos app tutorial for a concrete example of this functionality in pract
The authentication flow with Stacks is similar to the typical client-server flow used by centralized sign in services (for example, OAuth). However, with Stacks the authentication flow happens entirely client-side.
An app and authenticator, such as [the Stacks Wallet](https://blockstack.org/wallet), communicate during the authentication flow by passing back and forth two tokens. The requesting app sends the authenticator an `authRequest` token. Once a user approves authentication, the authenticator responds to the app with an `authResponse` token.
An app and authenticator, such as [the Stacks Wallet](https://www.hiro.so/wallet/install-web), communicate during the authentication flow by passing back and forth two tokens. The requesting app sends the authenticator an `authRequest` token. Once a user approves authentication, the authenticator responds to the app with an `authResponse` token.
These tokens are are based on [a JSON Web Token (JWT) standard](https://tools.ietf.org/html/rfc7519) with additional support for the `secp256k1` curve used by Bitcoin and many other cryptocurrencies. They are passed via URL query strings.

2
src/pages/build-apps/guides/data-storage.md
View File

@ -40,7 +40,7 @@ See the authentication guide before proceeding to integrate the following data s
Gaia serves as a key-value store in which data is saved and retrieved as files to and from Gaia hubs owned by, or managed for, users.
The default Gaia hub for users who authenticate to apps with [the Stacks Wallet](https://blockstack.org/wallet) is run by Hiro PBC at `https://gaia.blockstack.org/`. It supports files up to 25 megabytes in size.
The default Gaia hub for users who authenticate to apps with [the Stacks Wallet](https://www.hiro.so/wallet/install-web) is run by Hiro PBC at `https://gaia.blockstack.org/`. It supports files up to 25 megabytes in size.
-> We recommend breaking data instances greater than 25 MB into several files, saving them individually, and recomposing them on retrieval.

77
src/pages/build-apps/guides/transaction-signing.md
View File

@ -27,33 +27,52 @@ See the public registry tutorial for a concrete example of this functionality in
## Install dependency
~> With the recent launch of the Stacks Blockchain, the production release of `@stacks/connect` does not include a few key changes to help you build apps that integrate with the Stacks Mainnet and Testnet. If you're following this guide, you should install a beta version of `@stacks/connect` with the `launch-misc` tag on NPM, as described below. We expect this code to be officially released into the `@stacks/connect` package soon.
The following dependency must be installed:
```
npm install @stacks/connect
npm install @stacks/connect@launch-misc
```
## Initiate session
Users must authenticate to an app before the `connect` package will work to prompt them for signing and broadcasting transactions to the Stacks blockchain with an authenticator such as [the Stacks Wallet](https://blockstack.org/wallet).
Users must authenticate to an app before the `connect` package will work to prompt them for signing and broadcasting transactions to the Stacks blockchain with an authenticator such as [the Stacks Wallet](https://www.hiro.so/wallet/install-web).
See the authentication guide before proceeding to integrate the following transaction signing capabilities in cases where `userSession.isUserSignedIn()` returns `true`.
[@page-reference]
| /build-apps/guides/authentication
## Get the user's Stacks address
After your user has authenticated with their Stacks Wallet, you can get their Stacks address from their `profile`.
```ts
const profile = userSession.loadUserData().profile.stxAddress;
const mainnetAddress = stxAddresses.mainnet;
// "SP2K5SJNTB6YP3VCTCBE8G35WZBPVN6TDMDJ96QAH"
const testnetAddress = stxAddresses.testnet;
// "ST2K5SJNTB6YP3VCTCBE8G35WZBPVN6TDMFEVESR6"
```
## Prompt to transfer STX
Call the `openSTXTransfer` function provided by the `connect` package to trigger the display of a transaction signing prompt for transferring STX:
```tsx
import { openSTXTransfer } from '@stacks/connect';
import { StacksTestnet } from '@stacks/network';
const network = new StacksTestnet();
openSTXTransfer({
recipient: 'ST2EB9WEQNR9P0K28D2DC352TM75YG3K0GT7V13CV',
amount: '100',
memo: 'Reimbursement',
authOrigin,
network,
appDetails: {
name: 'My App',
icon: window.location.origin + '/my-app-logo.svg',
@ -73,6 +92,7 @@ interface STXTransferOptions {
amount: string;
memo?: string;
authOrigin?: string;
network: StacksNetwork;
appDetails: {
name: string;
icon: string;
@ -81,14 +101,15 @@ interface STXTransferOptions {
}
```
| parameter | type | required | description |
| ---------- | -------- | -------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| recipient | string | true | STX address for recipient of transfer |
| amount | string | true | Amount of microstacks (µSTX, with 1,000,000 µSTX per 1 STX) to be transferred provided as string to prevent floating point errors. |
| appDetails | object | true | Dictionary that requires `name` and `icon` for app |
| finished | function | true | Callback executed by app when transaction has been signed and broadcasted. It received an object back with `txId` and `txRaw` properties, both of which are strings. |
| memo | string | false | Optional memo for inclusion with transaction |
| authOrigin | string | false | URL of authenticator to use for prompting signature and broadcast. Defaults to `https://wallet.hiro.so` for the Stacks Wallet, which is handled by the Stacks Wallet browser extension if installed. |
| parameter | type | required | description |
| ---------- | ------------- | -------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| recipient | string | true | STX address for recipient of transfer |
| amount | string | true | Amount of microstacks (1 STX = 1,000,000 microstacks) to be transferred provided as string to prevent floating point errors. |
| appDetails | object | true | Dictionary that requires `name` and `icon` for app |
| finished | function | true | Callback executed by app when transaction has been signed and broadcasted. It received an object back with `txId` and `txRaw` properties, both of which are strings. |
| memo | string | false | Optional memo for inclusion with transaction |
| authOrigin | string | false | URL of authenticator to use for prompting signature and broadcast. Defaults to `https://wallet.hiro.so` for the Stacks Wallet, which is handled by the Stacks Wallet browser extension if installed. |
| network | StacksNetwork | false | Specify the network that this transaction should be completed on. [Read more](#network-option) |
## Prompt to deploy smart contract
@ -128,13 +149,14 @@ interface ContractDeployOptions {
}
```
| parameter | type | required | description |
| ------------ | -------- | -------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| codeBody | string | true | Clarity source code for contract |
| contractName | string | true | Name for contract |
| appDetails | object | true | Dictionary that requires `name` and `icon` for app |
| finished | function | true | Callback executed by app when transaction has been signed and broadcasted. It received an object back with `txId` and `txRaw` properties, both of which are strings. |
| authOrigin | string | false | URL of authenticator to use for prompting signature and broadcast. Defaults to `https://wallet.hiro.so` for the Stacks Wallet, which is handled by the Stacks Wallet browser extension if installed. |
| parameter | type | required | description |
| ------------ | ------------- | -------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| codeBody | string | true | Clarity source code for contract |
| contractName | string | true | Name for contract |
| appDetails | object | true | Dictionary that requires `name` and `icon` for app |
| finished | function | true | Callback executed by app when transaction has been signed and broadcasted. It received an object back with `txId` and `txRaw` properties, both of which are strings. |
| authOrigin | string | false | URL of authenticator to use for prompting signature and broadcast. Defaults to `https://wallet.hiro.so` for the Stacks Wallet, which is handled by the Stacks Wallet browser extension if installed. |
| network | StacksNetwork | false | Specify the network that this transaction should be completed on. [Read more](#network-option) |
-> Contracts will deploy to the Stacks address of the authenticated user.
@ -228,6 +250,25 @@ interface ContractCallOptions {
| appDetails | object | true | Dictionary that requires `name` and `icon` for app |
| finished | function | true | Callback executed by app when transaction has been signed and broadcasted. It received an object back with `txId` and `txRaw` properties, both of which are strings. |
| authOrigin | string | false | URL of authenticator to use for prompting signature and broadcast. Defaults to `https://wallet.hiro.so` for the Stacks Wallet, which is handled by the Stacks Wallet browser extension if installed. |
| network | StacksNetwork | false | Specify the network that this transaction should be completed on. [Read more](#network-option) |
## Specifying the network for a transaction {#network-option}
All of the methods included on this page accept a `network` option. By default, Connect uses a testnet network option. You can import a network configuration from the [`@stacks/network`](https://github.com/blockstack/stacks.js/tree/master/packages/network) package.
```ts
import { StacksTestnet, StacksMainnet } from '@stacks/network';
const testnet = new StacksTestnet();
const mainnet = new StacksMainnet();
// use this in your transaction signing methods:
openSTXTransfer({
network: mainnet,
// other relevant options
});
```
## Usage in React Apps
@ -264,4 +305,4 @@ const MyComponent = () => {
## Request testnet STX from faucet
You may find it useful to request testnet STX from [the faucet](https://testnet.blockstack.org/faucet) while developing your app with the Stacks testnet.
You may find it useful to request testnet STX from [the Stacks Explorer sandbox](https://explorer.stacks.co/sandbox?chain=testnet) while developing your app with the Stacks testnet.

Write Preview
Loading…
Cancel
Save