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}
/>
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}
/>
)}
@@ -893,6 +896,7 @@ function VaultDashboard() {
usdcDecimals={usdcDecimals}
sablierAddress={sablierLockup}
explorerUrl={explorerUrl}
+ chainName={chainConfig.shortName}
/>
))}
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";