f

.eslintrc.json

@@ -0,0 +1,38 @@
+{
+    "parser": "@typescript-eslint/parser",
+    "parserOptions": {
+        "ecmaVersion": 2021
+    },
+    "extends": [
+        "plugin:v3xlabs/recommended",
+        "plugin:react/recommended",
+        "plugin:jsx-a11y/recommended"
+    ],
+    "ignorePatterns": ["!**/*"],
+    "plugins": ["v3xlabs", "react", "node", "jsx-a11y"],
+    "env": {
+        "node": true,
+        "browser": true
+    },
+    "settings": {
+        "react": {
+            "version": "detect"
+        }
+    },
+    "globals": {
+        "JSX": "readonly"
+    },
+    "rules": {
+        "react/no-unescaped-entities": "off",
+        "react/react-in-jsx-scope": "off",
+        "node/no-process-env": "error",
+        "unicorn/no-nested-ternary": "off",
+        "unused-imports/no-unused-vars": "off",
+        "prettier/prettier": [
+            "error",
+            {
+                "singleQuote": true
+            }
+        ]
+    }
+}

.prettierrc

@@ -0,0 +1,5 @@
+{
+    "tabWidth": 4,
+    "useTabs": false,
+    "singleQuote": true
+}

components/ConnectButton.tsx

@@ -0,0 +1,33 @@
+import { useModal } from 'connectkit';
+import { useAccount, useDisconnect } from 'wagmi';
+
+export const ConnectButton = () => {
+    const { setOpen } = useModal();
+    const { address } = useAccount();
+    const { disconnect } = useDisconnect();
+
+    if (address)
+        return (
+            <div className="text-center">
+                <button
+                    className="link"
+                    onClick={() => {
+                        disconnect();
+                    }}
+                >
+                    disconnect wallet
+                </button>
+            </div>
+        );
+
+    return (
+        <button
+            className="w-full px-6 py-3 bg-ens-light-blue-bright hover:bg-ens-light-blue-primary text-white font-bold text-center rounded-lg active:bg-ens-light-blue-active"
+            onClick={() => {
+                setOpen(true);
+            }}
+        >
+            Connect
+        </button>
+    );
+};

components/MaxSupply.tsx

@@ -0,0 +1,26 @@
+import { useContractRead } from 'wagmi';
+
+import { pointsABI } from '../util/abi';
+
+export const MaxSupply = () => {
+    const { data, isLoading } = useContractRead({
+        address: '0xd7C1EB0fe4A30d3B2a846C04aa6300888f087A5F',
+        chainId: 1,
+        abi: pointsABI,
+        functionName: 'MAX_SUPPLY',
+    });
+
+    const x = data as unknown as bigint;
+
+    return (
+        <div>
+            <h2>Max Supply</h2>
+            <p className="text-right">
+                {isLoading && 'Loading...'}
+                {data && (
+                    <span>{(data / BigInt(10 ** 18)).toLocaleString()}</span>
+                )}
+            </p>
+        </div>
+    );
+};

components/YourBalance.tsx

@@ -0,0 +1,45 @@
+import { useAccount, useContractReads } from 'wagmi';
+
+import { pointsABI } from '../util/abi';
+
+export const YourBalance = () => {
+    const { address } = useAccount();
+    const { data, isLoading, isSuccess } = useContractReads({
+        enabled: !!address,
+        contracts: [
+            {
+                address: '0xd7C1EB0fe4A30d3B2a846C04aa6300888f087A5F',
+                chainId: 1,
+                abi: pointsABI,
+                args: [address],
+                functionName: 'balanceOf',
+            },
+            {
+                address: '0xd7C1EB0fe4A30d3B2a846C04aa6300888f087A5F',
+                chainId: 1,
+                abi: pointsABI,
+                functionName: 'decimals',
+            },
+        ],
+    });
+
+    const balance: bigint = data?.[0]?.result as unknown as bigint;
+    const decimals: number = data?.[1]?.result as unknown as number;
+
+    console.log({ balance, decimals });
+    const nb = address && isSuccess ? balance / BigInt(10 ** decimals) : 0;
+
+    return (
+        <div>
+            <h2>Your balance</h2>
+            <p className="text-right">
+                {isLoading && 'Loading...'}
+                {address ? (
+                    <span>{nb.toLocaleString()} $points</span>
+                ) : (
+                    <span>👇</span>
+                )}
+            </p>
+        </div>
+    );
+};

index.html

@@ -4,9 +4,11 @@
         <meta charset="UTF-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
         <title>$points cool</title>
+        <link rel="stylesheet" href="./src/style.css" />
     </head>
     <body>
         <div id="root">points are cool</div>
         <noscript>you neeed to enable javascript</noscript>
+        <script type="module" src="./src/index.tsx"></script>
     </body>
 </html>

package.json

@@ -1,21 +1,52 @@
 {
-  "name": "points-cool",
-  "version": "1.0.0",
-  "description": "",
-  "main": "index.js",
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1",
-    "start": "vite",
-    "dev": "vite",
-    "build": "vite build"
-  },
-  "keywords": [],
-  "author": "",
-  "license": "ISC",
-  "dependencies": {
-    "@ens-tools/format": "^0.0.2",
-    "viem": "^1.20.0",
-    "vite": "^5.0.9",
-    "wagmi": "^1.4.12"
-  }
+    "name": "points-cool",
+    "version": "1.0.0",
+    "description": "",
+    "type": "module",
+    "scripts": {
+        "test": "echo \"Error: no test specified\" && exit 1",
+        "start": "vite",
+        "lint": "eslint -c .eslintrc.json --ext .tsx ./src",
+        "dev": "vite",
+        "build": "vite build"
+    },
+    "keywords": [],
+    "author": "luc.eth",
+    "license": "GPL-3",
+    "dependencies": {
+        "@ensdomains/thorin": "^0.6.42",
+        "@vitejs/plugin-react": "^3.1.0",
+        "autoprefixer": "^10.4.14",
+        "buffer": "^6.0.3",
+        "connectkit": "^1.5.3",
+        "encoding": "^0.1.13",
+        "eslint-plugin-node": "^11.1.0",
+        "eslint-plugin-react": "^7.33.2",
+        "ethers": "^5.7.2",
+        "events": "^3.3.0",
+        "framer-motion": "^10.10.0",
+        "postcss": "^8.4.21",
+        "process": "^0.11.10",
+        "react": "^18.2.0",
+        "react-dom": "^18.2.0",
+        "react-hook-form": "^7.43.9",
+        "react-icons": "^4.12.0",
+        "styled-components": "^5.3.9",
+        "tailwindcss": "^3.3.1",
+        "viem": "^0.2.5",
+        "vite": "^4.2.1",
+        "vite-plugin-rewrite-all": "^1.0.1",
+        "vite-tsconfig-paths": "^4.0.8",
+        "wagmi": "^1.4.12",
+        "zustand": "^4.3.7"
+    },
+    "devDependencies": {
+        "@types/node": "18.15.11",
+        "@types/react": "18.0.33",
+        "@types/styled-components": "^5.1.26",
+        "@typescript-eslint/parser": "^5.57.1",
+        "eslint": "^8.55.0",
+        "eslint-plugin-v3xlabs": "^1.6.0",
+        "typescript": "5.0.3"
+    }
 }