feat(keychain): add advanced mode toggle to hide network details

packages/keychain/src/components/ContractLink.tsx

@@ -1,4 +1,5 @@
 import { useConnection } from "@/hooks/connection";
+import { useAdvanced } from "@/context/advanced";
 import { Address, cn } from "@cartridge/ui";
 import { useExplorer } from "@starknet-react/core";
 import { constants } from "starknet";
@@ -11,7 +12,22 @@ export function ContractLink({
   className?: string;
 }) {
   const { controller } = useConnection();
+  const { advanced } = useAdvanced();
   const explorer = useExplorer();
+
+  if (!advanced) {
+    return (
+      <span className={cn("text-foreground-100", className)}>
+        <Address
+          address={contractAddress}
+          first={5}
+          last={5}
+          className="text-inherit font-sans"
+        />
+      </span>
+    );
+  }
+
   return (
     <a
       className={cn(

packages/keychain/src/components/DeployController.tsx

@@ -1,5 +1,6 @@
 import { TransactionSummary } from "@/components/transaction/TransactionSummary";
 import { useConnection } from "@/hooks/connection";
+import { useAdvanced } from "@/context/advanced";
 import { useDeploy } from "@/hooks/deploy";
 import { useFeeToken } from "@/hooks/tokens";
 import { ControllerError } from "@/utils/connection";
@@ -76,6 +77,7 @@ export function DeployControllerView({
   ctrlError?: ControllerError;
 }) {
   const { controller } = useConnection();
+  const { advanced } = useAdvanced();
   const { deploySelf, isDeploying } = useDeploy();
   const { token: feeToken, isLoading } = useFeeToken();
   const [deployHash, setDeployHash] = useState<string>();
@@ -203,11 +205,15 @@ export function DeployControllerView({
             variant="expanded"
             icon={<Spinner size="xl" />}
             title="Deploying Controller"
-            description={`Your controller is being deployed on ${chainName}`}
+            description={
+              advanced
+                ? `Your controller is being deployed on ${chainName}`
+                : "Your controller is being deployed"
+            }
             hideIcon
           />
           <LayoutContent>
-            {deployHash && controller && (
+            {advanced && deployHash && controller && (
               <ExplorerLink
                 chainId={controller.chainId()}
                 txHash={deployHash}
@@ -236,11 +242,15 @@ export function DeployControllerView({
             variant="expanded"
             Icon={CheckIcon}
             title="Success!"
-            description={`Your controller has been deployed on ${chainName}`}
+            description={
+              advanced
+                ? `Your controller has been deployed on ${chainName}`
+                : "Your controller has been deployed"
+            }
             hideIcon
           />
           <LayoutContent className="items-center">
-            {deployHash && controller && (
+            {advanced && deployHash && controller && (
               <ExplorerLink
                 chainId={controller.chainId()}
                 txHash={deployHash}

packages/keychain/src/components/ErrorAlert.tsx

@@ -23,6 +23,7 @@ import {
 } from "@cartridge/ui";
 import { cn, formatAddress } from "@cartridge/ui/utils";
 import { useExplorer } from "@starknet-react/core";
+import { useAdvanced } from "@/context/advanced";
 import React, {
   ReactElement,
   useCallback,
@@ -423,6 +424,7 @@ function StackTraceDisplay({
   stackTrace: ReturnType<typeof parseExecutionError>["stack"];
 }) {
   const explorer = useExplorer();
+  const { advanced } = useAdvanced();
   const getExplorerUrl = useCallback(
     (key: "address" | "class", value: string) => {
       switch (key) {
@@ -435,6 +437,10 @@ function StackTraceDisplay({
     [explorer],
   );
 
+  if (!advanced) {
+    return null;
+  }
+
   return (
     <div className="flex flex-col gap-2">
       {stackTrace.map((trace, i, arr) => (
@@ -448,15 +454,23 @@ function StackTraceDisplay({
                       {key}
                     </div>
                     {key === "address" || key === "class" ? (
-                      <Link
-                        to={getExplorerUrl(key, value as string)}
-                        target="_blank"
-                        className="break-all text-left hover:underline"
-                      >
-                        {formatAddress(value as string, {
-                          size: "sm",
-                        })}
-                      </Link>
+                      advanced ? (
+                        <Link
+                          to={getExplorerUrl(key, value as string)}
+                          target="_blank"
+                          className="break-all text-left hover:underline"
+                        >
+                          {formatAddress(value as string, {
+                            size: "sm",
+                          })}
+                        </Link>
+                      ) : (
+                        <span className="break-all text-left">
+                          {formatAddress(value as string, {
+                            size: "sm",
+                          })}
+                        </span>
+                      )
                     ) : key === "selector" ? (
                       <div className="break-all text-left">
                         {formatAddress(value as string, {

packages/keychain/src/components/ExplorerLink.tsx

@@ -0,0 +1,24 @@
+import { useAdvanced } from "@/context/advanced";
+import { useExplorer } from "@starknet-react/core";
+import { Link } from "react-router-dom";
+
+export function ExplorerTransactionLink({
+  transactionHash,
+  children,
+}: {
+  transactionHash: string;
+  children: React.ReactNode;
+}) {
+  const { advanced } = useAdvanced();
+  const explorer = useExplorer();
+
+  if (!advanced) {
+    return <>{children}</>;
+  }
+
+  return (
+    <Link to={explorer.transaction(transactionHash)} target="_blank">
+      {children}
+    </Link>
+  );
+}

packages/keychain/src/components/Transaction.tsx

@@ -3,6 +3,7 @@ import { constants } from "starknet";
 import { CheckIcon, ExternalIcon, Spinner, StarknetIcon } from "@cartridge/ui";
 import { useController } from "@/hooks/controller";
 import { useChainName } from "@/hooks/chain";
+import { useAdvanced } from "@/context/advanced";
 import { useExplorer } from "@starknet-react/core";
 import { Link } from "react-router-dom";
 
@@ -24,6 +25,7 @@ export function Transaction({
   const [state, setState] = useState<TransactionState>("pending");
   const { icon } = useMemo(() => getColorIcon(state), [state]);
   const { controller } = useController();
+  const { advanced } = useAdvanced();
   const explorer = useExplorer();
 
   useEffect(() => {
@@ -56,15 +58,17 @@ export function Transaction({
         <div>{name}</div>
       </div>
 
-      <div className="flex items-center gap-1">
-        <div className="flex items-center text-foreground-400 gap-1 border-r px-3">
-          <StarknetIcon size="sm" />
-          <div>{chainName}</div>
+      {advanced && (
+        <div className="flex items-center gap-1">
+          <div className="flex items-center text-foreground-400 gap-1 border-r px-3">
+            <StarknetIcon size="sm" />
+            <div>{chainName}</div>
+          </div>
+          <Link to={explorer.transaction(hash)} target="_blank">
+            <ExternalIcon size="sm" />
+          </Link>
         </div>
-        <Link to={explorer.transaction(hash)} target="_blank">
-          <ExternalIcon size="sm" />
-        </Link>
-      </div>
+      )}
     </div>
   );
 }

packages/keychain/src/components/activity.tsx

@@ -1,5 +1,4 @@
-import { useCallback, useMemo, useState } from "react";
-import { Link } from "react-router-dom";
+import { useMemo, useState } from "react";
 import {
   ActivityAchievementCard,
   ActivityCollectibleCard,
@@ -12,25 +11,17 @@ import {
   Skeleton,
 } from "@cartridge/ui";
 import { cn } from "@cartridge/ui/utils";
-import { useExplorer } from "@starknet-react/core";
 import { useData } from "@/hooks/data";
+import { ExplorerTransactionLink } from "@/components/ExplorerLink";
 import { CardProps } from "@/components/provider/data";
 
 const OFFSET = 100;
 
 export function Activity() {
   const [cap, setCap] = useState(OFFSET);
-  const explorer = useExplorer();
 
   const { events: data, status } = useData();
 
-  const to = useCallback(
-    (transactionHash: string) => {
-      return explorer.transaction(transactionHash);
-    },
-    [explorer],
-  );
-
   const { events, dates } = useMemo(() => {
     const filteredData = data.slice(0, cap);
     return {
@@ -55,13 +46,17 @@ export function Activity() {
               {events
                 .filter((event) => event.date === current)
                 .map((props: CardProps, index: number) => {
+                  const key =
+                    props.variant === "token"
+                      ? `${index}-${props.key}-${props.username}`
+                      : `${index}-${props.key}`;
+
                   switch (props.variant) {
                     case "token":
                       return (
-                        <Link
-                          key={`${index}-${props.key}-${props.username}`}
-                          to={to(props.transactionHash)}
-                          target="_blank"
+                        <ExplorerTransactionLink
+                          key={key}
+                          transactionHash={props.transactionHash}
                         >
                           <ActivityTokenCard
                             amount={props.amount}
@@ -72,14 +67,13 @@ export function Activity() {
                             action={props.action}
                             timestamp={props.timestamp * 1000}
                           />
-                        </Link>
+                        </ExplorerTransactionLink>
                       );
                     case "collectible":
                       return (
-                        <Link
-                          key={`${index}-${props.key}`}
-                          to={to(props.transactionHash)}
-                          target="_blank"
+                        <ExplorerTransactionLink
+                          key={key}
+                          transactionHash={props.transactionHash}
                         >
                           <ActivityCollectibleCard
                             name={props.name}
@@ -90,14 +84,13 @@ export function Activity() {
                             action={props.action}
                             timestamp={props.timestamp * 1000}
                           />
-                        </Link>
+                        </ExplorerTransactionLink>
                       );
                     case "game":
                       return (
-                        <Link
-                          key={`${index}-${props.key}`}
-                          to={to(props.transactionHash)}
-                          target="_blank"
+                        <ExplorerTransactionLink
+                          key={key}
+                          transactionHash={props.transactionHash}
                         >
                           <ActivityGameCard
                             action={props.title}
@@ -107,12 +100,12 @@ export function Activity() {
                             certified={props.certified}
                             timestamp={props.timestamp * 1000}
                           />
-                        </Link>
+                        </ExplorerTransactionLink>
                       );
                     case "achievement":
                       return (
                         <ActivityAchievementCard
-                          key={`${index}-${props.key}`}
+                          key={key}
                           title={"Achievement"}
                           topic={props.title}
                           image={props.image}

packages/keychain/src/components/funding/Deposit.tsx

@@ -30,6 +30,7 @@ import {
   HeaderInner,
 } from "@cartridge/ui";
 import { useConnection } from "@/hooks/connection";
+import { useAdvanced } from "@/context/advanced";
 import { ErrorAlert } from "../ErrorAlert";
 import { AmountSelection } from "./AmountSelection";
 import { Balance, BalanceType } from "../purchase/Balance";
@@ -51,6 +52,7 @@ export function Deposit(innerProps: DepositProps) {
 function DepositInner({ onComplete }: DepositProps) {
   const { connectAsync, connectors, isPending: isConnecting } = useConnect();
   const { controller } = useConnection();
+  const { advanced } = useAdvanced();
   const { account: extAccount } = useAccount();
   const { token: feeToken } = useFeeToken();
   const { toast } = useToast();
@@ -154,7 +156,7 @@ function DepositInner({ onComplete }: DepositProps) {
       <HeaderInner
         title="Deposit"
         description={
-          controller ? (
+          advanced && controller ? (
             <CopyAddress address={controller.address()} />
           ) : undefined
         }