IPFS gateway env + CrossChain (pending transfer)

env.d.ts

@@ -7,8 +7,9 @@ declare global {
       DATALAKE_URL: string;
       DATALAKE_KEY: string;
       LOGTAIL_SOURCE_TOKEN: string;
+      REACT_APP_IPFS_GATEWAY: string;
     }
   }
 }
 
-export {};
+export {};

next.config.js

@@ -14,7 +14,8 @@ const nextConfig = {
     remotePatterns: [
       {
         protocol: "https",
-        hostname: "ipfs.kleros.io",
+        hostname: process.env.REACT_APP_IPFS_GATEWAY,
+        //hostname: "ipfs.kleros.io",
         port: "",
         pathname: "/ipfs/**",
       },

src/app/[pohid]/CrossChain.tsx

@@ -31,6 +31,15 @@ interface CrossChainProps extends JSX.IntrinsicAttributes {
   lastTransferChain?: SupportedChain;
 }
 
+type TransferType = {
+  transferHash: string,
+  foreignProxy: Address,
+  transferTimestamp: string,
+  senderChain: SupportedChain | undefined,
+  receivingChain: SupportedChain,
+  received: boolean,
+}
+
 export default withClientConnected<CrossChainProps>(function CrossChain({
   pohId,
   contractData,
@@ -74,7 +83,7 @@ export default withClientConnected<CrossChainProps>(function CrossChain({
     )
   );
 
-  const transfer$ = useObservable({
+  const transfer$ = useObservable<TransferType>({
     transferHash: lastTransfer?.transferHash,
     foreignProxy: lastTransfer?.foreignProxy,
     transferTimestamp: lastTransfer?.transferTimestamp,

src/app/[pohid]/page.tsx

@@ -39,6 +39,14 @@ async function Profile({ params: { pohid } }: PageProps) {
     (chain) => !!humanity[chain.id]?.humanity?.registration
   );
 
+  const homeCrossChain = !(!!homeChain) && supportedChains.find(
+    (chain) => !!humanity[chain.id]?.crossChainRegistration
+  );
+
+  const humanityHomeChainRegistration = homeChain && humanity[homeChain.id]!.humanity!.registration;
+  const humanityCrossChainRegistration = homeCrossChain && humanity[homeCrossChain.id].crossChainRegistration;
+
+
   const arbitrationCost = homeChain
     ? await getArbitrationCost(
         homeChain,
@@ -59,6 +67,8 @@ async function Profile({ params: { pohid } }: PageProps) {
       })[0]
     : null;
 
+  const humanityLEChainRegistration = lastEvidenceChain && humanity[lastEvidenceChain.id]!.humanity!.registration;
+
   const pendingRequests = supportedChains.reduce(
     (acc, chain) => [
       ...acc,
@@ -75,13 +85,19 @@ async function Profile({ params: { pohid } }: PageProps) {
     [] as PoHRequest[]
   );
 
-  const expired = lastEvidenceChain && humanity[lastEvidenceChain.id]!.humanity!.registration!.expirationTime < Date.now() / 1000;
 
-  const winnerClaimRequest =
-    lastEvidenceChain &&
+  let expired = (lastEvidenceChain && humanity[lastEvidenceChain.id]!.humanity!.registration!.expirationTime < Date.now() / 1000) 
+
+  let winnerClaimRequest =
+    (lastEvidenceChain &&
     !(expired) && // It did not expired
-    humanity[lastEvidenceChain.id].humanity!.winnerClaim[0];
+    humanity[lastEvidenceChain.id].humanity!.winnerClaim[0]);
 
+  if (!winnerClaimRequest) {
+    winnerClaimRequest = (!!homeCrossChain && humanity[homeCrossChain.id].humanity!.winnerClaim[0]);
+    expired = (!!humanityCrossChainRegistration && humanityCrossChainRegistration.expirationTime < Date.now() / 1000);
+  }
+
   // pastRequests must not contain pendingRequests nor winningClaimRequest if it did not expired
   const pastRequests = supportedChains.reduce(
     (acc, chain) => [
@@ -213,6 +229,18 @@ async function Profile({ params: { pohid } }: PageProps) {
               lastTransferChain={lastTransferChain}
             />
           </>
+        ) : homeCrossChain && humanityCrossChainRegistration ? (
+          <CrossChain
+            claimer={
+              humanityCrossChainRegistration!.claimer.id
+            }
+            contractData={contractData}
+            homeChain={homeCrossChain}
+            pohId={pohId}
+            humanity={humanity}
+            lastTransfer={humanity[lastTransferChain.id].outTransfer}
+            lastTransferChain={lastTransferChain}
+          />
         ) : (
           <>
             <span className="mb-6 text-theme">Not claimed</span>
@@ -224,34 +252,62 @@ async function Profile({ params: { pohid } }: PageProps) {
       </div>
 
       <div className={"flex flex-col sm:flex-row sm:gap-4"}>
-        {homeChain && winnerClaimRequest && (
+        {((homeChain && lastEvidenceChain) || (homeCrossChain)) && winnerClaimRequest && (
           <div>
-            <div className="p-4 mt-4 mb-1">Winning claim</div>
+            <div className="p-4 mt-4 mb-1">
+            {homeChain && lastEvidenceChain? 
+              'Winning claim'
+              :
+              'Crossing chain (update)'
+            }
+            </div>
             <div
               className={cn("grid", {
                 "gap-4 grid-cols-1 sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4":
                   !pendingRequests.length,
               })}
             >
-              <Card
-                chainId={lastEvidenceChain.id}
-                claimer={
-                  humanity[lastEvidenceChain.id]!.humanity!.registration!
-                    .claimer.id
-                }
-                evidence={winnerClaimRequest.evidenceGroup.evidence}
-                humanity={{
-                  id: pohId,
-                  winnerClaim: humanity[homeChain.id]!.humanity!.winnerClaim,
-                }}
-                index={winnerClaimRequest.index}
-                requester={
-                  humanity[homeChain.id]!.humanity!.registration!.claimer.id
-                }
-                revocation={false}
-                status="resolved"
-                expired={false}
-              />
+              {homeChain && lastEvidenceChain? 
+                <Card
+                  chainId={lastEvidenceChain.id}
+                  claimer={
+                    humanity[lastEvidenceChain.id]!.humanity!.registration!
+                      .claimer.id
+                  }
+                  evidence={winnerClaimRequest.evidenceGroup.evidence}
+                  humanity={{
+                    id: pohId,
+                    winnerClaim: humanity[homeChain.id]!.humanity!.winnerClaim,
+                  }}
+                  index={winnerClaimRequest.index}
+                  requester={
+                    humanity[homeChain.id]!.humanity!.registration!.claimer.id
+                  }
+                  revocation={false}
+                  status="resolved"
+                  expired={false}
+                />
+              :
+                homeCrossChain && humanityCrossChainRegistration &&
+                <Card
+                  chainId={homeCrossChain.id}
+                  claimer={
+                    humanityCrossChainRegistration!.claimer.id
+                  }
+                  evidence={winnerClaimRequest.evidenceGroup.evidence}
+                  humanity={{
+                    id: pohId,
+                    winnerClaim: humanity[homeCrossChain.id]!.humanity!.winnerClaim,
+                  }}
+                  index={winnerClaimRequest.index}
+                  requester={
+                    humanityCrossChainRegistration!.claimer.id
+                  }
+                  revocation={false}
+                  status="resolved"
+                  expired={false}
+                />
+              }
             </div>
           </div>
         )}

src/components/request/Grid.tsx

@@ -58,7 +58,7 @@ const normalize = (
           ...request,
           old: Number(chainId) === legacyChain.id,
           chainId: Number(chainId) as SupportedChainId,
-          expired: 
+          expired:
             request.status.id === "resolved" && 
             request.humanity.winnerClaim.length>0 && 
             !!humanityLifespan && 

src/config/index.ts

@@ -0,0 +1 @@
+export const IPFS_GATEWAY = process.env.REACT_APP_IPFS_GATEWAY || "ipfs.kleros.io";

src/contracts/index.ts

@@ -3,7 +3,8 @@ import { gnosis, sepolia } from "viem/chains";
 export const Contract = {
   ProofOfHumanity: {
     [sepolia.id]: "0x29defF3DbEf6f79ef20d3fe4f9CFa0547acCeC0D",
-    [gnosis.id]: "0xB6412c84eC958cafcC80B688d6F473e399be488f",
+    //[gnosis.id]: "0xB6412c84eC958cafcC80B688d6F473e399be488f",
+    [gnosis.id]: "0x4a594f0e73223c9a1CE0EfC16da92fFaA193a612",
   },
   CrossChainProofOfHumanity: {
     [sepolia.id]: "0xd134748B972A320a73EfDe3AfF7a68718F6bA92c",

src/utils/ipfs.ts

@@ -1,11 +1,13 @@
 import axios from "axios";
+import { IPFS_GATEWAY } from "../config";
 
 export const uploadToIPFS = async (data: FormData) => {
   const result = await axios.post("/api/ipfs-upload", data);
   return result.data.uri;
 };
 
-export const ipfs = (uri: string) => `https://ipfs.kleros.io${uri}`;
+export const ipfs = (uri: string) => `https://${IPFS_GATEWAY}${uri}`;
+//export const ipfs = (uri: string) => `https://ipfs.kleros.io${uri}`;
 
 export const ipfsFetch = async <F>(ipfsURI: string) =>
   (await axios.get(ipfs(ipfsURI))).data as F;