Allow download of passphrase

wallets/client/components/passphrase.js

@@ -1,4 +1,5 @@
-import React from 'react'
+import React, { useCallback } from 'react'
+import Button from 'react-bootstrap/Button'
 import { CopyButton } from '@/components/form'
 import styles from '@/styles/wallet.module.css'
 
@@ -7,7 +8,7 @@ export function Passphrase ({ passphrase }) {
   return (
     <>
       <p className='fw-bold line-height-md'>
-        Make sure to copy your passphrase now.
+        Make sure to save your passphrase now.
       </p>
       <p className='fw-bold line-height-md'>
         This is the only time we will show it to you.
@@ -23,9 +24,49 @@ export function Passphrase ({ passphrase }) {
           </div>
         ))}
       </div>
-      <div className='d-flex justify-content-end mt-3'>
+      <div className='d-flex justify-content-center mt-3 gap-2 align-items-center'>
         <CopyButton className='rounded' value={passphrase} variant='primary' />
+        <span className='text-muted'>or</span>
+        <DownloadButton passphrase={passphrase} />
       </div>
     </>
   )
 }
+
+export default function DownloadButton ({ passphrase }) {
+  const onClick = useCallback(() => {
+    const filename = 'stacker-news-passphrase.txt'
+    const value = `STACKER NEWS PASSPHRASE
+-----------------------
+
+Your passphrase to unlock your wallets on any device is:
+
+${passphrase}
+
+Please keep this passphrase safe and do not share it with anyone.
+`
+    download(filename, value)
+  }, [passphrase])
+
+  return (
+    <Button
+      className='rounded'
+      variant='primary'
+      onClick={onClick}
+    >
+      download
+    </Button>
+  )
+}
+
+function download (filename, value) {
+  const blob = new Blob([value], { type: 'text/plain' })
+  const url = URL.createObjectURL(blob)
+  const a = document.createElement('a')
+  a.href = url
+  a.download = filename
+  document.body.appendChild(a)
+  a.click()
+  document.body.removeChild(a)
+  URL.revokeObjectURL(url)
+}