From bf4c27a2a936a6584dbb672e382d5154b04d5590 Mon Sep 17 00:00:00 2001
From: sedge-bot <sedge-bot@users.noreply.github.com>
Date: Sun, 24 May 2026 04:33:40 -0500
Subject: [PATCH] feat(app): render actual chain on share cards

---
 packages/app/src/app/create/page.tsx      |  5 +++++
 packages/app/src/app/vaults/page.tsx      |  6 +++++-
 packages/app/src/components/ShareCard.tsx | 11 ++++++++---
 3 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/packages/app/src/app/create/page.tsx b/packages/app/src/app/create/page.tsx
index 64b3ed7..f418c60 100644
--- a/packages/app/src/app/create/page.tsx
+++ b/packages/app/src/app/create/page.tsx
@@ -138,6 +138,7 @@ function CreateLockInner() {
     treasury,
     explorerUrl,
     explorerName,
+    shortName: chainShortName,
     usdcNote,
   } = useMemo(
     () =>
@@ -691,6 +692,7 @@ function CreateLockInner() {
               sablierAddress={sablierLockup}
               explorerUrl={explorerUrl}
               explorerName={explorerName}
+              chainName={chainShortName}
               onCreateAnother={resetForm}
             />
           ) : (
@@ -1584,6 +1586,7 @@ function SuccessView({
   sablierAddress,
   explorerUrl,
   explorerName,
+  chainName,
   onCreateAnother,
 }: {
   txHash: `0x${string}`;
@@ -1600,6 +1603,7 @@ function SuccessView({
   sablierAddress: Address;
   explorerUrl: string;
   explorerName: string;
+  chainName: string;
   onCreateAnother: () => void;
 }) {
   const now = Math.floor(Date.now() / 1000);
@@ -1680,6 +1684,7 @@ function SuccessView({
         endDate={endDate}
         nextUnlock={nextUnlock}
         sablierAddress={sablierAddress}
+        chainName={chainName}
       />
 
       <div className="space-y-4">
diff --git a/packages/app/src/app/vaults/page.tsx b/packages/app/src/app/vaults/page.tsx
index e33fab7..d2c8f0a 100644
--- a/packages/app/src/app/vaults/page.tsx
+++ b/packages/app/src/app/vaults/page.tsx
@@ -106,15 +106,17 @@ function VaultCard({
   usdcDecimals,
   sablierAddress,
   explorerUrl,
+  chainName,
 }: {
   vault: VaultData;
-  onClaim: (streamId: bigint) => void;
+  onClaim: (id: bigint) => void;
   claimingId: bigint | null;
   index: number;
   chainId: number;
   usdcDecimals: number;
   sablierAddress: Address;
   explorerUrl: string;
+  chainName: string;
 }) {
   const [now, setNow] = useState(() => Math.floor(Date.now() / 1000));
 
@@ -280,6 +282,7 @@ function VaultCard({
           endDate={new Date(vault.endTime * 1000)}
           nextUnlock={nextUnlockLabel}
           sablierAddress={sablierAddress}
+          chainName={chainName}
         />
       )}
     </div>
@@ -893,6 +896,7 @@ function VaultDashboard() {
               usdcDecimals={usdcDecimals}
               sablierAddress={sablierLockup}
               explorerUrl={explorerUrl}
+              chainName={chainConfig.shortName}
             />
           </CardErrorBoundary>
         ))}
diff --git a/packages/app/src/components/ShareCard.tsx b/packages/app/src/components/ShareCard.tsx
index ec183fd..953159e 100644
--- a/packages/app/src/components/ShareCard.tsx
+++ b/packages/app/src/components/ShareCard.tsx
@@ -9,6 +9,7 @@ type ShareCardProps = {
   endDate: Date;
   nextUnlock: string; // countdown string
   sablierAddress: string;
+  chainName: string;
 };
 
 const CARD_W = 600;
@@ -19,7 +20,7 @@ function drawCard(
   props: ShareCardProps,
   masked: boolean
 ) {
-  const { streamId, amountLocked, scheduleType, endDate, nextUnlock, sablierAddress } = props;
+  const { streamId, amountLocked, scheduleType, endDate, nextUnlock, sablierAddress, chainName } = props;
 
   // Background
   ctx.fillStyle = "#0a0a0a";
@@ -47,12 +48,16 @@ function drawCard(
   ctx.fillText("Proof of Lock", 32, 64);
 
   // Chain badge
+  const badgePaddingX = 14;
+  const badgeTextWidth = ctx.measureText(chainName).width;
+  const badgeWidth = Math.max(68, badgeTextWidth + badgePaddingX * 2);
+  const badgeX = CARD_W - 32 - badgeWidth;
   ctx.fillStyle = "rgba(255,255,255,0.08)";
-  roundRect(ctx, CARD_W - 100, 24, 68, 26, 13);
+  roundRect(ctx, badgeX, 24, badgeWidth, 26, 13);
   ctx.fill();
   ctx.fillStyle = "rgba(255,255,255,0.5)";
   ctx.font = "12px system-ui, -apple-system, sans-serif";
-  ctx.fillText("Base", CARD_W - 78, 42);
+  ctx.fillText(chainName, badgeX + badgePaddingX, 42);
 
   // Amount
   ctx.fillStyle = "#ffffff";