Merge pull request #298 from Robotron2/feat/shareable-link

feat: implemented sharable link with prefilled deposit amout

Author: Junirezz

frontend/src/components/VaultDashboard.tsx

@@ -1,21 +1,27 @@
 import React, { useEffect, useState } from "react";
-import { Activity, AlertCircle, ShieldCheck, TrendingUp, Wallet as WalletIcon, Loader2, Info } from "./icons";
+import { useSearchParams } from "react-router-dom";
+import { 
+  Activity, 
+  AlertCircle, 
+  ShieldCheck, 
+  TrendingUp, 
+  Wallet as WalletIcon, 
+  Loader2, 
+  Info,
+  Share2
+} from "./icons";
 import Skeleton from "./Skeleton";
 import { useVault } from "../context/VaultContext";
 import ApiStatusBanner from "./ApiStatusBanner";
 import VaultPerformanceChart from "./VaultPerformanceChart";
 import { useToast } from "../context/ToastContext";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "./Tabs";
-import { FormField } from "../forms";
-import WithdrawalConfirmationModal from "./WithdrawalConfirmationModal";
 import { FormField, SubmitButton } from "../forms";
+import WithdrawalConfirmationModal from "./WithdrawalConfirmationModal";
 import { useDepositMutation, useWithdrawMutation } from "../hooks/useVaultMutations";
 import TransactionStatus, { type ActionStatus } from "./TransactionStatus";
 import CopyButton from "./CopyButton";
-import {
-  useDepositMutation,
-  useWithdrawMutation,
-} from "../hooks/useVaultMutations";
+import { copyTextToClipboard } from "../lib/clipboard";
 
 interface VaultDashboardProps {
   walletAddress: string | null;
@@ -145,6 +151,19 @@ const VaultDashboard: React.FC<VaultDashboardProps> = ({
   const depositMutation = useDepositMutation();
   const withdrawMutation = useWithdrawMutation();
 
+  const [searchParams] = useSearchParams();
+
+  useEffect(() => {
+    const amountParam = searchParams.get("amount");
+    if (amountParam) {
+      const val = Number(amountParam);
+      if (!Number.isNaN(val) && val > 0) {
+        setAmount(val.toString());
+        setActiveTab("deposit");
+      }
+    }
+  }, [searchParams]);
+
   useEffect(() => {
     const handleTrigger = () => {
       setActiveTab("deposit");
@@ -547,7 +566,41 @@ const VaultDashboard: React.FC<VaultDashboardProps> = ({
                     />
 
                     <div className="flex justify-between items-center" style={{ margin: "16px 0 24px" }}>
-                      <span style={{ color: "var(--text-secondary)", fontSize: "0.85rem" }}>Asset: USDC</span>
+                      <div className="flex items-center gap-sm">
+                        <span style={{ color: "var(--text-secondary)", fontSize: "0.85rem" }}>Asset: USDC</span>
+                        {tab === "deposit" && (
+                          <>
+                            <div style={{ width: "1px", height: "14px", background: "var(--border-glass)", margin: "0 4px" }} />
+                            <button
+                              type="button"
+                              className="btn-link flex items-center gap-xs"
+                              style={{ fontSize: "0.75rem", color: "var(--accent-cyan)", padding: 0 }}
+                              onClick={async () => {
+                                const baseUrl = window.location.origin + window.location.pathname;
+                                const shareUrl = amount && !isNaN(Number(amount)) && Number(amount) > 0
+                                  ? `${baseUrl}?amount=${amount}`
+                                  : baseUrl;
+                                
+                                try {
+                                  await copyTextToClipboard(shareUrl);
+                                  toast.success({
+                                    title: "Link copied",
+                                    description: "Shareable vault link is ready to paste."
+                                  });
+                                } catch (err) {
+                                  toast.error({
+                                    title: "Copy failed",
+                                    description: "Could not copy link to clipboard."
+                                  });
+                                }
+                              }}
+                            >
+                              <Share2 size={12} />
+                              Share Link
+                            </button>
+                          </>
+                        )}
+                      </div>
                       <button
                         type="button"
                         className="btn-max"

frontend/src/components/icons.ts

@@ -20,4 +20,6 @@ export {
   DollarSign,
   Percent,
   Briefcase,
+  Share2,
+  Link,
 } from "lucide-react";

frontend/src/index.css

@@ -594,6 +594,29 @@ button {
   border-color: rgba(255, 255, 255, 0.2);
 }
 
+.btn-link {
+  background: none;
+  border: none;
+  padding: 0;
+  color: var(--accent-cyan);
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  transition: opacity 0.2s, color 0.2s;
+  min-height: auto;
+  min-width: auto;
+}
+
+.btn-link:hover {
+  opacity: 0.8;
+  text-decoration: underline;
+}
+
+.btn-link:active {
+  transform: scale(0.98);
+}
+
 /* Animations */
 @keyframes puiseGlow {
   0% { box-shadow: 0 0 20px rgba(0, 240, 255, 0.1); }