app icon indicating copy to clipboard operation
app copied to clipboard

Integrate with the Unicorn.eth

Open mmahdigh opened this issue 8 months ago • 15 comments

Previously approved here: +

This PR would allow the Unicorn to add EFP as a trusted DApp in the Unicorn's app hub.

Some more context: +

This is how it will look:

Screenshot 2025-04-02 at 9 08 59 PM Screenshot 2025-04-02 at 9 09 26 PM

Summary by CodeRabbit

  • New Features
    • Added support for the Unicorn wallet via Thirdweb integration, allowing users to connect using the in-app wallet.
  • Chores
    • Updated dependencies to include Thirdweb packages for enhanced wallet support.
    • Added new public environment variables for Thirdweb client and Unicorn factory configuration.
  • Bug Fixes
    • Improved type safety in user profile handling to prevent potential runtime errors.
    • Restored correct address type definitions to fix compatibility issues with Thirdweb typings.
  • Refactor
    • Wrapped application providers with ThirdwebProvider for improved wallet and blockchain integration.

mmahdigh avatar Apr 16 '25 13:04 mmahdigh

@mmahdigh is attempting to deploy a commit to the EFP Team on Vercel.

A member of the Team first needs to authorize it.

vercel[bot] avatar Apr 16 '25 13:04 vercel[bot]

Review the following changes in direct dependencies. Learn more about Socket for GitHub.

Diff Package Supply Chain
Security
Vulnerability Quality Maintenance License
Added@​thirdweb-dev/​wagmi-adapter@​0.2.927510067100100
Addedthirdweb@​5.102.6971009199100

View full report

socket-security[bot] avatar Apr 16 '25 13:04 socket-security[bot]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Updated (UTC)
app ✅ Ready (Inspect) Visit Preview Jun 9, 2025 6:46pm

vercel[bot] avatar Apr 16 '25 14:04 vercel[bot]

@mmahdigh where could we get the unicorn factory address?

encryptedDegen avatar Apr 16 '25 15:04 encryptedDegen

@mmahdigh where could we get the unicorn factory address?

It's the same value that I have OR'd in the code (0xD771615c873ba5a2149D5312448cE01D677Ee48A).

process.env.NEXT_PUBLIC_NEXT_PUBLIC_UNICORN_FACTORY_ADDRESS || '0xD771615c873ba5a2149D5312448cE01D677Ee48A'

In case it changes (which is highly unlikely that it would in foreseeable future), we'll notify you and also put the new address in the Unicorn integration docs.

mmahdigh avatar Apr 17 '25 15:04 mmahdigh

@mmahdigh thanks, will add that and the thirdweb client id to our env vars, will resolve the conflicts and merge it in. Delayed it a bit due to our notifications update, but finished with that now so merging this is a priority

encryptedDegen avatar Apr 17 '25 19:04 encryptedDegen

@mmahdigh thanks, will add that and the thirdweb client id to our env vars, will resolve the conflicts and merge it in. Delayed it a bit due to our notifications update, but finished with that now so merging this is a priority

Thank you very much, buddy!

mmahdigh avatar Apr 18 '25 12:04 mmahdigh

Walkthrough

The changes introduce two new environment variable declarations for Thirdweb client and Unicorn factory addresses. Multiple dependencies are updated, including the addition of Thirdweb-related packages. The provider hierarchy is modified to wrap existing providers with ThirdwebProvider. The wallet configuration is enhanced by integrating the Thirdweb client and the Unicorn wallet connector into the wagmi and rainbowkit setup. A type declaration file is added to fix type issues related to the abitype module. Minor improvements are made to the user profile hook to ensure type safety and reorder condition checks. Additional minor refinements include safer contract method calls, simplified gesture handling, and reordering of logical checks in search and OG route files.

Changes

File(s) Change Summary
environment.d.ts Added NEXT_PUBLIC_THIRDWEB_CLIENT_ID and NEXT_PUBLIC_UNICORN_FACTORY_ADDRESS to environment variables.
package.json Updated multiple dependency versions; added thirdweb and @thirdweb-dev/wagmi-adapter dependencies; updated devDependencies.
src/app/providers.tsx Wrapped existing providers/components with ThirdwebProvider from thirdweb/react.
src/lib/wagmi.ts Integrated Thirdweb client and Unicorn wallet connector into wagmi config using new environment variables.
src/app/[user]/hooks/use-user-profile.ts Improved type safety by stringifying user before .includes('.'); reordered user type checks.
src/app/abi.d.ts Added module augmentation for abitype to redefine addressType as `0x${string}` to fix type errors.
abitype.d.ts Added new module declaration for abitype with Register interface defining AddressType as `0x${string}`.
src/app/og/route.tsx Reordered logical OR operands inside negation for isList condition without changing logic.
src/app/swipe/components/useRescommendedProfilesCards.ts Simplified addToCart call by removing TypeScript expect-error comment and condensing array syntax.
src/components/list-settings/hooks/use-list-settings.ts Added optional chaining to contract read calls to prevent runtime errors if methods are undefined.
src/components/search/hooks/useSearch.ts Removed unused import; eliminated numeric and ENS name resolution block from query; reordered condition checks in onSubmit.
src/hooks/efp-actions/use-list-ops.ts Removed TypeScript expect-error comment above writeContract call.
tsconfig.json Included abitype.d.ts in "include" and "files" arrays for type checking and compilation context.

Sequence Diagram(s)

sequenceDiagram
    participant App
    participant ThirdwebProvider
    participant RainbowKitProvider
    participant TransactionProvider
    participant EFPProfileProvider
    participant SoundsProvider
    participant RecommendedProfilesProvider

    App->>ThirdwebProvider: Render
    ThirdwebProvider->>RainbowKitProvider: Wrap children
    RainbowKitProvider->>TransactionProvider: Wrap children
    TransactionProvider->>EFPProfileProvider: Wrap children
    EFPProfileProvider->>SoundsProvider: Wrap children
    SoundsProvider->>RecommendedProfilesProvider: Wrap children
    RecommendedProfilesProvider->>App: Render Navigation, children, TransactionModal, modal-root
sequenceDiagram
    participant App
    participant WagmiConfig
    participant ThirdwebClient
    participant UnicornConnector
    participant OtherWallets

    App->>WagmiConfig: Initialize
    WagmiConfig->>ThirdwebClient: Create with env var or default
    WagmiConfig->>UnicornConnector: Create with ThirdwebClient, factory address, smart account options
    WagmiConfig->>OtherWallets: Initialize standard connectors
    WagmiConfig->>App: Provide connectors (Unicorn + others)

Poem

In a meadow of code, the unicorn pranced,
Thirdweb arrived, and the wallets all danced.
With new env vars and connectors in tow,
Providers wrapped snugly, the features now grow.
A string check improved, dependencies bloom—
This rabbit’s delighted, there’s magic in the room!
🦄✨

✨ Finishing Touches
  • [ ] 📝 Generate Docstrings

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share
🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

  • Review comments: Directly reply to a review comment made by CodeRabbit. Example:
    • I pushed a fix in commit <commit_id>, please review it.
    • Explain this complex logic.
    • Open a follow-up GitHub issue for this discussion.
  • Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
    • @coderabbitai explain this code block.
    • @coderabbitai modularize this function.
  • PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
    • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
    • @coderabbitai read src/utils.ts and explain its main purpose.
    • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
    • @coderabbitai help me debug CodeRabbit configuration file.

Support

Need 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)

  • @coderabbitai pause to pause the reviews on a PR.
  • @coderabbitai resume to resume the paused reviews.
  • @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
  • @coderabbitai full review to do a full review from scratch and review all the files again.
  • @coderabbitai summary to regenerate the summary of the PR.
  • @coderabbitai generate docstrings to generate docstrings for this PR.
  • @coderabbitai generate sequence diagram to generate a sequence diagram of the changes in this PR.
  • @coderabbitai resolve resolve all the CodeRabbit review comments.
  • @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
  • @coderabbitai help to get help.

Other keywords and placeholders

  • Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
  • Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
  • Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

  • You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
  • Please see the configuration documentation for more information.
  • If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

  • Visit our Documentation for detailed information on how to use CodeRabbit.
  • Join our Discord Community to get help, request features, and share feedback.
  • Follow us on X/Twitter for updates and announcements.

coderabbitai[bot] avatar Apr 18 '25 18:04 coderabbitai[bot]

@mmahdigh thought this was gonna be quicker than it actually is. Thirdweb is overriding the wagmi's useAccount hook return types.

At const { address } = useAccount() the address should be type of 0x${string} or Address, but after wrapping the app with the ThirdwebProvider it changes it to string, which is not a valid address. If this is intended, check for any type issues, to insure the correct behaviour.

just run the following command to get all the type errors that are related to that specific type change.

bun typecheck

encryptedDegen avatar Apr 22 '25 08:04 encryptedDegen

@mmahdigh I have created the issue in the thirdweb repo, you can comment on it to hopefully speed up the process of them getting this sorted https://github.com/thirdweb-dev/js/issues/6810

encryptedDegen avatar Apr 22 '25 09:04 encryptedDegen

@mmahdigh a dev from thirdweb provided a solution, if you could take a look and implement it then we should be ready to merge https://github.com/thirdweb-dev/js/issues/6810#issuecomment-2820788857

Just make sure that bun typecheck command is passing

encryptedDegen avatar Apr 22 '25 14:04 encryptedDegen

@mmahdigh a dev from thirdweb provided a solution, if you could take a look and implement it then we should be ready to merge thirdweb-dev/js#6810 (comment)

Just make sure that bun typecheck command is passing

Thank you very much! Will check it out tomorrow.

mmahdigh avatar Apr 22 '25 21:04 mmahdigh

Hi! @encryptedDegen

I'm no longer getting any type errors. (Please do a double check as I think bun typecheck doesn't work well with incremental ts builds and sometimes outputs invalid cache)

Thanks!

mmahdigh avatar Apr 28 '25 19:04 mmahdigh

Hi! @encryptedDegen

I'm no longer getting any type errors. (Please do a double check as I think bun typecheck doesn't work well with incremental ts builds and sometimes outputs invalid cache)

Thanks!

Amazing, will review and merge!

encryptedDegen avatar May 08 '25 00:05 encryptedDegen

Hi! @encryptedDegen Rebased the branch to fix the conflicts. Let me know if I can help in any other way! Thanks!

mmahdigh avatar May 08 '25 12:05 mmahdigh

Hi! @encryptedDegen

I & one of our test engineers did a test, and everything seems to be working correctly!

Can you merge this yourself, or should I make verified commits? (I'm seeing a Merging is blocked: Commits must have verified signatures.)

mmahdigh avatar Jun 12 '25 15:06 mmahdigh

Hi! @encryptedDegen

I & one of our test engineers did a test, and everything seems to be working correctly!

Can you merge this yourself, or should I make verified commits? (I'm seeing a Merging is blocked: Commits must have verified signatures.)

All good. Merged!

encryptedDegen avatar Jun 12 '25 20:06 encryptedDegen