feat: add unicorn.eth integration

Author: mmahdigh

.env.example

@@ -17,3 +17,5 @@ NEXT_PUBLIC_MIXPANEL=
 NEXT_PUBLIC_FIAT_ON_RAMP=true
 NEXT_PUBLIC_SUBGRAPH_API_KEY=
 NEXT_PUBLIC_IS_CYPRESS_ENABLED=false
+NEXT_PUBLIC_THIRDWEB_CLIENT_ID=
+NEXT_PUBLIC_UNICORN_FACTORY_ADDRESS=

package.json

@@ -49,6 +49,7 @@
     "@safe-global/safe-apps-provider": "^0.18.4",
     "@safe-global/safe-apps-sdk": "^9.1.0",
     "@tanstack/react-query": "^5.62.8",
+    "@thirdweb-dev/wagmi-adapter": "^0.2.64",
     "@visx/annotation": "^3.3.0",
     "@visx/axis": "^2.14.0",
     "@visx/curve": "^2.1.0",
@@ -83,6 +84,7 @@
     "react-number-format": "^4.9.1",
     "reflect-metadata": "^0.1.13",
     "remark-gfm": "^3.0.1",
+    "thirdweb": "^5.96.4",
     "tiny-invariant": "^1.3.1",
     "viem": "^2.13.0",
     "wagmi": "^2.10.2",

pages/_app.page.tsx

@@ -21,6 +21,7 @@ import { Web3ContextProvider } from 'src/libs/web3-data-provider/Web3Provider';
 import { useRootStore } from 'src/store/root';
 import { SharedDependenciesProvider } from 'src/ui-config/SharedDependenciesProvider';
 import { wagmiConfig } from 'src/ui-config/wagmiConfig';
+import { ThirdwebProvider } from 'thirdweb/react';
 import { WagmiProvider } from 'wagmi';
 import { useShallow } from 'zustand/shallow';
 
@@ -139,44 +140,46 @@ export default function MyApp(props: MyAppProps) {
       <NoSsr>
         <LanguageProvider>
           <WagmiProvider config={wagmiConfig}>
-            <QueryClientProvider client={queryClient}>
-              <ConnectKitProvider
-                onDisconnect={cleanLocalStorage}
-                onConnect={({ connectorId }) => setWalletType(connectorId)}
-              >
-                <Web3ContextProvider>
-                  <AppGlobalStyles>
-                    <AddressBlocked>
-                      <ModalContextProvider>
-                        <SharedDependenciesProvider>
-                          <AppDataProvider>
-                            <GasStationProvider>
-                              {getLayout(<Component {...pageProps} />)}
-                              <SupplyModal />
-                              <WithdrawModal />
-                              <BorrowModal />
-                              <RepayModal />
-                              <CollateralChangeModal />
-                              <DebtSwitchModal />
-                              <ClaimRewardsModal />
-                              <EmodeModal />
-                              <SwapModal />
-                              <FaucetModal />
-                              <TransactionEventHandler />
-                              <SwitchModal />
-                              <StakingMigrateModal />
-                              <BridgeModal />
-                              <ReadOnlyModal />
-                            </GasStationProvider>
-                          </AppDataProvider>
-                        </SharedDependenciesProvider>
-                      </ModalContextProvider>
-                    </AddressBlocked>
-                  </AppGlobalStyles>
-                </Web3ContextProvider>
-              </ConnectKitProvider>
-              <ReactQueryDevtools initialIsOpen={false} />
-            </QueryClientProvider>
+            <ThirdwebProvider>
+              <QueryClientProvider client={queryClient}>
+                <ConnectKitProvider
+                  onDisconnect={cleanLocalStorage}
+                  onConnect={({ connectorId }) => setWalletType(connectorId)}
+                >
+                  <Web3ContextProvider>
+                    <AppGlobalStyles>
+                      <AddressBlocked>
+                        <ModalContextProvider>
+                          <SharedDependenciesProvider>
+                            <AppDataProvider>
+                              <GasStationProvider>
+                                {getLayout(<Component {...pageProps} />)}
+                                <SupplyModal />
+                                <WithdrawModal />
+                                <BorrowModal />
+                                <RepayModal />
+                                <CollateralChangeModal />
+                                <DebtSwitchModal />
+                                <ClaimRewardsModal />
+                                <EmodeModal />
+                                <SwapModal />
+                                <FaucetModal />
+                                <TransactionEventHandler />
+                                <SwitchModal />
+                                <StakingMigrateModal />
+                                <BridgeModal />
+                                <ReadOnlyModal />
+                              </GasStationProvider>
+                            </AppDataProvider>
+                          </SharedDependenciesProvider>
+                        </ModalContextProvider>
+                      </AddressBlocked>
+                    </AppGlobalStyles>
+                  </Web3ContextProvider>
+                </ConnectKitProvider>
+                <ReactQueryDevtools initialIsOpen={false} />
+              </QueryClientProvider>
+            </ThirdwebProvider>
           </WagmiProvider>
         </LanguageProvider>
       </NoSsr>

public/unicorn.png

@@ -1,3 +1,4 @@
+import { inAppWalletConnector } from '@thirdweb-dev/wagmi-adapter';
 import { Emitter } from '@wagmi/core/internal';
 import { getDefaultConfig } from 'connectkit';
 import {
@@ -8,12 +9,45 @@ import {
   FORK_RPC_URL,
   networkConfigs,
 } from 'src/utils/marketsAndNetworksConfig';
+import { createThirdwebClient, defineChain as thirdwebDefineChain } from 'thirdweb';
 import { type Chain } from 'viem';
 import { createConfig, CreateConfigParameters, http } from 'wagmi';
+import { mainnet } from 'wagmi/chains';
 import { injected, safe } from 'wagmi/connectors';
 
 import { prodNetworkConfig, testnetConfig } from './networksConfig';
 
+const thirdwebClientId =
+  process.env.NEXT_PUBLIC_THIRDWEB_CLIENT_ID || '4e8c81182c3709ee441e30d776223354';
+const unicornFactoryAddress =
+  process.env.NEXT_PUBLIC_UNICORN_FACTORY_ADDRESS || '0xD771615c873ba5a2149D5312448cE01D677Ee48A';
+
+// Create Thirdweb Client
+const client = createThirdwebClient({
+  clientId: thirdwebClientId,
+});
+
+// Create the Unicorn Wallet Connector (using Thirdweb In-App Wallet)
+// Note: The chain specified here is for the smart account functionality as per Unicorn docs.
+const unicornConnector = inAppWalletConnector({
+  client,
+  smartAccount: {
+    sponsorGas: true, // or false based on your needs / Unicorn requirements
+    chain: thirdwebDefineChain(mainnet.id),
+    factoryAddress: unicornFactoryAddress,
+  },
+  metadata: {
+    name: 'Unicorn.eth',
+    icon: '/unicorn.png',
+    image: {
+      src: '/unicorn.png',
+      alt: 'Unicorn.eth',
+      height: 100,
+      width: 100,
+    },
+  },
+});
+
 const testnetChains = Object.values(testnetConfig).map((config) => config.wagmiChain) as [
   Chain,
   ...Chain[]
@@ -80,6 +114,8 @@ const connectorConfig = {
   emitter: new Emitter(''),
 };
 
+prodCkConfig.connectors = [unicornConnector, ...(prodCkConfig.connectors || [])];
+
 const connectors = prodCkConfig.connectors
   ?.map((connector) => {
     // initialize the connector with the emitter so we can access the id