Replace web3-react with wagmi and add seif, tailwind and compass wallet connectors #1239

tiagofilipenunes · 2024-05-29T12:34:58Z

fix #1203
fix #545
fix #492
fix #1208
close #1220 (@solana/web3.js no longer needed)

Done

Replace web3-react by wagmi
Improve wallet connect error handling according to EIP-1993 and add back button on error to try connecting again
Hide gnosis safe if not in iframe, as it only connected with iframe
Move GTM and getConnector functionality to the wagmi library. Available GTM events for all wallets:
- Auto-connection and auto-disconnection (through the wallet interface)
- Manual connection and manual disconnection
- Account change
Update tanstack-query from v4 to v5 (migration guide) and keep the same behaviour
- Replace isLoading with isPending (docs)
- Replace cachetime with gcTime (docs)
- Change mutation and query input to object (docs)
- Remove onError callbacks that were outputting errors to console.error. Instead output errors via QueryCache if there is an error and query.meta.errorMessage is defined. Same error output as before is shown (docs)
Add placeholder wallets
- Add Seif Wallet
- Add Tailwind Wallet
- Add Compass Wallet
Add detection for injected EIP-6963 providers
- If expected default providers are not detected show a placeholder for them in the list and display "Wallet not installed" error on connect.
- If an expected default provider is detected, then remove their placeholder and instead show the injected provider
- If an injected provider that is not part of the default list is detected, add them to the list as well to let the user choose them
Tenderly on Sei now supported with tenderly faucet config moved to network config
Coinbase Wallet improvements
- Wallet now works locally
- When it is not installed, user is prompted to use the extension-free smart wallet option
Metamask wallet: when it is not installed, the user is shown a modal with a link to download the desktop or mobile version
'build-essential' package was not in the playground docker used in the e2e workflow so it is now installed before dependencies are. It's required as make and other C/C++ libraries were not available and were required.

Note

All wallets apart from Seif work locally. Seif only injects its provider on safe environments, so please always use the preview link to test it.

cloudflare-workers-and-pages · 2024-05-29T12:35:55Z

Deploying carbon-app-sei with Cloudflare Pages

Latest commit:	`f38be59`
Status:	✅ Deploy successful!
Preview URL:	https://a01392fe.carbon-app-sei.pages.dev
Branch Preview URL:	https://add-sei-wallets.carbon-app-sei.pages.dev

View logs

cloudflare-workers-and-pages · 2024-05-29T12:35:59Z

Deploying carbon-app with Cloudflare Pages

Latest commit:	`f38be59`
Status:	✅ Deploy successful!
Preview URL:	https://8147f917.carbon-app-csq.pages.dev
Branch Preview URL:	https://add-sei-wallets.carbon-app-csq.pages.dev

View logs

…compass wallets

… error from Tailwind Wallet

…to metamask website

src/libs/web3/noconnector.ts

src/libs/web3/web3.connectors.ts

src/libs/web3/web3.utils.ts

src/libs/web3/noconnector.ts

src/libs/web3/web3.connectors.ts

ashachaf · 2024-06-02T07:29:01Z

compass wallet connection issue
flow:
make sure your compass wallet is locked
visit sei.carbondefi.xyz
click to connect compass wallet
you would see the unlock screen of compass wallet
following unlocking, you see the app pending screen
actual:
you would need to close the wallet connect popup on the app and try again for the flow to work
expected:
following the unlock, to force the connect popup to show up on the compass wallet
compass wallet connection flow
flow:
click to connect compass wallet
see the connect popup on the wallet
reject connection
actual: wallet connect popup on the app still waiting for response
expected: app identify the user action and indicate in the app. (either by closing the wallet connect popup or displaying an error)
trying to connect metamask

trying to connect tailwind

- Add SafeEIP1193 that receives an injectedConnector and tries to get a provider for it - Remove NoConnector class - Create connector factory - Improve wallet object retrieval based on wagmi implementation

- Sort connectors by name order in config - Switch network with useCallback

- Remove onError callbacks in useQuery as they're deprecated in v5 and move the custom error message to meta.message and throw error in QueryClient.QueryCache.onError if meta.message is defined - Replace isLoading with isPending. For queries, isLoading is now isPending and a new isLoading flag which is now isPending && isFetching. For mutation, isLoading is deprecated for isPending - Change useQuery input as it now only accepts objects with keys of queryKey, queryFn, etc

GrandSchtroumpf

Great PR !

package.json

src/components/common/WalletIcon.tsx

src/config/sei/common.ts

src/config/types.ts

src/libs/modals/modals/WalletModal/ModalWalletError.tsx

src/libs/wagmi/connectors.ts

src/libs/wagmi/useWagmiImposter.ts

src/libs/wagmi/useWagmiNetwork.tsx

src/libs/wagmi/wagmi.constants.ts

ashachaf · 2024-06-13T15:43:53Z

connecting coinbase wallet cause tailwind to open
Uploading Screen Recording 2024-06-13 at 18.42.45.mov…

…onstants

… initialized and duplicated connectors

- Replace web3 by wagmi on new files - Use isPending instead of isLoading

src/components/common/WalletIcon.tsx

src/libs/wagmi/useWagmiImposter.ts

…ack with useEffect

ashachaf · 2024-06-19T09:26:56Z

(optional) compass wallet doesnt trigger the connect dapp popup
flow:
click to connect compass wallet
see the "unlock" wallet popup and confirm it
expected:
see the connect dapp popup to conenct wallet
actual:
no wallet connect popup, and the app shows the loading animation waiting for user interaction on the wallet popup.

Add seif, tailwind and compass wallet connectors

6a6f3e8

tiagofilipenunes and others added 11 commits May 29, 2024 13:36

Adjust wallet icon width and height to 100%

5389446

Fix build issues

b7cbc9a

Refactor injected wallet check

359b46e

Add tailwind wallet svg logo

096f5fc

Add noConnector placeholder connector and use in tailwind, seif, and …

700cdaf

…compass wallets

Check injected wallet is not metamask for getInjectedProvider, remove…

5971637

… error from Tailwind Wallet

Check injected connector exists on window.ethereum. If not, redirect …

621cbdd

…to metamask website

Update tailwind logo

2fec028

Merge branch 'main' into add-sei-wallets

df93103

Remove eslint disable comment

9bc4ed3

Replace multicall3 address by the official deployment one

2b993ae

tiagofilipenunes marked this pull request as ready for review May 29, 2024 17:42

zavelevsky previously requested changes May 29, 2024

View reviewed changes

GrandSchtroumpf reviewed May 29, 2024

View reviewed changes

src/libs/web3/noconnector.ts Outdated Show resolved Hide resolved

src/libs/web3/noconnector.ts Outdated Show resolved Hide resolved

src/libs/web3/web3.connectors.ts Outdated Show resolved Hide resolved

tiagofilipenunes marked this pull request as draft May 31, 2024 16:47

tiagofilipenunes added 11 commits June 3, 2024 14:39

Update tailwind wallet connector

b92cd93

Rename selectableConnection to selectedConnection to avoid confusion

7d367d6

Changes to web3-react

45120c1

- Add SafeEIP1193 that receives an injectedConnector and tries to get a provider for it - Remove NoConnector class - Create connector factory - Improve wallet object retrieval based on wagmi implementation

Update type in web3.constants

18fb479

Fix config types

6e0caf0

Replace web3-react by wagmi

dd70409

Improve useWagmi connector use

61c9f69

- Sort connectors by name order in config - Switch network with useCallback

Fix GTM events for manual/auto connect/disconnect and swap wallet

f0f55e5

Remove walletConnect from Sei

d131323

Use async connect and disconnect to prevent race conditions

7d1729a

GrandSchtroumpf reviewed Jun 13, 2024

View reviewed changes

tiagofilipenunes and others added 11 commits June 14, 2024 14:35

Remove stream-browserify

f83c847

Use output tag

3b7a592

Remove SupportedChainId and remove EnumConnectionType

03fdb26

Change WalletIcon props

1d3b19f

Remove isImposter and pass imposterAccount

daad90d

Remove void from useEffect in wagmi lib

6f9af5a

Add comment to iFrame check for safe wallet

d308ece

Change getAccount to use hook instead and get chainId directly from c…

b7bdb30

…onstants

Return icon directly in walletIcon

7bb56df

Change utils config type

72f6f6b

[CI] Update Screenshots

5f553e7

ashachaf approved these changes Jun 16, 2024

View reviewed changes

tiagofilipenunes added 6 commits June 17, 2024 14:25

Add blockedConnectors to config and use rdns instead of name to check…

53a3ccb

… initialized and duplicated connectors

Add instructions to readme for selectedConnectors and blockedConnectors

82f609b

Fix typo in comment

92f0c8a

Fix connection on error clean-up and attempt to disconnect connector

3bebc9d

Merge branch 'main' into add-sei-wallets

8e62723

Fix merge changes:

9989a48

- Replace web3 by wagmi on new files - Use isPending instead of isLoading

GrandSchtroumpf approved these changes Jun 18, 2024

View reviewed changes

src/components/common/WalletIcon.tsx Outdated Show resolved Hide resolved

src/libs/wagmi/useWagmiImposter.ts Outdated Show resolved Hide resolved

tiagofilipenunes and others added 6 commits June 18, 2024 09:09

Set lazy loading and change alt text

4d690a1

Remove unnecessary useMemo and useCallback, replace imposter useCallb…

59df230

…ack with useEffect

Merge branch 'main' into add-sei-wallets

f1224bb

[CI] Update Screenshots

dc5d87d

Merge branch 'main' into add-sei-wallets

ccf265d

[CI] Update Screenshots

f38be59

tiagofilipenunes merged commit 88b1e5a into main Jun 19, 2024
2 checks passed

tiagofilipenunes deleted the add-sei-wallets branch June 19, 2024 10:05

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Replace web3-react with wagmi and add seif, tailwind and compass wallet connectors #1239

Replace web3-react with wagmi and add seif, tailwind and compass wallet connectors #1239

tiagofilipenunes commented May 29, 2024 •

edited

Loading

cloudflare-workers-and-pages bot commented May 29, 2024 •

edited

Loading

cloudflare-workers-and-pages bot commented May 29, 2024 •

edited

Loading

ashachaf commented Jun 2, 2024 •

edited by tiagofilipenunes

Loading

GrandSchtroumpf left a comment

ashachaf commented Jun 13, 2024 •

edited by tiagofilipenunes

Loading

ashachaf commented Jun 19, 2024 •

edited by tiagofilipenunes

Loading

Replace web3-react with wagmi and add seif, tailwind and compass wallet connectors #1239

Replace web3-react with wagmi and add seif, tailwind and compass wallet connectors #1239

Conversation

tiagofilipenunes commented May 29, 2024 • edited Loading

Done

Note

cloudflare-workers-and-pages bot commented May 29, 2024 • edited Loading

Deploying carbon-app-sei with Cloudflare Pages

cloudflare-workers-and-pages bot commented May 29, 2024 • edited Loading

Deploying carbon-app with Cloudflare Pages

ashachaf commented Jun 2, 2024 • edited by tiagofilipenunes Loading

GrandSchtroumpf left a comment

Choose a reason for hiding this comment

ashachaf commented Jun 13, 2024 • edited by tiagofilipenunes Loading

ashachaf commented Jun 19, 2024 • edited by tiagofilipenunes Loading

tiagofilipenunes commented May 29, 2024 •

edited

Loading

cloudflare-workers-and-pages bot commented May 29, 2024 •

edited

Loading

cloudflare-workers-and-pages bot commented May 29, 2024 •

edited

Loading

ashachaf commented Jun 2, 2024 •

edited by tiagofilipenunes

Loading

ashachaf commented Jun 13, 2024 •

edited by tiagofilipenunes

Loading

ashachaf commented Jun 19, 2024 •

edited by tiagofilipenunes

Loading