Skip to content
This repository has been archived by the owner on Jun 24, 2022. It is now read-only.

Wallet connect meta data #597

Merged
merged 14 commits into from
May 25, 2021
Merged

Wallet connect meta data #597

merged 14 commits into from
May 25, 2021

Conversation

anxolin
Copy link
Contributor

@anxolin anxolin commented May 5, 2021

First PR to better handle Wallet Connect.

Motivation

This PR adds a new hook which aims to simplify the wallet logic.

The initial motivation was to have information about what is the connected wallet (not just the provider, but the actual wallet). This will be base to progressively enable wallets depending on their support.

Scope

However the scope of this PR is slightly bigger. It became evident that the wallet logic is a bit complex, and there's many conditional rendering depending on introspection in the providers, and connected wallet information (see for example Web3StatusInner, Web3StatusInner, etc..)

This PR tries to create a simple interface that would give us all relevant wallet information in something closer to what the react component would want to use. For this, a new hook useWalletInfo is implemented.

This hook exposes the following information:

export interface ConnectedWalletInfo {
  active: boolean
  account?: string | null
  activeNetwork: boolean // active default connection
  provider?: WalletProvider
  isSmartContractWallet: boolean
  walletName?: string
  ensName?: string
  icon?: string
  isSupportedWallet: boolean
}

Not all these props will be implemented in this PR, but it's the goal to define a basic abstraction of the wallet, implement the basic ones.

So isSupportedWallet and isSmartContractWallet are just place holders for futur PRs.

The most relevant part in this PR will be walletName, which will show you the wallet name if available. This comes from the wallet connect peer meta-info that wallets provide.

The icon for now only contains information of the same metada of wallet connect, however, we could have some famous wallets icons and resolve the image by name of the wallet. i.e. Argent don't send the icon, but send the wallet name

Test

Connect with Metamask

Connect with metamask and observe the info provided by the hook in the log:
image

Connect with WC using different wallets

image

@anxolin anxolin changed the base branch from develop to enable-wc May 5, 2021 12:27
@anxolin anxolin requested review from W3stside and alfetopito May 5, 2021 12:52
@github-actions
Copy link
Contributor

github-actions bot commented May 5, 2021

  • 🔭 GP Swap: Gnosis Protocol v2 Swap UI


import WalletModal from 'components/WalletModal'
import { Web3StatusInner } from './Web3StatusMod'
import useRecentActivity, { TransactionAndOrder } from 'hooks/useRecentActivity'
import { OrderStatus } from 'state/orders/actions'
import { useWalletInfo } from '@src/custom/hooks/useWalletInfo'
Copy link
Contributor

Choose a reason for hiding this comment

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

path

Copy link
Contributor

@W3stside W3stside left a comment

Choose a reason for hiding this comment

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

i like this

Copy link
Contributor

@alfetopito alfetopito left a comment

Choose a reason for hiding this comment

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

Working good!

Tested with

  • TrustWallet: able to place order
  • Argent: able to go as far as enabling the sell token :)
    Of course it failed, but I noticed it does not return the walletName, the only data set is ensName

alfetopito and others added 6 commits May 18, 2021 14:18
* New hook for getting a Web3Provider instance for the current provider

* Setting isSmartContractWallet flag

* Oopsie, only check when both are set

Co-authored-by: Leandro Boscariol <[email protected]>
* Added set with wallets not supported via WC

* Checking and setting flag for unsupported wallets

Co-authored-by: Leandro Boscariol <[email protected]>
* Add jsx-a11y eslint plugin to rules

* When wallet is not supported, show a ⚠️ besides the address + tooltip

* Show wallet icon if any from metadata

* Show wallet name if any on account details

* Disable swap when wallet is not supported

* Make currencies optional on UnsupportedCurrencyFooter

* Adding custom/warning wallet images to account detail on header

* Updated tooltip text

* Simplified walletName destruction

* Refactored wallet name fetching

* Adding WalletConnect sufix for WC wallets that have a name set

Co-authored-by: Leandro Boscariol <[email protected]>
* Added FAQ entry for unsupported tokens

* Added FAQ link to unsupported tokens message

* Update src/custom/pages/Faq/index.tsx

Co-authored-by: David <[email protected]>

* Update src/custom/pages/Faq/index.tsx

Co-authored-by: David <[email protected]>

* Update src/custom/pages/Faq/index.tsx

Co-authored-by: David <[email protected]>

* Update src/custom/pages/Swap/SwapMod.tsx

Co-authored-by: David <[email protected]>

* Replace gas free with gasless

* Added paragraphs between unsupported wallet text

Co-authored-by: Leandro Boscariol <[email protected]>
Co-authored-by: Alex V <[email protected]>
Co-authored-by: David <[email protected]>
…a-data

Opting for a merge commit to keep history of PRs already merged into
this one
@alfetopito alfetopito changed the base branch from enable-wc to develop May 25, 2021 18:27
@alfetopito
Copy link
Contributor

Re-tested with all supported and unsupported wallets that I currently have access to, which are:

Smart contract

  1. Gnosis Safe - unsupported ✔️
  2. Argent - unsupported ✔️
  3. Pillar - unsupported ✔️

Don't support signature

  1. Crypto.com Defi Wallet - unsupported ✔️
  2. TokenPocket - unsupported ✔️

Working fine

  1. Metamask Mobile - supported ✔️
  2. TrustWallet - supported ✔️
  3. imToken - supported ✔️

@alfetopito alfetopito self-assigned this May 25, 2021
@alfetopito alfetopito merged commit 6128a89 into develop May 25, 2021
@alfetopito alfetopito deleted the wallet-connect-meta-data branch May 25, 2021 20:27
mergify bot pushed a commit that referenced this pull request Jun 16, 2021
# Update 2021/06/15

TokenPocket has released their update and it's now working flawlessly :)

# Summary

Closes #673 

## Note

I'm opening this PR to allow TP team to test their fix(TP-Lab/tp-android#16), since the wallet was disabled via WalletConnect on #597

# Testing

Using the PR's url:
1. Connect via WalletConnect using TokenPocket wallet
- [ ] The wallet should not be disabled
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