note on https option in localhost

Author: o-az

.vscode/settings.json

@@ -47,5 +47,8 @@
     "**/dist": true,
     "pnpm-lock.yaml": true,
     "**/node_modules": true
+  },
+  "[caddyfile]": {
+    "editor.defaultFormatter": "matthewpi.caddyfile-support"
   }
 }

Caddyfile

@@ -0,0 +1,9 @@
+# Client App
+https://client.localhost {
+	reverse_proxy localhost:6901
+}
+
+# Server - Workers
+https://server.localhost {
+	reverse_proxy localhost:6900
+}

README.md

@@ -67,6 +67,13 @@ pnpm --filter='server' db:bootstrap
 pnpm --filter='server' db:bootstrap:remote
 ```
 
+> [!NOTE]
+> if you want https setup for local development:
+>
+> - install [caddy](https://caddyserver.com/docs/install),
+> - run `caddy run --config=Caddyfile`
+> - set `VITE_SERVER_URL` to `https://server.localhost` in `client/.env`
+
 ### Start dev for worker and client
 
 ```shell

client/.env.example

@@ -1,7 +1,4 @@
-VITE_DISABLE_DIALOG=false
 VITE_ENVIRONMENT="development"
-VITE_DIALOG_HOST="https://exp.porto.sh/dialog"
-VITE_SERVER_URL="http://localhost:6900"
 
-CLOUDFLARE_API_TOKEN=""
-CLOUDFLARE_ACCOUNT_ID=""
+# or `https://server.localhost` if you're running local dev with Caddy
+VITE_SERVER_URL="http://localhost:6900"

client/package.json

@@ -8,7 +8,7 @@
     "#wrangler.json": "./wrangler.json"
   },
   "scripts": {
-    "dev": "vite --port 6901 --open",
+    "dev": "vite --port 6901",
     "build": "vite build",
     "deploy": "vite build && wrangler --config='wrangler.json' deploy",
     "typecheck": "tsc --noEmit --project tsconfig.json"
@@ -19,6 +19,7 @@
     "porto": "catalog:",
     "react": "19.1.0",
     "react-dom": "19.1.0",
+    "viem": "^2.31.7",
     "wagmi": "catalog:"
   },
   "devDependencies": {

client/src/App.tsx

@@ -1,8 +1,16 @@
-import { useAccount, useDisconnect, useConnectors, useCallsStatus } from 'wagmi'
+import {
+  useAccount,
+  useDisconnect,
+  useConnectors,
+  useCallsStatus,
+  useSendCalls,
+  useWaitForCallsStatus,
+} from 'wagmi'
 import * as React from 'react'
+import { parseEther } from 'viem'
 import { Hooks } from 'porto/wagmi'
-import { type Errors, Hex, Json } from 'ox'
 import { useConnect } from 'porto/wagmi/Hooks'
+import { type Errors, type Hex, Json } from 'ox'
 import { useMutation } from '@tanstack/react-query'
 
 import {
@@ -352,90 +360,67 @@ function GrantPermissions() {
 
 function Fund() {
   const { address, chain } = useAccount()
+  const balance = useBalance()
 
-  const addFundsMutation = useMutation({
-    mutationFn: async (event: React.FormEvent<HTMLFormElement>) => {
-      event.preventDefault()
-      event.stopPropagation()
-
-      const result = await porto.provider.request({
-        method: 'wallet_addFunds',
-        params: [
-          {
-            address,
-            token: exp1Config.address,
-            value: Hex.fromString('100'),
-          },
-        ],
-      })
+  const sendCalls = useSendCalls()
 
-      return result
-    },
-  })
-  const {
-    data: txHashData,
-    isLoading: isConfirming,
-    isSuccess: isConfirmed,
-  } = useCallsStatus({
-    id: addFundsMutation.data?.id as Hex.Hex,
-    query: {
-      enabled: !!addFundsMutation.data?.id,
-      refetchInterval: ({ state }) => {
-        if (state.data?.status === 'success') return false
-        return 1_000
-      },
-    },
-  })
+  const { isLoading: isConfirming, isSuccess: isConfirmed } =
+    useWaitForCallsStatus({
+      id: sendCalls.data?.id,
+    })
 
-  const blockExplorer = chain?.blockExplorers?.default?.url
+  const explorerUrl = chain?.blockExplorers?.default?.url
   const transactionLink = (hash: string) =>
-    blockExplorer ? `${blockExplorer}/tx/${hash}` : hash
-
-  const balance = useBalance()
-
-  const [transactions, setTransactions] = React.useState<Set<string>>(new Set())
-  React.useEffect(() => {
-    if (!txHashData?.id) return
-    const hash = txHashData.receipts?.at(0)?.transactionHash
-    if (!hash) return
-    setTransactions((prev) => new Set([...prev, hash]))
-  }, [txHashData?.id, txHashData?.receipts])
+    explorerUrl ? `${explorerUrl}/tx/${hash}` : hash
 
   return (
     <div>
       <h3>
         [client] Fund Wallet with EXP [balance:{' '}
         {`${Number(balance).toFixed(2)} EXP`}]
       </h3>
-      <form onSubmit={addFundsMutation.mutate}>
+      <form
+        onSubmit={(event) => {
+          event.preventDefault()
+          event.stopPropagation()
+          sendCalls.sendCalls({
+            calls: [
+              {
+                ...exp1Config,
+                args: [address!, parseEther('100')],
+                functionName: 'mint',
+                to: exp1Config.address,
+              },
+            ],
+          })
+        }}
+      >
         <button
           type="submit"
-          disabled={addFundsMutation.status === 'pending'}
+          disabled={sendCalls.status === 'pending'}
           style={{ marginBottom: '5px' }}
         >
-          {addFundsMutation.status === 'pending' ? 'Confirming…' : 'Fund'}
+          {sendCalls.status === 'pending' ? 'Confirming…' : 'Fund'}
         </button>
       </form>
       <ul style={{ listStyleType: 'none', padding: 0 }}>
-        {Array.from(transactions).map((tx) => (
-          <li key={tx}>
-            <a
-              target="_blank"
-              rel="noopener noreferrer"
-              href={transactionLink(tx)}
-            >
-              {tx}
-            </a>
-          </li>
-        ))}
+        {sendCalls.data?.id && (
+          <a
+            target="_blank"
+            rel="noopener noreferrer"
+            href={transactionLink(sendCalls.data!.id)}
+          >
+            {sendCalls.data?.id}
+          </a>
+        )}
       </ul>
       <p>{isConfirming && 'Waiting for confirmation...'}</p>
       <p>{isConfirmed && 'Transaction confirmed.'}</p>
-      {addFundsMutation.error && (
+      {sendCalls.error && (
         <div>
           Error:{' '}
-          {(addFundsMutation.error as Errors.BaseError).shortMessage ||
-            addFundsMutation.error.message}
+          {(sendCalls.error as Errors.BaseError).shortMessage ||
+            sendCalls.error.message}
         </div>
       )}
     </div>

client/src/config.ts

@@ -1,7 +1,7 @@
-import { Dialog, Mode, Porto } from 'porto'
+import { http, createConfig } from 'wagmi'
 import { baseSepolia } from 'porto/Chains'
+import { Dialog, Mode, Porto } from 'porto'
 import { porto as portoConnector } from 'porto/wagmi'
-import { http, createConfig, createStorage } from 'wagmi'
 import { MutationCache, QueryCache, QueryClient } from '@tanstack/react-query'
 
 export const porto = Porto.create()
@@ -15,12 +15,10 @@ export const wagmiConfig = createConfig({
   chains: [baseSepolia],
   connectors: [
     portoConnector({
-      announceProvider: false,
       mode: Mode.dialog({ renderer }),
     }),
   ],
   multiInjectedProviderDiscovery: false,
-  storage: createStorage({ storage: window.localStorage }),
   transports: {
     [baseSepolia.id]: http(),
   },

client/src/constants.ts

@@ -5,7 +5,7 @@ import { exp1Config } from '#contracts.ts'
 export const SERVER_URL =
   import.meta.env.VITE_SERVER_URL ??
   (import.meta.env.DEV
-    ? 'http://localhost:6900'
+    ? 'http://localhost:6901'
     : 'https://exp-0003-server.evm.workers.dev')
 export const permissions = () =>
   ({

client/src/vite-env.d.ts

@@ -9,7 +9,6 @@ interface Environment {
 
 interface ImportMetaEnv extends Environment {
   readonly VITE_SERVER_URL: string
-  readonly VITE_DIALOG_HOST: string
   readonly VITE_DIALOG_RENDERER: 'popup' | 'iframe'
   readonly VITE_ENVIRONMENT: 'development' | 'production'
 }