Merge pull request #1506 from stackernews/colored-badges

Color send & recv badges

components/wallet-card.js

@@ -51,10 +51,18 @@ export default function WalletCard ({ wallet, draggable, onDragStart, onDragEnte
         <Card.Title>{title}</Card.Title>
         <Card.Subtitle className='mt-2'>
           {badges?.map(
-            badge =>
-              <Badge className={styles.badge} key={badge} bg={null}>
-                {badge}
-              </Badge>)}
+            badge => {
+              let style = ''
+              switch (badge) {
+                case 'receive': style = styles.receive; break
+                case 'send': style = styles.send; break
+              }
+              return (
+                <Badge className={`${styles.badge} ${style}`} key={badge} bg={null}>
+                  {badge}
+                </Badge>
+              )
+            })}
         </Card.Subtitle>
       </Card.Body>
       <Link href={`/settings/wallets/${wallet.name}`}>

styles/wallet.module.css

@@ -40,6 +40,14 @@
   margin-right: 0.2rem;
 }
 
+.receive {
+  color: #20c997 !important;
+}
+
+.send {
+  color: var(--bs-primary) !important;
+}
+
 .attach {
   color: var(--bs-body-color) !important;
   text-align: center;

wallets/blink/index.js

@@ -28,7 +28,7 @@ export const fields = [
 export const card = {
   title: 'Blink',
   subtitle: 'use [Blink](https://blink.sv/) for payments',
-  badges: ['send only']
+  badges: ['send']
 }
 
 export const fieldValidation = blinkSchema

wallets/cln/index.js

@@ -36,7 +36,7 @@ export const fields = [
 export const card = {
   title: 'CLN',
   subtitle: 'autowithdraw to your Core Lightning node via [CLNRest](https://docs.corelightning.org/docs/rest)',
-  badges: ['receive only']
+  badges: ['receive']
 }
 
 export const fieldValidation = CLNAutowithdrawSchema

wallets/lightning-address/index.js

@@ -15,7 +15,7 @@ export const fields = [
 export const card = {
   title: 'lightning address',
   subtitle: 'autowithdraw to a lightning address',
-  badges: ['receive only']
+  badges: ['receive']
 }
 
 export const fieldValidation = lnAddrAutowithdrawSchema

wallets/lnbits/index.js

@@ -29,7 +29,7 @@ export const fields = [
 export const card = {
   title: 'LNbits',
   subtitle: 'use [LNbits](https://lnbits.com/) for payments',
-  badges: ['send & receive']
+  badges: ['send', 'receive']
 }
 
 export const fieldValidation = lnbitsSchema

wallets/lnc/index.js

@@ -33,7 +33,7 @@ export const fields = [
 export const card = {
   title: 'LNC',
   subtitle: 'use Lightning Node Connect for LND payments',
-  badges: ['send only', 'budgetable']
+  badges: ['send', 'budgetable']
 }
 
 export const fieldValidation = lncSchema

wallets/lnd/index.js

@@ -37,7 +37,7 @@ export const fields = [
 export const card = {
   title: 'LND',
   subtitle: 'autowithdraw to your Lightning Labs node',
-  badges: ['receive only']
+  badges: ['receive']
 }
 
 export const fieldValidation = LNDAutowithdrawSchema

wallets/nwc/index.js

@@ -27,7 +27,7 @@ export const fields = [
 export const card = {
   title: 'NWC',
   subtitle: 'use Nostr Wallet Connect for payments',
-  badges: ['send & receive', 'budgetable']
+  badges: ['send', 'receive', 'budgetable']
 }
 
 export const fieldValidation = nwcSchema

wallets/phoenixd/index.js

@@ -33,7 +33,7 @@ export const fields = [
 export const card = {
   title: 'phoenixd',
   subtitle: 'use [phoenixd](https://phoenix.acinq.co/server) for payments',
-  badges: ['send & receive']
+  badges: ['send', 'receive']
 }
 
 // phoenixd::TODO

wallets/webln/index.js

@@ -20,7 +20,7 @@ export const fieldValidation = ({ enabled }) => {
 export const card = {
   title: 'WebLN',
   subtitle: 'use a [WebLN provider](https://www.webln.guide/ressources/webln-providers) for payments',
-  badges: ['send only']
+  badges: ['send']
 }
 
 export default function WebLnProvider ({ children }) {