Skip to content

Conversation

@blakecduncan
Copy link
Collaborator

@blakecduncan blakecduncan commented Sep 26, 2025

Pull Request Checklist


PR-Codex overview

This PR introduces the AlchemyProvider and a simplified configuration method createAlchemyConfig for React applications, replacing the previous WagmiProvider integration. It aims to streamline the setup for using Alchemy services in React.

Detailed summary

  • Added @alchemy/connectors-web as a dependency.
  • Introduced createAlchemyConfig for easier configuration.
  • Added AlchemyProvider component to replace WagmiProvider.
  • Updated example app to use AlchemyProvider.
  • Enhanced type exports for better TypeScript support.
  • Updated documentation for createAlchemyConfig and AlchemyProvider.

The following files were skipped due to too many changes: yarn.lock

✨ Ask PR-Codex anything about this PR by commenting with /codex {your question}

@vercel
Copy link

vercel bot commented Sep 26, 2025

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

1 Skipped Deployment
Project Deployment Preview Comments Updated (UTC)
aa-sdk-ui-demo Ignored Ignored Preview Sep 30, 2025 4:58pm

@github-actions
Copy link

github-actions bot commented Sep 26, 2025

🌿 Documentation Preview

Name Status Preview Updated (UTC)
Alchemy Docs ✅ Ready 🔗 Visit Preview Sep 30, 2025, 5:00 PM

@github-actions github-actions bot temporarily deployed to docs-preview September 26, 2025 20:38 Inactive
...(apiKey ? [alchemyAuth({ apiKey })] : []),
];

const wagmiConfig = createConfig({
Copy link
Collaborator Author

Choose a reason for hiding this comment

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

I ended up not implementing the wagmiOverrides option in this PR. I wanted to get some opinions on it. I struggled getting the types to work for some reason, I kept getting a type error when doing a shallow copy into the params.

It got me thinking, I wonder if we should just try to expose options that we see fit (rather than a full wagmiOverrides option. And if anyone needs a bunch of wagmi overrides, we just recommend they build the wagmi config themselves.

@@ -77,6 +77,64 @@
resolved "https://registry.yarnpkg.com/@adraffy/ens-normalize/-/ens-normalize-1.11.0.tgz#42cc67c5baa407ac25059fcd7d405cc5ecdb0c33"
integrity sha512-/3DDPKHqqIqxUULp8yP4zODUY1i+2xvVWsv8A79xGWdCAG+8sb0hRh0Rk2QyOJUnnbyPUAZYcpBuRe3nS2OIUg==

"@alchemy/[email protected]":
Copy link
Contributor

Choose a reason for hiding this comment

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

do you need this many lockfile changes?

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

I added @alchemy/connectors-web as a dependency in the @alchemy/react package and yarn updated all these dependencies.

I typically trust the lock updates when I add a package, is there a different way I should be adding packages? right now I just did

yarn add @alchemy/connectors-web

Copy link
Contributor

@jakehobbs jakehobbs Sep 29, 2025

Choose a reason for hiding this comment

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

gotcha, should be fine then! was just a little surprised that would change so much.

Copy link
Contributor

Choose a reason for hiding this comment

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

yeah strange, i ran it locally too and verified this causes a bunch of changes

apiKey: process.env.NEXT_PUBLIC_ALCHEMY_API_KEY,
}),
],
export const config = createAlchemyConfig({
Copy link
Contributor

Choose a reason for hiding this comment

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

beautiful

export function AlchemyProvider({ config, children }: AlchemyProviderProps) {
return (
<WagmiProvider config={config.wagmi}>
{children as any}

This comment was marked as resolved.

This comment was marked as resolved.

Copy link
Contributor

Choose a reason for hiding this comment

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

oof

return perChain;
})();

// Note: Currently using alchemyAuth; swap to alchemySmartWallet when ready.

This comment was marked as resolved.


const wagmiConfig = createConfig({
chains,
transports: transports!,

This comment was marked as resolved.

This comment was marked as resolved.

Copy link
Contributor

@thebrianchen thebrianchen left a comment

Choose a reason for hiding this comment

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

this is beautiful. loving the devEx here

@@ -77,6 +77,64 @@
resolved "https://registry.yarnpkg.com/@adraffy/ens-normalize/-/ens-normalize-1.11.0.tgz#42cc67c5baa407ac25059fcd7d405cc5ecdb0c33"
integrity sha512-/3DDPKHqqIqxUULp8yP4zODUY1i+2xvVWsv8A79xGWdCAG+8sb0hRh0Rk2QyOJUnnbyPUAZYcpBuRe3nS2OIUg==

"@alchemy/[email protected]":
Copy link
Contributor

Choose a reason for hiding this comment

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

yeah strange, i ran it locally too and verified this causes a bunch of changes

Copilot AI review requested due to automatic review settings September 30, 2025 16:57
Copy link
Contributor

Copilot AI left a 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 PR introduces new React components and configuration utilities for the Alchemy SDK, providing a simplified way to set up Alchemy in React applications. The main goal is to reduce boilerplate code by automatically configuring wagmi with Alchemy-specific defaults.

  • Adds createAlchemyConfig function to simplify wagmi configuration with Alchemy services
  • Introduces AlchemyProvider component as a wrapper around wagmi providers
  • Updates example application to demonstrate the new simplified configuration approach

Reviewed Changes

Copilot reviewed 8 out of 9 changed files in this pull request and generated 3 comments.

Show a summary per file
File Description
packages/react/src/index.ts Exports new configuration and provider components
packages/react/src/createAlchemyConfig.ts New configuration function that sets up wagmi with Alchemy defaults
packages/react/src/AlchemyProvider.tsx New provider component wrapping wagmi with future extensibility
packages/react/package.json Adds dependency on @alchemy/connectors-web
examples/react-v5-example/src/app/providers.tsx Updates to use AlchemyProvider instead of WagmiProvider
examples/react-v5-example/src/app/config.ts Simplifies configuration using createAlchemyConfig
docs/pages/reference/alchemy/react/functions/createAlchemyConfig.mdx Documentation for new configuration function
docs/pages/reference/alchemy/react/components/AlchemyProvider.mdx Documentation for new provider component

ssr = false,
} = options;

if (!chains?.length) {
Copy link

Copilot AI Sep 30, 2025

Choose a reason for hiding this comment

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

The optional chaining ?. is unnecessary here since chains is a required parameter with type [Chain, ...Chain[]]. This will always be defined and have at least one element due to the type constraint.

Suggested change
if (!chains?.length) {
if (!chains.length) {

Copilot uses AI. Check for mistakes.
---
# This file is autogenerated
title: createAlchemyConfig
description: Overview of the createAlchemyConfig method
Copy link

Copilot AI Sep 30, 2025

Choose a reason for hiding this comment

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

The description refers to createAlchemyConfig as a 'method' but it's actually a function. Should be 'Overview of the createAlchemyConfig function' to be technically accurate.

Copilot generated this review using guidance from repository custom instructions.
---
# This file is autogenerated
title: AlchemyProvider
description: Overview of the AlchemyProvider method
Copy link

Copilot AI Sep 30, 2025

Choose a reason for hiding this comment

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

The description refers to AlchemyProvider as a 'method' but it's actually a React component. Should be 'Overview of the AlchemyProvider component' to be technically accurate.

Copilot generated this review using guidance from repository custom instructions.
@github-actions github-actions bot temporarily deployed to docs-preview September 30, 2025 16:58 Inactive
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.

4 participants