Merge pull request #254 from alleslabs/feat/public-data-github-link

feat: add github link to public code and contract

CHANGELOG.md

@@ -39,6 +39,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Features
 
+- [#254](https://github.com/alleslabs/celatone-frontend/pull/254) Add GiHub link to public code and contract detail pages
 - [#230](https://github.com/alleslabs/celatone-frontend/pull/230) Add cw2info to code table
 
 ### Improvements

src/lib/components/links/GitHubLink.tsx

@@ -0,0 +1,31 @@
+import { Flex, Text } from "@chakra-ui/react";
+
+import { CustomIcon } from "../icon";
+import { AmpTrackSocial } from "lib/services/amplitude";
+
+interface GitHubLinkProps {
+  github: string;
+}
+
+export const GitHubLink = ({ github }: GitHubLinkProps) => {
+  const [, , , org, repo] = github.split("/");
+  return (
+    <Flex gap={2}>
+      <Text fontWeight={500} color="text.dark" variant="body2">
+        GitHub:
+      </Text>
+      <a
+        href={github}
+        onClick={() => AmpTrackSocial(github)}
+        target="_blank"
+        rel="noreferrer noopener"
+        style={{ display: "flex" }}
+      >
+        <Text color="lilac.main" variant="body2" wordBreak="break-all">
+          {org}/{repo}
+        </Text>
+        <CustomIcon name="external" boxSize="12px" marginLeft="8px" />
+      </a>
+    </Flex>
+  );
+};

src/lib/components/links/index.ts

@@ -0,0 +1 @@
+export * from "./GitHubLink";

src/lib/pages/code-details/index.tsx

@@ -6,6 +6,7 @@ import { useEffect } from "react";
 import { BackButton } from "lib/components/button";
 import { ExplorerLink } from "lib/components/ExplorerLink";
 import { CustomIcon } from "lib/components/icon";
+import { GitHubLink } from "lib/components/links";
 import { Loading } from "lib/components/Loading";
 import PageContainer from "lib/components/PageContainer";
 import { PublicDescription } from "lib/components/PublicDescription";
@@ -84,6 +85,9 @@ const CodeDetailsBody = observer(
                 {cw2Info ?? "N/A"}
               </Text>
             </Flex>
+            {publicProject.publicCodeData?.github && (
+              <GitHubLink github={publicProject.publicCodeData.github} />
+            )}
           </Flex>
           <CTASection
             id={codeId}

src/lib/pages/contract-details/components/ContractTop.tsx

@@ -12,6 +12,7 @@ import { useInternalNavigate } from "lib/app-provider";
 import { AdminButton } from "lib/components/button";
 import { ExplorerLink } from "lib/components/ExplorerLink";
 import { CustomIcon } from "lib/components/icon";
+import { GitHubLink } from "lib/components/links";
 import {
   AddToOtherListModal,
   EditContractDetailsModal,
@@ -143,6 +144,9 @@ export const ContractTop = ({ contractData }: ContractTopProps) => {
             </Text>
           </Flex>
         )}
+        {publicProject.publicInfo?.github && (
+          <GitHubLink github={publicProject.publicInfo?.github} />
+        )}
       </Flex>
       <Flex gap={4}>
         <AdminButton

src/lib/services/contract.ts

@@ -42,6 +42,7 @@ interface PublicInfoResponse {
   name: string;
   address: ContractAddr;
   description: string;
+  github: string;
 }
 
 export interface InstantiateInfo {

src/lib/types/projects.ts

@@ -85,4 +85,5 @@ export interface PublicInfo {
   name: string;
   contractAddress: ContractAddr;
   description: string;
+  github: string;
 }