fix(chrome-extension): Enable support for Metamask & OKX; Mark unsupported components
#6179
Conversation
🦋 Changeset detectedLatest commit: 361463f The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
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 |
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
Caution Review failedThe pull request is closed. 📝 Walkthrough""" WalkthroughThe changes explicitly mark the Assessment against linked issues
Assessment against linked issues: Out-of-scope changes
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (1)
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
packages/chrome-extension/src/react/NotSupported.tsx (1)
1-18: Optional: Emit runtime deprecation warnings.
Consider adding aconsole.warn(or settingComponent.displayName) in each component to notify developers why it renders nothing, improving developer experience.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (4)
.changeset/twelve-ducks-refuse.md(1 hunks)packages/chrome-extension/src/index.ts(1 hunks)packages/chrome-extension/src/react/NotSupported.tsx(1 hunks)packages/chrome-extension/src/react/index.ts(1 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (5)
- GitHub Check: semgrep-cloud-platform/scan
- GitHub Check: Build Packages
- GitHub Check: Formatting | Dedupe | Changeset
- GitHub Check: Analyze (javascript-typescript)
- GitHub Check: semgrep/ci
🔇 Additional comments (4)
.changeset/twelve-ducks-refuse.md (1)
1-6: Changeset correctly documents deprecation and bumps minor version.
The front matter and description clearly communicate that these components are deprecated in the Chrome extension package.packages/chrome-extension/src/react/index.ts (1)
1-3: Re-export of unsupported components is correct.
You’ve properly addedGoogleOneTap,PricingTable, andSignInWithMetamaskButtonto the exported API, pointing them to theNotSupportedmodule.packages/chrome-extension/src/index.ts (1)
5-7: Root index export updated for override as intended.
The explicit export of these components alongsideClerkProviderensures they shadow the originals from@clerk/clerk-react.packages/chrome-extension/src/react/NotSupported.tsx (1)
1-18: No-op component implementations are correct.
Each component returnsnulland includes clear deprecation tags and a reference link.
@clerk/agent-toolkit
@clerk/astro
@clerk/backend
@clerk/chrome-extension
@clerk/clerk-js
@clerk/dev-cli
@clerk/elements
@clerk/clerk-expo
@clerk/expo-passkeys
@clerk/express
@clerk/fastify
@clerk/localizations
@clerk/nextjs
@clerk/nuxt
@clerk/clerk-react
@clerk/react-router
@clerk/remix
@clerk/shared
@clerk/tanstack-react-start
@clerk/testing
@clerk/themes
@clerk/types
@clerk/upgrade
@clerk/vue
commit: |
| /** | ||
| * @deprecated This component is not supported in Browser Extensions due to Chrome's security restrictions around remotely hosted code. | ||
| * @see https://clerk.com/docs/references/browser-extensions/browser-security-restrictions | ||
| */ | ||
| export const SignInWithMetamaskButton = () => null; |
There was a problem hiding this comment.
I believe we can get around this if needed ! It is caused by a single utility functions that loads the coinbase wallet sdk, which is unrelated to metamask.
There was a problem hiding this comment.
Originally, we were targeting pop-ups. Of which, none of the Web3 options worked. Now that we support other variants like side panels, this isn't the case anymore. I've updated to PR to reflect that.
| * @deprecated This component is not supported in Browser Extensions due to Chrome's security restrictions around remotely hosted code. | ||
| * @see https://clerk.com/docs/references/browser-extensions/browser-security-restrictions | ||
| */ | ||
| export const PricingTable = () => null; |
There was a problem hiding this comment.
Let's not include this, as it will be handled in COM-954. We are probably looking at a more fine grain solution here. Also we are missing the UserProfile and OrgProfile billing pages which are also accessing remotely host code, so let's defer all this work to ticket mentioned above.
There was a problem hiding this comment.
That would be great, and I've removed this from the PR. We just need to make sure we hit this as PR is a direct result of people getting caught up by the RHC requirement.
| @@ -1,8 +1,9 @@ | |||
| export * from '@clerk/clerk-react'; | |||
There was a problem hiding this comment.
@tmilewski Is it better to simply control what's exported here instead of breaking without realising it ?
There was a problem hiding this comment.
Yes, though the plan was to deprecate, then remove in a major.
tmilewski
changed the title
Metamask & OKX; Mark unsupported components
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
packages/clerk-js/src/utils/web3.ts (1)
78-96: Consider adding explicit return type annotation.The
getEthereumProviderfunction lacks an explicit return type annotation. While TypeScript can infer the type, the coding guidelines emphasize explicit return types for functions, especially for maintainability.-async function getEthereumProvider(provider: Web3Provider) { +async function getEthereumProvider(provider: Web3Provider): Promise<any | null> {Note: You may want to define a more specific type than
anyfor the Ethereum provider interface if one doesn't already exist in the codebase.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (7)
packages/chrome-extension/src/index.ts(1 hunks)packages/chrome-extension/src/react/NotSupported.tsx(1 hunks)packages/chrome-extension/src/react/index.ts(1 hunks)packages/clerk-js/src/core/clerk.ts(0 hunks)packages/clerk-js/src/core/resources/SignIn.ts(0 hunks)packages/clerk-js/src/core/resources/SignUp.ts(0 hunks)packages/clerk-js/src/utils/web3.ts(2 hunks)
💤 Files with no reviewable changes (3)
- packages/clerk-js/src/core/resources/SignIn.ts
- packages/clerk-js/src/core/resources/SignUp.ts
- packages/clerk-js/src/core/clerk.ts
🚧 Files skipped from review as they are similar to previous changes (3)
- packages/chrome-extension/src/react/index.ts
- packages/chrome-extension/src/react/NotSupported.tsx
- packages/chrome-extension/src/index.ts
🧰 Additional context used
📓 Path-based instructions (4)
`**/*.{js,ts,tsx,jsx}`: All code must pass ESLint checks with the project's configuration. Use Prettier for consistent code formatting.
**/*.{js,ts,tsx,jsx}: All code must pass ESLint checks with the project's configuration.
Use Prettier for consistent code formatting.
packages/clerk-js/src/utils/web3.ts
`**/*.{ts,tsx}`: Maintain comprehensive JSDoc comments for public APIs.
**/*.{ts,tsx}: Maintain comprehensive JSDoc comments for public APIs.
packages/clerk-js/src/utils/web3.ts
`packages/**`: All publishable packages under the @clerk namespace must be located in the packages/ directory.
packages/**: All publishable packages under the @clerk namespace must be located in the packages/ directory.
packages/clerk-js/src/utils/web3.ts
`**/*.ts`: Always define explicit return types for functions, especially public APIs. Use proper type annotations for variables and parameters where inference isn't clear. Avoid `a...
**/*.ts: Always define explicit return types for functions, especially public APIs.
Use proper type annotations for variables and parameters where inference isn't clear.
Avoidanytype; preferunknownwhen type is uncertain, then narrow with type guards.
Useinterfacefor object shapes that might be extended; usetypefor unions, primitives, and computed types.
Preferreadonlyproperties for immutable data structures.
Useprivatefor internal implementation details,protectedfor inheritance, andpublicexplicitly for clarity in public APIs.
Prefer composition and interfaces over deep inheritance chains; use mixins for shared behavior.
Use ES6 imports/exports consistently; avoid barrel files (index.ts re-exports) to prevent circular dependencies.
Use type-only imports (import type { ... }) where possible.
Useas constfor literal types and thesatisfiesoperator for type checking without widening.
Enable--incrementaland--tsBuildInfoFilefor faster builds.
Use ESLint with @typescript-eslint/recommended rules and Prettier for formatting.
Use lint-staged and Husky for pre-commit checks.
Use type-coverage to measure type safety.
packages/clerk-js/src/utils/web3.ts
⏰ Context from checks skipped due to timeout of 90000ms (5)
- GitHub Check: semgrep-cloud-platform/scan
- GitHub Check: Formatting | Dedupe | Changeset
- GitHub Check: Build Packages
- GitHub Check: semgrep/ci
- GitHub Check: Analyze (javascript-typescript)
🔇 Additional comments (2)
packages/clerk-js/src/utils/web3.ts (2)
3-3: LGTM: Import addition supports the new conditional logic.The import of
clerkUnsupportedEnvironmentWarningis correctly added to support the new warning functionality for unsupported environments.
80-84: LGTM: Proper handling of RHC restrictions for Coinbase Wallet.The conditional check correctly prevents Coinbase Wallet SDK instantiation when
__BUILD_DISABLE_RHC__is true, which aligns with Chrome extension security restrictions. The warning message and null return provide appropriate graceful degradation that upstream functions handle correctly.
Description
Explicitly mark
GoogleOneTapUI components as deprecated and unsupported (due to the requirement of Remotely Hosted Code) to help avoid confusion.While they, technically, never worked. I plan on removing them in a future major rather than outright changing the public interface.
Enable support for
MetamaskandOKXwhile still splitting out Coinbase remotely hosted code.USER-2235
Checklist
pnpm testruns as expected.pnpm buildruns as expected.Type of change
Summary by CodeRabbit