feat: walletconnect wallet #1733

GMSteuart · 2022-05-10T21:49:30Z

Description

Integrates WalletConnect wallet

UPDATE: Moved the provider object from hdwallet over to web since there is a scenario where the connect modal will hang indefinitely and there is no graceful way to automatically exit on behalf of the user. This indefinite situation occurs after the QR modal pops up and the user rejects the session. The reason this occurs is because the connector at the time is only listening for connect events and the only event emitted is the disconnect event; alas, the connector enters a state of waiting with no apparent end. The code of concern can be found in WalletConnect's web3-provider.

Notice

Have you followed the guidelines in our Contributing guide?
Have you checked to ensure there aren't other open Pull Requests for the same update/change?

Pull Request Type

🐛 Bug fix (Non-breaking Change: Fixes an issue)
🛠️ Chore (Non-breaking Change: Doc updates, pkg upgrades, typos, etc..)
💅 New Feature (Breaking/Non-breaking Change)

Issue (if applicable)

Closes #1686

Risk

UX exposure to WalletConnect bugs

Testing

Open a terminal for web and another for hdwallet.

# /hdwallet
yarn
yarn build
cd packages/hdwallet-walletconnect
yarn link
# hdwallet-walletconnect tests
 yarn test packages/hdwallet-walletconnect/src/walletconnect.test.ts
#  hdwallet-walletconnect integration tests
cd integration
yarn test src/walletconnect.test.ts

# /web
# clone this branch 
gh pr checkout 1733
yarn clean
yarn link "@shapeshiftoss/hdwallet-walletconnect"
# update package.json "@shapeshiftoss/hdwallet-walletconnect": "^1.21.2"
# to use filepath "@shapeshiftoss/hdwallet-walletconnect": "../hdwallet/packages/hdwallet-walletconnect"
# the above assumes your directory structure is setup like:
# .
# ├── hdwallet
# ├── lib
# └── web
yarn
open https://test.walletconnect.org/
yarn dev

Sign in with some other wallet
Go to flag settings
Turn on WalletConnectWallet flag and save
Disconnect from current wallet
Go through wallet sign in process but select WalletConnect this time around

Screenshots (if applicable)

@0xdef1cafe copy on pairing modal will need to be updated since a QR code pops up:

On test.walletconnect.org

And lastly on test.walletconnect.org

GMSteuart · 2022-05-10T21:51:09Z

@0xdef1cafe will need product review for user flow when clicking WalletConnect option

…ure-walletconnect-wallet

gomesalexandre · 2022-05-19T16:33:28Z

@GMSteuart I suppose this needs linking with shapeshift/hdwallet#529 for now, could you add some instructions for local testing until hdwallet-walletconnect is published?

gomesalexandre · 2022-05-19T16:35:40Z

Also, seems like the diff touches many files/lines that shouldn't be modified by this PR, rebase/merge might help 👀

GMSteuart · 2022-05-19T16:37:10Z

@GMSteuart I suppose this needs linking with shapeshift/hdwallet#529 for now, could you add some instructions for local testing until hdwallet-walletconnect is published?

Ya, I can add local testing steps, one of those will have to be running the associated hdwallet-walletconnect package that isn't published yet.

GMSteuart · 2022-05-19T16:41:54Z

Also, seems like the diff touches many files/lines that shouldn't be modified by this PR, rebase/merge might help 👀

Oh fun. lol. Glad I'm finding out earlier in the day rather than later. Thanks for pointing that out. 🙂

gomesalexandre · 2022-05-19T16:42:34Z

@GMSteuart I suppose this needs linking with shapeshift/hdwallet#529 for now, could you add some instructions for local testing until hdwallet-walletconnect is published?

Ya, I can add local testing steps, one of those will have to be running the associated hdwallet-walletconnect package that isn't published yet.

Built, linked, and ran web off the hdwallet PR branch but I'm seeing this, so I'm wondering whether or not there are more steps or something I missed:

package.json

…ure-walletconnect-wallet

sababa-2019 · 2022-06-01T19:23:25Z

bumping this, any updates here @GMSteuart ser?

…ure-walletconnect-wallet

src/components/Modals/Send/views/Details.tsx

gomesalexandre

Trust Wallet (derived ETH Account with ETH only):

Accounts/Account/Asset pages are properly working and showing the wallet ETH amount
Portfolio balance is properly shown
Tried an ETH self-send which properly went through, however, I'm getting a "User rejected the transaction" toast
Can't see any Tx history

MetaMask Wallet (derived ETH Account with ETH and ERC-20s):

Accounts/Account/Asset pages are properly working and showing the wallet ETH and ERC-20s amount
Portfolio balance is properly shown
Tried an ETH self-send which properly went through, however, I'm getting a "User rejected the transaction" toast
Can't see any Tx history

Keplr Mobile

Keplr also supports WalletConnect, and can be used to connect to e.g osmosis.zone. It isn't supported at all as the app is effectively in full skeleton mode for dashboard and has no loaded accounts in state.
Do we want to handle the case of Keplr Mobile (and Cosmos/Osmosis accounts derivation in WalletConnect) not being supported, by having some UX for it?

src/components/Modals/Send/views/Details.tsx

src/components/Trade/TradeInput.tsx

pastaghost · 2022-07-18T19:06:31Z

Keplr also supports WalletConnect, and can be used to connect to e.g osmosis.zone. It isn't supported at all as the app is effectively in full skeleton mode for dashboard and has no loaded accounts in state.
Do we want to handle the case of Keplr Mobile (and Cosmos/Osmosis accounts derivation in WalletConnect) not being supported, by having some UX for it?

This is because WalletConnect 1.0 (the version we've implemented in HDWallet) is ETH-only. WalletConnect 2.0 has multi-chain support but is still in beta. I'm currently looking to see if it is possible to either detect the user wallet connected on the other side of the WalletConnect bridge or to limit the set of wallets supported by the application via WalletConnect.

src/components/Modals/Send/views/Details.tsx

…ure-walletconnect-wallet

gomesalexandre

Tested it again and managed to get connect, disconnect, and Txs (swaps/sends) working. Note that I didn't continue with actually broadcasting Txs and rejected the Tx confirm popup.

Only thing I've noticed is a little styling issue, we're missing right padding on the WalletConnect option but we can tackle it as a smallish follow-up. LGTM otherwise!

Approving this one even though this is still waiting for a product copy update, I'll re-stamp after. Logic looks good with the latest commits, good job ser!

🍬

…ure-walletconnect-wallet

pastaghost · 2022-07-19T22:12:53Z

Added copy to WalletConnect option in SelectModal.tsx
Constrained width of wallet option icons
Tested WalletConnect option text in all three possible configurations (no wallet active, walletConnect active, some other wallet active)

…ure-walletconnect-wallet

gomesalexandre

Tested again with the latest changes, both the "Ethereum only" copy and WalletConnect option button look good.

🍬

0xdef1cafe · 2022-07-20T21:11:15Z

merging as previously approved by @gomesalexandre and the most recent commit was stylistic/trivial

* feat: init walletconnect integration * chore: lint * fix: wallet init * fix: wallet init * fix: add imagedelivery to headers * chore: use package version * chore: show/hide WalletConnect based on flag * fix: headers for macos/ios safari * fix: show feature flag nav item for alt host * perf: add env var for better local development * chore: remove unecessary code * chore: remove package dep * chore: add hdwallet-walletconnect alpha dependency * fix: add walletconnect csp entries * fix: utilize feature flag * fix: add mobileEnabled field to WalletConnect config * chore: run linter * fix: remove usage of process.env * chore: run linter * fix: apply code review suggestions * fix: use structured logging * fix: apply code review suggestions * fix: update csp for wallet logos * chore: add flag to sample.env * chore: yarn.lock * docs: fleek info * fix: img source csp * chore: revert readme to develop * fix: image fetched by walletconnect * feat: WalletConnect rejection * chore: lint * chore: lint * chore: update hdwallet-walletconnect dependency * chore: upgrade hdwallet-walletconnect * fix: set wc connect modal error to null on init * chore: run linter * fix: walletconnect refresh bug * chore: upgrade hdwallet dependency * chore: bump hdwallet dependencies * fix: csp for walletconnect desktop logos * chore: bump hdwallet package versions * fix: disable trade max with walletconnect * fix: disable sendmax with walletconnect * chore: run linter * chore: update hdwallet dependencies * chore: run linter * fix: hide fiat sendMax with WalletConnect * fix: stylistic changes * fix: typo * feat: add copy to walletconnect option in selectmodal * fix: constrain icon width for selectmodal options * fix: update return value Co-authored-by: pastaghost <[email protected]> Co-authored-by: 0xdef1cafe <[email protected]>

* chore: update packages * chore: add new headers * feat: add new translations * feat: add fiat market data * feat: fetch fiat market data in app context * chore: blacklist large things from redux store * fix: more correct type defs and balance chart fixes * chore: fix headers comment * chore: consolidate to priceAtDate * chore: only upgrade market service package * chore: use same source of truth for mock test data as real data structure * fix: optimizations and bug fixes * fix: market data refetch * chore: rename booleans for readability * chore: tighter type def for setFiatMarketData * chore: freeze initial price history for safety * chore: uppercase const * chore: consistent market data selector naming * feat: view layer changes to support multi currency display * feat: add currency selection to settings modal * chore: add multi currency feature flag * feat: balance chart changes * chore: delete duplicate test with wrong file extension * chore: cache fee asset selector * Revert "chore: cache fee asset selector" This reverts commit dfcd3d0. * fix: revert chart loading behaviour * fix: default fiatType to USD * test: fix useLocaleFormatter test * chore: delete unnecessary locale renderers * chore: revert unnecessary changes to locale formatter * fix: improved number formatting * feat: currency format settings * fix: test case fixed * fix: improved input parsing * chore: fix typo * feat: walletconnect wallet (#1733) * feat: init walletconnect integration * chore: lint * fix: wallet init * fix: wallet init * fix: add imagedelivery to headers * chore: use package version * chore: show/hide WalletConnect based on flag * fix: headers for macos/ios safari * fix: show feature flag nav item for alt host * perf: add env var for better local development * chore: remove unecessary code * chore: remove package dep * chore: add hdwallet-walletconnect alpha dependency * fix: add walletconnect csp entries * fix: utilize feature flag * fix: add mobileEnabled field to WalletConnect config * chore: run linter * fix: remove usage of process.env * chore: run linter * fix: apply code review suggestions * fix: use structured logging * fix: apply code review suggestions * fix: update csp for wallet logos * chore: add flag to sample.env * chore: yarn.lock * docs: fleek info * fix: img source csp * chore: revert readme to develop * fix: image fetched by walletconnect * feat: WalletConnect rejection * chore: lint * chore: lint * chore: update hdwallet-walletconnect dependency * chore: upgrade hdwallet-walletconnect * fix: set wc connect modal error to null on init * chore: run linter * fix: walletconnect refresh bug * chore: upgrade hdwallet dependency * chore: bump hdwallet dependencies * fix: csp for walletconnect desktop logos * chore: bump hdwallet package versions * fix: disable trade max with walletconnect * fix: disable sendmax with walletconnect * chore: run linter * chore: update hdwallet dependencies * chore: run linter * fix: hide fiat sendMax with WalletConnect * fix: stylistic changes * fix: typo * feat: add copy to walletconnect option in selectmodal * fix: constrain icon width for selectmodal options * fix: update return value Co-authored-by: pastaghost <[email protected]> Co-authored-by: 0xdef1cafe <[email protected]> * chore(deps): bump terser from 4.8.0 to 4.8.1 (#2197) Bumps [terser](https://github.com/terser/terser) from 4.8.0 to 4.8.1. - [Release notes](https://github.com/terser/terser/releases) - [Changelog](https://github.com/terser/terser/blob/master/CHANGELOG.md) - [Commits](https://github.com/terser/terser/commits) --- updated-dependencies: - dependency-name: terser dependency-type: indirect ... Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * feat: dogecoin (#2185) * feat: dogecoin initial * add dogecoin * use p2pkh accountType for dgubs add dogecoin else if to handleSend :( add dogecoin case to handleSendMax :( :( * wrap doge plugin in a feature flag * pass chainId to utxoAccountParams * remove reference to dogecoin testnet * web clean up * fix: update old utility to new caip method * chore: add REACT_APP_FEATURE_DOGECOIN=true to sample.env * fix: update swapper logic to pass correct param * chore: version bump doge libs * fix: add dogecoin label to accounts page * fix: don't show tokens under dogecoin account Co-authored-by: 0xdef1cafe <[email protected]> Co-authored-by: Apotheosis <[email protected]> * fix: typo and lodash import * fix: conflict resolved * feat: keeping order of fiat currencies and currency formats * fix: applying suggested changes Co-authored-by: stackedQ <[email protected]> Co-authored-by: Grant Steuart <[email protected]> Co-authored-by: pastaghost <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Adam Samere <[email protected]> Co-authored-by: Apotheosis <[email protected]> Co-authored-by: reallybeard <[email protected]>

GMSteuart added 2 commits May 9, 2022 10:01

feat: init walletconnect integration

5d7f148

chore: lint

9c133e8

GMSteuart added 6 commits May 10, 2022 16:54

fix: wallet init

c5df372

fix: wallet init

f91861c

fix: add imagedelivery to headers

9362270

chore: use package version

8ea4876

Merge branch 'develop' of https://github.com/shapeshift/web into feat…

5ad447a

…ure-walletconnect-wallet

chore: show/hide WalletConnect based on flag

c2870f0

GMSteuart commented May 19, 2022

View reviewed changes

package.json Outdated Show resolved Hide resolved

GMSteuart added 7 commits May 19, 2022 13:59

Merge branch 'develop' of https://github.com/shapeshift/web into feat…

d7c0142

…ure-walletconnect-wallet

fix: headers for macos/ios safari

5f2cb3b

fix: show feature flag nav item for alt host

e2f10e9

perf: add env var for better local development

2ed80ba

chore: remove unecessary code

03fdaad

chore: remove package dep

b454f65

Merge branch 'develop' of https://github.com/shapeshift/web into feat…

83b725a

…ure-walletconnect-wallet

pastaghost added 2 commits June 2, 2022 14:30

chore: add hdwallet-walletconnect alpha dependency

b98b7ba

Merge branch 'develop' of https://github.com/shapeshift/web into feat…

91cf141

…ure-walletconnect-wallet

pastaghost marked this pull request as ready for review June 3, 2022 18:26

pastaghost requested review from a team and 0xApotheosis as code owners June 3, 2022 18:26

pastaghost added 2 commits June 3, 2022 14:23

Merge branch 'develop' of https://github.com/shapeshift/web into feat…

012ec6a

…ure-walletconnect-wallet

fix: add walletconnect csp entries

1ad7b19

pastaghost added 3 commits July 13, 2022 14:24

chore: update hdwallet dependencies

daee9a6

chore: run linter

7e2c960

Merge branch 'develop' of https://github.com/shapeshift/web into feat…

b931c5d

…ure-walletconnect-wallet

0xdef1cafe marked this pull request as ready for review July 13, 2022 22:40

gomesalexandre reviewed Jul 14, 2022

View reviewed changes

src/components/Modals/Send/views/Details.tsx Outdated Show resolved Hide resolved

gomesalexandre requested changes Jul 14, 2022

View reviewed changes

src/components/Modals/Send/views/Details.tsx Outdated Show resolved Hide resolved

src/components/Trade/TradeInput.tsx Outdated Show resolved Hide resolved

fix: hide fiat sendMax with WalletConnect

2f6c6ed

gomesalexandre mentioned this pull request Jul 18, 2022

feat: bump lib packages to latest #2176

Merged

5 tasks

fix: stylistic changes

cb29905

gomesalexandre reviewed Jul 18, 2022

View reviewed changes

src/components/Modals/Send/views/Details.tsx Outdated Show resolved Hide resolved

gomesalexandre reviewed Jul 18, 2022

View reviewed changes

src/components/Modals/Send/views/Details.tsx Outdated Show resolved Hide resolved

pastaghost added 2 commits July 18, 2022 13:23

fix: typo

96fb247

Merge branch 'develop' of https://github.com/shapeshift/web into feat…

dd90cfa

…ure-walletconnect-wallet

gomesalexandre previously approved these changes Jul 18, 2022

View reviewed changes

pastaghost added 3 commits July 19, 2022 15:41

feat: add copy to walletconnect option in selectmodal

cc4df95

fix: constrain icon width for selectmodal options

fd4b874

Merge branch 'develop' of https://github.com/shapeshift/web into feat…

4ed704d

…ure-walletconnect-wallet

pastaghost dismissed gomesalexandre’s stale review via 4ed704d July 19, 2022 22:08

Merge branch 'develop' of https://github.com/shapeshift/web into feat…

014a887

…ure-walletconnect-wallet

gomesalexandre previously approved these changes Jul 20, 2022

View reviewed changes

fix: update return value

917f920

pastaghost dismissed gomesalexandre’s stale review via 917f920 July 20, 2022 18:09

0xdef1cafe approved these changes Jul 20, 2022

View reviewed changes

0xdef1cafe merged commit dafd87d into shapeshift:develop Jul 20, 2022

kaladinlight mentioned this pull request Jul 21, 2022

chore: create release v1.45.0 [DO NOT MERGE] #2201

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: walletconnect wallet #1733

feat: walletconnect wallet #1733

GMSteuart commented May 10, 2022 •

edited

Loading

GMSteuart commented May 10, 2022

gomesalexandre commented May 19, 2022

gomesalexandre commented May 19, 2022

GMSteuart commented May 19, 2022

GMSteuart commented May 19, 2022

gomesalexandre commented May 19, 2022

sababa-2019 commented Jun 1, 2022

gomesalexandre left a comment •

edited

Loading

pastaghost commented Jul 18, 2022

gomesalexandre left a comment

pastaghost commented Jul 19, 2022

gomesalexandre left a comment

0xdef1cafe commented Jul 20, 2022

feat: walletconnect wallet #1733

feat: walletconnect wallet #1733

Conversation

GMSteuart commented May 10, 2022 • edited Loading

Description

Notice

Pull Request Type

Issue (if applicable)

Risk

Testing

Screenshots (if applicable)

GMSteuart commented May 10, 2022

gomesalexandre commented May 19, 2022

gomesalexandre commented May 19, 2022

GMSteuart commented May 19, 2022

GMSteuart commented May 19, 2022

gomesalexandre commented May 19, 2022

sababa-2019 commented Jun 1, 2022

gomesalexandre left a comment • edited Loading

Choose a reason for hiding this comment

Trust Wallet (derived ETH Account with ETH only):

MetaMask Wallet (derived ETH Account with ETH and ERC-20s):

Keplr Mobile

pastaghost commented Jul 18, 2022

gomesalexandre left a comment

Choose a reason for hiding this comment

pastaghost commented Jul 19, 2022

gomesalexandre left a comment

Choose a reason for hiding this comment

0xdef1cafe commented Jul 20, 2022

GMSteuart commented May 10, 2022 •

edited

Loading

gomesalexandre left a comment •

edited

Loading