better wallet security banner

components/banners.js

@@ -122,18 +122,17 @@ export function WalletLimitBanner () {
   )
 }
 
-export function WalletSecurityBanner () {
+export function WalletSecurityBanner ({ isActive }) {
   return (
     <Alert className={styles.banner} key='info' variant='warning'>
       <Alert.Heading>
-        Wallet Security Disclaimer
+        Gunslingin' Safety Tips
       </Alert.Heading>
-      <p className='mb-1'>
-        Your wallet's credentials for spending are stored in the browser and never go to the server.
-        However, you should definitely <strong>set a budget in your wallet</strong> if you can.
+      <p className='mb-3 line-height-md'>
+        Listen up, pardner! Put a limit on yer spendin' wallet or hook up a wallet that's only for Stacker News. It'll keep them varmints from cleanin' out yer whole goldmine if they rustle up yer wallet.
       </p>
-      <p>
-        Also, for the time being, you will have to reenter your credentials on other devices.
+      <p className='line-height-md'>
+        Your spending wallet's credentials are never sent to our servers in plain text. To sync across devices, enable device sync in your settings.
       </p>
     </Alert>
   )

pages/settings/wallets/[wallet].js

@@ -18,6 +18,7 @@ import { useMe } from '@/components/me'
 import validateWallet from '@/wallets/validate'
 import { ValidationError } from 'yup'
 import { useFormikContext } from 'formik'
+import useVault from '@/components/vault/use-vault'
 
 export const getServerSideProps = getGetServerSideProps({ authRequired: true })
 
@@ -68,7 +69,6 @@ export default function WalletSettings () {
     <CenterLayout>
       <h2 className='pb-2'>{wallet?.def.card.title}</h2>
       <h6 className='text-muted text-center pb-3'><Text>{wallet?.def.card.subtitle}</Text></h6>
-      {canSend(wallet) && <WalletSecurityBanner />}
       <Form
         initial={initial}
         enableReinitialize
@@ -92,6 +92,7 @@ export default function WalletSettings () {
           }
         }}
       >
+        <SendWarningBanner walletDef={wallet.def} />
         {wallet && <WalletFields wallet={wallet} />}
         <CheckboxGroup name='enabled'>
           <Checkbox
@@ -123,6 +124,13 @@ export default function WalletSettings () {
   )
 }
 
+function SendWarningBanner ({ walletDef }) {
+  const { values } = useFormikContext()
+  if (!canSend({ def: walletDef, config: values })) return null
+
+  return <WalletSecurityBanner />
+}
+
 function ReceiveSettings ({ walletDef }) {
   const { values } = useFormikContext()
   return canReceive({ def: walletDef, config: values }) && <AutowithdrawSettings />