feat: LarsKristoHellheadsContextController WIP

Author: netpoe

app/.eslintrc.js

@@ -169,6 +169,7 @@ module.exports = {
     "unicorn/no-array-reduce": "off",
     "unicorn/consistent-destructuring": "off",
     "unicorn/no-array-for-each": "off",
+    "unicorn/no-abusive-eslint-disable": "off",
 
     // a11y
     "jsx-a11y/anchor-is-valid": "off",

app/package.json

@@ -21,6 +21,7 @@
     "@supabase/supabase-js": "^2.33.1",
     "@tanstack/react-query": "^5.29.0",
     "@types/js-cookie": "^3.0.3",
+    "@wagmi/core": "^2.6.17",
     "@web3modal/siwe": "^4.1.5",
     "@web3modal/wagmi": "^4.1.5",
     "ag-grid-community": "^27.3.0",
@@ -49,7 +50,7 @@
     "rxjs": "^7.8.1",
     "siwe": "^2.1.4",
     "uuid": "^9.0.0",
-    "viem": "^2.9.13",
+    "viem": "^2.9.20",
     "wagmi": "^2.5.19",
     "winston": "^3.9.0",
     "ws": "^8.13.0"

app/src/context/evm/larskristo-hellheads/LarskristoHellheadsContext.tsx

@@ -0,0 +1,5 @@
+import { createContext } from "react";
+
+import { LarskristoHellheadsContextType } from "./LarskristoHellheadsContext.types";
+
+export const LarskristoHellheadsContext = createContext<LarskristoHellheadsContextType | undefined>(undefined);

app/src/context/evm/larskristo-hellheads/LarskristoHellheadsContext.types.ts

@@ -0,0 +1,22 @@
+import { ReactNode } from "react";
+
+import { LarsKristoHellheads } from "providers/evm/contracts/larskristohellheads/LarsKristoHellheads";
+
+export type LarskristoHellheadsContextControllerProps = {
+  children: ReactNode;
+};
+
+export type LarskristoHellheadsContextActions = {
+  fetchContractValues: { isLoading: boolean };
+};
+
+export type LarskristoHellheadsContractValues = {
+  name: LarsKristoHellheads["name"];
+  symbol: LarsKristoHellheads["symbol"];
+};
+
+export type LarskristoHellheadsContextType = {
+  contractValues?: LarskristoHellheadsContractValues;
+  actions: LarskristoHellheadsContextActions;
+  fetchContractValues: (address: string) => Promise<void>;
+};

app/src/context/evm/larskristo-hellheads/LarskristoHellheadsContextController.tsx

@@ -0,0 +1,65 @@
+import React, { useState } from "react";
+import { getContract } from "viem";
+
+import { LarsKristoHellheads__factory } from "providers/evm/contracts/larskristohellheads/LarsKristoHellheads__factory";
+import evm from "providers/evm";
+
+import { LarskristoHellheadsContext } from "./LarskristoHellheadsContext";
+import {
+  LarskristoHellheadsContextActions,
+  LarskristoHellheadsContextControllerProps,
+  LarskristoHellheadsContextType,
+  LarskristoHellheadsContractValues,
+} from "./LarskristoHellheadsContext.types";
+
+export const LarskristoHellheadsContextController = ({ children }: LarskristoHellheadsContextControllerProps) => {
+  const [contractValues, setContractValues] = useState<LarskristoHellheadsContractValues>();
+  const [actions, setActions] = useState<LarskristoHellheadsContextActions>({
+    fetchContractValues: {
+      isLoading: false,
+    },
+  });
+
+  const fetchContractValues = async (address: string) => {
+    setActions((prev) => ({
+      ...prev,
+      fetchContractValues: {
+        isLoading: true,
+      },
+    }));
+
+    try {
+      const contract = getContract({
+        address: address as `0x{string}`,
+        abi: LarsKristoHellheads__factory.abi,
+        client: evm.client,
+      });
+
+      const [name, symbol] = await Promise.all([contract.read.name(), contract.read.symbol()]);
+
+      const values: LarskristoHellheadsContractValues = {
+        name,
+        symbol,
+      };
+
+      setContractValues({ ...values });
+    } catch (error) {
+      console.error(error);
+    }
+
+    setActions((prev) => ({
+      ...prev,
+      fetchContractValues: {
+        isLoading: false,
+      },
+    }));
+  };
+
+  const props: LarskristoHellheadsContextType = {
+    fetchContractValues,
+    contractValues,
+    actions,
+  };
+
+  return <LarskristoHellheadsContext.Provider value={props}>{children}</LarskristoHellheadsContext.Provider>;
+};

app/src/context/evm/larskristo-hellheads/useLarskristoHellheadsContext.tsx

@@ -0,0 +1,13 @@
+import { useContext } from "react";
+
+import { LarskristoHellheadsContext } from "./LarskristoHellheadsContext";
+
+export const useLarskristoHellheadsContext = () => {
+  const context = useContext(LarskristoHellheadsContext);
+
+  if (context === undefined) {
+    throw new Error("useLarskristoHellheadsContext must be used within a LarskristoHellheadsContext");
+  }
+
+  return context;
+};

app/src/providers/evm/client.ts

@@ -0,0 +1,9 @@
+import { createWalletClient, http } from "viem";
+import { sepolia } from "viem/chains";
+
+const client = createWalletClient({
+  chain: sepolia,
+  transport: http(),
+});
+
+export default client;