Add getSigner() method to wallet composable

src/components/Subscription.vue

@@ -106,7 +106,7 @@ import Loader from "@/components/Loader.vue"
 import { useWallet } from "@/composables/wallet"
 import { useInstanceInfo } from "@/store/instance"
 import { useCurrentUser } from "@/store/user"
-import { ethereumAddressMatch, getWeb3Provider } from "@/utils/ethereum"
+import { ethereumAddressMatch } from "@/utils/ethereum"
 
 /* eslint-disable-next-line no-undef */
 const props = defineProps<{
@@ -136,7 +136,7 @@ const recipient = new ProfileWrapper(props.profile)
 const recipientEthereumAddress = recipient.getVerifiedEthereumAddress()
 const sender = $ref<ProfileWrapper>(new ProfileWrapper(currentUser || guest))
 let senderEthereumAddress = $ref<string | null>(sender.getVerifiedEthereumAddress())
-let { walletAddress, walletError } = $(useWallet())
+let { walletAddress, walletError, getSigner } = $(useWallet())
 let isLoading = $ref(false)
 let subscriptionConfigured = $ref<boolean | null>(null)
 let subscription = $ref<Subscription | null>(null)
@@ -189,7 +189,7 @@ async function checkSubscription() {
     return
   }
   senderEthereumAddress = walletAddress.toLowerCase()
-  const signer = getWeb3Provider().getSigner()
+  const signer = getSigner()
   isLoading = true
   subscription = await getSubscriptionInfo(
     instance.blockchain_contract_address,
@@ -237,7 +237,7 @@ async function refreshTokenBalance() {
   if (!subscription) {
     return
   }
-  const signer = getWeb3Provider().getSigner()
+  const signer = getSigner()
   tokenBalance = await getTokenBalance(signer, subscription.tokenAddress)
 }
 
@@ -250,7 +250,7 @@ async function onMakeSubscriptionPayment() {
   ) {
     return
   }
-  const signer = getWeb3Provider().getSigner()
+  const signer = getSigner()
   const amount = subscription.pricePerMonthInt.mul(paymentDuration)
   isLoading = true
   let transaction
@@ -293,7 +293,7 @@ async function onCancelSubscription() {
   ) {
     return
   }
-  const signer = getWeb3Provider().getSigner()
+  const signer = getSigner()
   isLoading = true
   let transaction
   try {

src/components/SubscriptionSetup.vue

@@ -50,7 +50,7 @@ import {
 import { useWallet } from "@/composables/wallet"
 import { useInstanceInfo } from "@/store/instance"
 import { useCurrentUser } from "@/store/user"
-import { ethereumAddressMatch, getWeb3Provider } from "@/utils/ethereum"
+import { ethereumAddressMatch } from "@/utils/ethereum"
 
 /* eslint-disable-next-line no-undef */
 const props = defineProps<{
@@ -59,7 +59,7 @@ const props = defineProps<{
 
 const { currentUser, ensureAuthToken } = $(useCurrentUser())
 const { instance } = $(useInstanceInfo())
-const { connectWallet: connectEthereumWallet } = useWallet()
+const { connectWallet: connectEthereumWallet, getSigner } = useWallet()
 const profileEthereumAddress = getVerifiedEthereumAddress(props.profile)
 let { walletAddress, walletError } = $(useWallet())
 let subscriptionConfigured = $ref<boolean | null>(null)
@@ -113,7 +113,7 @@ async function checkSubscription() {
     walletError = "Incorrect wallet address"
     return
   }
-  const signer = getWeb3Provider().getSigner()
+  const signer = getSigner()
   subscription = await getSubscriptionInfo(
     instance.blockchain_contract_address,
     signer,
@@ -143,7 +143,7 @@ async function onConfigureSubscription() {
     return
   }
   // Subscription configuration tx can be sent from any address
-  const signer = getWeb3Provider().getSigner()
+  const signer = getSigner()
   const authToken = ensureAuthToken()
   const signature = await getSubscriptionAuthorization(authToken)
   const transaction = await configureSubscription(
@@ -169,7 +169,7 @@ async function onCheckSubsciptionState() {
   ) {
     return
   }
-  const signer = getWeb3Provider().getSigner()
+  const signer = getSigner()
   subscriptionState = await getSubscriptionState(
     instance.blockchain_contract_address,
     signer,
@@ -185,7 +185,7 @@ async function onWithdrawReceived() {
   ) {
     return
   }
-  const signer = getWeb3Provider().getSigner()
+  const signer = getSigner()
   await withdrawReceived(
     instance.blockchain_contract_address,
     signer,

src/composables/wallet.ts

@@ -1,3 +1,4 @@
+import { Signer } from "ethers"
 import { ref } from "vue"
 
 import { useInstanceInfo } from "@/store/instance"
@@ -20,20 +21,21 @@ async function connectWallet(): Promise<void> {
   if (!instance.value?.blockchain_id) {
     throw new Error("blockchain integration disabled")
   }
-  let web3Provider
+  let provider
   try {
-    web3Provider = getWeb3Provider()
+    provider = getWeb3Provider()
   } catch (error) {
     walletError.value = "Wallet not found"
     return
   }
-  const signer = await getWallet(web3Provider)
+  const signer = await getWallet(provider)
   if (!signer) {
     walletError.value = "Wallet not connected"
     return
   }
   walletAddress.value = await signer.getAddress()
-  const walletProvider = web3Provider.provider as any
+
+  const walletProvider = provider.provider as any
   walletProvider.on("chainChanged", (chainId: string) => {
     disconnectWallet()
   })
@@ -45,16 +47,23 @@ async function connectWallet(): Promise<void> {
   })
 
   const instanceChainId = parseCAIP2_chainId(instance.value.blockchain_id)
-  const walletChainId = await web3Provider.send("eth_chainId", [])
+  const walletChainId = await provider.send("eth_chainId", [])
   if (walletChainId !== instanceChainId) {
     walletError.value = "Incorrect network"
   }
 }
 
+// Can't use reactive signer object because it doesn't work with ethers.js
+function getSigner(): Signer {
+  const provider = getWeb3Provider()
+  return provider.getSigner()
+}
+
 export function useWallet() {
   return {
     connectWallet,
     walletAddress,
     walletError,
+    getSigner,
   }
 }