feat: improve key export page

closes #712

packages/app/config/default.json

@@ -44,7 +44,8 @@
   "defaultRelays": {
     "wss://relay.snort.social/": { "read": true, "write": true },
     "wss://nostr.wine/": { "read": true, "write": false },
-    "wss://eden.nostr.land/": { "read": true, "write": false }
+    "wss://relay.damus.io/": { "read": true, "write": true },
+    "wss://nos.lol/": { "read": true, "write": true }
   },
   "alby": {
     "clientId": "pohiJjPhQR",

packages/app/src/Components/Copy/Copy.tsx

@@ -10,11 +10,16 @@ export interface CopyProps {
   maxSize?: number;
   className?: string;
   showText?: boolean;
+  mask?: string;
 }
-export default function Copy({ text, maxSize = 32, className, showText }: CopyProps) {
+export default function Copy({ text, maxSize = 32, className, showText, mask }: CopyProps) {
   const { copy, copied } = useCopy();
   const sliceLength = maxSize / 2;
-  const trimmed = text.length > maxSize ? `${text.slice(0, sliceLength)}...${text.slice(-sliceLength)}` : text;
+  const displayText = mask ? mask.repeat(text.length) : text;
+  const trimmed =
+    displayText.length > maxSize
+      ? `${displayText.slice(0, sliceLength)}...${displayText.slice(-sliceLength)}`
+      : displayText;
 
   return (
     <div className={classNames("copy flex pointer g8 items-center", className)} onClick={() => copy(text)}>

packages/app/src/Pages/settings/Keys.css

@@ -1,9 +1,3 @@
-.copy.dashed {
-  padding: 12px 16px;
-  border: 2px dashed #222222;
-  border-radius: 16px;
-}
-
 .mnemonic-grid {
   display: grid;
   text-align: center;

packages/app/src/Pages/settings/Keys.tsx

@@ -10,26 +10,39 @@ import { hexToMnemonic } from "@/Utils/nip6";
 
 export default function ExportKeys() {
   const { publicKey, privateKeyData, generatedEntropy } = useLogin();
+  const copyClass = "p-3 br border border-dashed border-[var(--gray-medium)]";
   return (
     <div className="flex flex-col g12">
-      <h2>
+      <div className="text-xl">
         <FormattedMessage defaultMessage="Public Key" id="bep9C3" />
-      </h2>
-      <Copy text={hexToBech32("npub", publicKey ?? "")} className="dashed" />
-      <Copy text={encodeTLV(NostrPrefix.Profile, publicKey ?? "")} className="dashed" />
+      </div>
+      <small>
+        <FormattedMessage
+          defaultMessage="The public key is like your username, you can share it with anyone."
+          id="dK2CcV"
+        />
+      </small>
+      <Copy text={hexToBech32("npub", publicKey ?? "")} className={copyClass} />
+      <Copy text={encodeTLV(NostrPrefix.Profile, publicKey ?? "")} className={copyClass} />
       {privateKeyData instanceof KeyStorage && (
         <>
-          <h2>
+          <div className="text-xl">
             <FormattedMessage defaultMessage="Private Key" id="JymXbw" />
-          </h2>
-          <Copy text={hexToBech32("nsec", privateKeyData.value)} className="dashed" />
+          </div>
+          <small>
+            <FormattedMessage
+              defaultMessage="The private key is like a password, but it cannot be reset. Guard it carefully and never show it to anyone. Once someone has your private key, they will have access to your account forever."
+              id="QJfhKt"
+            />
+          </small>
+          <Copy text={hexToBech32("nsec", privateKeyData.value)} className={copyClass} mask="*" />
         </>
       )}
       {generatedEntropy && (
         <>
-          <h2>
+          <div className="text-xl">
             <FormattedMessage defaultMessage="Mnemonic" id="b12Goz" />
-          </h2>
+          </div>
           <div className="mnemonic-grid">
             {hexToMnemonic(generatedEntropy ?? "")
               .split(" ")