#AutoConnect in MiniKitProvider

[Dargon789]

Reviewer's Guide

This pull request refactors provider composition and dynamic configuration for Wagmi and React Query, introduces auto-connection and new MiniKit hooks, overhauls batch ENS resolution into bulk utilities and hooks, modernizes the advanced send flow with a dedicated recipient state hook, makes wallet sign-up optional in the modal, simplifies CSS to use font imports and external style sheets, and updates the build and release toolchain (Vite config, version injection, CI hardening, prerelease script).

Sequence diagram for AutoConnect in MiniKitProvider

sequenceDiagram
  participant MiniKitProvider
  participant AutoConnect
  participant Wagmi
  participant FarcasterSDK
  participant User as actor

  User->MiniKitProvider: Loads MiniKit app
  MiniKitProvider->AutoConnect: Renders children
  AutoConnect->FarcasterSDK: Checks sdk.context
  FarcasterSDK-->>AutoConnect: Returns context (in mini app)
  AutoConnect->Wagmi: Checks isConnected, isConnecting
  AutoConnect->Wagmi: Finds farcasterFrame or farcasterMiniApp connector
  AutoConnect->Wagmi: Calls connect({ connector })
  Wagmi-->>AutoConnect: Connects wallet

Loading

Sequence diagram for batch ENS/basename resolution via useAddresses

sequenceDiagram
  participant Component
  participant useAddresses
  participant getAddresses
  participant PublicClient

  Component->useAddresses: useAddresses({ names: [...] })
  useAddresses->getAddresses: getAddresses({ names })
  getAddresses->PublicClient: getEnsAddress({ name }) for each name
  PublicClient-->>getAddresses: Returns address/null for each
  getAddresses-->>useAddresses: [address1, address2, ...]
  useAddresses-->>Component: { data: [address1, address2, ...] }

Loading

Sequence diagram for WalletModal sign up button logic

sequenceDiagram
  participant WalletModal
  participant useOnchainKit
  participant User as actor

  User->WalletModal: Opens modal
  WalletModal->useOnchainKit: Reads config.wallet.signUpEnabled
  alt signUpEnabled === false
    WalletModal-->>User: Hides Sign Up button
    WalletModal-->>User: Shows 'Connect your wallet' only
  else signUpEnabled === true or undefined
    WalletModal-->>User: Shows Sign Up button and divider
  end

Loading

Class diagram for new SendProvider and recipient state management

classDiagram
  class SendProvider {
    - selectedToken: PortfolioTokenWithFiatValue | null
    - fiatAmount: string | null
    - cryptoAmount: string | null
    - lifecycleStatus: SendLifecycleStatus
    - ethBalance: number | undefined
    - recipientState: RecipientState
    - updateRecipientInput(input: string)
    - validateRecipientInput(input: string)
    - selectRecipient(selection: RecipientState)
    - deselectRecipient()
    + handleTokenSelection(token: PortfolioTokenWithFiatValue)
    + handleResetTokenSelection()
  }

  class RecipientState {
    <<interface>>
    phase: 'input' | 'validated' | 'selected'
    input: string
    address: Address | null
    displayValue: string | null
  }

  SendProvider --> RecipientState : uses

Loading

Class diagram for new MiniKitProvider and AutoConnect

classDiagram
  class MiniKitProvider {
    +context: Context.FrameContext | null
    +autoConnect: boolean
    +notificationProxyUrl: string
    +connectors: Connector[]
    +value: MiniKitContextType
  }
  class AutoConnect {
    +enabled: boolean
    +useEffect()
  }
  MiniKitProvider --> AutoConnect : wraps children with

Loading

Class diagram for new batch ENS/basename resolution utilities and hooks

classDiagram
  class getAddresses {
    +getAddresses(names: string[]): Promise<Address[]>
  }
  class useAddresses {
    +useAddresses(names: string[], queryOptions?): QueryResult<Address[]>
  }
  getAddresses <.. useAddresses : used by

Loading

Class diagram for new MiniKit hooks

classDiagram
  class useComposeCast {
    +composeCast(params)
    +composeCastAsync(params)
  }
  class useViewCast {
    +viewCast(params)
    +viewCastAsync(params)
  }
  class useIsInMiniApp {
    +isInMiniApp: boolean
  }

Loading

Class diagram for OnchainKitProvider and clientMetaManager

classDiagram
  class OnchainKitProvider {
    +sessionId: string
    +isMiniKit: boolean
    +useEffect() // initializes clientMetaManager
  }
  class clientMetaManager {
    +init(isMiniKit)
    +isInitialized()
    +getClientMeta(): Promise<ClientMeta>
    -clientMeta: ClientMeta | null
    -initPromise: Promise<ClientMeta> | null
  }
  OnchainKitProvider --> clientMetaManager : initializes

Loading

File-Level Changes

Change	Details	Files
Refactor default provider setup into separate Wagmi and QueryClient components	Extract WagmiProviderWithDefault and QueryClientProviderWithDefault components Use useOnchainKit to derive apiKey/appName/logo and create/update config Handle dynamic connectors changes via useEffect/useRef to avoid unnecessary re-creations	src/DefaultOnchainKitProviders.tsx
Add AutoConnect component and MiniKit-specific hooks	Create AutoConnect to auto-connect in Mini App contexts based on sdk.context and Wagmi connectors Implement useIsInMiniApp hook using react-query Add useComposeCast and useViewCast mutations wrapping Farcaster SDK actions Build clientMetaManager singleton to attach client FID and mode for analytics	src/minikit/components/AutoConnect.tsx src/minikit/hooks/useIsInMiniApp.tsx src/minikit/hooks/useComposeCast.tsx src/minikit/hooks/useViewCast.tsx src/core/clientMeta/clientMetaManager.ts
Batch ENS/Basename resolution and hook support	Introduce getAddresses utility for bulk name resolution Refactor getNames and getSocials to use batch requests and validate results Add useAddresses hook with react-query for caching and options	src/identity/utils/getAddresses.ts src/identity/utils/getNames.ts src/identity/utils/getSocials.ts src/identity/hooks/useAddresses.ts
Refactor advanced send flow with dedicated recipient state hook	Replace SendAddressSelection with SendAddressInput and SendAddressSelector components Introduce useRecipientState hook to manage input, validation, selection, displayValue Update SendProvider, types, and tests to use recipientState/update/validate/select/deselect	src/wallet/components/wallet-advanced-send/components/SendAddressInput.tsx src/wallet/components/wallet-advanced-send/components/SendAddressSelector.tsx src/wallet/components/wallet-advanced-send/components/SendProvider.tsx src/wallet/components/wallet-advanced-send/hooks/useRecipientState.tsx src/wallet/components/wallet-advanced-send/types.ts
Make wallet sign-up optional in WalletModal	Add signUpEnabled flag with default true in OnchainKitProvider config Conditionally render 'Sign up' button and divider line based on config Add tests for when signUpEnabled is true, false, or undefined	src/wallet/components/WalletModal.tsx
Simplify CSS to external imports and Tailwind base	Replace lengthy index.css rules with font @imports and ock.css plus tailwind-base.css Introduce ock.css for design tokens Update Storybook and build to include external style sheets	src/styles/index.css src/styles/ock.css
Enhance build/release toolchain and CI hardening	Configure vite.config.ts for OCK_VERSION injection, external deps, dts plugin Add publish-prerelease.js script for prerelease tagging and version bump Update GitHub workflows to use step-security/harden-runner and pinned action versions	vite.config.ts scripts/publish-prerelease.js .github/workflows/release.yml

Possibly linked issues

• chore: version packages 🚀 (coinbase#2427)  #8: The issue serves as a comprehensive review guide detailing all the extensive changes implemented in the PR, including package upgrades, provider refactoring, new MiniKit hooks, and build pipeline updates.

---

Tips and commands

Interacting with Sourcery

• Trigger a new review: Comment @sourcery-ai review on the pull request.
• Continue discussions: Reply directly to Sourcery's review comments.
• Generate a GitHub issue from a review comment: Ask Sourcery to create an
  issue from a review comment by replying to it. You can also reply to a
  review comment with @sourcery-ai issue to create an issue from it.
• Generate a pull request title: Write @sourcery-ai anywhere in the pull
  request title to generate a title at any time. You can also comment
  @sourcery-ai title on the pull request to (re-)generate the title at any time.
• Generate a pull request summary: Write @sourcery-ai summary anywhere in
  the pull request body to generate a PR summary at any time exactly where you
  want it. You can also comment @sourcery-ai summary on the pull request to
  (re-)generate the summary at any time.
• Generate reviewer's guide: Comment @sourcery-ai guide on the pull
  request to (re-)generate the reviewer's guide at any time.
• Resolve all Sourcery comments: Comment @sourcery-ai resolve on the
  pull request to resolve all Sourcery comments. Useful if you've already
  addressed all the comments and don't want to see them anymore.
• Dismiss all Sourcery reviews: Comment @sourcery-ai dismiss on the pull
  request to dismiss all existing Sourcery reviews. Especially useful if you
  want to start fresh with a new review - don't forget to comment
  @sourcery-ai review to trigger a new review!

Customizing Your Experience

Access your dashboard to:

• Enable or disable review features such as the Sourcery-generated pull request
  summary, the reviewer's guide, and others.
• Change the review language.
• Add, remove or edit custom review instructions.
• Adjust other review settings.

Getting Help

• Contact our support team for questions or feedback.
• Visit our documentation for detailed guides and information.
• Keep in touch with the Sourcery team by following us on X/Twitter, LinkedIn or GitHub.

Originally posted by @sourcery-ai[bot] in #17 (comment)