WalletActionsMenu.tsx raw

   1  import {
   2    ArrowDownUpIcon,
   3    CalendarSyncIcon,
   4    CreditCardIcon,
   5    DownloadIcon,
   6    EllipsisVerticalIcon,
   7    FunnelIcon,
   8  } from "lucide-react";
   9  import { useState } from "react";
  10  import { Link } from "react-router";
  11  import ExternalLink from "src/components/ExternalLink";
  12  import { TransactionsFilterDialog } from "src/components/TransactionsFilterDialog";
  13  import { Button } from "src/components/ui/button";
  14  import {
  15    DropdownMenu,
  16    DropdownMenuContent,
  17    DropdownMenuItem,
  18    DropdownMenuSeparator,
  19    DropdownMenuTrigger,
  20  } from "src/components/ui/dropdown-menu";
  21  import { ProDropdownMenuItem } from "src/components/UpgradeDialog";
  22  import useTransactionFiltersStore from "src/state/TransactionFiltersStore";
  23  import { handleExportTransactions } from "./transactions-utils";
  24  
  25  export function WalletActionsMenu({
  26    hasChannelManagement,
  27    isOnchain,
  28  }: {
  29    hasChannelManagement: boolean;
  30    isOnchain: boolean;
  31  }) {
  32    const [filterDialogOpen, setFilterDialogOpen] = useState(false);
  33    const { filters, setFilters } = useTransactionFiltersStore();
  34  
  35    return (
  36      <>
  37        <DropdownMenu>
  38          <Button
  39            asChild
  40            size="icon"
  41            variant="ghost"
  42            className={isOnchain ? "sm:hidden" : undefined}
  43          >
  44            <DropdownMenuTrigger>
  45              <EllipsisVerticalIcon className="h-4 w-4" />
  46            </DropdownMenuTrigger>
  47          </Button>
  48          <DropdownMenuContent align="end">
  49            <div className="sm:hidden">
  50              {hasChannelManagement && (
  51                <DropdownMenuItem asChild>
  52                  <Link to="/wallet/swap" className="w-full cursor-pointer">
  53                    <ArrowDownUpIcon className="h-4 w-4" />
  54                    Swap
  55                  </Link>
  56                </DropdownMenuItem>
  57              )}
  58              <DropdownMenuItem asChild>
  59                <Link
  60                  to="/internal-apps/zapplanner"
  61                  className="w-full cursor-pointer"
  62                >
  63                  <CalendarSyncIcon className="h-4 w-4" />
  64                  Recurring
  65                </Link>
  66              </DropdownMenuItem>
  67              <DropdownMenuItem asChild>
  68                <ExternalLink
  69                  to="https://www.getalby.com/topup"
  70                  className="w-full cursor-pointer"
  71                >
  72                  <CreditCardIcon className="h-4 w-4" />
  73                  Buy
  74                </ExternalLink>
  75              </DropdownMenuItem>
  76              {!isOnchain && <DropdownMenuSeparator />}
  77            </div>
  78            {!isOnchain && (
  79              <>
  80                <DropdownMenuItem onClick={() => setFilterDialogOpen(true)}>
  81                  <FunnelIcon className="h-4 w-4" />
  82                  Filter Transactions
  83                </DropdownMenuItem>
  84                <ProDropdownMenuItem onClick={() => handleExportTransactions()}>
  85                  <DownloadIcon className="h-4 w-4" />
  86                  Export Transactions
  87                </ProDropdownMenuItem>
  88              </>
  89            )}
  90          </DropdownMenuContent>
  91        </DropdownMenu>
  92        {!isOnchain && (
  93          <TransactionsFilterDialog
  94            open={filterDialogOpen}
  95            onOpenChange={setFilterDialogOpen}
  96            filters={filters}
  97            onFiltersChange={setFilters}
  98          />
  99        )}
 100      </>
 101    );
 102  }
 103