const useNetwork = (mainnet, testnet) => { return context.networkId === "mainnet" ? mainnet : testnet; }; State.init({ ownerId: useNetwork("sourcescan.near", "sourcescan.testnet"), theme: props.theme || { bg: "#e3e8ef", color: "#4c5566", border: "1px dashed #748094", text: { fontSize: "18px", }, heading: { fontSize: "20px", fontWeight: "600", underline: true, }, }, contract: null, }); const getContract = async () => { Near.asyncView(state.ownerId, "get_contract", { contract_id: props.contractId, }) .then((res) => { console.log(res); State.update({ contract: res, }); }) .catch((err) => { console.log(err); }); }; if (!props.contractId) { return "Please provide a contractId to the component"; } else { getContract(); } const Stack = styled.div` padding: 6px; width: 50%; border: ${state.theme.border}; border-radius: 16px; display: flex; flex-direction: column; text-align: start; align-items: start; justify-content: start; gap: 30px; @media only screen and (max-width: 600px) { width: 80%; text-align: center; align-items: center; justify-content: center; } `; const UHeading = styled.div` font-size: ${state.theme.heading.fontSize}; font-weight: ${state.theme.heading.fontWeight}; color: ${state.theme.heading.color}; text-decoration: ${state.theme.heading.underline ? "underline" : "none"}; text-underline-offset: 6px; text-decoration-style: dashed; text-decoration-color: gray; `; const Heading = styled.div` font-size: ${state.theme.heading.fontSize}; font-weight: ${state.theme.heading.fontWeight}; color: ${state.theme.heading.color}; `; const Desktop = styled.div` display: flex; @media only screen and (max-width: 600px) { display: none; } `; const Mobile = styled.div` display: none; @media only screen and (max-width: 600px) { display: flex; } `; const Text = styled.div` font-size: ${state.theme.text.fontSize}; color: ${state.theme.color}; `; const Center = styled.div` display: flex; justify-content: center; align-items: center; `; const truncateStringInMiddle = (str, maxLength) => { if (str.length <= maxLength) { return str; } const halfMaxLength = Math.floor(maxLength / 2); const firstHalf = str.slice(0, halfMaxLength); const secondHalf = str.slice(-halfMaxLength); return firstHalf + "..." + secondHalf; }; return ( <Center> {!state.contract ? ( <Widget src={`${state.ownerId}/widget/SourceScan.Common.Spinner`} props={{ width: "64px", height: "64px" }} /> ) : ( <Stack> <Heading>{props.contractId}</Heading> <UHeading>Security Checks</UHeading> <UHeading>Deploy Tx</UHeading> <Desktop> <Text>{state.contract.deploy_tx}</Text> </Desktop> <Mobile> <Text>{truncateStringInMiddle(state.contract.deploy_tx, 8)}</Text> </Mobile> <UHeading>Entry Point</UHeading> <Text>{state.contract.entry_point}</Text> <UHeading>Lang</UHeading> <Text>{state.contract.lang}</Text> <UHeading>IPFS</UHeading> <Desktop> <Text>{state.contract.cid}</Text> </Desktop> <Mobile> <Text>{truncateStringInMiddle(state.contract.cid, 8)}</Text> <a href={"https://sourcescan.2bb.dev/ipfs/cid"} target={"_blank"}> <Widget src={`${state.ownerId}/widget/SourceScan.Common.Icons.LinkIcon`} props={{ width: "18px", height: "18px" }} /> </a> </Mobile> {state.contract.github ? <UHeading>Github</UHeading> : null} </Stack> )} </Center> );