Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Fix] wagmi switch chain claim error #41

Merged
merged 5 commits into from
Dec 18, 2024
Merged
Show file tree
Hide file tree
Changes from 3 commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@hyperplay/quests-ui",
"version": "0.1.7",
"version": "0.1.8",
"description": "",
"main": "index.js",
"scripts": {
Expand Down
25 changes: 22 additions & 3 deletions src/components/RewardWrapper/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,13 @@ import { useMutation, useQueryClient } from '@tanstack/react-query'
import { useEffect, useState } from 'react'
import { useTranslation } from 'react-i18next'
import { createPublicClient, http } from 'viem'
import { useAccount, useConnect, useSwitchChain, useWriteContract } from 'wagmi'
import {
useAccount,
useConfig,
useConnect,
useSwitchChain,
useWriteContract
} from 'wagmi'
import { injected } from 'wagmi/connectors'
import { ConfirmClaimModal } from '../ConfirmClaimModal'
import styles from './index.module.scss'
Expand Down Expand Up @@ -58,6 +64,7 @@ export function RewardWrapper({
const { t: tOriginal } = useTranslation()
const account = useAccount()
const { connectAsync } = useConnect()
const config = useConfig()

// Context
const {
Expand Down Expand Up @@ -214,15 +221,27 @@ export function RewardWrapper({

let address: `0x${string}` | undefined

if (account.address) {
/**
* handles https://github.com/HyperPlay-Gaming/product-management/issues/801
* Sometimes wagmi does not establish a connection but useAccount returns the address.
* We need to check that the switch chain method exists before proceeding with claiming.
*/
let connectionHasSwitchChain = false
if (config.state.current) {
const currentConnection = config.state.connections.get(
config.state.current
)
connectionHasSwitchChain = !!currentConnection?.connector.switchChain
}

if (account.address && connectionHasSwitchChain) {
address = account.address
Comment on lines +228 to 238
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

looking at their code, it looks like switchChain is not supported by all the connectors https://github.com/wevm/wagmi/blob/main/packages/core/src/connectors/createConnector.ts#L64

if that's the case, then we'd never enter this if clause

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I believe it would always throw on line 249 then since we need switch chain to be present to proceed.

await switchChainAsync({ chainId: reward.chain_id })

If the connector didn't have switch chain, then another connect call would be performed to try and connect to the injected provider which does have switchChain. This is our intended UX for now I believe.

} else {
onShowMetaMaskPopup?.()
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't think this is needed, but didn't want to slow down this PR. If MM ext sends a notification, the appropriate window will already be shown in the UI.

logInfo('connecting to wallet...')
const { accounts } = await connectAsync({ connector: injected() })
address = accounts[0]
}

if (!address) {
throw Error('no address found when trying to mint')
}
Expand Down
Loading