⚙️ feat: ops skill level (#65)

abis/OperatorSkillLevels.json

@@ -0,0 +1,219 @@
+{
+	"abi": [
+	  {
+		"inputs": [
+		  {
+			"internalType": "address",
+			"name": "passportUtils_",
+			"type": "address"
+		  }
+		],
+		"stateMutability": "nonpayable",
+		"type": "constructor"
+	  },
+	  {
+		"inputs": [
+		  {
+			"internalType": "address",
+			"name": "illegalAlien",
+			"type": "address"
+		  }
+		],
+		"name": "NotPassportOwner",
+		"type": "error"
+	  },
+	  {
+		"inputs": [
+		  {
+			"internalType": "address",
+			"name": "citizen",
+			"type": "address"
+		  }
+		],
+		"name": "PassportExpired",
+		"type": "error"
+	  },
+	  {
+		"inputs": [
+		  {
+			"internalType": "uint8",
+			"name": "rating",
+			"type": "uint8"
+		  }
+		],
+		"name": "RatingValueError",
+		"type": "error"
+	  },
+	  {
+		"anonymous": false,
+		"inputs": [
+		  {
+			"indexed": false,
+			"internalType": "address",
+			"name": "operator",
+			"type": "address"
+		  },
+		  {
+			"indexed": false,
+			"internalType": "uint8",
+			"name": "rating",
+			"type": "uint8"
+		  },
+		  {
+			"indexed": false,
+			"internalType": "address",
+			"name": "citizen",
+			"type": "address"
+		  }
+		],
+		"name": "Rated",
+		"type": "event"
+	  },
+	  {
+		"inputs": [],
+		"name": "VERSION",
+		"outputs": [
+		  {
+			"internalType": "string",
+			"name": "",
+			"type": "string"
+		  }
+		],
+		"stateMutability": "view",
+		"type": "function"
+	  },
+	  {
+		"inputs": [],
+		"name": "owner",
+		"outputs": [
+		  {
+			"internalType": "address",
+			"name": "",
+			"type": "address"
+		  }
+		],
+		"stateMutability": "view",
+		"type": "function"
+	  },
+	  {
+		"inputs": [],
+		"name": "passportUtils",
+		"outputs": [
+		  {
+			"internalType": "contract IPassportUtils",
+			"name": "",
+			"type": "address"
+		  }
+		],
+		"stateMutability": "view",
+		"type": "function"
+	  },
+	  {
+		"inputs": [
+		  {
+			"internalType": "address",
+			"name": "operator",
+			"type": "address"
+		  },
+		  {
+			"internalType": "uint8",
+			"name": "rating",
+			"type": "uint8"
+		  }
+		],
+		"name": "rate",
+		"outputs": [],
+		"stateMutability": "nonpayable",
+		"type": "function"
+	  },
+	  {
+		"inputs": [
+		  {
+			"internalType": "address",
+			"name": "owner_",
+			"type": "address"
+		  }
+		],
+		"name": "setOwner",
+		"outputs": [],
+		"stateMutability": "nonpayable",
+		"type": "function"
+	  },
+	  {
+		"inputs": [
+		  {
+			"internalType": "address",
+			"name": "passportUtils_",
+			"type": "address"
+		  }
+		],
+		"name": "setPassportUtils",
+		"outputs": [],
+		"stateMutability": "nonpayable",
+		"type": "function"
+	  },
+	  {
+		"inputs": [
+		  {
+			"internalType": "address",
+			"name": "",
+			"type": "address"
+		  }
+		],
+		"name": "skillLevelAverages",
+		"outputs": [
+		  {
+			"internalType": "uint256",
+			"name": "",
+			"type": "uint256"
+		  }
+		],
+		"stateMutability": "view",
+		"type": "function"
+	  },
+	  {
+		"inputs": [
+		  {
+			"internalType": "address",
+			"name": "",
+			"type": "address"
+		  },
+		  {
+			"internalType": "address",
+			"name": "",
+			"type": "address"
+		  }
+		],
+		"name": "skillLevelRatings",
+		"outputs": [
+		  {
+			"internalType": "uint8",
+			"name": "",
+			"type": "uint8"
+		  }
+		],
+		"stateMutability": "view",
+		"type": "function"
+	  },
+	  {
+		"inputs": [
+		  {
+			"internalType": "address",
+			"name": "",
+			"type": "address"
+		  }
+		],
+		"name": "skillLevelRatingsCount",
+		"outputs": [
+		  {
+			"internalType": "uint8",
+			"name": "",
+			"type": "uint8"
+		  }
+		],
+		"stateMutability": "view",
+		"type": "function"
+	  }
+	]
+  }
+

src/components/ProfileDetailsOpsSkillRating.tsx

@@ -0,0 +1,55 @@
+import { useContractRead } from "wagmi"
+import LoadingIndicator from "./LoadingIndicator"
+import OperatorSkillLevels from "../../abis/OperatorSkillLevels.json"
+import { useIsMounted } from "@/hooks/useIsMounted"
+import Link from "next/link"
+import { formatEther } from "viem" 
+
+export default function ProfileDetailsOpsSkillRating({ citizen }: any) {
+  console.info('ProfileDetailsOpsSkillRating')
+
+  const { data, isError, isLoading } = useContractRead({
+    address: '0x8100e77899C24b0F7B516153F84868f850C034BF',
+    abi: OperatorSkillLevels.abi,
+    functionName: 'skillLevelAverages',
+    args: [citizen.ownerAddress]
+  })
+  console.info('data:', data)
+  console.info('isError:', isError)
+  console.info('isLoading:', isLoading)
+
+  if (!useIsMounted() || isLoading) {
+    return <LoadingIndicator />
+  } else {
+    let skillLevelAverage: any = null
+    if (data) {
+      skillLevelAverage = data
+    }
+    console.info('skillLevelAverage:', skillLevelAverage)
+    if (!skillLevelAverage) {
+      return (
+        <div>
+          <Link href={`https://etherscan.io/address/0x8100e77899C24b0F7B516153F84868f850C034BF#writeContract#F1`} target="_blank" className="float-right border rounded-full px-2 ml-8 font-bold text-transparent bg-clip-text bg-gradient-to-br from-sky-400 to-green-400">
+            Rate 🔗
+          </Link>
+          <code>Not rated</code>
+        </div>
+      )
+    } else {
+      const skillLevelAverageEther: number = Number(formatEther(skillLevelAverage))
+      console.info('skillLevelAverageEther:', skillLevelAverageEther)
+      const skillLevelAverageRounded: number = Math.round(skillLevelAverageEther)
+      console.info('skillLevelAverageRounded:', skillLevelAverageRounded)
+      const ratingValues = ['★☆☆☆☆ 1/5', '★★☆☆☆ 2/5', '★★★☆☆ 3/5', '★★★★☆ 4/5', '★★★★★ 5/5']
+      const ratingTextColors = ['text-orange-400', 'text-amber-400', 'text-lime-400', 'text-emerald-400', 'text-cyan-400' ]
+      return (
+        <>
+          <Link href={`https://etherscan.io/address/0x8100e77899C24b0F7B516153F84868f850C034BF#writeContract#F1`} target="_blank" className="float-right border rounded-full px-2 ml-8 font-bold text-transparent bg-clip-text bg-gradient-to-br from-sky-400 to-green-400">
+            Rate 🔗
+          </Link>
+          <span className={`font-bold ${ratingTextColors[skillLevelAverageRounded - 1]}`}>{ratingValues[skillLevelAverageRounded - 1]}</span>
+        </>
+      )
+    }
+  }
+}

src/pages/[passportId].tsx

@@ -19,6 +19,7 @@ import NFTImage from '@/components/NFTImage'
 import Link from 'next/link'
 import Head from 'next/head'
 import ProfileDetailsDevSkillRating from '@/components/ProfileDetailsDevSkillRating'
+import ProfileDetailsOpsSkillRating from '@/components/ProfileDetailsOpsSkillRating'
 import { InformationCircleIcon } from '@heroicons/react/24/outline'
 
 const Chart = dynamic(() => import('react-apexcharts'), { ssr: false })
@@ -106,9 +107,13 @@ export default function ProfilePage({ citizen, nationCred, veNation, dework, coo
                       <code>Not linked</code>
                     </li>
                     <li className='mt-2 pt-2'>
-                      <span className='text-gray-400 '>Developer skill level <Link href="https://github.com/nation3/citizen-rewards/tree/main/development-guild#readme" target="_blank"><InformationCircleIcon className="inline h-5 w-5" /></Link></span><br />
+                      <span className='text-gray-400 '>🧙 Developer skill level <Link href="https://github.com/nation3/citizen-rewards/tree/main/development-guild#readme" target="_blank"><InformationCircleIcon className="inline h-5 w-5" /></Link></span><br />
                       <ProfileDetailsDevSkillRating citizen={citizen} />
                     </li>
+                    <li className='mt-2 pt-2'>
+                      <span className='text-gray-400 '>⚙️ Operator skill level <Link href="https://github.com/nation3/citizen-rewards/tree/main/ops-guild#readme" target="_blank"><InformationCircleIcon className="inline h-5 w-5" /></Link></span><br />
+                      <ProfileDetailsOpsSkillRating citizen={citizen} />
+                    </li>
                   </ul>
                 )}
               </div>