ConnectionDetailsModal.tsx raw

   1  import { AlertCircleIcon } from "lucide-react";
   2  import {
   3    AlertDialog,
   4    AlertDialogCancel,
   5    AlertDialogContent,
   6    AlertDialogDescription,
   7    AlertDialogFooter,
   8    AlertDialogTitle,
   9  } from "src/components/ui/alert-dialog";
  10  import {
  11    Tooltip,
  12    TooltipContent,
  13    TooltipProvider,
  14    TooltipTrigger,
  15  } from "src/components/ui/tooltip";
  16  import { App } from "src/types";
  17  
  18  export function ConnectionDetailsModal({
  19    app,
  20    onClose,
  21  }: {
  22    app: App;
  23    onClose: () => void;
  24  }) {
  25    return (
  26      <AlertDialog open>
  27        <AlertDialogContent>
  28          <AlertDialogTitle>Connection Details</AlertDialogTitle>
  29          <AlertDialogDescription className="flex flex-col gap-2">
  30            <div>
  31              <p className="font-medium">App ID</p>
  32              <p className="text-muted-foreground break-all">{app.id}</p>
  33            </div>
  34            <div>
  35              <p className="font-medium">App Public Key</p>
  36              <p className="text-muted-foreground break-all">{app.appPubkey}</p>
  37            </div>
  38            <div>
  39              <p className="font-medium">Wallet Public Key</p>
  40              <p className="text-muted-foreground break-all">
  41                <span className="break-all">{app.walletPubkey}</span>
  42                {!app.uniqueWalletPubkey && (
  43                  <TooltipProvider>
  44                    <Tooltip>
  45                      <TooltipTrigger asChild>
  46                        <AlertCircleIcon className="w-3 h-3 ml-2 flex-shrink-0" />
  47                      </TooltipTrigger>
  48                      <TooltipContent>
  49                        This connection does not have its own unique wallet
  50                        pubkey. Re-connect for additional privacy.
  51                      </TooltipContent>
  52                    </Tooltip>
  53                  </TooltipProvider>
  54                )}
  55              </p>
  56            </div>
  57            <div>
  58              <p className="font-medium">Last used</p>
  59              <p className="text-muted-foreground break-all">
  60                {app.lastUsedAt ? new Date(app.lastUsedAt).toString() : "Never"}
  61              </p>
  62            </div>
  63  
  64            <div>
  65              <p className="font-medium">Created At</p>
  66              <p className="text-muted-foreground break-all">
  67                {new Date(app.createdAt).toString()}
  68              </p>
  69            </div>
  70  
  71            {app.metadata && (
  72              <div>
  73                <p className="font-medium">Metadata</p>
  74                <p className="text-muted-foreground break-all whitespace-pre-wrap p-2">
  75                  {JSON.stringify(app.metadata, null, 4)}
  76                </p>
  77              </div>
  78            )}
  79          </AlertDialogDescription>
  80          <AlertDialogFooter>
  81            <AlertDialogCancel onClick={onClose}>Close</AlertDialogCancel>
  82          </AlertDialogFooter>
  83        </AlertDialogContent>
  84      </AlertDialog>
  85    );
  86  }
  87