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

feat: prevent adding unsupported hooks for your wallet #5020

Merged
merged 8 commits into from
Oct 28, 2024

Conversation

fairlighteth
Copy link
Contributor

Summary

  • Prevents the user from being able to add unsupported hooks for their current connected wallet
  • Visually indicates which hooks are not compatible
  • Sorts the hooks list automatically by supported first -> then unsupported
  • Hooks without specific support defined (n/a) are considered 'compatible'

EOA connected:
Screenshot 2024-10-22 at 16 52 30

Safe connected:

Screen.Recording.2024-10-22.at.16.48.46.mov

Copy link

vercel bot commented Oct 22, 2024

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Updated (UTC)
cosmos ✅ Ready (Inspect) Visit Preview Oct 28, 2024 2:21pm
cowfi ✅ Ready (Inspect) Visit Preview Oct 28, 2024 2:21pm
explorer-dev ✅ Ready (Inspect) Visit Preview Oct 28, 2024 2:21pm
swap-dev ✅ Ready (Inspect) Visit Preview Oct 28, 2024 2:21pm
widget-configurator ✅ Ready (Inspect) Visit Preview Oct 28, 2024 2:21pm

const { name, image, descriptionShort } = dapp

const isCompatible =
Copy link
Collaborator

Choose a reason for hiding this comment

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

The code is duplicated in HookListItem component, I suggest to move it in a util function

<HookListItem
key={isHookDappIframe(dapp) ? dapp.url : dapp.name}
dapp={dapp}
onRemove={isAllHooksTab ? undefined : () => removeCustomHookDapp(dapp as HookDappIframe)}
walletType={
Copy link
Collaborator

Choose a reason for hiding this comment

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

walletType={walletType}

const isCompatible = (dapp: HookDapp) =>
!dapp.conditions?.walletCompatibility || dapp.conditions.walletCompatibility.includes(walletType)
return filteredDapps.sort((a, b) => (isCompatible(a) === isCompatible(b) ? 0 : isCompatible(a) ? -1 : 1))
}, [filteredDapps, isSmartContractWallet])
Copy link
Collaborator

Choose a reason for hiding this comment

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

walletType is not present in useMemo() deps

Copy link
Collaborator

Choose a reason for hiding this comment

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

And isSmartContractWallet is not needed there

Copy link

@elena-zh elena-zh left a comment

Choose a reason for hiding this comment

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

Hey @fairlighteth , great, thank you!
However, in this PR it is impossible to add a custom hook even if a wallet type is allowed for it.
impossible to add

Please see #4910 : you can find there instructions how to get a custom hook link.

@fairlighteth
Copy link
Contributor Author

fairlighteth commented Oct 23, 2024

@elena-zh address your comment, should work as expected now:
Screenshot 2024-10-23 at 16 13 49
Screenshot 2024-10-23 at 16 13 37
Screenshot 2024-10-23 at 16 12 47

When added with EOA, but then switched to a Safe:
Screenshot 2024-10-23 at 16 19 34

@fairlighteth
Copy link
Contributor Author

@shoom3301 addressed your comments and did some refactoring in general.

Copy link

@elena-zh elena-zh left a comment

Choose a reason for hiding this comment

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

Works now, thank you!

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants