feat(clerk-js,types,clerk-react): Support Coinbase Wallet web3 provider and authentication strategy by chanioxaris · Pull Request #4082 · clerk/javascript

chanioxaris · 2024-09-03T09:38:46Z

Description

Coinbase Wallet is a new generic web3 provider and strategy that supports both Smart Wallets and Coinbase Wallet browser extension. Users can use it to authenticate themselves using their own web3 address as an identifier

In order to take advantage of the Coinbase Wallet we are lazy loading @coinbase/wallet-sdk and all its direct dependencies. Resulting in a new chunk ~58KB which will only be loading when the end user selects that provider.

Checklist

npm test runs as expected.
npm run build runs as expected.
(If applicable) JSDoc comments have been added or updated for any package exports
(If applicable) Documentation has been updated

Type of change

changeset-bot · 2024-09-03T09:38:50Z

🦋 Changeset detected

Latest commit: 44de48c

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 18 packages

Name	Type
@clerk/clerk-js	Minor
@clerk/clerk-react	Minor
@clerk/types	Minor
@clerk/chrome-extension	Patch
@clerk/clerk-expo	Patch
@clerk/elements	Patch
@clerk/nextjs	Patch
@clerk/remix	Patch
@clerk/tanstack-start	Patch
@clerk/astro	Patch
@clerk/backend	Patch
@clerk/express	Patch
@clerk/fastify	Patch
@clerk/localizations	Patch
@clerk/clerk-sdk-node	Patch
@clerk/shared	Patch
@clerk/testing	Patch
@clerk/themes	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

chanioxaris · 2024-09-03T09:39:46Z

packages/clerk-js/package.json

    "@clerk/localizations": "2.8.0",
    "@clerk/shared": "2.6.1",
    "@clerk/types": "4.18.0",
+    "@coinbase/wallet-sdk": "4.0.4",


Note to reviewers: For now this is lazy loaded with the help of @panteliselef

octoper

🔥

chanioxaris · 2024-09-03T11:08:30Z

!snapshot

panteliselef

Only minor feedback and I added some info about the other reviews

panteliselef · 2024-09-03T13:09:05Z

packages/clerk-js/src/core/clerk.ts

+    const generateSignature =
+      provider === 'metamask'
+        ? generateSignatureWithMetamask
+        : provider === 'coinbase'
+          ? generateSignatureWithCoinbase
+          : generateSignatureWithCoinbaseWallet;


In a follow up PR this will become simpler as we are dropping the generateSignatureWithCoinbase ?

That's correct, on the next PR we are dropping the Coinbase provider in favor of the new Coinbase Wallet

panteliselef · 2024-09-03T13:09:56Z

packages/clerk-js/src/ui/common/constants.ts

    id: 'coinbase',
    name: 'Coinbase Wallet',
  },
+  coinbase_wallet: {


🙃 SW = smart wallet

Suggested change

coinbase_wallet: {

coinbase_sw: {

Coinbase prefer to use the term Coinbase Wallet rather than Coinbase Smart Wallet

panteliselef · 2024-09-03T13:12:08Z

packages/clerk-js/webpack.config.js

        cacheGroups: {
          zxcvbnTSCoreVendor: {
-            test: /[\\/]node_modules[\\/](@zxcvbn-ts)[\\/](core)[\\/]/,
+            test: /[\\/]node_modules[\\/](@zxcvbn-ts\/core|fastest-levenshtein)[\\/]/,


This is unrelated, but it is minor so it's ok

panteliselef · 2024-09-03T13:13:00Z

packages/clerk-js/webpack.config.js

            chunks: 'all',
          },
+          coinbaseWalletSDKVendor: {
+            test: /[\\/]node_modules[\\/](@coinbase\/wallet-sdk|ieee754|preact|keccak|buffer|string_decoder|sha\.js|base64-js|safe-buffer|util-deprecate|inherits)[\\/]/,


We are manually grouping together all deps that are only used from the coinbase wallet sdk in order to avoid puting them in the vendors chunk

panteliselef · 2024-09-03T13:14:18Z

packages/types/src/clerk.ts

  authenticateWithCoinbase: (params?: AuthenticateWithCoinbaseParams) => Promise<unknown>;

+  /**
+   * Authenticates user using their Coinbase Wallet Smart Wallet and browser extension


Should this be

Suggested change

* Authenticates user using their Coinbase Wallet Smart Wallet and browser extension

* Authenticates user using their Coinbase Smart Wallet and Wallet browser extension

Oops nice catch!

…vider and authentication strategy Coinbase Wallet is a new generic web3 provider and strategy that supports both Smart Wallets and Coinbase Wallet browser extension. Users can use it to authenticate themselves using their own web3 address as an identifier

clerk-cookie added types clerk-js react labels Sep 3, 2024

chanioxaris commented Sep 3, 2024

View reviewed changes

chanioxaris requested review from EmmanouelaPothitou, nikosdouvlis, octoper and panteliselef September 3, 2024 09:40

chanioxaris changed the title ~~feat(clerk-js,types,react): Support Coinbase Wallet web3 provider and…~~ feat(clerk-js,types,react): Support Coinbase Wallet web3 provider and authentication strategy Sep 3, 2024

chanioxaris changed the title ~~feat(clerk-js,types,react): Support Coinbase Wallet web3 provider and authentication strategy~~ feat(clerk-js,types,clerk-react): Support Coinbase Wallet web3 provider and authentication strategy Sep 3, 2024

octoper approved these changes Sep 3, 2024

View reviewed changes

chanioxaris force-pushed the haris/user-647-add-support-for-coinbase-smart-wallet branch from c106fbc to fb4e005 Compare September 3, 2024 12:44

panteliselef assigned panteliselef and chanioxaris and unassigned panteliselef Sep 3, 2024

chanioxaris force-pushed the haris/user-647-add-support-for-coinbase-smart-wallet branch from fb4e005 to e74b609 Compare September 3, 2024 13:02

panteliselef approved these changes Sep 3, 2024

View reviewed changes

chanioxaris force-pushed the haris/user-647-add-support-for-coinbase-smart-wallet branch from e74b609 to c0da1a2 Compare September 3, 2024 13:21

clerk-cookie added the elements label Sep 3, 2024

chanioxaris force-pushed the haris/user-647-add-support-for-coinbase-smart-wallet branch from c0da1a2 to 44de48c Compare September 3, 2024 13:53

nikosdouvlis approved these changes Sep 3, 2024

View reviewed changes

nikosdouvlis merged commit 8a3b9f0 into main Sep 3, 2024

nikosdouvlis deleted the haris/user-647-add-support-for-coinbase-smart-wallet branch September 3, 2024 13:56

clerk-cookie mentioned this pull request Sep 3, 2024

ci(repo): Version packages #4083

Merged

	* Authenticates user using their Coinbase Wallet Smart Wallet and browser extension
	* Authenticates user using their Coinbase Smart Wallet and Wallet browser extension

Conversation

chanioxaris commented Sep 3, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Checklist

Type of change

Uh oh!

changeset-bot bot commented Sep 3, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

Choose a reason for hiding this comment

Uh oh!

octoper left a comment

Choose a reason for hiding this comment

Uh oh!

chanioxaris commented Sep 3, 2024

Uh oh!

panteliselef left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

chanioxaris commented Sep 3, 2024 •

edited

Loading

changeset-bot bot commented Sep 3, 2024 •

edited

Loading