chore: Web3Modal -> AppKit (#2686)

Co-authored-by: Enes <enesozturk.d@gmail.com>
reown-com · Aug 11, 2024 · d0765e4 · d0765e4
1 parent a3aba6f
commit d0765e4
Show file tree

Hide file tree

Showing 41 changed files with 82 additions and 84 deletions.
diff --git a/.github/ISSUE_TEMPLATE/feature_request.yml b/.github/ISSUE_TEMPLATE/feature_request.yml
@@ -1,5 +1,5 @@
 name: "\U0001F64B Feature Request"
-description: 'Want us to add something to Web3Modal?'
+description: 'Want us to add something to AppKit?'
 title: '[feature] '
 labels: ['feature-request', 'needs review']
 body:

diff --git a/apps/demo/app/layout.tsx b/apps/demo/app/layout.tsx
@@ -1,7 +1,7 @@
 import type { Metadata } from 'next'
 import localFont from 'next/font/local'
 import '@/styles/globals.css'
-import Web3ModalProvider from '@/context/Web3Modal'
+import AppKitProvider from '@/context/AppKit'
 
 const abcDiatype = localFont({
   src: [
@@ -18,12 +18,12 @@ const abcDiatype = localFont({
 })
 
 export const metadata: Metadata = {
-  title: 'Web3Modal | Demo',
+  title: 'AppKit | Demo',
   description:
-    'Web3Modal is an elegantly simple yet powerful library that helps you manage your multi-chain wallet connection flows, all in one place.',
+    'AppKit is an elegantly simple yet powerful library that helps you manage your multi-chain wallet connection flows, all in one place.',
   openGraph: {
     description:
-      'Your on-ramp to web3 multichain. Web3Modal is a versatile library that makes it super easy to connect users with your Dapp and start interacting with the blockchain.'
+      'Your on-ramp to web3 multichain. AppKit is a versatile library that makes it super easy to connect users with your Dapp and start interacting with the blockchain.'
   }
 }
 
@@ -35,7 +35,7 @@ export default function RootLayout({
   return (
     <html lang="en">
       <body className={abcDiatype.className}>
-        <Web3ModalProvider>{children}</Web3ModalProvider>
+        <AppKitProvider>{children}</AppKitProvider>
       </body>
     </html>
   )

diff --git a/apps/demo/app/page.tsx b/apps/demo/app/page.tsx
@@ -8,7 +8,7 @@ import { motion } from 'framer-motion'
 import { VARIANTS } from '@/utils/constants'
 
 export default function Home() {
-  // Web3Modal Demo
+  // AppKit Demo
   return (
     <motion.main
       variants={VARIANTS}

diff --git a/apps/demo/components/ConfigSection.tsx b/apps/demo/components/ConfigSection.tsx
@@ -53,7 +53,7 @@ export default function ConfigSection() {
       >
         <div className="flex-grow px-12 py-8">
           <motion.h1 variants={VARIANTS} className="text-xl font-bold">
-            Build Your Own Web3Modal
+            Build Your Own AppKit
           </motion.h1>
           <motion.p variants={VARIANTS} className="text-[var(--navy-400)] text-sm mt-1 mb-6">
             Modify the configuration to suit your needs. You can copy the config and use it in your

diff --git a/apps/demo/components/NavSection.tsx b/apps/demo/components/NavSection.tsx
@@ -12,12 +12,12 @@ export default function NavSection() {
         <Image
           src={W3mLogo}
           placeholder="blur"
-          alt="Web3Modal Logo"
+          alt="AppKit Logo"
           width={40}
           height={40}
           className="rounded-lg"
         />
-        <span className="pt-0.5">Web3Modal</span>
+        <span className="pt-0.5">AppKit</span>
       </motion.a>
     </nav>
   )

diff --git a/apps/demo/components/ViewSection.tsx b/apps/demo/components/ViewSection.tsx
@@ -13,7 +13,7 @@ export default function ViewSection() {
       variants={VARIANTS}
       className="bg-white relative h-[36rem] w-96 grid place-items-center rounded-3xl text-xl shadow-slate-900/5 shadow-lg border-slate-200 border text-center p-8"
     >
-      <p className="absolute top-0 ml-auto py-8 opacity-50 text-sm">Hopefully Web3Modal here lol</p>
+      <p className="absolute top-0 ml-auto py-8 opacity-50 text-sm">Hopefully AppKit here lol</p>
       <div className="w-full">
         <p className="flex justify-between">
           Email:

diff --git a/apps/demo/context/AppKit.tsx b/apps/demo/context/AppKit.tsx
@@ -0,0 +1,7 @@
+'use client'
+
+import React from 'react'
+
+export default function AppKitProvider({ children }: { children: React.ReactNode }) {
+  return <>{children}</>
+}
diff --git a/apps/demo/context/Web3Modal.tsx b/apps/demo/context/Web3Modal.tsx
diff --git a/apps/laboratory/.env.example b/apps/laboratory/.env.example
@@ -2,7 +2,7 @@
 NEXT_PUBLIC_PROJECT_ID=""
 # See 1password for `NEXT_AUTH_SECRET`
 NEXTAUTH_SECRET=""
-# See 1password for `Mailsac Web3Modal API Key`
+# See 1password for `Mailsac AppKit API Key`
 MAILSAC_API_KEY=""
 # Only needed when overriding default next-auth URL
 # NEXTAUTH_URL=""

diff --git a/...atory/src/components/Web3ModalButtons.tsx → ...boratory/src/components/AppKitButtons.tsx b/...atory/src/components/Web3ModalButtons.tsx → ...boratory/src/components/AppKitButtons.tsx
@@ -1,10 +1,10 @@
 import { Stack, Card, CardHeader, Heading, CardBody, Box, StackDivider } from '@chakra-ui/react'
 
-export function Web3ModalButtons() {
+export function AppKitButtons() {
   return (
     <Card marginTop={20}>
       <CardHeader>
-        <Heading size="md">Web3Modal Interactions</Heading>
+        <Heading size="md">AppKit Interactions</Heading>
       </CardHeader>
 
       <CardBody>

diff --git a/...boratory/src/components/Web3ModalInfo.tsx → .../laboratory/src/components/AppKitInfo.tsx b/...boratory/src/components/Web3ModalInfo.tsx → .../laboratory/src/components/AppKitInfo.tsx
@@ -11,13 +11,13 @@ import {
   Text
 } from '@chakra-ui/react'
 
-type Web3ModalInfoProps = {
+type AppKitInfoProps = {
   address?: string
   chainId?: number
   clientId: string | null
 }
 
-export function Web3ModalInfo({ address, chainId, clientId }: Web3ModalInfoProps) {
+export function AppKitInfo({ address, chainId, clientId }: AppKitInfoProps) {
   return (
     <Card marginTop={10} marginBottom={10}>
       <CardHeader>

diff --git a/apps/laboratory/src/components/Ethers/EthersModalInfo.tsx b/apps/laboratory/src/components/Ethers/EthersModalInfo.tsx
@@ -2,7 +2,7 @@ import * as React from 'react'
 import { useWeb3ModalAccount, useWeb3ModalProvider } from '@web3modal/ethers/react'
 import EthereumProvider from '@walletconnect/ethereum-provider'
 
-import { Web3ModalInfo } from '../Web3ModalInfo'
+import { AppKitInfo } from '../AppKitInfo'
 
 export function EthersModalInfo() {
   const { isConnected, address, chainId } = useWeb3ModalAccount()
@@ -28,6 +28,6 @@ export function EthersModalInfo() {
   }, [])
 
   return ready && isConnected ? (
-    <Web3ModalInfo address={address} chainId={chainId} clientId={clientId} />
+    <AppKitInfo address={address} chainId={chainId} clientId={clientId} />
   ) : null
 }
diff --git a/apps/laboratory/src/components/Wagmi/WagmiModalInfo.tsx b/apps/laboratory/src/components/Wagmi/WagmiModalInfo.tsx
@@ -2,7 +2,7 @@ import * as React from 'react'
 import EthereumProvider from '@walletconnect/ethereum-provider'
 
 import { useAccount } from 'wagmi'
-import { Web3ModalInfo } from '../Web3ModalInfo'
+import { AppKitInfo } from '../AppKitInfo'
 
 export function WagmiModalInfo() {
   const { isConnected, address, chainId, connector } = useAccount()
@@ -23,7 +23,5 @@ export function WagmiModalInfo() {
     getClientId().then(setClientId)
   }, [connector])
 
-  return isConnected ? (
-    <Web3ModalInfo address={address} chainId={chainId} clientId={clientId} />
-  ) : null
+  return isConnected ? <AppKitInfo address={address} chainId={chainId} clientId={clientId} /> : null
 }
diff --git a/apps/laboratory/src/components/Wagmi/WagmiSignMessageTest.tsx b/apps/laboratory/src/components/Wagmi/WagmiSignMessageTest.tsx
@@ -13,7 +13,7 @@ export function WagmiSignMessageTest() {
 
   async function onSignMessage() {
     try {
-      const sig = await signMessageAsync({ message: 'Hello Web3Modal!' })
+      const sig = await signMessageAsync({ message: 'Hello AppKit!' })
       setSignature(sig)
       toast({
         title: ConstantsUtil.SigningSucceededToastTitle,

diff --git a/apps/laboratory/src/pages/library/ethers-all-internal.tsx b/apps/laboratory/src/pages/library/ethers-all-internal.tsx
@@ -3,7 +3,7 @@ import { ThemeStore } from '../../utils/StoreUtil'
 import { EthersConstants } from '../../utils/EthersConstants'
 import { ConstantsUtil } from '../../utils/ConstantsUtil'
 import { EthersTests } from '../../components/Ethers/EthersTests'
-import { Web3ModalButtons } from '../../components/Web3ModalButtons'
+import { AppKitButtons } from '../../components/AppKitButtons'
 import { siweConfig } from '../../utils/SiweUtils'
 import { SiweData } from '../../components/Siwe/SiweData'
 import { EthersModalInfo } from '../../components/Ethers/EthersModalInfo'
@@ -32,7 +32,7 @@ ThemeStore.setModal(modal)
 export default function Ethers() {
   return (
     <>
-      <Web3ModalButtons />
+      <AppKitButtons />
       <EthersModalInfo />
       <SiweData />
       <EthersTests />

diff --git a/apps/laboratory/src/pages/library/ethers-all.tsx b/apps/laboratory/src/pages/library/ethers-all.tsx
@@ -3,7 +3,7 @@ import { ThemeStore } from '../../utils/StoreUtil'
 import { EthersConstants } from '../../utils/EthersConstants'
 import { ConstantsUtil } from '../../utils/ConstantsUtil'
 import { EthersTests } from '../../components/Ethers/EthersTests'
-import { Web3ModalButtons } from '../../components/Web3ModalButtons'
+import { AppKitButtons } from '../../components/AppKitButtons'
 import { siweConfig } from '../../utils/SiweUtils'
 import { SiweData } from '../../components/Siwe/SiweData'
 import { EthersModalInfo } from '../../components/Ethers/EthersModalInfo'
@@ -31,7 +31,7 @@ ThemeStore.setModal(modal)
 export default function Ethers() {
   return (
     <>
-      <Web3ModalButtons />
+      <AppKitButtons />
       <EthersModalInfo />
       <SiweData />
       <EthersTests />

diff --git a/apps/laboratory/src/pages/library/ethers-email.tsx b/apps/laboratory/src/pages/library/ethers-email.tsx
@@ -3,7 +3,7 @@ import { ThemeStore } from '../../utils/StoreUtil'
 import { EthersConstants } from '../../utils/EthersConstants'
 import { ConstantsUtil } from '../../utils/ConstantsUtil'
 import { EthersTests } from '../../components/Ethers/EthersTests'
-import { Web3ModalButtons } from '../../components/Web3ModalButtons'
+import { AppKitButtons } from '../../components/AppKitButtons'
 import { EthersModalInfo } from '../../components/Ethers/EthersModalInfo'
 
 const modal = createWeb3Modal({
@@ -28,7 +28,7 @@ ThemeStore.setModal(modal)
 export default function Ethers() {
   return (
     <>
-      <Web3ModalButtons />
+      <AppKitButtons />
       <EthersModalInfo />
       <EthersTests />
     </>

diff --git a/apps/laboratory/src/pages/library/ethers-siwe.tsx b/apps/laboratory/src/pages/library/ethers-siwe.tsx
@@ -1,6 +1,6 @@
 import { SiweData } from '../../components/Siwe/SiweData'
 import { EthersTests } from '../../components/Ethers/EthersTests'
-import { Web3ModalButtons } from '../../components/Web3ModalButtons'
+import { AppKitButtons } from '../../components/AppKitButtons'
 import { createWeb3Modal, defaultConfig } from '@web3modal/ethers/react'
 import { ThemeStore } from '../../utils/StoreUtil'
 import { EthersConstants } from '../../utils/EthersConstants'
@@ -26,7 +26,7 @@ ThemeStore.setModal(modal)
 export default function EthersSiwe() {
   return (
     <>
-      <Web3ModalButtons />
+      <AppKitButtons />
       <EthersModalInfo />
       <SiweData />
       <EthersTests />

diff --git a/apps/laboratory/src/pages/library/ethers.tsx b/apps/laboratory/src/pages/library/ethers.tsx
@@ -1,5 +1,5 @@
 import { EthersTests } from '../../components/Ethers/EthersTests'
-import { Web3ModalButtons } from '../../components/Web3ModalButtons'
+import { AppKitButtons } from '../../components/AppKitButtons'
 import { createWeb3Modal, defaultConfig } from '@web3modal/ethers/react'
 import { ThemeStore } from '../../utils/StoreUtil'
 import { EthersConstants } from '../../utils/EthersConstants'
@@ -27,7 +27,7 @@ ThemeStore.setModal(modal)
 export default function Ethers() {
   return (
     <>
-      <Web3ModalButtons />
+      <AppKitButtons />
       <EthersModalInfo />
       <EthersTests />
     </>

diff --git a/apps/laboratory/src/pages/library/external.tsx b/apps/laboratory/src/pages/library/external.tsx
@@ -2,7 +2,7 @@ import { createWeb3Modal } from '@web3modal/wagmi/react'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { useEffect, useState } from 'react'
 import { WagmiProvider, createConfig, http } from 'wagmi'
-import { Web3ModalButtons } from '../../components/Web3ModalButtons'
+import { AppKitButtons } from '../../components/AppKitButtons'
 import { WagmiTests } from '../../components/Wagmi/WagmiTests'
 import { ThemeStore } from '../../utils/StoreUtil'
 import { ConstantsUtil } from '../../utils/ConstantsUtil'
@@ -44,7 +44,7 @@ export default function Wagmi() {
   return ready ? (
     <WagmiProvider config={wagmiConfig}>
       <QueryClientProvider client={queryClient}>
-        <Web3ModalButtons />
+        <AppKitButtons />
         <WagmiModalInfo />
         <WagmiTests />
       </QueryClientProvider>

diff --git a/apps/laboratory/src/pages/library/solana.tsx b/apps/laboratory/src/pages/library/solana.tsx
@@ -2,7 +2,7 @@ import { createWeb3Modal, defaultSolanaConfig } from '@web3modal/solana/react'
 
 import { ThemeStore } from '../../utils/StoreUtil'
 import { solana, solanaDevnet, solanaTestnet } from '../../utils/ChainsUtil'
-import { Web3ModalButtons } from '../../components/Web3ModalButtons'
+import { AppKitButtons } from '../../components/AppKitButtons'
 import { ConstantsUtil } from '../../utils/ConstantsUtil'
 import { SolanaTests } from '../../components/Solana/SolanaTests'
 import { SolflareWalletAdapter } from '@solana/wallet-adapter-wallets'
@@ -33,7 +33,7 @@ ThemeStore.setModal(modal)
 export default function Solana() {
   return (
     <>
-      <Web3ModalButtons />
+      <AppKitButtons />
       <SolanaTests />
     </>
   )

diff --git a/apps/laboratory/src/pages/library/wagmi-all-internal.tsx b/apps/laboratory/src/pages/library/wagmi-all-internal.tsx
@@ -2,7 +2,7 @@ import { createWeb3Modal } from '@web3modal/wagmi/react'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { useEffect, useState } from 'react'
 import { WagmiProvider } from 'wagmi'
-import { Web3ModalButtons } from '../../components/Web3ModalButtons'
+import { AppKitButtons } from '../../components/AppKitButtons'
 import { WagmiTests } from '../../components/Wagmi/WagmiTests'
 import { ThemeStore } from '../../utils/StoreUtil'
 import { getWagmiConfig } from '../../utils/WagmiConstants'
@@ -38,7 +38,7 @@ export default function Wagmi() {
   return ready ? (
     <WagmiProvider config={wagmiConfig}>
       <QueryClientProvider client={queryClient}>
-        <Web3ModalButtons />
+        <AppKitButtons />
         <WagmiModalInfo />
         <SiweData />
         <WagmiTests />

diff --git a/apps/laboratory/src/pages/library/wagmi-all.tsx b/apps/laboratory/src/pages/library/wagmi-all.tsx
@@ -2,7 +2,7 @@ import { createWeb3Modal } from '@web3modal/wagmi/react'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { useEffect, useState } from 'react'
 import { WagmiProvider } from 'wagmi'
-import { Web3ModalButtons } from '../../components/Web3ModalButtons'
+import { AppKitButtons } from '../../components/AppKitButtons'
 import { WagmiTests } from '../../components/Wagmi/WagmiTests'
 import { ThemeStore } from '../../utils/StoreUtil'
 import { getWagmiConfig } from '../../utils/WagmiConstants'
@@ -37,7 +37,7 @@ export default function Wagmi() {
   return ready ? (
     <WagmiProvider config={wagmiConfig}>
       <QueryClientProvider client={queryClient}>
-        <Web3ModalButtons />
+        <AppKitButtons />
         <WagmiModalInfo />
         <SiweData />
         <WagmiTests />

diff --git a/apps/laboratory/src/pages/library/wagmi-email.tsx b/apps/laboratory/src/pages/library/wagmi-email.tsx
@@ -2,7 +2,7 @@ import { createWeb3Modal } from '@web3modal/wagmi/react'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { useEffect, useState } from 'react'
 import { WagmiProvider } from 'wagmi'
-import { Web3ModalButtons } from '../../components/Web3ModalButtons'
+import { AppKitButtons } from '../../components/AppKitButtons'
 import { WagmiTests } from '../../components/Wagmi/WagmiTests'
 import { ThemeStore } from '../../utils/StoreUtil'
 import { ConstantsUtil } from '../../utils/ConstantsUtil'
@@ -34,7 +34,7 @@ export default function Wagmi() {
   return ready ? (
     <WagmiProvider config={wagmiConfig}>
       <QueryClientProvider client={queryClient}>
-        <Web3ModalButtons />
+        <AppKitButtons />
         <WagmiModalInfo />
         <WagmiTests />
       </QueryClientProvider>

diff --git a/apps/laboratory/src/pages/library/wagmi-permissions-async.tsx b/apps/laboratory/src/pages/library/wagmi-permissions-async.tsx
@@ -1,7 +1,7 @@
 import { createWeb3Modal } from '@web3modal/wagmi/react'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { WagmiProvider } from 'wagmi'
-import { Web3ModalButtons } from '../../components/Web3ModalButtons'
+import { AppKitButtons } from '../../components/AppKitButtons'
 import { ThemeStore } from '../../utils/StoreUtil'
 import { ConstantsUtil } from '../../utils/ConstantsUtil'
 import { getWagmiConfig } from '../../utils/WagmiConstants'
@@ -37,7 +37,7 @@ export default function Wagmi() {
     <WagmiProvider config={wagmiEmailConfig}>
       <QueryClientProvider client={queryClient}>
         <WagmiPermissionsAsyncProvider>
-          <Web3ModalButtons />
+          <AppKitButtons />
           <WagmiPermissionsAsyncTest />
         </WagmiPermissionsAsyncProvider>
       </QueryClientProvider>

diff --git a/apps/laboratory/src/pages/library/wagmi-permissions-sync.tsx b/apps/laboratory/src/pages/library/wagmi-permissions-sync.tsx
@@ -1,7 +1,7 @@
 import { createWeb3Modal } from '@web3modal/wagmi/react'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { WagmiProvider } from 'wagmi'
-import { Web3ModalButtons } from '../../components/Web3ModalButtons'
+import { AppKitButtons } from '../../components/AppKitButtons'
 import { ThemeStore } from '../../utils/StoreUtil'
 import { ConstantsUtil } from '../../utils/ConstantsUtil'
 import { getWagmiConfig } from '../../utils/WagmiConstants'
@@ -37,7 +37,7 @@ export default function Wagmi() {
     <WagmiProvider config={wagmiEmailConfig}>
       <QueryClientProvider client={queryClient}>
         <WagmiPermissionsSyncProvider>
-          <Web3ModalButtons />
+          <AppKitButtons />
           <WagmiPermissionsSyncTest />
         </WagmiPermissionsSyncProvider>
       </QueryClientProvider>