conditional description

cartridge-gg · Jan 15, 2025 · 6b44925 · 6b44925
1 parent ec3f8c8
commit 6b44925
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 11 deletions.
diff --git a/...in/__image_snapshots__/components-funding-purchasecredits--default-chromium.png b/...in/__image_snapshots__/components-funding-purchasecredits--default-chromium.png
diff --git a/packages/keychain/src/components/funding/PurchaseCredits.tsx b/packages/keychain/src/components/funding/PurchaseCredits.tsx
@@ -26,10 +26,11 @@ enum PurchaseState {
 }
 
 type PurchaseCreditsProps = {
+  isSlot?: boolean;
   onBack?: () => void;
 };
 
-export function PurchaseCredits({ onBack }: PurchaseCreditsProps) {
+export function PurchaseCredits({ isSlot, onBack }: PurchaseCreditsProps) {
   const { controller, closeModal } = useConnection();
 
   const [clientSecret, setClientSecret] = useState("");
@@ -120,7 +121,11 @@ export function PurchaseCredits({ onBack }: PurchaseCreditsProps) {
         <ErrorAlert
           variant=""
           title="WHAT ARE CREDITS"
-          description="Credits can be used to play games or pay for slot deployments. They are not tokens and cannot be transferred or refunded."
+          description={
+            "Credits can be used " +
+            (isSlot ? "for slot deployments" : "to play games") +
+            ". They are not tokens and cannot be transferred or refunded."
+          }
           isExpanded
         />
       </Content>

diff --git a/packages/keychain/src/components/funding/index.tsx b/packages/keychain/src/components/funding/index.tsx
@@ -20,19 +20,17 @@ const enum FundingState {
 
 export type FundingProps = {
   title?: React.ReactElement | string;
-  creditsOnly?: boolean;
+  isSlot?: boolean;
   onComplete?: (deployHash?: string) => void;
 };
 
-export function Funding({ title, creditsOnly, onComplete }: FundingProps) {
+export function Funding({ title, isSlot, onComplete }: FundingProps) {
   const { controller } = useConnection();
   const [state, setState] = useState<FundingState>(FundingState.SHOW_OPTIONS);
-  const showBalances: BalanceType[] = creditsOnly
-    ? ["credits"]
-    : ["credits", "eth"];
+  const showBalances: BalanceType[] = isSlot ? ["credits"] : ["credits", "eth"];
   const showCredits =
     (typeof document !== "undefined" && document.cookie.includes("credits=")) ||
-    creditsOnly;
+    isSlot;
 
   if (state === FundingState.FUND_ETH) {
     return (
@@ -45,7 +43,10 @@ export function Funding({ title, creditsOnly, onComplete }: FundingProps) {
 
   if (state === FundingState.FUND_CREDITS) {
     return (
-      <PurchaseCredits onBack={() => setState(FundingState.SHOW_OPTIONS)} />
+      <PurchaseCredits
+        isSlot={isSlot}
+        onBack={() => setState(FundingState.SHOW_OPTIONS)}
+      />
     );
   }
 
@@ -65,7 +66,7 @@ export function Funding({ title, creditsOnly, onComplete }: FundingProps) {
             <CoinsIcon variant="line" size="sm" /> Purchase Credits
           </Button>
         )}
-        {!creditsOnly && (
+        {!isSlot && (
           <Button
             onClick={() => setState(FundingState.FUND_ETH)}
             variant="secondary"

diff --git a/packages/keychain/src/components/slot/fund.tsx b/packages/keychain/src/components/slot/fund.tsx
@@ -15,5 +15,5 @@ export function Fund() {
     }
   }, [navigate, pathname]);
 
-  return <Funding title="Fund Credits for Slot" creditsOnly={true} />;
+  return <Funding title="Fund Credits for Slot" isSlot />;
 }