Contract Explorer: Contract info

src/app/(sidebar)/account/fund/components/SwitchNetwork.tsx

@@ -1,24 +1,11 @@
 "use client";
 
-import { Card, Text, Button } from "@stellar/design-system";
-
-import { NetworkOptions } from "@/constants/settings";
-import { useStore } from "@/store/useStore";
-
-import { NetworkType } from "@/types/types";
+import { Card, Text } from "@stellar/design-system";
+import { SwitchNetworkButtons } from "@/components/SwitchNetworkButtons";
 
 import "../../styles.scss";
 
 export const SwitchNetwork = () => {
-  const { selectNetwork, updateIsDynamicNetworkSelect } = useStore();
-  const onSwitchNetwork = (network: NetworkType) => {
-    const selectedNetwork = NetworkOptions.find((n) => n.id === network);
-    if (selectedNetwork) {
-      updateIsDynamicNetworkSelect(true);
-      selectNetwork(selectedNetwork);
-    }
-  };
-
   return (
     <Card>
       <div className="Account__card">
@@ -33,26 +20,12 @@ export const SwitchNetwork = () => {
             fund an account with 10,000 lumens on the futurenet network.
           </Text>
         </div>
-        <div className="Account__CTA" data-testid="fundAccount-buttons">
-          <Button
-            size="md"
-            variant="tertiary"
-            onClick={() => {
-              onSwitchNetwork("futurenet");
-            }}
-          >
-            Switch to Futurenet
-          </Button>
 
-          <Button
-            size="md"
-            variant="tertiary"
-            onClick={() => {
-              onSwitchNetwork("testnet");
-            }}
-          >
-            Switch to Testnet
-          </Button>
+        <div className="Account__CTA" data-testid="fundAccount-buttons">
+          <SwitchNetworkButtons
+            includedNetworks={["futurenet", "testnet"]}
+            buttonSize="md"
+          />
         </div>
       </div>
     </Card>

src/app/(sidebar)/account/saved/page.tsx

@@ -16,6 +16,7 @@ import { InputSideElement } from "@/components/InputSideElement";
 import { SavedItemTimestampAndDelete } from "@/components/SavedItemTimestampAndDelete";
 import { PageCard } from "@/components/layout/PageCard";
 import { SaveToLocalStorageModal } from "@/components/SaveToLocalStorageModal";
+import { SwitchNetworkButtons } from "@/components/SwitchNetworkButtons";
 
 import { localStorageSavedKeypairs } from "@/helpers/localStorageSavedKeypairs";
 import { arrayItem } from "@/helpers/arrayItem";
@@ -131,25 +132,10 @@ export default function SavedKeypairs() {
         </Text>
 
         <Box gap="sm" direction="row" wrap="wrap">
-          <Button
-            variant="tertiary"
-            size="sm"
-            onClick={() => {
-              getAndSetNetwork("futurenet");
-            }}
-          >
-            Switch to Futurenet
-          </Button>
-
-          <Button
-            variant="tertiary"
-            size="sm"
-            onClick={() => {
-              getAndSetNetwork("testnet");
-            }}
-          >
-            Switch to Testnet
-          </Button>
+          <SwitchNetworkButtons
+            includedNetworks={["futurenet", "testnet"]}
+            buttonSize="md"
+          />
         </Box>
       </Box>
     );

src/app/(sidebar)/smart-contracts/contract-explorer/components/ContractInfo.tsx

@@ -0,0 +1,177 @@
+import { Avatar, Card, Icon, Logo } from "@stellar/design-system";
+import { Box } from "@/components/layout/Box";
+import { SdsLink } from "@/components/SdsLink";
+import { formatEpochToDate } from "@/helpers/formatEpochToDate";
+import { formatNumber } from "@/helpers/formatNumber";
+import { stellarExpertAccountLink } from "@/helpers/stellarExpertAccountLink";
+import { ContractInfoApiResponse, NetworkType } from "@/types/types";
+
+export const ContractInfo = ({
+  infoData,
+  networkId,
+}: {
+  infoData: ContractInfoApiResponse;
+  networkId: NetworkType;
+}) => {
+  type ContractExplorerInfoField = {
+    id: string;
+    label: string;
+  };
+
+  const INFO_FIELDS: ContractExplorerInfoField[] = [
+    {
+      id: "repository",
+      label: "Source Code",
+    },
+    {
+      id: "created",
+      label: "Created",
+    },
+    {
+      id: "wasm",
+      label: "WASM Hash",
+    },
+    {
+      id: "versions",
+      label: "Versions",
+    },
+    {
+      id: "creator",
+      label: "Creator",
+    },
+    {
+      id: "storage_entries",
+      label: "Data Storage",
+    },
+  ];
+
+  const InfoFieldItem = ({
+    label,
+    value,
+  }: {
+    label: string;
+    value: React.ReactNode;
+  }) => {
+    return (
+      <Box
+        gap="xs"
+        direction="row"
+        align="center"
+        addlClassName="InfoFieldItem"
+      >
+        <div className="InfoFieldItem__label">{label}</div>
+        <div className="InfoFieldItem__value">{value ?? "-"}</div>
+      </Box>
+    );
+  };
+
+  const formatEntriesText = (entriesCount: number) => {
+    if (!entriesCount) {
+      return "";
+    }
+
+    if (entriesCount === 1) {
+      return `1 entry`;
+    }
+
+    return `${formatNumber(entriesCount)} entries`;
+  };
+
+  const renderInfoField = (field: ContractExplorerInfoField) => {
+    switch (field.id) {
+      case "repository":
+        return (
+          <InfoFieldItem
+            key={field.id}
+            label={field.label}
+            value={
+              infoData.validation?.repository ? (
+                <SdsLink
+                  href={infoData.validation.repository}
+                  addlClassName="Link--external"
+                >
+                  <Logo.Github />
+                  {infoData.validation.repository.replace(
+                    "https://github.com/",
+                    "",
+                  )}
+                  <Icon.LinkExternal01 />
+                </SdsLink>
+              ) : null
+            }
+          />
+        );
+      case "created":
+        return (
+          <InfoFieldItem
+            key={field.id}
+            label={field.label}
+            value={
+              infoData.created ? formatEpochToDate(infoData.created) : null
+            }
+          />
+        );
+      case "wasm":
+        return (
+          <InfoFieldItem
+            key={field.id}
+            label={field.label}
+            value={infoData.wasm}
+          />
+        );
+      case "versions":
+        return (
+          <InfoFieldItem
+            key={field.id}
+            label={field.label}
+            value={infoData.versions}
+          />
+        );
+      case "creator":
+        return (
+          <InfoFieldItem
+            key={field.id}
+            label={field.label}
+            value={
+              infoData.creator ? (
+                <SdsLink
+                  href={stellarExpertAccountLink(infoData.creator, networkId)}
+                >
+                  <Avatar publicAddress={infoData.creator} size="sm" />
+                  {infoData.creator}
+                  <Icon.LinkExternal01 />
+                </SdsLink>
+              ) : null
+            }
+          />
+        );
+      case "storage_entries":
+        return (
+          <InfoFieldItem
+            key={field.id}
+            label={field.label}
+            // TODO: link to Contract Storage tab when ready
+            value={
+              infoData.storage_entries
+                ? formatEntriesText(infoData.storage_entries)
+                : null
+            }
+          />
+        );
+      default:
+        return null;
+    }
+  };
+
+  return (
+    <Card>
+      <Box
+        gap="xs"
+        addlClassName="ContractInfo"
+        data-testid="contract-info-container"
+      >
+        <>{INFO_FIELDS.map((f) => renderInfoField(f))}</>
+      </Box>
+    </Card>
+  );
+};