Skip to content

Commit

Permalink
Merge pull request #5213 from swaponline/wc_styles
Browse files Browse the repository at this point in the history 
Wallect Connect, allow disable, mobile styles
  • Loading branch information
@shendel
shendel authored Aug 25, 2023
2 parents a578bca + 797666c commit d286a1e
Show file tree
Hide file tree
Showing 6 changed files with 75 additions and 38 deletions.
9 changes: 9 additions & 0 deletions src/front/client/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -378,6 +378,15 @@
display: none;
}
</style>
<style type="text/css">
/* WalletConnect - mobile */
@media (max-width: 600px) {
WCM-MODAL {
position: absolute;
z-index: 9999999999;
}
}
</style>
</head>

<body data-scheme="default">
Expand Down
14 changes: 14 additions & 0 deletions src/front/config/mainnet/evmNetworks.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ export default {
chainName: 'Ethereum',
rpcUrls: [web3.provider],
blockExplorerUrls: [link.etherscan],
hasWalletConnect: true,
},
BNB: {
currency: 'BNB',
Expand All @@ -17,6 +18,7 @@ export default {
chainName: 'Binance Smart Chain',
rpcUrls: [web3.binance_provider],
blockExplorerUrls: [link.bscscan],
hasWalletConnect: true,
},
MATIC: {
currency: 'MATIC',
Expand All @@ -25,6 +27,7 @@ export default {
chainName: 'Polygon',
rpcUrls: [web3.matic_provider],
blockExplorerUrls: [link.maticscan],
hasWalletConnect: true,
},
ARBETH: {
currency: 'ARBETH',
Expand All @@ -33,6 +36,7 @@ export default {
chainName: 'Arbitrum',
rpcUrls: [web3.arbitrum_provider],
blockExplorerUrls: [link.arbitrum],
hasWalletConnect: false,
},
AURETH: {
currency: 'AURETH',
Expand All @@ -41,6 +45,7 @@ export default {
chainName: 'Aurora',
rpcUrls: [web3.aurora_provider],
blockExplorerUrls: [link.auroraExplorer],
hasWalletConnect: false,
},
XDAI: {
currency: 'XDAI',
Expand All @@ -49,6 +54,7 @@ export default {
chainName: 'Gnosis (xDai)',
rpcUrls: [web3.xdai_provider],
blockExplorerUrls: [link.xdai],
hasWalletConnect: false,
},
FTM: {
currency: 'FTM',
Expand All @@ -57,6 +63,7 @@ export default {
chainName: 'Fantom',
rpcUrls: [web3.ftm_provider],
blockExplorerUrls: [link.ftmscan],
hasWalletConnect: false,
},
AVAX: {
currency: 'AVAX',
Expand All @@ -65,6 +72,7 @@ export default {
chainName: 'Avalanche',
rpcUrls: [web3.avax_provider],
blockExplorerUrls: [link.avaxscan],
hasWalletConnect: false,
},
MOVR: {
currency: 'MOVR',
Expand All @@ -73,6 +81,7 @@ export default {
chainName: 'Moonriver',
rpcUrls: [web3.movr_provider],
blockExplorerUrls: [link.movrscan],
hasWalletConnect: false,
},
ONE: {
currency: 'ONE',
Expand All @@ -81,6 +90,7 @@ export default {
chainName: 'Harmony One',
rpcUrls: [web3.one_provider],
blockExplorerUrls: [link.oneExplorer],
hasWalletConnect: false,
},
AME: {
currency: 'AME',
Expand All @@ -89,6 +99,7 @@ export default {
chainName: 'AME Chain',
rpcUrls: [web3.ame_provider],
blockExplorerUrls: [link.amescan],
hasWalletConnect: false,
},
PHI: {
currency: 'PHI',
Expand All @@ -97,6 +108,7 @@ export default {
chainName: 'PHI Network',
rpcUrls: [web3.phi_provider],
blockExplorerUrls: [link.phiExplorer],
hasWalletConnect: false,
},
PHI_V2: {
currency: 'PHI_V2',
Expand All @@ -105,6 +117,7 @@ export default {
chainName: 'PHI-V2 Network',
rpcUrls: [web3.phi_v2_provider],
blockExplorerUrls: [link.phi_v2_Explorer],
hasWalletConnect: false,
},
FKW: {
currency: 'FKW',
Expand All @@ -113,5 +126,6 @@ export default {
chainName: 'FKW Network',
rpcUrls: [web3.fwk_provider],
blockExplorerUrls: [link.fkw_Explorer],
hasWalletConnect: false,
},
}
1 change: 1 addition & 0 deletions src/front/global.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,7 @@ declare global {
chainName: string
rpcUrls: string[]
blockExplorerUrls: string[]
hasWalletConnect?: boolean
}

}
57 changes: 32 additions & 25 deletions src/front/shared/components/modals/ConnectWalletModal/ConnectWalletModal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,12 +17,13 @@ import styles from './ConnectWalletModal.scss'
dashboardModalsAllowed,
}))
@cssModules(styles, { allowMultiple: true })
class ConnectWalletModal extends React.Component<any, { choseNetwork: boolean; currentBaseCurrency: string}> {
class ConnectWalletModal extends React.Component<any, { choseNetwork: boolean; currentBaseCurrency: string, hasWalletConnect: boolean }> {
constructor(props) {
super(props)

this.state = {
choseNetwork: false,
hasWalletConnect: false,
currentBaseCurrency: '',
}
}
Expand Down Expand Up @@ -113,11 +114,12 @@ class ConnectWalletModal extends React.Component<any, { choseNetwork: boolean; c
return metamask.getWeb3connect()
}

setNetwork = async (coinName) => {
setNetwork = async (coinName, hasWalletConnect) => {
const { currentBaseCurrency } = this.state

this.setState(() => ({
choseNetwork: true,
hasWalletConnect: (externalConfig.opts.hasWalletConnect && hasWalletConnect),
}))

if (currentBaseCurrency !== coinName) {
Expand All @@ -129,12 +131,13 @@ class ConnectWalletModal extends React.Component<any, { choseNetwork: boolean; c

render() {
const { dashboardModalsAllowed, noCloseButton } = this.props
const { choseNetwork, currentBaseCurrency } = this.state
const { choseNetwork, currentBaseCurrency, hasWalletConnect } = this.state

const web3Type = metamask.web3connect.getInjectedType()
const web3Icon = (web3Icons[web3Type] && web3Type !== `UNKNOWN` && web3Type !== `NONE`) ? web3Icons[web3Type] : false
const walletConnectIcon = web3Icons.WALLETCONNECT


return (
<div
className={cx({
Expand Down Expand Up @@ -172,7 +175,7 @@ class ConnectWalletModal extends React.Component<any, { choseNetwork: boolean; c
type="button"
key={index}
styleName={`option ${currentBaseCurrency === item.currency ? 'selected' : ''}`}
onClick={() => this.setNetwork(item.currency)}
onClick={() => this.setNetwork(item.currency, item.hasWalletConnect)}
>
<Coin size={50} name={item.currency.toLowerCase()} />
<span styleName="chainName">{item.chainName.split(' ')[0]}</span>
Expand All @@ -182,29 +185,33 @@ class ConnectWalletModal extends React.Component<any, { choseNetwork: boolean; c
</div>
</div>

<div styleName={`stepWrapper ${choseNetwork ? '' : 'disabled'}`}>
<h3 styleName="title">
<FormattedMessage id="chooseWallet" defaultMessage="Choose wallet" />
</h3>
<div styleName="options">
{metamask.web3connect.isInjectedEnabled() && (
<div styleName="provider">
<Button brand onClick={this.handleInjected}>
{web3Icon && (
<img src={web3Icon} alt={metamask.web3connect.getInjectedTitle()} />
)}
{metamask.web3connect.getInjectedTitle()}
</Button>
</div>
)}
<div styleName="provider">
<Button brand onClick={this.handleWalletConnect}>
<img src={walletConnectIcon} alt="WalletConnect" />
<FormattedMessage id="ConnectWalletModal_WalletConnect" defaultMessage="WalletConnect" />
</Button>
{choseNetwork && (
<div styleName={`stepWrapper ${choseNetwork ? '' : 'disabled'}`}>
<h3 styleName="title">
<FormattedMessage id="chooseWallet" defaultMessage="Choose wallet" />
</h3>
<div styleName="options">
{metamask.web3connect.isInjectedEnabled() && (
<div styleName="provider">
<Button brand onClick={this.handleInjected}>
{web3Icon && (
<img src={web3Icon} alt={metamask.web3connect.getInjectedTitle()} />
)}
{metamask.web3connect.getInjectedTitle()}
</Button>
</div>
)}
{hasWalletConnect && (
<div styleName="provider">
<Button brand onClick={this.handleWalletConnect}>
<img src={walletConnectIcon} alt="WalletConnect" />
<FormattedMessage id="ConnectWalletModal_WalletConnect" defaultMessage="WalletConnect" />
</Button>
</div>
)}
</div>
</div>
</div>
)}
</div>
</div>
</div>
Expand Down
6 changes: 6 additions & 0 deletions src/front/shared/helpers/externalConfig.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,7 @@ const externalConfig = () => {

config.opts = {
inited: true,
hasWalletConnect: true,
curEnabled: {
eth: true,
bnb: true,
Expand Down Expand Up @@ -142,6 +143,11 @@ const externalConfig = () => {
) {
config.api.WalletConnectProjectId = window.SO_WalletConnectProjectId
}
if (window
&& window.SO_WalletConnectDisabled
) {
config.opts.hasWalletConnect = false
}

if (window
&& window.SO_AllowMultiTab
Expand Down
26 changes: 13 additions & 13 deletions src/front/shared/pages/CreateWallet/Steps/StepsWrapper.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,19 +55,19 @@ export default class StepsWrapper extends Component<any, any> {
})

if (config.opts.addCustomTokens) {
if (config.erc20) this.defaultStartPack.push({ name: 'ERC20', capture: 'Token', baseCurrency: 'ETH' })
if (config.bep20) this.defaultStartPack.push({ name: 'BEP20', capture: 'Token', baseCurrency: 'BNB' })
if (config.erc20matic) this.defaultStartPack.push({ name: 'ERC20MATIC', capture: 'Token', baseCurrency: 'MATIC' })
if (config.erc20xdai) this.defaultStartPack.push({ name: 'ERC20XDAI', capture: 'Token', baseCurrency: 'XDAI' })
if (config.erc20ftm) this.defaultStartPack.push({ name: 'ERC20FTM', capture: 'Token', baseCurrency: 'FTM' })
if (config.erc20avax) this.defaultStartPack.push({ name: 'ERC20AVAX', capture: 'Token', baseCurrency: 'AVAX' })
if (config.erc20movr) this.defaultStartPack.push({ name: 'ERC20MOVR', capture: 'Token', baseCurrency: 'MOVR' })
if (config.erc20one) this.defaultStartPack.push({ name: 'ERC20ONE', capture: 'Token', baseCurrency: 'ONE' })
if (config.erc20ame) this.defaultStartPack.push({ name: 'ERC20AME', capture: 'Token', baseCurrency: 'AME' })
if (config.erc20aurora) this.defaultStartPack.push({ name: 'ERC20AURORA', capture: 'Token', baseCurrency: 'AURETH' })
if (config.phi20) this.defaultStartPack.push({ name: 'PHI20', capture: 'Token', baseCurrency: 'PHI' })
if (config.phi20_v2) this.defaultStartPack.push({ name: 'PHI20_V2', capture: 'Token', baseCurrency: 'PHI_V2' })
if (config.fkw20) this.defaultStartPack.push({ name: 'FKW20', capture: 'Token', baseCurrency: 'FKW' })
if (config.erc20 && (!curEnabled || curEnabled.eth)) this.defaultStartPack.push({ name: 'ERC20', capture: 'Token', baseCurrency: 'ETH' })
if (config.bep20 && (!curEnabled || curEnabled.bnb)) this.defaultStartPack.push({ name: 'BEP20', capture: 'Token', baseCurrency: 'BNB' })
if (config.erc20matic && (!curEnabled || curEnabled.matic)) this.defaultStartPack.push({ name: 'ERC20MATIC', capture: 'Token', baseCurrency: 'MATIC' })
if (config.erc20xdai && (!curEnabled || curEnabled.xdai)) this.defaultStartPack.push({ name: 'ERC20XDAI', capture: 'Token', baseCurrency: 'XDAI' })
if (config.erc20ftm && (!curEnabled || curEnabled.ftm)) this.defaultStartPack.push({ name: 'ERC20FTM', capture: 'Token', baseCurrency: 'FTM' })
if (config.erc20avax && (!curEnabled || curEnabled.avax)) this.defaultStartPack.push({ name: 'ERC20AVAX', capture: 'Token', baseCurrency: 'AVAX' })
if (config.erc20movr && (!curEnabled || curEnabled.movr)) this.defaultStartPack.push({ name: 'ERC20MOVR', capture: 'Token', baseCurrency: 'MOVR' })
if (config.erc20one && (!curEnabled || curEnabled.one)) this.defaultStartPack.push({ name: 'ERC20ONE', capture: 'Token', baseCurrency: 'ONE' })
if (config.erc20ame && (!curEnabled || curEnabled.ame)) this.defaultStartPack.push({ name: 'ERC20AME', capture: 'Token', baseCurrency: 'AME' })
if (config.erc20aurora && (!curEnabled || curEnabled.aureth)) this.defaultStartPack.push({ name: 'ERC20AURORA', capture: 'Token', baseCurrency: 'AURETH' })
if (config.phi20 && (!curEnabled || curEnabled.phi)) this.defaultStartPack.push({ name: 'PHI20', capture: 'Token', baseCurrency: 'PHI' })
if (config.phi20_v2 && (!curEnabled || curEnabled.phi_v2)) this.defaultStartPack.push({ name: 'PHI20_V2', capture: 'Token', baseCurrency: 'PHI_V2' })
if (config.fkw20 && (!curEnabled || curEnabled.fkw)) this.defaultStartPack.push({ name: 'FKW20', capture: 'Token', baseCurrency: 'FKW' })
}
}

Expand Down

0 comments on commit d286a1e

Please sign in to comment.