Step 5 – Utility Modules & Environment Variables

Authentication screens compile now, but they reference several helper files we haven’t created yet. In this step we’ll:

1. Add ABIs and helper code under /common/utils

2. Declare any missing .env keys

3. Verify that /sign-up and /login pages render without red import errors

5.1 Folder Structure

common/
└─ utils/
   ├─ MagmarSimpleAccountFactory.json
   ├─ NFTContract.json
   ├─ client.ts
   └─ Loader.tsx

---

5.2 Magmar SimpleAccountFactory ABI

common/utils/MagmarSimpleAccountFactory.json

[
  { "inputs":[{ "internalType":"contract IEntryPoint","name":"_entryPoint","type":"address"}], "stateMutability":"nonpayable","type":"constructor" },
  { "inputs":[], "name":"accountImplementation", "outputs":[{ "internalType":"contract SimpleAccount","name":"","type":"address"}], "stateMutability":"view","type":"function" },
  { "inputs":[{ "internalType":"address","name":"owner","type":"address" },{ "internalType":"uint256","name":"salt","type":"uint256" }], "name":"createAccount", "outputs":[{ "internalType":"contract SimpleAccount","name":"ret","type":"address"}], "stateMutability":"nonpayable","type":"function" },
  { "inputs":[{ "internalType":"address","name":"owner","type":"address" },{ "internalType":"uint256","name":"salt","type":"uint256" }], "name":"getAddress", "outputs":[{ "internalType":"address","name":"","type":"address"}], "stateMutability":"view","type":"function" }
]

Address (Sepolia) — 0x9406Cc6185a346906296840746125a0E44976454 Store it in .env for easy edits later.

---

5.3 RPC Helper (viem)

common/utils/client.ts

import { createPublicClient, http } from "viem";
import { sepolia } from "viem/chains";

/** Shared, read-only JSON-RPC client */
export const publicClient = createPublicClient({
  chain: sepolia,
  transport: http(),
});

---

5.4 DaisyUI Loader

common/utils/Loader.tsx

const Loader = () => (
  <div className="flex justify-center items-center min-h-screen">
    <span className="loading loading-spinner loading-lg text-[#d9460c]"></span>
  </div>
);

export default Loader;

---

5.5 Demo NFT Contract ABI

common/utils/NFTContract.json (abbreviated for brevity – include full ABI in your repo)

[
  { "inputs":[], "stateMutability":"nonpayable", "type":"constructor" },
  { "name":"mint", "inputs":[{ "internalType":"address","name":"recipient","type":"address"}], "outputs":[], "stateMutability":"nonpayable","type":"function" },
  { "name":"transferFrom", "inputs":[{ "internalType":"address","name":"from","type":"address"}, { "internalType":"address","name":"to","type":"address"}, { "internalType":"uint256","name":"tokenId","type":"uint256"}], "outputs":[], "stateMutability":"nonpayable","type":"function" },
  { "name":"balanceOf", "inputs":[{ "internalType":"address","name":"owner","type":"address"}], "outputs":[{ "internalType":"uint256","name":"","type":"uint256"}], "stateMutability":"view","type":"function" }
  /* … remaining ERC-721 functions … */
]

---

5.6 Environment Variables

Add or update .env.local:

# --- Magmar AA settings ---
NEXT_PUBLIC_ENTRYPOINT=0x0576a174D229E3cFA37253523E645A78A0C91B57   # Sepolia EntryPoint
NEXT_PUBLIC_FACTORY_ADDR=0x9406Cc6185a346906296840746125a0E44976454 # SimpleAccountFactory
NEXT_PUBLIC_NFT_ADDR=0xYourSepoliaNFTContract                       # replace after deployment

# Gas sponsorship policy (created in Step 2)
SEPOLIA_PAYMASTER_POLICY_ID=<MAGMAR_POLICY_ID>

---

5.7 Compile Check

npm run dev

Navigate to:

• http://localhost:3000/sign-up

• http://localhost:3000/login

Both pages should load without import errors. Submitting the forms will still fail because /api/get-signer is not implemented yet—that’s intentional.