Add privacy warning

Author: ekzyis

wallets/client/components/form/index.js

@@ -9,7 +9,7 @@ import Text from '@/components/text'
 import Info from '@/components/info'
 import { useFormState, useMaxSteps, useNext, useStepIndex } from '@/components/multi-step-form'
 import { isTemplate, isWallet, protocolDisplayName, protocolFormId, protocolLogName, walletLud16Domain } from '@/wallets/lib/util'
-import { WalletGuide, WalletLayout, WalletLayoutHeader, WalletLayoutImageOrName, WalletLogs } from '@/wallets/client/components'
+import { WalletGuide, WalletLayout, WalletLayoutHeader, WalletLayoutImageOrName, WalletLayoutWarning, WalletLogs } from '@/wallets/client/components'
 import { TemplateLogsProvider, useTestSendPayment, useWalletLogger, useTestCreateInvoice, useWalletSupport } from '@/wallets/client/hooks'
 import ArrowRight from '@/svgs/arrow-right-s-fill.svg'
 import { useFormikContext } from 'formik'
@@ -45,6 +45,7 @@ export function WalletMultiStepForm ({ wallet }) {
           <WalletLayoutImageOrName name={wallet.name} maxHeight='80px' />
         </WalletLayoutHeader>
         <WalletGuide name={wallet.name} />
+        <WalletLayoutWarning name={wallet.name} />
         <WalletMultiStepFormContextProvider wallet={wallet} initial={initial} steps={steps}>
           {steps.map(step => {
             // WalletForm is aware of the current step via hooks

wallets/client/components/layout.js

@@ -1,8 +1,10 @@
+import { Alert } from 'react-bootstrap'
+import Link from 'next/link'
 import Layout from '@/components/layout'
 import { useWalletImage } from '@/wallets/client/hooks'
-import { walletDisplayName, walletGuideUrl } from '@/wallets/lib/util'
-import Link from 'next/link'
+import { walletDisplayName, walletGuideUrl, walletWarning } from '@/wallets/lib/util'
 import InfoIcon from '@/svgs/information-fill.svg'
+import Text from '@/components/text'
 
 export function WalletLayout ({ children }) {
   // TODO(wallet-v2): py-5 doesn't work, I think it gets overriden by the layout class
@@ -69,3 +71,16 @@ export function WalletGuide ({ name }) {
     </Link>
   )
 }
+
+export function WalletLayoutWarning ({ name }) {
+  const warning = walletWarning(name)
+  if (!warning) return null
+
+  if (warning) {
+    return (
+      <Alert variant='warning' className='mx-auto my-3'>
+        <Text>{warning}</Text>
+      </Alert>
+    )
+  }
+}

wallets/lib/util.js

@@ -11,6 +11,14 @@ export function walletDisplayName (name) {
   return walletJson(name)?.displayName || titleCase(name)
 }
 
+export function walletWarning (name) {
+  let { warning } = walletJson(name)
+  if (Array.isArray(warning)) {
+    warning = warning.join('\n')
+  }
+  return warning
+}
+
 export function walletImage (name) {
   return walletJson(name)?.image
 }

wallets/lib/wallets.json

@@ -173,6 +173,10 @@
         "name": "SPARK",
         "displayName": "Spark",
         "image": "/wallets/spark.svg",
-        "url": "https://spark.money/"
+        "url": "https://spark.money/",
+        "warning": [
+            "**Spark balances are public.**",
+            "Anyone with your identity public key can look up your balance on [www.sparkscan.io](https://www.sparkscan.io/)."
+        ]
     }
 ]