Skip to content

Commit d83bccc

Browse files
LittleorLittleor
committed
fix(optimize iframe and example DApp): optimize the iframe experience and fix some bug in example
1 parent ab4cb8d commit d83bccc

File tree

5 files changed

+84
-112
lines changed

5 files changed

+84
-112
lines changed

‎README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -60,8 +60,8 @@ const provider = new Provider({
6060
从 `anyweb-js-sdk` 的 `dist` 目录中进行引用 `umd` 版本.
6161

6262
```html
63-
6463
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@idealight-labs/anyweb-js-sdk@latest/dist/anyweb-js-sdk.umd.min.js"></script>
64+
6565
<script type="text/javascript">
6666
const provider = new window.AnyWeb({
6767
logger: console,

‎example/basic-dapp/index.html‎

Lines changed: 6 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
"width=device-width, initial-scale=1">
1010
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
1111
<link rel="stylesheet" href=
12-
"https://unpkg.com/@picocss/pico@latest/css/pico.min.css">
12+
"https://cdn.jsdelivr.net/npm/@picocss/pico@latest/css/pico.min.css">
1313
<!-- Place favicon.ico in the root directory -->
1414
</head>
1515
<body>
@@ -123,25 +123,13 @@
123123
Result: <span id="deploy_contract_result">N/A</span>
124124
</footer>
125125
</article>
126-
<article>
127-
<header>
128-
Add Network
129-
</header>
130-
<button id="add_network" disabled="true">Add
131-
Network
132-
</button>
133-
</article>
134-
<article>
135-
<header>
136-
Switch Network
137-
</header>
138-
<button id="switch_network" disabled="true">Switch
139-
Network
140-
</button>
141-
</article>
142126
</div>
143127

144-
<script src="../../dist/anyweb-js-sdk.umd.min.js"></script>
128+
<script>
129+
const now = new Date()
130+
document.write(`<script type='text/javascript' src='https://cdn.jsdelivr.net/npm/@idealight-labs/anyweb-js-sdk@latest/dist/anyweb-js-sdk.umd.min.js?v=${now
131+
.getFullYear()}${now.getMonth()}${now.getDate()}'><\/script>`);
132+
</script>
145133

146134
<script type="module">
147135
import "./index.js";

‎example/basic-dapp/index.js‎

Lines changed: 17 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -460,7 +460,7 @@ const confluxFaucetContract = new Conflux().Contract({
460460

461461
// 初始化钱包
462462
window.conflux = new window.AnyWeb.Provider({
463-
appId: 'ccb32218-56d4-4765-ba97-867adad7a63c',
463+
appId: '693b6401-135a-4dc3-846b-1c05ad2572f6',
464464
}) //
465465
const provider = window.conflux
466466

@@ -485,20 +485,20 @@ async function walletInitialized() {
485485
const transferFromAccountInput = getElement('from-account')
486486
const transferToAccountInput = getElement('to-account')
487487

488-
const addNetworkButton = getElement('add_network')
489-
const switchNetworkButton = getElement('switch_network')
490488
const deployContract = getElement('deploy_contract')
491489

492490
function authed(address) {
491+
if (!address || address === '') {
492+
return unAuthed()
493+
}
493494
getElement('address').innerHTML = address
494495
console.log('authed address: ', address)
495496
sendNativeTokenButton.disabled = false
496497
approveButton.disabled = false
497498
transferFromButton.disabled = false
498-
addNetworkButton.disabled = false
499-
switchNetworkButton.disabled = false
500499
deployContract.disabled = false
501500
getCFXButton.disabled = false
501+
connectButton.disabled = true
502502
}
503503

504504
function unAuthed() {
@@ -508,14 +508,15 @@ async function walletInitialized() {
508508
approveButton.disabled = true
509509
transferFromButton.disabled = true
510510
getCFXButton.disabled = true
511-
addNetworkButton.disabled = true
512-
switchNetworkButton.disabled = true
513511
deployContract.disabled = true
512+
connectButton.disabled = false
514513
}
515514

516515
provider.on('accountsChanged', (accounts) => {
517516
console.log('accountsChanged, accounts = ', accounts)
518-
if (!accounts.length) return unAuthed()
517+
if (!accounts || !accounts.length || accounts.length === 0) {
518+
return unAuthed()
519+
}
519520
authed(accounts[0])
520521
})
521522

@@ -545,7 +546,11 @@ async function walletInitialized() {
545546
getElement('chainId').innerHTML = chainId
546547
getElement('networkId').innerHTML = networkId
547548

548-
if (!alreadyAuthedAddresses.length) {
549+
if (
550+
!alreadyAuthedAddresses ||
551+
!alreadyAuthedAddresses.length ||
552+
alreadyAuthedAddresses.length === 0
553+
) {
549554
unAuthed()
550555
} else {
551556
authed(alreadyAuthedAddresses[0])
@@ -557,7 +562,7 @@ async function walletInitialized() {
557562
method: 'cfx_requestAccounts',
558563
})
559564
.then(authed)
560-
.catch((error) => console.error('error', error.message || error))
565+
.catch(console.error)
561566
}
562567

563568
// send native token to the connected address
@@ -592,6 +597,7 @@ async function walletInitialized() {
592597
provider
593598
.request({ method: 'cfx_sendTransaction', params: [tx] })
594599
.then((result) => {
600+
getElement('get_cfx_result').innerHTML = result
595601
console.log('result', result)
596602
})
597603
} catch (err) {
@@ -647,47 +653,6 @@ async function walletInitialized() {
647653
}
648654
}
649655

650-
// request to add network
651-
addNetworkButton.onclick = () => {
652-
provider
653-
.request({
654-
method: 'wallet_addConfluxChain',
655-
params: [
656-
{
657-
chainId: '0x406',
658-
chainName: 'EVM Conflux',
659-
nativeCurrency: {
660-
name: 'Conflux',
661-
symbol: 'CFX',
662-
decimals: 18,
663-
},
664-
rpcUrls: ['http://47.104.89.179:12537'],
665-
blockExplorerUrls: ['https://confluxscan.io'],
666-
},
667-
],
668-
})
669-
.then(console.log)
670-
.catch(console.log)
671-
}
672-
673-
// request to switch network
674-
switchNetworkButton.onclick = () => {
675-
provider
676-
.request({
677-
method: 'wallet_switchConfluxChain',
678-
params: [{ chainId: '0x1' }],
679-
})
680-
.then(() => {
681-
provider
682-
.request({ method: 'cfx_chainId' })
683-
.then((idResult) => (getElement('chainId').innerHTML = idResult))
684-
provider
685-
.request({ method: 'cfx_netVersion' })
686-
.then((netResult) => (getElement('networkId').innerHTML = netResult))
687-
})
688-
.catch(console.log)
689-
}
690-
691656
deployContract.onclick = async () => {
692657
try {
693658
const [connectedAddress] = await provider.request({
@@ -701,7 +666,7 @@ async function walletInitialized() {
701666
provider
702667
.request({ method: 'cfx_sendTransaction', params: [tx] })
703668
.then((result) => {
704-
getElement('get_cfx_result').innerHTML = result
669+
getElement('deploy_contract_result').innerHTML = result
705670
console.log('result', result)
706671
})
707672
} catch (err) {

‎src/error/provider.ts‎

Lines changed: 0 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -2,19 +2,3 @@
22
* @author Littleor <me@littleor.cn>
33
* @since 2022/2/4
44
*/
5-
import { IProviderRpcError } from '../interface/provider'
6-
import { ProviderRpcErrorCode } from '../../lib/interface/rpc'
7-
8-
class ProviderRpcError extends Error implements IProviderRpcError {
9-
code: number
10-
message: string
11-
data?: unknown
12-
13-
constructor(message: string, code: ProviderRpcErrorCode, data?: unknown) {
14-
super(message)
15-
this.code = code
16-
this.message = message
17-
this.data = data || null
18-
this.name = 'ProviderRpcError'
19-
}
20-
}

‎src/utils/common.ts‎

Lines changed: 60 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -34,52 +34,81 @@ export interface IIframeOptions {
3434
waitResult?: boolean
3535
}
3636

37+
const setBodyNonScrollable = () => {
38+
document.body.style.overflow = 'hidden'
39+
document.addEventListener(
40+
'touchmove',
41+
(e) => {
42+
e.stopPropagation()
43+
},
44+
{ passive: false }
45+
)
46+
}
47+
48+
const setBodyScrollable = () => {
49+
document.body.style.overflow = ''
50+
document.removeEventListener('touchmove', (e) => {
51+
e.stopPropagation()
52+
})
53+
}
54+
3755
export const getIframe = async (
3856
url: string,
3957
onClose: () => void
4058
): Promise<HTMLDivElement> => {
59+
const mask = document.createElement('div')
4160
const div = document.createElement('div')
4261
const iframe = document.createElement('iframe')
4362
const button = document.createElement('div')
4463
const style = document.createElement('style')
45-
style.innerHTML = ` .iframe-contain {
64+
style.innerHTML = `
65+
.iframe-mask {
66+
position: fixed;
67+
top: 0;
68+
left: 0;
69+
width: 100%;
70+
height: 100%;
71+
background-color: rgba(247, 247, 247, 0.8);
72+
z-index: 99999;
73+
}
74+
.iframe-contain {
4675
position: fixed;
4776
background: #FFFFFF;
4877
border: 1px solid #EAEAEA;
4978
z-index: 999999999;
5079
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
51-
border-radius: 15px;
52-
width: 414px;
53-
height: 736px;
80+
border-radius: ${isFullScreen() ? '0' : '15px'};
81+
width: ${isFullScreen() ? '100%' : '414px'};
82+
height: ${isFullScreen() ? '100%' : '736px'};
5483
transform: translate(-50%, -50%);
5584
top: 50%;
5685
left: 50%;
5786
}
5887
5988
.iframe {
60-
border-radius: 15px;
89+
border-radius: ${isFullScreen() ? '0' : '15px'};
6190
height: 100%;
6291
width: 100%;
63-
z-index: 1;
92+
z-index: 999999;
93+
overflow-x: hidden;
6494
}
6595
6696
.iframe-contain-button {
6797
border-radius: 9px;
68-
background: rgba(130, 138, 147, 0.5);
6998
width: 18px;
7099
height: 18px;
71-
z-index: 2;
100+
z-index: 9999999;
72101
position: absolute;
73-
top: ${isFullScreen() ? '0' : '-9px'};
74-
right: ${isFullScreen() ? '0' : '-9px'};
102+
top: 36px;
103+
right: 36px;
75104
cursor: pointer;
76105
}
77106
78107
.iframe-contain-button:before {
79108
position: absolute;
80109
content: '';
81110
width: 2px;
82-
height: 12px;
111+
height: 24px;
83112
background: black;
84113
top: 50%;
85114
left: 50%;
@@ -90,31 +119,35 @@ export const getIframe = async (
90119
content: '';
91120
position: absolute;
92121
width: 2px;
93-
height: 12px;
122+
height: 24px;
94123
background: black;
95124
transform: translate(-50%, -50%) rotate(-45deg);
96125
top: 50%;
97126
left: 50%;
98-
}
99-
`
127+
}`
128+
mask.className = 'iframe-mask'
100129
div.className = 'iframe-contain'
101130
button.className = 'iframe-contain-button'
102131
iframe.className = 'iframe'
103-
div.id = 'anyweb-iframe-contain'
104-
div.style.width = isFullScreen() ? '100%' : '414px'
105-
div.style.height = isFullScreen() ? '100%' : '736px'
132+
133+
mask.id = 'anyweb-iframe-mask'
134+
106135
iframe.setAttribute('src', url)
107136
iframe.setAttribute('frameborder', '0')
108-
iframe.setAttribute('scrolling', 'none')
137+
iframe.setAttribute('scrolling', 'no')
138+
109139
div.insertBefore(iframe, div.firstElementChild)
110-
div.insertBefore(button, div.firstElementChild)
140+
!isFullScreen() && mask.insertBefore(button, mask.firstElementChild)
141+
mask.insertBefore(div, mask.firstElementChild)
111142
button.onclick = () => {
143+
setBodyScrollable()
112144
onClose()
113-
div.remove()
145+
mask.remove()
114146
}
115147
document.body.appendChild(style)
116-
document.body.insertBefore(div, document.body.firstElementChild)
117-
return div
148+
setBodyNonScrollable()
149+
document.body.insertBefore(mask, document.body.firstElementChild)
150+
return mask
118151
}
119152
export const callIframe = async (
120153
path: string,
@@ -167,10 +200,12 @@ export const callIframe = async (
167200
if (data && data !== 'false' && data !== false) {
168201
timer && clearTimeout(timer)
169202
iframeContain.remove()
203+
setBodyScrollable()
170204
resolve(JSON.parse(data))
171205
} else {
172206
if (i * delay > 10 * 60 * 1000) {
173207
iframeContain.remove()
208+
setBodyScrollable()
174209
reject(new Error('Timeout'))
175210
}
176211
next(i++)
@@ -219,9 +254,9 @@ export const setCache = (data: IAuthResult, provider: Provider) => {
219254
expires: 60 * 1000 + new Date().getTime(),
220255
})
221256
)
222-
provider.address = data.address
223-
provider.networkId = data.networkId
224-
provider.chainId = data.chainId
257+
provider.address = data.address || provider.address
258+
provider.networkId = data.networkId || provider.networkId
259+
provider.chainId = data.chainId || provider.chainId
225260
provider.url = data.url
226261
return data
227262
}

0 commit comments

Comments
 (0)