dev: enable VueDappModal

punk-domains-2 · May 2, 2024 · 1346a4b · 1346a4b
1 parent 49bc645
commit 1346a4b
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 79 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -3,7 +3,7 @@
 
 	<div class="main-container background-main">
 		<!-- Connect Wallet modal -->
-		<div class="modal fade" id="connectModal" tabindex="-1" aria-labelledby="connectModalLabel" aria-hidden="true">
+		<!-- <div class="modal fade" id="connectModal" tabindex="-1" aria-labelledby="connectModalLabel" aria-hidden="true">
 			<div class="modal-dialog modal-sm" role="document">
 				<div class="modal-content">
 					<div class="modal-header">
@@ -55,12 +55,6 @@
 							/>
 						</div>
 
-						<!--
-
-            <div class="card col-6 cursor-pointer wallet-img-wrapper" @click="connectMetaMask">
-              <img src="./assets/wallets/imtoken.png" class="card-img-top card-img-wallet" alt="imToken">
-            </div>
-            -->
 
 						<div class="card col-6 cursor-pointer wallet-img-wrapper" @click="connectMetaMask">
 							<img
@@ -72,18 +66,21 @@
 					</div>
 				</div>
 			</div>
-		</div>
+		</div> -->
 		<!-- END Connect Wallet modal -->
 
 		<router-view></router-view>
 
 		<Footer />
+		<VueDappModal />
 	</div>
 </template>
 
 <script lang="ts">
 import { ethers } from 'ethers'
-import { useEthers, useWallet, MetaMaskConnector, CoinbaseWalletConnector } from 'vue-dapp'
+import { BrowserWalletConnector, RdnsEnum, useVueDapp } from '@vue-dapp/core'
+import { VueDappModal } from '@vue-dapp/modal'
+import '@vue-dapp/modal/dist/style.css'
 import { mapActions, mapGetters, mapMutations } from 'vuex'
 import Navbar from './components/Navbar.vue'
 import Footer from './components/Footer.vue'
@@ -95,17 +92,10 @@ export default {
 	components: {
 		Navbar,
 		Footer,
+		VueDappModal,
 	},
 
 	mounted() {
-		if (!this.isActivated) {
-			if (localStorage.getItem('connected') == 'metamask') {
-				this.connectMetaMask()
-			} else if (localStorage.getItem('connected') == 'coinbase') {
-				this.connectCoinbase()
-			}
-		}
-
 		this.fetchReferrer()
 		this.setTldContract()
 		this.fetchMinterContractData()
@@ -134,15 +124,14 @@ export default {
 		...mapMutations('tld', ['setTldContract']),
 
 		async connectCoinbase() {
-			await this.connectWith(this.coinbaseConnector)
-			localStorage.setItem('connected', 'coinbase') // store in local storage to autoconnect next time
-			document.getElementById('closeConnectModal').click()
+			await this.connectTo('CoinbaseWallet', undefined)
 		},
 
 		async connectMetaMask() {
-			await this.connectWith(this.mmConnector)
-			localStorage.setItem('connected', 'metamask') // store in local storage to autoconnect next time
-			document.getElementById('closeConnectModal').click()
+			await this.connectWith('BrowserWallet', {
+				target: 'rdns',
+				rdns: RdnsEnum.metamask,
+			})
 		},
 
 		async fetchReferrer() {
@@ -183,28 +172,23 @@ export default {
 	},
 
 	setup() {
-		const { address, chainId, isActivated } = useEthers()
-		const { connectWith } = useWallet()
+		const { addConnectors, chainId, address, connectTo } = useVueDapp()
+		addConnectors([new BrowserWalletConnector()])
+
 		const { getFallbackProvider } = useChainHelpers()
 
-		const coinbaseConnector = new CoinbaseWalletConnector({
-			appName: 'ModeChat ID',
-			jsonRpcUrl: 'https://mainnet.mode.network/',
-		})
-
-		const mmConnector = new MetaMaskConnector({
-			appUrl: 'https://id.modechat.xyz',
-		})
-
-		return {
-			address,
-			chainId,
-			coinbaseConnector,
-			connectWith,
-			getFallbackProvider,
-			isActivated,
-			mmConnector,
-		}
+		// TODO: add @vue-dapp/coinbase
+		// const coinbaseConnector = new CoinbaseWalletConnector({
+		// 	appName: 'ModeChat ID',
+		// 	jsonRpcUrl: 'https://mainnet.mode.network/',
+		// })
+
+		// TODO: vue-dapp v1 doesn't support metamask mobile link yet
+		// const mmConnector = new MetaMaskConnector({
+		// 	appUrl: 'https://id.modechat.xyz',
+		// })
+
+		return { address, chainId, connectTo, getFallbackProvider }
 	},
 
 	watch: {
@@ -217,28 +201,13 @@ export default {
 		},
 
 		chainId(newVal, oldVal) {
-			if (!this.isActivated) {
-				if (localStorage.getItem('connected') == 'metamask') {
-					this.connectMetaMask()
-				} else if (localStorage.getItem('connected') == 'coinbase') {
-					this.connectCoinbase()
-				}
-			}
-
 			if (this.chainId >= 1) {
 				this.setUserData()
 				this.setNetworkData()
 				this.fetchUserDomainNames(true)
 				this.checkIfAdmin()
 			}
 		},
-
-		isActivated(newVal, oldVal) {
-			if (!localStorage.getItem('connected') && localStorage.getItem('connected') !== 'null') {
-				// set this to auto-connect on next visit
-				localStorage.setItem('connected', 'metamask')
-			}
-		},
 	},
 }
 </script>

diff --git a/src/components/Footer.vue b/src/components/Footer.vue
@@ -1,11 +1,11 @@
 <template>
 	<div class="container-fluid text-center mt-3">
-		<router-link v-if="isActivated && isNetworkSupported" to="/profile">Profile</router-link>
+		<router-link v-if="isConnected && isNetworkSupported" to="/profile">Profile</router-link>
 
-		<span v-if="isActivated && isNetworkSupported"> | </span>
+		<span v-if="isConnected && isNetworkSupported"> | </span>
 
-		<router-link v-if="isActivated && isNetworkSupported" to="/send-tokens">Send Tokens</router-link>
-		<span v-if="isActivated && isNetworkSupported"> | </span>
+		<router-link v-if="isConnected && isNetworkSupported" to="/send-tokens">Send Tokens</router-link>
+		<span v-if="isConnected && isNetworkSupported"> | </span>
 
 		<router-link v-if="isUserMinterAdmin || isUserRoyaltyFeeUpdater || isUserTldAdmin" to="/admin"
 			>Admin</router-link
@@ -30,7 +30,7 @@
 </template>
 
 <script>
-import { useEthers } from 'vue-dapp'
+import { useVueDapp } from '@vue-dapp/core'
 import { mapGetters } from 'vuex'
 
 export default {
@@ -42,8 +42,8 @@ export default {
 	},
 
 	setup() {
-		const { isActivated } = useEthers()
-		return { isActivated }
+		const { isConnected } = useVueDapp()
+		return { isConnected }
 	},
 }
 </script>

diff --git a/src/components/Navbar.vue b/src/components/Navbar.vue
@@ -33,7 +33,7 @@
             >Marketplace</a>
             -->
 
-						<div v-if="isActivated" class="btn-group mx-2 navbar-menu-btn">
+						<div v-if="isConnected" class="btn-group mx-2 navbar-menu-btn">
 							<button
 								class="btn btn-primary dropdown-toggle"
 								type="button"
@@ -56,7 +56,7 @@
 							</ul>
 						</div>
 
-						<div v-if="isActivated" class="btn-group mx-2 navbar-menu-btn">
+						<div v-if="isConnected" class="btn-group mx-2 navbar-menu-btn">
 							<button
 								class="btn btn-primary dropdown-toggle"
 								type="button"
@@ -80,16 +80,11 @@
 							</ul>
 						</div>
 
-						<button
-							v-if="!isActivated"
-							class="btn btn-primary navbar-menu-btn"
-							data-bs-toggle="modal"
-							data-bs-target="#connectModal"
-						>
+						<button v-if="!isConnected" class="btn btn-primary navbar-menu-btn" @click="open">
 							Connect wallet
 						</button>
 
-						<div v-if="isActivated" class="btn-group mx-2 navbar-menu-btn">
+						<div v-if="isConnected" class="btn-group mx-2 navbar-menu-btn">
 							<router-link tag="button" class="btn btn-primary" to="/send-tokens"
 								>Send Tokens</router-link
 							>
@@ -103,8 +98,9 @@
 
 <script lang="ts">
 import { mapGetters } from 'vuex'
-import { useBoard, useEthers, useWallet } from 'vue-dapp'
 import useChainHelpers from '../hooks/useChainHelpers'
+import { useVueDapp } from '@vue-dapp/core'
+import { useVueDappModal } from '@vue-dapp/modal'
 
 export default {
 	name: 'Navbar',
@@ -144,13 +140,13 @@ export default {
 	},
 
 	setup() {
-		const { open } = useBoard()
-		const { disconnect } = useWallet()
-		const { isActivated } = useEthers()
+		const { open } = useVueDappModal()
+		const { isConnected, disconnect } = useVueDapp()
+
 		const { switchNetwork } = useChainHelpers()
 
 		return {
-			isActivated,
+			isConnected,
 			disconnect,
 			open,
 			switchNetwork,

diff --git a/src/main.ts b/src/main.ts
@@ -9,6 +9,7 @@ import Toast, { POSITION, TYPE } from 'vue-toastification'
 import 'vue-toastification/dist/index.css'
 import './index.css'
 import { VueDapp } from 'vue-dapp'
+import { createPinia } from 'pinia'
 
 const app = createApp(App)
 
@@ -29,6 +30,8 @@ const options = {
 	},
 }
 
+app.use(createPinia())
+
 app.use(router)
 app.use(store)