feat: migrate to vue-dapp v1

package.json

@@ -8,19 +8,13 @@
 		"format": "npx prettier --write '**/*.{vue,ts,js,json}'"
 	},
 	"dependencies": {
-		"@coinbase/wallet-sdk": "^3.7.1",
-		"@gnosis.pm/safe-apps-provider": "^0.15.1",
-		"@gnosis.pm/safe-apps-sdk": "^7.8.0",
 		"@vue-dapp/core": "^1.3.1",
 		"@vue-dapp/modal": "^1.3.1",
-		"@walletconnect/ethereum-provider": "^2.9.0",
-		"@walletconnect/modal": "^2.5.9",
 		"bootstrap": "^5.3.0",
 		"bootstrap-icons": "^1.10.5",
 		"ethers": "^5.4.7",
 		"pinia": "^2.1.7",
 		"vue": "^3.2.16",
-		"vue-dapp": "^0.9.1",
 		"vue-gtag": "^2.0.1",
 		"vue-router": "4",
 		"vue-toastification": "^2.0.0-rc.5",

src/components/MyDomain.vue

@@ -93,9 +93,10 @@
 <script>
 import { mapActions, mapGetters, mapMutations } from 'vuex'
 import { ethers } from 'ethers'
-import { useEthers } from 'vue-dapp'
+import { useEthers } from '../pinia-stores/ethers'
 import { useToast, TYPE } from 'vue-toastification'
 import WaitingToast from './toasts/WaitingToast.vue'
+import { storeToRefs } from 'pinia'
 
 export default {
 	name: 'MyDomain',
@@ -184,7 +185,7 @@ export default {
 	},
 
 	setup() {
-		const { address, signer } = useEthers()
+		const { address, signer } = storeToRefs(useEthers())
 		const toast = useToast()
 
 		return { address, signer, toast }

src/components/MyTlds.vue

@@ -33,8 +33,9 @@
 
 <script>
 import { ethers } from 'ethers'
-import { useEthers } from 'vue-dapp'
+import { useEthers } from '../pinia-stores/ethers'
 import { mapGetters } from 'vuex'
+import { storeToRefs } from 'pinia'
 
 export default {
 	name: 'MyTlds',
@@ -76,9 +77,9 @@ export default {
 	},
 
 	setup() {
-		const { address, isActivated, signer } = useEthers()
+		const { address, isConnected, signer } = storeToRefs(useEthers())
 
-		return { address, isActivated, signer }
+		return { address, isConnected, signer }
 	},
 }
 </script>

src/components/SendTokensComponent.vue

@@ -174,14 +174,15 @@
 <script lang="ts">
 import { ethers } from 'ethers'
 import { mapGetters } from 'vuex'
-import { useEthers } from 'vue-dapp'
+import { useEthers } from '../pinia-stores/ethers'
 import { useToast, TYPE } from 'vue-toastification'
 
 import Erc20Abi from '../abi/Erc20.json'
 import tldsJson from '../abi/tlds.json'
 import tldAbi from '../abi/PunkTLD.json'
 import WaitingToast from '../components/toasts/WaitingToast.vue'
 import useChainHelpers from '../hooks/useChainHelpers'
+import { storeToRefs } from 'pinia'
 
 export default {
 	name: 'SendTokensComponent',
@@ -478,7 +479,7 @@ export default {
 	},
 
 	setup() {
-		const { address, balance, signer } = useEthers()
+		const { address, balance, signer } = storeToRefs(useEthers())
 		const toast = useToast()
 		const { getFallbackProvider } = useChainHelpers()
 

src/components/domainEdit/EditOtherData.vue

@@ -86,9 +86,10 @@
 <script>
 import { ethers } from 'ethers'
 import { mapActions, mapGetters } from 'vuex'
-import { useEthers } from 'vue-dapp'
 import { useToast, TYPE } from 'vue-toastification'
 import WaitingToast from '../toasts/WaitingToast.vue'
+import { useEthers } from '../../pinia-stores/ethers'
+import { storeToRefs } from 'pinia'
 
 export default {
 	name: 'EditOtherData',
@@ -242,7 +243,7 @@ export default {
 	},
 
 	setup() {
-		const { address, signer } = useEthers()
+		const { address, signer } = storeToRefs(useEthers())
 		const toast = useToast()
 
 		return { address, signer, toast }

src/components/domainEdit/EditPfp.vue

@@ -63,9 +63,11 @@
 <script>
 import { ethers } from 'ethers'
 import { mapGetters } from 'vuex'
-import { useEthers, shortenAddress } from 'vue-dapp'
+import { useEthers } from '../../pinia-stores/ethers'
+import { shortenAddress } from '@vue-dapp/core'
 import { useToast, TYPE } from 'vue-toastification'
 import WaitingToast from '../toasts/WaitingToast.vue'
+import { storeToRefs } from 'pinia'
 
 export default {
 	name: 'EditPfp',
@@ -209,7 +211,7 @@ export default {
 	},
 
 	setup() {
-		const { address, signer } = useEthers()
+		const { address, signer } = storeToRefs(useEthers())
 		const toast = useToast()
 
 		return { address, shortenAddress, signer, toast }

src/components/domainEdit/EditUrl.vue

@@ -50,9 +50,10 @@
 <script>
 import { ethers } from 'ethers'
 import { mapGetters } from 'vuex'
-import { useEthers } from 'vue-dapp'
+import { useEthers } from '../../pinia-stores/ethers'
 import { useToast, TYPE } from 'vue-toastification'
 import WaitingToast from '../toasts/WaitingToast.vue'
+import { storeToRefs } from 'pinia'
 
 export default {
 	name: 'EditUrl',
@@ -151,7 +152,7 @@ export default {
 	},
 
 	setup() {
-		const { address, signer } = useEthers()
+		const { address, signer } = storeToRefs(useEthers())
 		const toast = useToast()
 
 		return { address, signer, toast }

src/main.ts

@@ -8,7 +8,6 @@ import 'bootstrap-icons/font/bootstrap-icons.css'
 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)
@@ -35,8 +34,6 @@ app.use(createPinia())
 app.use(router)
 app.use(store)
 
-app.use(VueDapp)
-
 app.use(Toast, options)
 
 app.mount('#app')

src/pinia-stores/ethers.ts

@@ -3,17 +3,26 @@ import { ethers } from 'ethers'
 import { markRaw } from 'vue'
 import { useVueDapp } from '@vue-dapp/core'
 
-export function displayEther(balance) {
-	return ethers.utils.formatEther(balance)
-}
-
 export const useEthers = defineStore('Ethers', {
 	state: () => ({
 		provider: null,
 		signer: null,
 		balance: 0n,
 	}),
-	getters: {},
+	getters: {
+		address(state) {
+			const { address } = useVueDapp()
+			return address.value
+		},
+		chainId(state) {
+			const { chainId } = useVueDapp()
+			return chainId.value
+		},
+		isConnected(state) {
+			const { isConnected } = useVueDapp()
+			return isConnected.value
+		},
+	},
 	actions: {
 		async setWallet(_provider) {
 			this.provider = markRaw(new ethers.providers.Web3Provider(_provider))

src/store/modules/user.ts

@@ -2,7 +2,7 @@ import { ethers } from 'ethers'
 import MinterAbi from '../../abi/Minter.json'
 import TldAbi from '../../abi/PunkTLD.json'
 import { useVueDapp, shortenAddress } from '@vue-dapp/core'
-import { useEthers, displayEther } from '../../pinia-stores/ethers'
+import { useEthers } from '../../pinia-stores/ethers'
 import { storeToRefs } from 'pinia'
 
 export default {
@@ -129,7 +129,7 @@ export default {
 			state.userAddress = address.value
 			state.userShortAddress = shortenAddress(address.value)
 			state.userBalanceWei = balance.value
-			state.userBalance = displayEther(balance.value)
+			state.userBalance = ethers.utils.formatEther(balance.value)
 		},
 
 		setCanUserBuy(state, canBuy) {

src/views/Admin.vue

@@ -10,7 +10,7 @@
 					<h3 v-if="!getMinterPaused">Pause the minting contract</h3>
 
 					<button
-						v-if="isActivated"
+						v-if="isConnected"
 						class="btn btn-primary btn-lg mt-3"
 						@click="togglePaused"
 						:disabled="waitingPaused"
@@ -49,7 +49,7 @@
 					</div>
 
 					<button
-						v-if="isActivated"
+						v-if="isConnected"
 						class="btn btn-primary btn-lg mt-3"
 						@click="changeReferralFee"
 						:disabled="waitingRf"
@@ -84,7 +84,7 @@
 					</div>
 
 					<button
-						v-if="isActivated"
+						v-if="isConnected"
 						class="btn btn-primary btn-lg mt-3"
 						@click="changePrice(1)"
 						:disabled="waitingPrice1"
@@ -119,7 +119,7 @@
 					</div>
 
 					<button
-						v-if="isActivated"
+						v-if="isConnected"
 						class="btn btn-primary btn-lg mt-3"
 						@click="changePrice(2)"
 						:disabled="waitingPrice2"
@@ -154,7 +154,7 @@
 					</div>
 
 					<button
-						v-if="isActivated"
+						v-if="isConnected"
 						class="btn btn-primary btn-lg mt-3"
 						@click="changePrice(3)"
 						:disabled="waitingPrice3"
@@ -189,7 +189,7 @@
 					</div>
 
 					<button
-						v-if="isActivated"
+						v-if="isConnected"
 						class="btn btn-primary btn-lg mt-3"
 						@click="changePrice(4)"
 						:disabled="waitingPrice4"
@@ -224,7 +224,7 @@
 					</div>
 
 					<button
-						v-if="isActivated"
+						v-if="isConnected"
 						class="btn btn-primary btn-lg mt-3"
 						@click="changePrice(5)"
 						:disabled="waitingPrice5"
@@ -259,7 +259,7 @@
 					</div>
 
 					<button
-						v-if="isActivated"
+						v-if="isConnected"
 						class="btn btn-primary btn-lg mt-3"
 						@click="changeMetadataAddress"
 						:disabled="waitingCma"
@@ -294,7 +294,7 @@
 					</div>
 
 					<button
-						v-if="isActivated"
+						v-if="isConnected"
 						class="btn btn-primary btn-lg mt-3"
 						@click="changeMinterAddress"
 						:disabled="waitingCmia"
@@ -329,7 +329,7 @@
 					</div>
 
 					<button
-						v-if="isActivated"
+						v-if="isConnected"
 						class="btn btn-primary btn-lg mt-3"
 						@click="transferMinterOwnership"
 						:disabled="waitingTmo"
@@ -364,7 +364,7 @@
 					</div>
 
 					<button
-						v-if="isActivated"
+						v-if="isConnected"
 						class="btn btn-primary btn-lg mt-3"
 						@click="transferTldOwnership"
 						:disabled="waitingTdo"
@@ -415,7 +415,7 @@
 					</div>
 
 					<button
-						v-if="isActivated"
+						v-if="isConnected"
 						class="btn btn-primary btn-lg mt-3"
 						@click="mintFreeDomain"
 						:disabled="waitingMfd || buyNotValid(newDomain).invalid"
@@ -439,12 +439,13 @@
 
 <script lang="ts">
 import { ethers } from 'ethers'
-import { useEthers } from 'vue-dapp'
+import { useEthers } from '../pinia-stores/ethers'
 import { mapActions, mapGetters } from 'vuex'
 import { useToast, TYPE } from 'vue-toastification'
 import WaitingToast from '../components/toasts/WaitingToast.vue'
 import MinterAbi from '../abi/Minter.json'
 import useDomainHelpers from '../hooks/useDomainHelpers'
+import { storeToRefs } from 'pinia'
 
 export default {
 	name: 'Admin',
@@ -994,11 +995,11 @@ export default {
 	},
 
 	setup() {
-		const { address, isActivated, signer } = useEthers()
+		const { address, isConnected, signer } = storeToRefs(useEthers())
 		const toast = useToast()
 		const { buyNotValid } = useDomainHelpers()
 
-		return { address, buyNotValid, isActivated, signer, toast }
+		return { address, buyNotValid, isConnected, signer, toast }
 	},
 }
 </script>

src/views/Allowance.vue

@@ -53,14 +53,15 @@
 import { ethers } from 'ethers'
 import { mapGetters, mapMutations } from 'vuex'
 import { useToast, TYPE } from 'vue-toastification'
-import { useEthers } from 'vue-dapp'
+import { useEthers } from '../pinia-stores/ethers'
 
 import tldsJson from '../abi/tlds.json'
 import tldAbi from '../abi/PunkTLD.json'
 import erc20Abi from '../abi/Erc20.json'
 import Sidebar from '../components/Sidebar.vue'
 import WaitingToast from '../components/toasts/WaitingToast.vue'
 import useChainHelpers from '../hooks/useChainHelpers'
+import { storeToRefs } from 'pinia'
 
 export default {
 	name: 'Allowance',
@@ -171,7 +172,7 @@ export default {
 	},
 
 	setup() {
-		const { signer } = useEthers()
+		const { signer } = storeToRefs(useEthers())
 		const toast = useToast()
 
 		const { getFallbackProvider } = useChainHelpers()