[BLD-227] Dashboard: Add Button to download snapshot as CSV file in Claim Phase UI (#7965)

<!--

## title your PR with this format: "[SDK/Dashboard/Portal] Feature/Fix: Concise title for the changes"

If you did not copy the branch name from Linear, paste the issue tag here (format is TEAM-0000):

## Notes for the reviewer

Anything important to call out? Be sure to also clarify these in your comments.

## How to test

Unit tests, playground, etc.

-->

<!-- start pr-codex -->

---

## PR-Codex overview
This PR focuses on refining the `ClaimConditionsForm` and enhancing the `ClaimerSelection` component by adjusting imports, improving layout, and adding functionality to download snapshot data as a CSV file.

### Detailed summary
- Removed `ArrowDownToLineIcon` from `ClaimConditionsForm`.
- Updated layout in `ClaimerSelection` to use a flexible column layout.
- Added a button to download snapshots as CSV in `ClaimerSelection`.
- Introduced `downloadSnapshotAsCSV` function to handle CSV generation and downloading.

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->

<!-- This is an auto-generated comment: release notes by coderabbit.ai -->

## Summary by CodeRabbit

- New Features
  - Added CSV export for Claimer snapshots with a Download button visible when a snapshot exists.

- Style
  - Updated snapshot actions to a responsive layout (stack on small screens, inline on larger screens).
  - Added a distinct Download button with an icon and adjusted Edit button styling.
  - Removed the icon from the Save Phases button, showing text only.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

Author: MananTank

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/_components/claim-conditions/claim-conditions-form/Inputs/ClaimerSelection.tsx

@@ -1,4 +1,6 @@
-import { UploadIcon } from "lucide-react";
+import { ArrowDownToLineIcon, UploadIcon } from "lucide-react";
+import Papa from "papaparse";
+import { handleDownload } from "@/components/blocks/download-file-button";
 import { FormFieldSetup } from "@/components/blocks/FormFieldSetup";
 import { Button } from "@/components/ui/button";
 import {
@@ -9,6 +11,7 @@ import {
   SelectValue,
 } from "@/components/ui/select";
 import { cn } from "@/lib/utils";
+import type { SnapshotEntry } from "../../legacy-zod-schema";
 import { useClaimConditionsFormContext } from "../index";
 
 /**
@@ -118,10 +121,10 @@ export const ClaimerSelection = () => {
 
         {/* Edit or See Snapshot */}
         {snapshot ? (
-          <div className="flex items-center gap-3">
+          <div className="flex flex-col md:flex-row md:items-center gap-3">
             {/* disable the "Edit" button when form is disabled, but not when it's a "See" button */}
             <Button
-              className="gap-2 rounded-md"
+              className="gap-2"
               disabled={disabledSnapshotButton}
               onClick={() => setOpenIndex(phaseIndex)}
               size="sm"
@@ -130,6 +133,21 @@ export const ClaimerSelection = () => {
               <UploadIcon className="size-4" />
             </Button>
 
+            {snapshot && snapshot.length > 0 && (
+              <Button
+                className="gap-2 rounded bg-background"
+                variant="outline"
+                disabled={disabledSnapshotButton}
+                onClick={() => {
+                  downloadSnapshotAsCSV(snapshot);
+                }}
+                size="sm"
+              >
+                <ArrowDownToLineIcon className="size-4" />
+                Download
+              </Button>
+            )}
+
             <div
               className={cn(
                 "flex gap-2 items-center",
@@ -151,3 +169,25 @@ export const ClaimerSelection = () => {
     </FormFieldSetup>
   );
 };
+
+function downloadSnapshotAsCSV(snapshot: SnapshotEntry[]) {
+  const csvData = snapshot.map((entry) => ({
+    address: entry.address,
+    maxClaimable:
+      entry.maxClaimable === "0" ? "" : entry.maxClaimable?.toString() || "",
+    price: entry.price?.toString() || "",
+    currencyAddress: entry.currencyAddress || "",
+  }));
+
+  const csvContent = Papa.unparse(csvData, {
+    header: true,
+    delimiter: ",",
+    quotes: false,
+  });
+
+  handleDownload({
+    fileContent: csvContent,
+    fileNameWithExtension: "snapshot.csv",
+    fileFormat: "text/csv",
+  });
+}

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/_components/claim-conditions/claim-conditions-form/index.tsx

@@ -1,11 +1,6 @@
 "use client";
 
-import {
-  ArrowDownToLineIcon,
-  CircleAlertIcon,
-  CircleHelpIcon,
-  PlusIcon,
-} from "lucide-react";
+import { CircleAlertIcon, CircleHelpIcon, PlusIcon } from "lucide-react";
 import {
   createContext,
   Fragment,
@@ -652,7 +647,6 @@ export const ClaimConditionsForm: React.FC<ClaimConditionsFormProps> = ({
                 txChainID={contract.chain.id}
                 type="submit"
               >
-                <ArrowDownToLineIcon className="size-3.5" />
                 {claimConditionsQuery.isPending
                   ? "Saving Phases"
                   : "Save Phases"}