Skip to content

Commit 037fe2d

Browse files
Adamj1232Adamj1232
authored
Add docs for Transaction Preview (#1400)
* Update mewwallet path (#1387) * Update mew-wallet name * Feature - Add docs for Transaction Preview (#1395) * Add docs for TransactionPreview * Rename file with hyphen * Add linking to api key info
1 parent 9765aad commit 037fe2d

File tree

4 files changed

+265
-4
lines changed

4 files changed

+265
-4
lines changed

‎docs/src/lib/assets/transaction-preview.gif‎

289 KB
Loading

‎docs/src/lib/assets/transaction-preview.png‎

87.6 KB
Loading

‎docs/src/routes/docs/[...1]overview/[...1]introduction.md‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -53,10 +53,10 @@ Using a Blocknative API key with web3-onboard on the free plan will allow you to
5353
This step is not required to use web3-onboard. You can skip to the **Quickstart** step below if you want to use web3-onboard without API services or if you already have a Blocknative account & API key.
5454

5555
**Setup your Account**
56-
Go to the Account Dashboard at https://explorer.blocknative.com/account and setup an account with an email address. You will receive an email to confirm your account.
56+
Go to the Account Dashboard at [https://explorer.blocknative.com/account](https://explorer.blocknative.com/account) and setup an account with an email address. You will receive an email to confirm your account.
5757

5858
**Create your API Key**
59-
On the Account Dashboard at https://explorer.blocknative.com/account, create an API key with your choice of name or use/rename the Default Key. Consider using different API keys for development, staging, and production releases.
59+
On the Account Dashboard at [https://explorer.blocknative.com/account](https://explorer.blocknative.com/account), create an API key with your choice of name or use/rename the Default Key. Consider using different API keys for development, staging, and production releases.
6060

6161
## Quickstart
6262

@@ -176,9 +176,9 @@ Test out the current functionality of web3-onboard in a small browser demo:
176176

177177
## React Demo
178178

179-
Checkout our live demo using React at https://reactdemo.blocknative.com/
179+
Checkout our live demo using React at [https://reactdemo.blocknative.com/](https://reactdemo.blocknative.com/)
180180

181-
The demo is open source so you can see a sample implementation of web3-onboard: https://github.com/blocknative/react-demo
181+
The demo is open source so you can see a sample implementation of web3-onboard: [https://github.com/blocknative/react-demo](https://github.com/blocknative/react-demo)
182182

183183
## More Examples
184184

‎docs/src/routes/docs/[...3]modules/transaction-preview.md‎

Lines changed: 261 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,261 @@
1+
2+
<script>
3+
import previewGif from '$lib/assets/transaction-preview.gif'
4+
import previewImg from '$lib/assets/transaction-preview.png'
5+
</script>
6+
7+
# Transaction Preview
8+
9+
A modular UI for previewing a single or set of unsigned Ethereum transactions.
10+
11+
<img src="{previewImg}" alt="Transaction Preview Flow image"/>
12+
13+
Full Simulation Platform API documentation can be found [here](https://docs.blocknative.com/transaction-preview-api)
14+
15+
### Install
16+
17+
<Tabs values={['yarn', 'npm']}>
18+
<TabPanel value="yarn">
19+
20+
```sh copy
21+
yarn add @web3-onboard/core @web3-onboard/injected @web3-onboard/transaction-preview
22+
```
23+
24+
</TabPanel>
25+
<TabPanel value="npm">
26+
27+
```sh copy
28+
npm i @web3-onboard/core @web3-onboard/injected @web3-onboard/transaction-preview
29+
```
30+
31+
</TabPanel>
32+
</Tabs>
33+
34+
### Usage with Web3-Onboard Core package
35+
36+
<img src="{previewGif}" alt="Transaction Preview Flow gif"/>
37+
38+
To use the Transaction Preview package with web3-onboard all a developer needs to do is initialize web3-onboard with their [Blocknative API key](https://onboard.blocknative.com/docs/overview/introduction#optional-use-an-api-key-to-fetch-real-time-transaction-data-balances-gas) and pass in the module as shown below.
39+
40+
```typescript
41+
import Onboard from '@web3-onboard/core'
42+
import injectedModule from '@web3-onboard/injected'
43+
import transactionPreviewModule from '@web3-onboard/transaction-preview'
44+
45+
const injected = injectedModule()
46+
const transactionPreview = transactionPreviewModule(
47+
// Optional initialization object
48+
// {
49+
// Optional: Require balance change approval prior to sending transaction to wallet
50+
// Defaults to true
51+
// requireTransactionApproval?: false
52+
53+
// i18n?: i18nOptions - Internationalization options
54+
// }
55+
)
56+
57+
const onboard = Onboard({
58+
transactionPreview,
59+
apiKey: 'xxx387fb-bxx1-4xxc-a0x3-9d37e426xxxx'
60+
wallets: [injected],
61+
chains: [
62+
{
63+
id: '0x1',
64+
token: 'ETH',
65+
label: 'Ethereum',
66+
rpcUrl: 'https://mainnet.infura.io/v3/17c1e1500e384acfb6a72c5d2e67742e'
67+
}
68+
]
69+
// ... other Onboard options
70+
})
71+
72+
// Transaction code here using Ether.js or Web3.js or custom
73+
// The transaction will automatically be picked up and simulated with a UI displaying in the upper right corner
74+
```
75+
76+
### Options & Types
77+
78+
```typescript
79+
export type TransactionPreviewModule = (options: TransactionPreviewOptions) => TransactionPreviewAPI
80+
81+
export type TransactionPreviewAPI = {
82+
/**
83+
* Pass this method a standard EIP1193 provider
84+
* (such as an injected wallet from window.ethereum)
85+
* and it will be patched to allow for transaction previewing
86+
*/
87+
patchProvider: (provider: PatchedEIP1193Provider) => PatchedEIP1193Provider
88+
/**
89+
* Pass this method a standard EIP1193 provider
90+
* (such as an injected wallet from window.ethereum)
91+
* and it will be patched to allow for transaction previewing
92+
*/
93+
init: (initializationOptions: TransactionPreviewInitOptions) => void
94+
}
95+
96+
export type PatchedEIP1193Provider = EIP1193Provider & { simPatched: boolean }
97+
98+
export interface ProviderReq {
99+
method: string
100+
params?: Array<unknown>
101+
}
102+
103+
export type RequestOptions = Pick<TransactionPreviewInitOptions, 'apiKey'>
104+
105+
export type TransactionPreviewInitOptions = {
106+
/**
107+
* Blocknative API key (https://explorer.blocknative.com/account)
108+
*/
109+
apiKey: string
110+
/**
111+
* Your Blocknative SDK instance
112+
* */
113+
sdk: SDK
114+
/**
115+
* Optional dom query string to mount UI to
116+
* */
117+
containerElement: string
118+
}
119+
120+
export type TransactionPreviewOptions = {
121+
/**
122+
* Optional requirement for user to accept transaction balance changes
123+
* prior to sending the transaction to the wallet
124+
* Defaults to true
125+
* */
126+
requireTransactionApproval?: boolean
127+
/**
128+
* An optional internationalization object that defines the display
129+
* text for different locales. Can also be used to override the default text.
130+
* To override the default text, pass in a object for the en locale
131+
*/
132+
i18n?: i18nOptions
133+
}
134+
135+
export type Locale = string
136+
export type i18nOptions = Record<Locale, i18n>
137+
export type i18n = typeof en
138+
139+
export type DeviceNotBrowser = {
140+
type: null
141+
os: null
142+
browser: null
143+
}
144+
145+
export type TransactionForSim = SimulationTransaction & {
146+
data?: string
147+
}
148+
149+
export interface SimulationTransaction {
150+
from: string
151+
to: string
152+
value: number
153+
gas: number
154+
input: string
155+
// Either Type 1 Gas (gasPrice) or Type 2 Gas (maxPriorityFeePerGas & maxFeePerGas)
156+
// must be included in the payload
157+
gasPrice?: number
158+
maxPriorityFeePerGas?: number
159+
maxFeePerGas?: number
160+
}
161+
162+
export type MultiSimOutput = {
163+
id?: string
164+
contractCall: ContractCall[]
165+
error?: any
166+
gasUsed: number[]
167+
internalTransactions: InternalTransaction[][]
168+
netBalanceChanges: NetBalanceChange[][]
169+
network: Network
170+
simDetails: SimDetails
171+
serverVersion: string
172+
system: System
173+
status: Status
174+
simulatedBlockNumber: number
175+
transactions: InternalTransaction[]
176+
}
177+
178+
export interface ContractCall {
179+
contractType?: string
180+
contractAddress?: string
181+
methodName: string
182+
params: Record<string, unknown>
183+
contractName?: string
184+
contractDecimals?: number
185+
decimalValue?: string
186+
}
187+
188+
export interface InternalTransaction {
189+
type: string
190+
from: string
191+
to: string
192+
input: string
193+
gas: number
194+
gasUsed: number
195+
value: string
196+
contractCall: ContractCall
197+
}
198+
199+
export interface NetBalanceChange {
200+
address: string
201+
balanceChanges: BalanceChange[]
202+
}
203+
204+
export interface BalanceChange {
205+
delta: string
206+
asset: Asset
207+
breakdown: BreakDown[]
208+
}
209+
210+
export interface Asset {
211+
type: string
212+
symbol: string
213+
contractAddress: string
214+
}
215+
216+
export interface BreakDown {
217+
counterparty: string
218+
amount: string
219+
}
220+
221+
export interface InternalTransaction {
222+
type: string
223+
from: string
224+
to: string
225+
input: string
226+
gas: number
227+
gasUsed: number
228+
value: string
229+
contractCall: ContractCall
230+
}
231+
232+
export type System = 'bitcoin' | 'ethereum'
233+
export type Network =
234+
| 'main'
235+
| 'testnet'
236+
| 'ropsten'
237+
| 'rinkeby'
238+
| 'goerli'
239+
| 'kovan'
240+
| 'xdai'
241+
| 'bsc-main'
242+
| 'matic-main'
243+
| 'fantom-main'
244+
| 'matic-mumbai'
245+
| 'local'
246+
247+
export type Status =
248+
| 'pending'
249+
| 'confirmed'
250+
| 'speedup'
251+
| 'cancel'
252+
| 'failed'
253+
| 'dropped'
254+
| 'simulated'
255+
256+
export interface SimDetails {
257+
blockNumber: number
258+
e2eMs: number
259+
performanceProfile: any
260+
}
261+
```

0 commit comments

Comments
 (0)