-
Notifications
You must be signed in to change notification settings - Fork 128
feat: Magic Widget extension #979
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Conversation
* feat: implement email login for magic widget * fix: show error msg if totp verification fails
* feat: implement 3rd party wallet signing * feat: implement 3pw request handler & fire events on account and chain change
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Pull request overview
This pull request adds a Magic Widget extension that provides a complete React-based authentication UI component supporting email OTP, OAuth social login, and third-party wallet connections (MetaMask, WalletConnect, Coinbase, Phantom, Rabby) using SIWE (Sign-In with Ethereum).
Changes:
- New
@magic-ext/magic-widgetpackage with React components for authentication flows - Support for email OTP, OAuth providers, and third-party wallet SIWE authentication
- Build tooling configured with Rollup, Panda CSS, and TypeScript
- Integration with wagmi/WalletConnect for wallet connections
- Comprehensive test coverage for provider modules and utility functions
- Updated package versions across multiple extensions
Reviewed changes
Copilot reviewed 167 out of 241 changed files in this pull request and generated no comments.
Show a summary per file
| File | Description |
|---|---|
| packages/@magic-ext/magic-widget/* | New widget extension with React UI, wagmi integration, and styled-system components |
| packages/@magic-sdk/provider/src/* | Added third-party wallet routing, message types, and request handling |
| packages/@magic-sdk/provider/test/* | Added comprehensive test coverage for new functionality |
| packages/@magic-sdk/types/src/core/message-types.ts | Added message types for third-party wallet communication |
| scripts/utils/esbuild.ts | Enhanced build configuration with ESM support and path aliases |
| packages/@magic-ext/web3modal-ethers5/* | Removed entire package and tests |
| Various package.json files | Updated provider dependency versions to ^33.1.0 |
Files not reviewed (1)
- packages/@magic-ext/magic-widget/pnpm-lock.yaml: Language not supported
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
📦 Pull Request
This pull request adds a Magic Widget extension that provides a complete React-based authentication UI component supporting email OTP, OAuth social login, and third-party wallet connections (MetaMask, WalletConnect, Coinbase, Phantom, Rabby) using SIWE (Sign-In with Ethereum).
✅ Fixed Issues
🚨 Test instructions
[Describe any additional context required to test the PR/feature/bug fix.]
Please 🚨 ONLY ADD ONE 🚨 of the following labels, failing to do so may lead to adverse versioning of your changes when published:
patch: Bug Fix?minor: New Feature?major: Breaking Change?skip-release: It's unnecessary to publish this change.Special Note
Please avoid adding any of the
Prioritylabels as they conflict with the labels above ☝️📦 Published PR as canary version:
Canary Versions✨ Test out this PR locally via:
npm install @magic-ext/algorand@28.2.0-canary.979.21495160726.0 npm install @magic-ext/aptos@16.2.0-canary.979.21495160726.0 npm install @magic-ext/avalanche@28.2.0-canary.979.21495160726.0 npm install @magic-ext/bitcoin@28.2.0-canary.979.21495160726.0 npm install @magic-ext/conflux@26.2.0-canary.979.21495160726.0 npm install @magic-ext/cosmos@28.2.0-canary.979.21495160726.0 npm install @magic-ext/ed25519@24.2.0-canary.979.21495160726.0 npm install @magic-ext/evm@1.1.0-canary.979.21495160726.0 npm install @magic-ext/farcaster@5.2.0-canary.979.21495160726.0 npm install @magic-ext/flow@28.2.0-canary.979.21495160726.0 npm install @magic-ext/gdkms@16.2.0-canary.979.21495160726.0 npm install @magic-ext/harmony@28.2.0-canary.979.21495160726.0 npm install @magic-ext/hedera@2.1.0-canary.979.21495160726.0 npm install @magic-ext/icon@28.2.0-canary.979.21495160726.0 npm install @magic-ext/kadena@5.2.0-canary.979.21495160726.0 npm install @magic-ext/magic-widget@0.2.0-canary.979.21495160726.0 npm install @magic-ext/near@28.2.0-canary.979.21495160726.0 npm install @magic-ext/oauth2@15.2.0-canary.979.21495160726.0 npm install @magic-ext/oidc@16.2.0-canary.979.21495160726.0 npm install @magic-ext/polkadot@28.2.0-canary.979.21495160726.0 npm install @magic-ext/react-native-bare-oauth@30.2.0-canary.979.21495160726.0 npm install @magic-ext/react-native-expo-oauth@30.2.0-canary.979.21495160726.0 npm install @magic-ext/siwe@3.2.0-canary.979.21495160726.0 npm install @magic-ext/solana@30.2.0-canary.979.21495160726.0 npm install @magic-ext/sui@5.2.0-canary.979.21495160726.0 npm install @magic-ext/taquito@25.2.0-canary.979.21495160726.0 npm install @magic-ext/terra@25.2.0-canary.979.21495160726.0 npm install @magic-ext/tezos@28.2.0-canary.979.21495160726.0 npm install @magic-ext/webauthn@27.2.0-canary.979.21495160726.0 npm install @magic-ext/zilliqa@28.2.0-canary.979.21495160726.0 npm install @magic-sdk/provider@33.3.0-canary.979.21495160726.0 npm install @magic-sdk/types@27.3.0-canary.979.21495160726.0 npm install magic-sdk@33.3.0-canary.979.21495160726.0 # or yarn add @magic-ext/algorand@28.2.0-canary.979.21495160726.0 yarn add @magic-ext/aptos@16.2.0-canary.979.21495160726.0 yarn add @magic-ext/avalanche@28.2.0-canary.979.21495160726.0 yarn add @magic-ext/bitcoin@28.2.0-canary.979.21495160726.0 yarn add @magic-ext/conflux@26.2.0-canary.979.21495160726.0 yarn add @magic-ext/cosmos@28.2.0-canary.979.21495160726.0 yarn add @magic-ext/ed25519@24.2.0-canary.979.21495160726.0 yarn add @magic-ext/evm@1.1.0-canary.979.21495160726.0 yarn add @magic-ext/farcaster@5.2.0-canary.979.21495160726.0 yarn add @magic-ext/flow@28.2.0-canary.979.21495160726.0 yarn add @magic-ext/gdkms@16.2.0-canary.979.21495160726.0 yarn add @magic-ext/harmony@28.2.0-canary.979.21495160726.0 yarn add @magic-ext/hedera@2.1.0-canary.979.21495160726.0 yarn add @magic-ext/icon@28.2.0-canary.979.21495160726.0 yarn add @magic-ext/kadena@5.2.0-canary.979.21495160726.0 yarn add @magic-ext/magic-widget@0.2.0-canary.979.21495160726.0 yarn add @magic-ext/near@28.2.0-canary.979.21495160726.0 yarn add @magic-ext/oauth2@15.2.0-canary.979.21495160726.0 yarn add @magic-ext/oidc@16.2.0-canary.979.21495160726.0 yarn add @magic-ext/polkadot@28.2.0-canary.979.21495160726.0 yarn add @magic-ext/react-native-bare-oauth@30.2.0-canary.979.21495160726.0 yarn add @magic-ext/react-native-expo-oauth@30.2.0-canary.979.21495160726.0 yarn add @magic-ext/siwe@3.2.0-canary.979.21495160726.0 yarn add @magic-ext/solana@30.2.0-canary.979.21495160726.0 yarn add @magic-ext/sui@5.2.0-canary.979.21495160726.0 yarn add @magic-ext/taquito@25.2.0-canary.979.21495160726.0 yarn add @magic-ext/terra@25.2.0-canary.979.21495160726.0 yarn add @magic-ext/tezos@28.2.0-canary.979.21495160726.0 yarn add @magic-ext/webauthn@27.2.0-canary.979.21495160726.0 yarn add @magic-ext/zilliqa@28.2.0-canary.979.21495160726.0 yarn add @magic-sdk/provider@33.3.0-canary.979.21495160726.0 yarn add @magic-sdk/types@27.3.0-canary.979.21495160726.0 yarn add magic-sdk@33.3.0-canary.979.21495160726.0