Skip to content

Commit c6f48a4

Browse files
SPCFXDASPCFXDA
committed
fix(playground): wrap top-level await in async IIFE; add SandpackLoadingOverlay
- espace-block-number, read-balance, erc20-info, swap-quote: move all await calls inside ;(async () => { ... })().catch(console.error) — vanilla-ts template output format does not support top-level await - Playground.tsx: import SandpackLoadingOverlay and render it inside the position:relative content wrapper so users see an animated spinner while the sandbox bundle is being fetched and compiled
1 parent 8995e9c commit c6f48a4

5 files changed

Lines changed: 82 additions & 71 deletions

File tree

‎docs-site/components/Playground.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import {
55
SandpackCodeEditor,
66
SandpackConsole,
77
SandpackPreview,
8+
SandpackLoadingOverlay,
89
useSandpack,
910
useSandpackNavigation,
1011
} from '@codesandbox/sandpack-react'
@@ -172,8 +173,10 @@ export function Playground({
172173
display: 'flex',
173174
flexDirection: 'column',
174175
background: T.bg,
176+
position: 'relative',
175177
}}
176178
>
179+
<SandpackLoadingOverlay />
177180
<SandpackCodeEditor
178181
showLineNumbers
179182
showInlineErrors

‎docs-site/content/examples/erc20-info.mdx‎

Lines changed: 26 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ Change `TOKEN` to any ERC-20 address on testnet. The default is **WCFX** (Wrappe
2121
// WCFX (Wrapped CFX) — always-live ERC-20 on Conflux eSpace testnet
2222
const TOKEN = '0x2ed3dddae5b2f321af0806181fbfa6d049be47d8'
2323
const HOLDER = '0x85d80245Dc02f5a89589e1f19C5c718E405B56Aa'
24+
const SPENDER = '0x33e5E5B262e5d8eBC443E1c6c9F14215b020554d' // AutomationManager testnet
2425
2526
const client = new EspaceClient({
2627
chainId: EVM_TESTNET.id,
@@ -29,30 +30,31 @@ const client = new EspaceClient({
2930
3031
console.log('-- Token: ' + TOKEN + ' --')
3132
32-
// Batch-read all standard ERC-20 metadata in one round-trip
33-
const [name, symbol, decimals, totalSupply] = await Promise.all([
34-
client.publicClient.readContract({ address: TOKEN, abi: ERC20_ABI, functionName: 'name' }),
35-
client.publicClient.readContract({ address: TOKEN, abi: ERC20_ABI, functionName: 'symbol' }),
36-
client.publicClient.readContract({ address: TOKEN, abi: ERC20_ABI, functionName: 'decimals' }),
37-
client.publicClient.readContract({ address: TOKEN, abi: ERC20_ABI, functionName: 'totalSupply' }),
38-
])
39-
40-
console.log('-- Metadata --')
41-
console.log('Name : ' + name)
42-
console.log('Symbol : ' + symbol)
43-
console.log('Decimals : ' + decimals)
44-
console.log('Total Supply : ' + formatUnits(totalSupply, decimals) + ' ' + symbol)
45-
46-
// Read holder balance and allowance
47-
const SPENDER = '0x33e5E5B262e5d8eBC443E1c6c9F14215b020554d' // AutomationManager testnet
48-
const [balance, allowance] = await Promise.all([
49-
client.publicClient.readContract({ address: TOKEN, abi: ERC20_ABI, functionName: 'balanceOf', args: [HOLDER] }),
50-
client.publicClient.readContract({ address: TOKEN, abi: ERC20_ABI, functionName: 'allowance', args: [HOLDER, SPENDER] }),
51-
])
52-
53-
console.log('-- Holder ' + HOLDER.slice(0,10) + '... --')
54-
console.log('Balance : ' + formatUnits(balance, decimals) + ' ' + symbol)
55-
console.log('Allowance : ' + formatUnits(allowance, decimals) + ' ' + symbol + ' (for AutomationManager)')
33+
;(async () => {
34+
// Batch-read all standard ERC-20 metadata in one round-trip
35+
const [name, symbol, decimals, totalSupply] = await Promise.all([
36+
client.publicClient.readContract({ address: TOKEN, abi: ERC20_ABI, functionName: 'name' }),
37+
client.publicClient.readContract({ address: TOKEN, abi: ERC20_ABI, functionName: 'symbol' }),
38+
client.publicClient.readContract({ address: TOKEN, abi: ERC20_ABI, functionName: 'decimals' }),
39+
client.publicClient.readContract({ address: TOKEN, abi: ERC20_ABI, functionName: 'totalSupply' }),
40+
])
41+
42+
console.log('-- Metadata --')
43+
console.log('Name : ' + name)
44+
console.log('Symbol : ' + symbol)
45+
console.log('Decimals : ' + decimals)
46+
console.log('Total Supply : ' + formatUnits(totalSupply, decimals) + ' ' + symbol)
47+
48+
// Read holder balance and allowance
49+
const [balance, allowance] = await Promise.all([
50+
client.publicClient.readContract({ address: TOKEN, abi: ERC20_ABI, functionName: 'balanceOf', args: [HOLDER] }),
51+
client.publicClient.readContract({ address: TOKEN, abi: ERC20_ABI, functionName: 'allowance', args: [HOLDER, SPENDER] }),
52+
])
53+
54+
console.log('-- Holder ' + HOLDER.slice(0,10) + '... --')
55+
console.log('Balance : ' + formatUnits(balance, decimals) + ' ' + symbol)
56+
console.log('Allowance : ' + formatUnits(allowance, decimals) + ' ' + symbol + ' (for AutomationManager)')
57+
})().catch(console.error)
5658
`
5759
}}
5860
showConsole

‎docs-site/content/examples/espace-block-number.mdx‎

Lines changed: 21 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -23,27 +23,29 @@ console.log('Explorer : ' + EVM_TESTNET.blockExplorers?.default.url)
2323
2424
const client = new EspaceClient({ chainId, rpcUrl })
2525
26-
// Run all read queries in parallel
27-
const [connected, blockNumber, onChainId, gasPrice] = await Promise.all([
28-
client.isConnected(),
29-
client.getBlockNumber(),
30-
client.getChainId(),
31-
client.getGasPrice(),
32-
])
26+
;(async () => {
27+
// Run all read queries in parallel
28+
const [connected, blockNumber, onChainId, gasPrice] = await Promise.all([
29+
client.isConnected(),
30+
client.getBlockNumber(),
31+
client.getChainId(),
32+
client.getGasPrice(),
33+
])
3334
34-
console.log('-- Live Chain Data --')
35-
console.log('Connected : ' + connected)
36-
console.log('Block # : ' + blockNumber.toString())
37-
console.log('Chain ID : ' + onChainId)
38-
console.log('Gas Price : ' + formatUnits(gasPrice, 9) + ' Gwei')
35+
console.log('-- Live Chain Data --')
36+
console.log('Connected : ' + connected)
37+
console.log('Block # : ' + blockNumber.toString())
38+
console.log('Chain ID : ' + onChainId)
39+
console.log('Gas Price : ' + formatUnits(gasPrice, 9) + ' Gwei')
3940
40-
// client.publicClient is the raw viem PublicClient
41-
const block = await client.publicClient.getBlock({ blockTag: 'latest' })
42-
console.log('-- Latest Block --')
43-
console.log('Hash : ' + (block.hash?.slice(0, 20) ?? 'n/a') + '...')
44-
console.log('Txns : ' + block.transactions.length)
45-
console.log('Gas Used : ' + block.gasUsed.toString())
46-
console.log('Timestamp : ' + new Date(Number(block.timestamp) * 1000).toUTCString())
41+
// client.publicClient is the raw viem PublicClient
42+
const block = await client.publicClient.getBlock({ blockTag: 'latest' })
43+
console.log('-- Latest Block --')
44+
console.log('Hash : ' + (block.hash?.slice(0, 20) ?? 'n/a') + '...')
45+
console.log('Txns : ' + block.transactions.length)
46+
console.log('Gas Used : ' + block.gasUsed.toString())
47+
console.log('Timestamp : ' + new Date(Number(block.timestamp) * 1000).toUTCString())
48+
})().catch(console.error)
4749
`
4850
}}
4951
showConsole

‎docs-site/content/examples/read-balance.mdx‎

Lines changed: 20 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -24,35 +24,37 @@ const client = new EspaceClient({
2424
})
2525
2626
// ── Native CFX balances ──────────────────────────────────────────────────────
27-
// getBalance() calls eth_getBalance and returns a formatted CFX string
2827
const ADDRS = [
2928
'0x85d80245Dc02f5a89589e1f19C5c718E405B56Aa',
3029
'0x0000000000000000000000000000000000000000',
3130
]
3231
33-
console.log('-- CFX Balances --')
34-
for (const addr of ADDRS) {
35-
const cfx = await client.getBalance(addr)
36-
console.log(addr.slice(0, 12) + '... ' + Number(cfx).toFixed(6) + ' CFX')
37-
}
38-
3932
// ── ERC-20 token balance ─────────────────────────────────────────────────────
4033
// WCFX (Wrapped CFX) on Conflux eSpace testnet
4134
const WCFX = '0x2ed3dddae5b2f321af0806181fbfa6d049be47d8'
4235
const HOLDER = '0x85d80245Dc02f5a89589e1f19C5c718E405B56Aa'
4336
44-
// Batch-read token metadata and holder balance in one round-trip
45-
const [name, symbol, decimals, raw] = await Promise.all([
46-
client.publicClient.readContract({ address: WCFX, abi: ERC20_ABI, functionName: 'name' }),
47-
client.publicClient.readContract({ address: WCFX, abi: ERC20_ABI, functionName: 'symbol' }),
48-
client.publicClient.readContract({ address: WCFX, abi: ERC20_ABI, functionName: 'decimals' }),
49-
client.publicClient.readContract({ address: WCFX, abi: ERC20_ABI, functionName: 'balanceOf', args: [HOLDER] }),
50-
])
37+
;(async () => {
38+
// getBalance() calls eth_getBalance and returns a formatted CFX string
39+
console.log('-- CFX Balances --')
40+
for (const addr of ADDRS) {
41+
const cfx = await client.getBalance(addr)
42+
console.log(addr.slice(0, 12) + '... ' + Number(cfx).toFixed(6) + ' CFX')
43+
}
44+
45+
// Batch-read token metadata and holder balance in one round-trip
46+
const [name, symbol, decimals, raw] = await Promise.all([
47+
client.publicClient.readContract({ address: WCFX, abi: ERC20_ABI, functionName: 'name' }),
48+
client.publicClient.readContract({ address: WCFX, abi: ERC20_ABI, functionName: 'symbol' }),
49+
client.publicClient.readContract({ address: WCFX, abi: ERC20_ABI, functionName: 'decimals' }),
50+
client.publicClient.readContract({ address: WCFX, abi: ERC20_ABI, functionName: 'balanceOf', args: [HOLDER] }),
51+
])
5152
52-
console.log('-- Token Balance --')
53-
console.log('Token : ' + name + ' (' + symbol + ')')
54-
console.log('Decimals: ' + decimals)
55-
console.log('Balance : ' + formatUnits(raw, decimals) + ' ' + symbol)
53+
console.log('-- Token Balance --')
54+
console.log('Token : ' + name + ' (' + symbol + ')')
55+
console.log('Decimals: ' + decimals)
56+
console.log('Balance : ' + formatUnits(raw, decimals) + ' ' + symbol)
57+
})().catch(console.error)
5658
`
5759

5860
}}

‎docs-site/content/examples/swap-quote.mdx‎

Lines changed: 12 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -43,17 +43,19 @@ console.log('ABI entries: ' + automationManagerAbi.length)
4343
const WCFX = '0x2ed3dddae5b2f321af0806181fbfa6d049be47d8'
4444
const client = new EspaceClient({ chainId: EVM_TESTNET.id, rpcUrl: EVM_TESTNET.rpcUrls.default.http[0] })
4545
46-
const [name, symbol, decimals, supply] = await Promise.all([
47-
client.publicClient.readContract({ address: WCFX, abi: erc20Abi, functionName: 'name' }),
48-
client.publicClient.readContract({ address: WCFX, abi: erc20Abi, functionName: 'symbol' }),
49-
client.publicClient.readContract({ address: WCFX, abi: erc20Abi, functionName: 'decimals' }),
50-
client.publicClient.readContract({ address: WCFX, abi: erc20Abi, functionName: 'totalSupply' }),
51-
])
46+
;(async () => {
47+
const [name, symbol, decimals, supply] = await Promise.all([
48+
client.publicClient.readContract({ address: WCFX, abi: erc20Abi, functionName: 'name' }),
49+
client.publicClient.readContract({ address: WCFX, abi: erc20Abi, functionName: 'symbol' }),
50+
client.publicClient.readContract({ address: WCFX, abi: erc20Abi, functionName: 'decimals' }),
51+
client.publicClient.readContract({ address: WCFX, abi: erc20Abi, functionName: 'totalSupply' }),
52+
])
5253
53-
console.log('-- WCFX live data --')
54-
console.log('Name : ' + name)
55-
console.log('Symbol : ' + symbol)
56-
console.log('Supply : ' + formatUnits(supply, decimals) + ' ' + symbol)
54+
console.log('-- WCFX live data --')
55+
console.log('Name : ' + name)
56+
console.log('Symbol : ' + symbol)
57+
console.log('Supply : ' + formatUnits(supply, decimals) + ' ' + symbol)
58+
})().catch(console.error)
5759
`
5860
}}
5961
/>

0 commit comments

Comments
 (0)