Fix init errors

5afe · Aug 19, 2024 · 1f962c2 · 1f962c2
1 parent 60ad6d6
commit 1f962c2
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 8 deletions.
diff --git a/src/components/Magic.tsx b/src/components/Magic.tsx
@@ -6,14 +6,16 @@ import { WalletClient, createWalletClient, custom } from 'viem'
 import { sepolia } from 'viem/chains'
 
 // Get the API_KEY from the Magic dashboard.
-const API_KEY = ''
+const API_KEY = process.env.MAGIC_API_KEY
 
 export default function MagicComponent() {
   const [magic, setMagic] = useState<Magic>()
   const [provider, setProvider] = useState<WalletClient | null>(null)
   const [signerAddress, setSignerAddress] = useState<string | null>(null)
 
   useEffect(() => {
+    if (!API_KEY) return
+
     const magicInstance = new Magic(API_KEY, {
       network: {
         rpcUrl: 'https://ethereum-sepolia-rpc.publicnode.com',
@@ -69,8 +71,14 @@ export default function MagicComponent() {
         <Image src={magicLogo} alt="Magic" height="30" />
         <h2>Magic</h2>
       </div>
-      <pre>{signerAddress || 'Not connected'}</pre>
-      {signerAddress ? loggedInView : unloggedInView}
+      {!API_KEY ? (
+        <pre>Not configured</pre>
+      ) : (
+        <>
+          <pre>{signerAddress || 'Not connected'}</pre>
+          {signerAddress ? loggedInView : unloggedInView}
+        </>
+      )}
     </div>
   )
 }
diff --git a/src/components/Privy.tsx b/src/components/Privy.tsx
@@ -6,7 +6,7 @@ import { WalletClient, createWalletClient, custom } from 'viem'
 import { sepolia } from 'viem/chains'
 
 // Get the APP_ID from the Privy dashboard.
-const APP_ID = ''
+const APP_ID = process.env.PRIVY_APP_ID
 
 function PrivyApp() {
   const { login, logout, ready, authenticated } = usePrivy()
@@ -16,6 +16,8 @@ function PrivyApp() {
 
   useEffect(() => {
     const init = async () => {
+      if (!APP_ID) return
+
       if (ready && authenticated && readyWallets && wallets.length > 0 ) {
         const ethereumProvider = await wallets[0].getEthereumProvider()
         const client = createWalletClient({
@@ -72,6 +74,18 @@ function PrivyApp() {
 }
 
 export default function PrivyComponent() {
+  if (!APP_ID) {
+    return (
+      <div className="card">
+        <div className="title">
+          <Image src={privyLogo} alt="Magic" height="30" />
+          <h2>Privy</h2>
+        </div>
+        <pre>Not configured</pre>
+      </div>
+    )
+  }
+
   return (
     <PrivyProvider
       appId={APP_ID}

diff --git a/src/components/Web3Auth.tsx b/src/components/Web3Auth.tsx
@@ -8,7 +8,7 @@ import { WalletClient, createWalletClient, custom } from 'viem'
 import { sepolia } from 'viem/chains'
 
 // Get the CLIENT_ID from the Web3Auth dashboard.
-const CLIENT_ID = ''
+const CLIENT_ID = process.env.WEB3AUTH_CLIENT_ID
 
 const chainConfig = {
   chainNamespace: CHAIN_NAMESPACES.EIP155,
@@ -25,7 +25,7 @@ const privateKeyProvider = new EthereumPrivateKeyProvider({
   config: { chainConfig }
 })
 
-const web3auth = new Web3Auth({
+const web3auth = CLIENT_ID && new Web3Auth({
   clientId: CLIENT_ID,
   web3AuthNetwork: WEB3AUTH_NETWORK.SAPPHIRE_DEVNET,
   privateKeyProvider
@@ -38,6 +38,8 @@ export default function Web3AuthComponent() {
   useEffect(() => {
     const init = async () => {
       try {
+        if (!CLIENT_ID) return
+
         await web3auth.initModal()
         const client = createWalletClient({
           chain: sepolia,
@@ -99,8 +101,14 @@ export default function Web3AuthComponent() {
         <Image src={web3AuthLogo} alt="Web3Auth" height="30" />
         <h2>Web3Auth</h2>
       </div>
-      <pre>{signerAddress || 'Not connected'}</pre>
-      {signerAddress ? loggedInView : unloggedInView}
+      {!CLIENT_ID ? (
+        <pre>Not configured</pre>
+      ) : (
+        <>
+          <pre>{signerAddress || 'Not connected'}</pre>
+          {signerAddress ? loggedInView : unloggedInView}
+        </>
+      )}
     </div>
   )
 }