Skip to content

feat: add React Ethers + SIWX authentication example#208

Open
rtomas wants to merge 1 commit into
mainfrom
rtomas/siwx-react-evm
Open

feat: add React Ethers + SIWX authentication example#208
rtomas wants to merge 1 commit into
mainfrom
rtomas/siwx-react-evm

Conversation

@rtomas

@rtomas rtomas commented Jun 4, 2026

Copy link
Copy Markdown
Collaborator

Adds a new react/react-ethers-authentication-SIWX example showing how to use SIWX with the Ethers adapter, using ReownAuthentication({ required: true }) as the SIWX provider so users must sign in right after connecting. The Vite config includes the Node globals/Buffer polyfill so the @reown/appkit-siwx dependency bundles correctly in the browser. Also adds pnpm-workspace.yaml allowBuilds entries for both SIWX examples to clear pnpm's ignored-build-scripts gate. Verified with pnpm install, a production build (tsc -b && vite build), and a dev-server run confirming the SIWX dependency pre-bundles without the previous runtime error.

🤖 Generated with Claude Code

Add a new react-ethers-authentication-SIWX example using
@reown/appkit-adapter-ethers with @reown/appkit-siwx, configured with
ReownAuthentication ({ required: true }) as the SIWX provider. Includes
the Node globals/Buffer polyfill in vite.config so the SIWX dependency
bundles correctly in the browser, plus pnpm-workspace.yaml allowBuilds
entries for both SIWX examples.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
@vercel

vercel Bot commented Jun 4, 2026

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
appkit-web-examples-javascript-bitcoin Ready Ready Preview, Comment Jun 4, 2026 8:43pm
appkit-web-examples-javascript-ethers Ready Ready Preview, Comment Jun 4, 2026 8:43pm
appkit-web-examples-javascript-solana Ready Ready Preview, Comment Jun 4, 2026 8:43pm
appkit-web-examples-javascript-wagmi Ready Ready Preview, Comment Jun 4, 2026 8:43pm
appkit-web-examples-next-bitcoin Ready Ready Preview, Comment Jun 4, 2026 8:43pm
appkit-web-examples-next-ethers Ready Ready Preview, Comment Jun 4, 2026 8:43pm
appkit-web-examples-next-multichain Ready Ready Preview, Comment Jun 4, 2026 8:43pm
appkit-web-examples-next-solana Ready Ready Preview, Comment Jun 4, 2026 8:43pm
appkit-web-examples-next-wagmi Ready Ready Preview, Comment Jun 4, 2026 8:43pm
appkit-web-examples-react-bitcoin Ready Ready Preview, Comment Jun 4, 2026 8:43pm
appkit-web-examples-react-core-up Ready Ready Preview, Comment Jun 4, 2026 8:43pm
appkit-web-examples-react-ethers Ready Ready Preview, Comment Jun 4, 2026 8:43pm
appkit-web-examples-react-ethers5 Ready Ready Preview, Comment Jun 4, 2026 8:43pm
appkit-web-examples-react-multichain Ready Ready Preview, Comment Jun 4, 2026 8:43pm
appkit-web-examples-react-solana Ready Ready Preview, Comment Jun 4, 2026 8:43pm
appkit-web-examples-react-wagmi Building Building Preview, Comment Jun 4, 2026 8:43pm
appkit-web-examples-vue-bitcoin Ready Ready Preview, Comment Jun 4, 2026 8:43pm
appkit-web-examples-vue-ethers Ready Ready Preview, Comment Jun 4, 2026 8:43pm
appkit-web-examples-vue-multichain Ready Ready Preview, Comment Jun 4, 2026 8:43pm
appkit-web-examples-vue-solana Ready Ready Preview, Comment Jun 4, 2026 8:43pm
appkit-web-examples-vue-wagmi Ready Ready Preview, Comment Jun 4, 2026 8:43pm
react-core-universal-connector Ready Ready Preview, Comment Jun 4, 2026 8:43pm

Request Review

@claude

claude Bot commented Jun 4, 2026

Copy link
Copy Markdown

Claude finished @rtomas's task in 2m 22s —— View job


PR Review

  • Gather context and read changed files
  • Review code quality, bugs, security issues
  • Run license compliance subagent → ✅ No issues (all MIT/Apache-2.0)
  • Run breaking changes subagent → ✅ No issues (purely additive)
  • Run data classification subagent → ✅ No issues (hardcoded ID is intentional public demo)
  • Post final review

🔒 External Domain URL (Non-blocking) URL: https://avatars.githubusercontent.com/u/179229932 File: react/react-ethers-authentication-SIWX/src/config/index.tsx:17 — Used as AppKit icon in metadata. Common pattern across all examples. Verify intentional.

Found 5 issue(s)

Issue 1: Unreachable projectId guard

ID: config-dead-guard-a3f1
File: react/react-ethers-authentication-SIWX/src/config/index.tsx:6-9
Severity: LOW
Category: code_quality

Context:

  • Pattern: const projectId = ... || "b56e18d47c72ab683b10814fe9495694" followed immediately by if (!projectId) throw new Error(...)
  • Risk: The fallback string ensures projectId is always truthy; the guard can never fire
  • Impact: Misleads readers into thinking an undefined projectId is possible; dead code
  • Trigger: Always — the || short-circuit means projectId is never falsy

Recommendation:

// Either keep the fallback and remove the guard:
export const projectId = import.meta.env.VITE_PROJECT_ID || "b56e18d47c72ab683b10814fe9495694"

// Or require the env var and keep the guard:
export const projectId = import.meta.env.VITE_PROJECT_ID
if (!projectId) throw new Error('Project ID is not defined')

Issue 2: Stale copy-paste comment ("Solana Adapter")

ID: config-wrong-comment-b2c4
File: react/react-ethers-authentication-SIWX/src/config/index.tsx:23
Severity: LOW
Category: code_quality

Context:

  • Pattern: Comment reads // Set up Solana Adapter above export const ethersAdapter = new EthersAdapter()
  • Risk: None functional, but confuses readers
  • Impact: Misleading documentation in an example intended to teach

Recommendation:

// Set up Ethers Adapter
export const ethersAdapter = new EthersAdapter();

Issue 3: Unhandled promise rejections in action button handlers

ID: actionlist-unhandled-errors-c5d8
File: react/react-ethers-authentication-SIWX/src/components/ActionButtonList.tsx:34-65
Severity: MEDIUM
Category: code_quality

Context:

  • Pattern: handleSendTx, handleSignMsg, handleGetBalance are async but called via onClick with no try/catch and no user-visible error feedback
  • Risk: Any rejection (user rejects in wallet, network error) silently fails or surfaces as an unhandled promise rejection in the console
  • Impact: Poor UX — user clicks a button, nothing happens, no error shown
  • Trigger: Wallet rejection, network switch, missing provider

Recommendation: Wrap each handler body in try/catch, at minimum:

const handleSendTx = async () => {
  try {
    if (!walletProvider || !address) throw Error('user is disconnected')
    // ... existing logic ...
    sendHash(tx.hash)
  } catch (error) {
    console.error("Send tx failed:", error)
  }
}

Issue 4: Missing chainId in useEffect dependency array

ID: infolist-missing-dep-e7f2
File: react/react-ethers-authentication-SIWX/src/components/InfoList.tsx:36-51
Severity: LOW
Category: code_quality

Context:

  • Pattern: checkTransactionStatus creates new BrowserProvider(walletProvider, chainId) but chainId is not in the useEffect dependency array ([hash, walletProvider])
  • Risk: If the user switches networks while a hash is set, the receipt lookup runs against the old chain's provider
  • Impact: Stale/incorrect transaction status displayed after network switch

Recommendation:

useEffect(() => {
  // ...
}, [hash, walletProvider, chainId])  // add chainId

Issue 5: Invalid rel attribute value on anchor tag

ID: app-invalid-rel-attr-g9h1
File: react/react-ethers-authentication-SIWX/src/App.tsx:58
Severity: LOW
Category: code_quality

Context:

  • Pattern: <a href="https://dashboard.reown.com" target="_blank" rel="Reown Dashboard">rel takes link-type keywords, not descriptive text
  • Risk: Browsers ignore the invalid value; target="_blank" without noopener is a minor security concern (opener access)
  • Impact: Invalid HTML; potential tabnapping vulnerability

Recommendation:

<a href="https://dashboard.reown.com" target="_blank" rel="noopener noreferrer" className="link-button">
  Reown Dashboard
</a>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant