Optional keccak hashing

src/helpers/parseKeys.js

@@ -5,6 +5,7 @@ export default function parseKeys(payload) {
     const primaryPublicKeyLength = parseInt('0x' + payload.slice(0, 2)) * 2
     const primaryPublicKeyRaw = payload.slice(2, primaryPublicKeyLength + 2)
     const primaryPublicKeyHash = ethers.utils.sha256('0x' + primaryPublicKeyRaw.slice(2))
+    const primaryPublicKeyKeccakHash = ethers.utils.keccak256('0x' + primaryPublicKeyRaw.slice(2));
 
     const secondaryPublicKeyLength =
       parseInt('0x' + payload.slice(primaryPublicKeyLength + 2, primaryPublicKeyLength + 4)) * 2
@@ -39,6 +40,7 @@ export default function parseKeys(payload) {
 
     const keys = {
       primaryPublicKeyHash: primaryPublicKeyHash,
+      primaryPublicKeyKeccakHash: primaryPublicKeyKeccakHash,
       primaryPublicKeyRaw: primaryPublicKeyRaw,
       secondaryPublicKeyHash: secondaryPublicKeyHash,
       secondaryPublicKeyRaw: secondaryPublicKeyRaw,

src/pages/Home.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react'
+import React, { useEffect, useState } from 'react'
 import { Navigate } from 'react-router-dom'
 import Button from '../components/Button'
 import Card, { CardFooter, CardPadding } from '../components/Card'
@@ -59,6 +59,8 @@ export default function Home() {
     init()
   }, [])
 
+  const [showSha256, setShowSha256] = useState(true);
+
   return (
     <Card loading={loading}>
       <CardPadding>
@@ -73,8 +75,14 @@ export default function Home() {
             <p className="text-dark-gray text-sm mt-4 mb-4">
               This chip hasn’t been registered. Tap link below to mint HaLo.
             </p>
-            <h3 className="font-normal mt-4 mb-1 text-light-gray text-xs">Device ID</h3>
-            <p className="break-word font-bold text-smb">{keys?.primaryPublicKeyHash}</p>
+            <h3 className="font-normal mt-4 mb-1 text-light-gray text-xs">
+              Device ID <a style={{ color: 'blue' }} onClick={() => setShowSha256(!showSha256)}>{showSha256 ? '(sha256)' : '(keccak256)'}</a>
+            </h3>
+            {showSha256 ?
+              <p className="break-word font-bold text-smb">{keys?.primaryPublicKeyHash}</p>
+              :
+              <p className="break-word font-bold text-smb">{keys?.primaryPublicKeyKeccakHash}</p>
+            }
           </>
         ) : (
           <>
@@ -83,7 +91,7 @@ export default function Home() {
               <br />
               Detected
             </h1>
-            <p className="text-dark-gray text-sm mt-4 mb-4">Scan HaLo by tapping the button below and holding the chip to your smartphone NFT antenna.</p>
+            <p className="text-dark-gray text-sm mt-4 mb-4">Scan HaLo by tapping the button below and holding the chip to your smartphone NFC antenna.</p>
           </>
         )}
       </CardPadding>

src/types.ts

@@ -1,5 +1,6 @@
 export interface IKeys {
   primaryPublicKeyHash: string
+  primaryPublicKeyKeccakHash: string
   primaryPublicKeyRaw: string
   secondaryPublicKeyHash: string
   secondaryPublicKeyRaw: string