Shopify / blockchain-components

Blockchain related React UI components for Shopify storefronts
https://blockchain.shopify.dev
MIT License
81 stars 19 forks source link

Chore: Remove Redux #196

Closed QuintonC closed 1 year ago

QuintonC commented 1 year ago

⚠️ Closes: https://github.com/Shopify/blockchain-components/issues/46 ⚠️ Closes: https://github.com/Shopify/blockchain-components/issues/194

ℹ️ What is the context for these changes?

While doing testing in headless storefronts I came across a unique issue that has brought up a desire to test out something.

The end goal is to be able to place the ConnectWalletProvider in the root.tsx of a Hydrogen storefront, make use of useConnectWallet inside of the Layout.tsx file and when a wallet is connected (i.e. use onConnect callbacks), perform a POST request to store the wallet data inside of the storefront session.

This will ensure that the session stays in sync with our storage of the connected wallet and also allow us to access wallet data across the entire storefront, resulting in the possibility to gate any subject on a headless storefront.

With Redux, doing this results in an error of the useConnectWallet hook being used outside of the context of a Redux provider. We need to be able to read this data and persist it on the server side (if it is available) in order to create an efficient gating implementation with Hydrogen.

Some side effects of this (aside from a rather large amount of code being changed), is that the package should be smaller since Zustand is much smaller than Redux.

Additionally, something of note is that the callback provided to useConnectWallet for onConnect will run earlier than it previously did. It previously waited for fetchEns and fetchDelegations to resolve before running the callback. Now, the provided function runs immediately when an activeWallet has been set from undefined to a defined Wallet type.

🎩 How can this be tophatted?

This can be tophatted by using the examples in the repository or by using the playground. Either of the two are suitable for testing the changes in this pull request.

✅ Checklist

QuintonC commented 1 year ago

/snapit

github-actions[bot] commented 1 year ago

🫰✨ Thanks @QuintonC! Your snapshots have been published to npm.

Test the snapshots by updating your package.json with the newly published versions:

yarn add @shopify/blockchain-components@0.0.0-snapshot-20230522225857
yarn add @shopify/connect-wallet@0.0.0-snapshot-20230522225857
yarn add @shopify/gate-context-client@0.0.0-snapshot-20230522225857
yarn add @shopify/tokengate@0.0.0-snapshot-20230522225857
QuintonC commented 1 year ago

/snapit

github-actions[bot] commented 1 year ago

🫰✨ Thanks @QuintonC! Your snapshots have been published to npm.

Test the snapshots by updating your package.json with the newly published versions:

yarn add @shopify/blockchain-components@0.0.0-snapshot-20230523213323
yarn add @shopify/connect-wallet@0.0.0-snapshot-20230523213323
yarn add @shopify/gate-context-client@0.0.0-snapshot-20230523213323
yarn add @shopify/tokengate@0.0.0-snapshot-20230523213323
QuintonC commented 1 year ago

Rebased on main to include the most recent changes (CODEOWNERS update) and to satisfy a merge requirement.

QuintonC commented 1 year ago

Amazing work! I tophatted both in mobile and in desktop, deleting the cookies and localstorage, and it all worked as expected 🚀

Thank you so much! 🙌