Merge pull request #2 from johnson86tw/refactor/use-ethers-store

Another approach to migrate vue-dapp
punk-domains-2 · May 6, 2024 · d7a0a63 · d7a0a63
2 parents b7a558e + e6dea05
commit d7a0a63
Show file tree

Hide file tree

Showing 14 changed files with 36 additions and 32 deletions.
diff --git a/src/components/MyDomain.vue b/src/components/MyDomain.vue
@@ -185,7 +185,7 @@ export default {
 	},
 
 	setup() {
-		const { address, signer } = storeToRefs(useEthers())
+		const { address, signer } = useEthers()
 		const toast = useToast()
 
 		return { address, signer, toast }

diff --git a/src/components/MyTlds.vue b/src/components/MyTlds.vue
@@ -77,7 +77,7 @@ export default {
 	},
 
 	setup() {
-		const { address, isConnected, signer } = storeToRefs(useEthers())
+		const { address, isConnected, signer } = useEthers()
 
 		return { address, isConnected, signer }
 	},

diff --git a/src/components/SendTokensComponent.vue b/src/components/SendTokensComponent.vue
@@ -479,7 +479,7 @@ export default {
 	},
 
 	setup() {
-		const { address, balance, signer } = storeToRefs(useEthers())
+		const { address, balance, signer } = useEthers()
 		const toast = useToast()
 		const { getFallbackProvider } = useChainHelpers()
 

diff --git a/src/components/domainEdit/EditOtherData.vue b/src/components/domainEdit/EditOtherData.vue
@@ -243,7 +243,7 @@ export default {
 	},
 
 	setup() {
-		const { address, signer } = storeToRefs(useEthers())
+		const { address, signer } = useEthers()
 		const toast = useToast()
 
 		return { address, signer, toast }

diff --git a/src/components/domainEdit/EditPfp.vue b/src/components/domainEdit/EditPfp.vue
@@ -211,7 +211,7 @@ export default {
 	},
 
 	setup() {
-		const { address, signer } = storeToRefs(useEthers())
+		const { address, signer } = useEthers()
 		const toast = useToast()
 
 		return { address, shortenAddress, signer, toast }

diff --git a/src/components/domainEdit/EditUrl.vue b/src/components/domainEdit/EditUrl.vue
@@ -152,7 +152,7 @@ export default {
 	},
 
 	setup() {
-		const { address, signer } = storeToRefs(useEthers())
+		const { address, signer } = useEthers()
 		const toast = useToast()
 
 		return { address, signer, toast }

diff --git a/src/pinia-stores/ethers.ts b/src/pinia-stores/ethers.ts
@@ -1,28 +1,14 @@
 import { defineStore } from 'pinia'
 import { ethers } from 'ethers'
-import { markRaw } from 'vue'
+import { computed, markRaw } from 'vue'
 import { useVueDapp } from '@vue-dapp/core'
 
-export const useEthers = defineStore('Ethers', {
+export const useEthersStore = defineStore('ethers', {
 	state: () => ({
 		provider: null,
 		signer: null,
 		balance: 0n,
 	}),
-	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))
@@ -43,3 +29,21 @@ export const useEthers = defineStore('Ethers', {
 		},
 	},
 })
+
+export function useEthers() {
+	const ethersStore = useEthersStore()
+	const { address } = useVueDapp()
+
+	const checksummedAddress = address.value ? ethers.utils.getAddress(address.value) : null
+
+	return {
+		...useVueDapp(),
+		provider: computed(() => ethersStore.provider),
+		signer: computed(() => ethersStore.signer),
+		address: computed(() => checksummedAddress),
+		balance: computed(() => ethersStore.balance),
+		setWallet: ethersStore.setWallet,
+		resetWallet: ethersStore.resetWallet,
+		fetchBalance: ethersStore.fetchBalance,
+	}
+}
diff --git a/src/store/modules/user.ts b/src/store/modules/user.ts
@@ -124,7 +124,7 @@ export default {
 
 		setUserData(state) {
 			const { address } = useVueDapp()
-			const { balance } = storeToRefs(useEthers())
+			const { balance } = useEthers()
 
 			state.userAddress = address.value
 			state.userShortAddress = shortenAddress(address.value)
@@ -200,7 +200,7 @@ export default {
 	actions: {
 		async checkIfAdmin({ commit, rootGetters }) {
 			const { address } = useVueDapp()
-			const { signer } = storeToRefs(useEthers())
+			const { signer } = useEthers()
 
 			if (address.value) {
 				// check if user has any admin privileges
@@ -254,7 +254,7 @@ export default {
 			let selectedNameKey = null
 
 			const { address, chainId } = useVueDapp()
-			const { signer } = storeToRefs(useEthers())
+			const { signer } = useEthers()
 
 			if (address.value) {
 				dispatch('fetchCanUserBuy')
@@ -338,7 +338,7 @@ export default {
 
 		// fetch selectedName data (image etc.)
 		async fetchSelectedNameData({ commit, state, rootGetters }) {
-			const { signer } = storeToRefs(useEthers())
+			const { signer } = useEthers()
 
 			if (state.selectedName) {
 				const nameArr = state.selectedName.split('.')

diff --git a/src/views/Admin.vue b/src/views/Admin.vue
@@ -995,7 +995,7 @@ export default {
 	},
 
 	setup() {
-		const { address, isConnected, signer } = storeToRefs(useEthers())
+		const { address, isConnected, signer } = useEthers()
 		const toast = useToast()
 		const { buyNotValid } = useDomainHelpers()
 

diff --git a/src/views/Allowance.vue b/src/views/Allowance.vue
@@ -172,7 +172,7 @@ export default {
 	},
 
 	setup() {
-		const { signer } = storeToRefs(useEthers())
+		const { signer } = useEthers()
 		const toast = useToast()
 
 		const { getFallbackProvider } = useChainHelpers()

diff --git a/src/views/DomainDetails.vue b/src/views/DomainDetails.vue
@@ -212,7 +212,7 @@ export default {
 	},
 
 	setup() {
-		const { isConnected, signer } = storeToRefs(useEthers())
+		const { isConnected, signer } = useEthers()
 		const toast = useToast()
 		const { getChainName, getFallbackProvider } = useChainHelpers()
 

diff --git a/src/views/Home.vue b/src/views/Home.vue
@@ -372,7 +372,7 @@ export default {
 
 	setup() {
 		const { open } = useVueDappModal()
-		const { address, chainId, isConnected, signer } = storeToRefs(useEthers())
+		const { address, chainId, isConnected, signer } = useEthers()
 		const toast = useToast()
 		const { buyNotValid } = useDomainHelpers()
 		const { switchNetwork } = useChainHelpers()

diff --git a/src/views/Profile.vue b/src/views/Profile.vue
@@ -211,7 +211,7 @@ export default {
 	},
 
 	setup() {
-		const { address, isConnected, signer } = storeToRefs(useEthers())
+		const { address, isConnected, signer } = useEthers()
 		const toast = useToast()
 		const { getFallbackProvider } = useChainHelpers()
 

diff --git a/src/views/TransferDomain.vue b/src/views/TransferDomain.vue
@@ -198,7 +198,7 @@ export default {
 	},
 
 	setup() {
-		const { address, chainId, signer } = storeToRefs(useEthers())
+		const { address, chainId, signer } = useEthers()
 		const toast = useToast()
 		const { getFallbackProvider } = useChainHelpers()