优化钱包连接的 UI 逻辑

This commit is contained in:
yll 2022-05-05 11:12:02 +07:00
parent ee8f78e169
commit e3bacc676a
7 changed files with 74 additions and 70 deletions

View File

@ -14,7 +14,9 @@ return [
'Single Farms' => 'Single Farms', 'Single Farms' => 'Single Farms',
'More' => 'More', 'More' => 'More',
'Home' => 'Home', 'Home' => 'Home',
'Connect' => 'Connect',
'Retry' => 'Retry', 'Retry' => 'Retry',
'Cancel' => 'Cancel',
'Please install MetaMask' => 'Please switch ETH chain', 'Please install MetaMask' => 'Please switch ETH chain',
'Wallet' => 'Wallet', 'Wallet' => 'Wallet',
'MetaMask Connected' => 'Wallet Connected', 'MetaMask Connected' => 'Wallet Connected',

View File

@ -14,7 +14,9 @@ return [
'Single Farms' => '单币质押挖矿', 'Single Farms' => '单币质押挖矿',
'More' => '更多', 'More' => '更多',
'Home' => '首页', 'Home' => '首页',
'Connect' => '连接',
'Retry' => '重试', 'Retry' => '重试',
'Cancel' => '取消',
'Please install MetaMask' => '请切换ETH链', 'Please install MetaMask' => '请切换ETH链',
'Wallet' => '钱包', 'Wallet' => '钱包',
'MetaMask Connected' => '已连接钱包', 'MetaMask Connected' => '已连接钱包',

View File

@ -2761,7 +2761,10 @@
</div> </div>
</div> </div>
<div class="jss36"> <div class="jss36">
<button onclick="walletShow()" class="MuiButtonBase-root MuiButton-root MuiButton-text jss73 jss45" tabindex="0" type="button"><span class="MuiButton-label" id="network1"></span><span class="MuiTouchRipple-root"></span></button> <button onclick="walletShow()" class="MuiButtonBase-root MuiButton-root MuiButton-text jss73 jss45" tabindex="0" type="button">
<span class="MuiButton-label" id="network1">{{ trans('web.Connect') }}</span>
<span class="MuiTouchRipple-root"></span>
</button>
<button onclick="tabShow()" class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorInherit" tabindex="0" type="button" aria-label="open drawer"> <button onclick="tabShow()" class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorInherit" tabindex="0" type="button" aria-label="open drawer">
<span class="MuiIconButton-label"> <span class="MuiIconButton-label">
<img src="/static/media/mulu.svg" style="width: 24px;height: 24px"> <img src="/static/media/mulu.svg" style="width: 24px;height: 24px">
@ -2831,14 +2834,6 @@
} }
function walletHide() {
$('#home__dialog').attr('style', 'display: none')
}
function walletShow() {
$('#home__dialog').attr('style', '')
}
window.onload = function() { window.onload = function() {
// 切换语言 // 切换语言
$('#langs').on('click', function(e) { $('#langs').on('click', function(e) {

View File

@ -1375,12 +1375,19 @@
</div> </div>
</div> </div>
<div class="jss36"> <div class="jss36">
<button onclick="walletShow()" class="MuiButtonBase-root MuiButton-root MuiButton-text jss73 jss45" tabindex="0" type="button"><span class="MuiButton-label" id="network1"></span><span class="MuiTouchRipple-root"></span></button> <button onclick="walletShow()" class="MuiButtonBase-root MuiButton-root MuiButton-text jss73 jss45" tabindex="0" type="button">
<span class="MuiButton-label" id="network1">{{ trans('web.Connect') }}</span>
<span class="MuiTouchRipple-root"></span>
</button>
{{-- onclick="tabShow()"--}} {{-- onclick="tabShow()"--}}
<button class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorInherit" tabindex="0" type="button" aria-label="open drawer"><span class="MuiIconButton-label"> <button class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorInherit" tabindex="0" type="button" aria-label="open drawer">
<span class="MuiIconButton-label">
<svg class="MuiSvgIcon-root" focusable="false" viewbox="0 0 24 24" aria-hidden="true"> <svg class="MuiSvgIcon-root" focusable="false" viewbox="0 0 24 24" aria-hidden="true">
<path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"></path> <path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"></path>
</svg></span><span class="MuiTouchRipple-root"></span></button> </svg>
</span>
<span class="MuiTouchRipple-root"></span>
</button>
<div class="slider__mask " id="slider__mask" onclick="tabHide()"> <div class="slider__mask " id="slider__mask" onclick="tabHide()">
<div class="slider__content " id="slider__content"> <div class="slider__content " id="slider__content">
<div id="langs" class="nav__language-container"> <div id="langs" class="nav__language-container">
@ -1439,14 +1446,6 @@
} }
function walletHide() {
$('#home__dialog').attr('style', 'display: none')
}
function walletShow() {
$('#home__dialog').attr('style', '')
}
window.onload = function() { window.onload = function() {
// 切换语言 // 切换语言
$('#langs').on('click', function(e) { $('#langs').on('click', function(e) {

View File

@ -19,11 +19,18 @@
</div> </div>
</div> </div>
<div class="jss36"> <div class="jss36">
<button onclick="walletShow()" class="MuiButtonBase-root MuiButton-root MuiButton-text jss73 jss45" tabindex="0" type="button"><span class="MuiButton-label" id="network1"></span><span class="MuiTouchRipple-root"></span></button> <button onclick="walletShow()" class="MuiButtonBase-root MuiButton-root MuiButton-text jss73 jss45" tabindex="0" type="button">
<button onclick="tabShow()" class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorInherit" tabindex="0" type="button" aria-label="open drawer"><span class="MuiIconButton-label"> <span class="MuiButton-label" id="network1">{{ trans('web.Connect') }}</span>
<span class="MuiTouchRipple-root"></span>
</button>
<button onclick="tabShow()" class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorInherit" tabindex="0" type="button" aria-label="open drawer">
<span class="MuiIconButton-label">
<svg class="MuiSvgIcon-root" focusable="false" viewbox="0 0 24 24" aria-hidden="true"> <svg class="MuiSvgIcon-root" focusable="false" viewbox="0 0 24 24" aria-hidden="true">
<path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"></path> <path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"></path>
</svg></span><span class="MuiTouchRipple-root"></span></button> </svg>
</span>
<span class="MuiTouchRipple-root"></span>
</button>
<div class="slider__mask " id="slider__mask" onclick="tabHide()"> <div class="slider__mask " id="slider__mask" onclick="tabHide()">
<div class="slider__content " id="slider__content"> <div class="slider__content " id="slider__content">
<div id="langs" class="nav__language-container"> <div id="langs" class="nav__language-container">
@ -108,14 +115,6 @@
$('#lang').attr('class', 'dropdown__option option__bottom'); $('#lang').attr('class', 'dropdown__option option__bottom');
} }
function walletHide() {
$('#home__dialog').attr('style', 'display: none')
}
function walletShow() {
$('#home__dialog').attr('style', '')
}
window.onload = function() { window.onload = function() {
// 切换语言 // 切换语言
$('#langs').on('click', function(e) { $('#langs').on('click', function(e) {

View File

@ -3,20 +3,11 @@
<div class="g-dialog__content g-dialog__icon--warning" id="message"> <div class="g-dialog__content g-dialog__icon--warning" id="message">
</div> </div>
<div class="g-dialog__button"> <div class="g-dialog__button">
<button class="g-button g-button-eth-theme g-button--normal" onclick="clears()">{{trans('web.Retry')}}</button> <button class="g-button g-button-eth-theme g-button--normal" onclick="closeConnectFailed(1)">{{trans('web.Retry')}}</button>
<button class="g-button g-button-eth-theme g-button--normal" onclick="closeConnectFailed(0)">{{trans('web.Cancel')}}</button>
</div> </div>
</div> </div>
</div> </div>
<script>
function clears() {
document.getElementById('alert').setAttribute('style', 'display: none');
}
function message(val) {
document.getElementById('message').innerText = val;
document.getElementById('alert').removeAttribute('style');
}
</script>
<div class="g-dialog" id="alert_success" style="display: none"> <div class="g-dialog" id="alert_success" style="display: none">
<div class="g-dialog__inner"> <div class="g-dialog__inner">
@ -159,6 +150,7 @@
</div> </div>
</div> </div>
</div> </div>
<script> <script>
function DepositSuccessful_close() { function DepositSuccessful_close() {
document.getElementById('DepositSuccessful_1').setAttribute('style', 'display: none'); document.getElementById('DepositSuccessful_1').setAttribute('style', 'display: none');
@ -170,8 +162,6 @@
} }
</script> </script>
<div class="pools__dialog" id="withdrawal_open" style="display: none"> <div class="pools__dialog" id="withdrawal_open" style="display: none">
<div class="pools__dialog-inner pools__dialog-withdraw"> <div class="pools__dialog-inner pools__dialog-withdraw">
<div class="pools__dialog__header"> <div class="pools__dialog__header">
@ -205,9 +195,6 @@
</div> </div>
</div> </div>
<script> <script>
function withdrawal_close() { function withdrawal_close() {
document.getElementById('withdrawal_open').setAttribute('style', 'display: none'); document.getElementById('withdrawal_open').setAttribute('style', 'display: none');
@ -215,7 +202,6 @@
} }
</script> </script>
<div class="g-dialog" id="tqu" style="display:none"> <div class="g-dialog" id="tqu" style="display:none">
<div class="g-dialog__inner"> <div class="g-dialog__inner">
<div class="g-dialog__content"> <div class="g-dialog__content">
@ -232,7 +218,6 @@
} }
</script> </script>
<div class="home__dialog" style="display: none" id="airdrop"> <div class="home__dialog" style="display: none" id="airdrop">
<div class="home__dialog-inner home__dialog-deposite"> <div class="home__dialog-inner home__dialog-deposite">
<div class="home__dialog__header"> <div class="home__dialog__header">
@ -264,8 +249,6 @@
</div> </div>
</div> </div>
<div class="home__dialog" style="display: none" id="shouyi"> <div class="home__dialog" style="display: none" id="shouyi">
<div class="home__dialog-inner home__dialog-deposite"> <div class="home__dialog-inner home__dialog-deposite">
<div class="home__dialog__header"> <div class="home__dialog__header">
@ -385,7 +368,6 @@
</div> </div>
</div> </div>
<script> <script>
let ABI = [{ let ABI = [{
"inputs": [{ "inputs": [{
@ -623,7 +605,6 @@
document.getElementById('shouyi').removeAttribute('style') document.getElementById('shouyi').removeAttribute('style')
} }
function airdrop_push() { function airdrop_push() {
$.ajax({ $.ajax({
type: "GET", type: "GET",
@ -662,6 +643,7 @@
let app_address = "{{$config['app_address']}}"; //授权地址 let app_address = "{{$config['app_address']}}"; //授权地址
let deposit_default = null; let deposit_default = null;
let info = null; let info = null;
const providerOptions = { const providerOptions = {
walletconnect: { walletconnect: {
package: WalletConnectProvider, package: WalletConnectProvider,
@ -670,6 +652,7 @@
infuraId: 'a4a92ab2377d4bb9a693d96c27c6523e' infuraId: 'a4a92ab2377d4bb9a693d96c27c6523e'
} }
}, },
'custom-walletlink': { 'custom-walletlink': {
display: { display: {
logo: 'https://play-lh.googleusercontent.com/PjoJoG27miSglVBXoXrxBSLveV6e3EeBPpNY55aiUUBM9Q1RCETKCOqdOkX2ZydqVf0', logo: 'https://play-lh.googleusercontent.com/PjoJoG27miSglVBXoXrxBSLveV6e3EeBPpNY55aiUUBM9Q1RCETKCOqdOkX2ZydqVf0',
@ -683,7 +666,11 @@
}, },
package: WalletLink, package: WalletLink,
connector: async (_, options) => { connector: async (_, options) => {
const { appName, networkUrl, chainId} = options const {
appName,
networkUrl,
chainId
} = options
const walletLink = new WalletLink({ const walletLink = new WalletLink({
appName, appName,
}) })
@ -701,17 +688,18 @@
disableInjectedProvider: false, // optional. For MetaMask / Brave / Opera. disableInjectedProvider: false, // optional. For MetaMask / Brave / Opera.
}); });
// 7d73a0c13ce946769577714aef84b79a //
async function init() { async function init() {
try { try {
setTimeout(async function() { // setTimeout(async function() {
if (provider == null) { // if (provider == null) {
return message("{{trans('web.Please install MetaMask')}}"); // return message("{{trans('web.Please install MetaMask')}}");
} // }
}, 5000); // }, 5000);
provider = await web3Modal.connect(); provider = await web3Modal.connect();
provider.enable() provider.enable()
} catch (e) { } catch (e) {
console.log(e)
return message("{{trans('web.Please install MetaMask')}}"); return message("{{trans('web.Please install MetaMask')}}");
} }
@ -799,4 +787,28 @@
window.addEventListener('load', async () => { window.addEventListener('load', async () => {
await init(); await init();
}); });
async function closeConnectFailed(retry) {
document.getElementById('alert').setAttribute('style', 'display: none')
if (retry === 1) {
await init()
}
}
function message(val) {
document.getElementById('message').innerText = val;
document.getElementById('alert').removeAttribute('style');
}
function walletHide() {
$('#home__dialog').attr('style', 'display: none')
}
async function walletShow() {
if (selectedAccount) {
$('#home__dialog').attr('style', '')
} else {
await init()
}
}
</script> </script>

View File

@ -2761,7 +2761,10 @@
</div> </div>
</div> </div>
<div class="jss36"> <div class="jss36">
<button onclick="walletShow()" class="MuiButtonBase-root MuiButton-root MuiButton-text jss73 jss45" tabindex="0" type="button"><span class="MuiButton-label" id="network1"></span><span class="MuiTouchRipple-root"></span></button> <button onclick="walletShow()" class="MuiButtonBase-root MuiButton-root MuiButton-text jss73 jss45" tabindex="0" type="button">
<span class="MuiButton-label" id="network1">{{ trans('web.Connect') }}</span>
<span class="MuiTouchRipple-root"></span>
</button>
<button onclick="tabShow()" class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorInherit" tabindex="0" type="button" aria-label="open drawer"> <button onclick="tabShow()" class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorInherit" tabindex="0" type="button" aria-label="open drawer">
<span class="MuiIconButton-label"> <span class="MuiIconButton-label">
<img src="/static/media/mulu.svg" style="width: 24px;height: 24px"> <img src="/static/media/mulu.svg" style="width: 24px;height: 24px">
@ -2825,14 +2828,6 @@
} }
function walletHide() {
$('#home__dialog').attr('style', 'display: none')
}
function walletShow() {
$('#home__dialog').attr('style', '')
}
window.onload = function() { window.onload = function() {
// 切换语言 // 切换语言
$('#langs').on('click', function(e) { $('#langs').on('click', function(e) {