From 03ca84629b15f311f6e520e30b585b704f347730 Mon Sep 17 00:00:00 2001
From: ekzyis <ek@stacker.news>
Date: Mon, 15 Jul 2024 16:23:24 +0200
Subject: [PATCH] Remove React dependency from wallet definitions

---
 components/wallet/_example.js      | 12 ++----------
 components/wallet/cln.js           | 15 ++-------------
 components/wallet/lnbits.js        |  8 +-------
 components/wallet/lnd.js           | 10 +---------
 pages/settings/wallets/[wallet].js |  4 ++--
 5 files changed, 8 insertions(+), 41 deletions(-)

diff --git a/components/wallet/_example.js b/components/wallet/_example.js
index 1e3ff788..70d37049 100644
--- a/components/wallet/_example.js
+++ b/components/wallet/_example.js
@@ -1,4 +1,3 @@
-import React from 'react'
 import { lnbitsSchema } from '@/lib/validate'
 
 // ~~~
@@ -16,8 +15,6 @@ export const name = 'lnbits-as-an-example'
 // The form to configure this wallet is generated from these fields,
 // see the component <WalletFields /> in pages/settings/wallets/[wallet].js.
 //
-// If you need to include React code, you need to use React.createElement
-// since the worker will also import this file and does not support JSX syntax.
 //
 // If not handled otherwise in <WalletFields />, field properties are simply
 // passed into <ClientInput /> or <PasswordInput /> as props (component depends on 'type').
@@ -48,13 +45,8 @@ export const fields = [
 // [required]
 export const card = {
   title: 'LNbits',
-  // as mentioned above, you need to use React.createElement instead of JSX for more complex content
-  subtitle: React.createElement(
-    React.Fragment,
-    {},
-    'use ',
-    React.createElement('a', { href: 'https://lnbits.com/', target: '_blank', rel: 'noreferrer' }, 'LNbits'),
-    ' for payments'),
+  // subtitle supports markdown
+  subtitle: 'use [LNbits](https://lnbits.com/) for payments',
   badges: ['send only', 'non-custodialish']
 }
 
diff --git a/components/wallet/cln.js b/components/wallet/cln.js
index 3b7c0335..3e4cf85f 100644
--- a/components/wallet/cln.js
+++ b/components/wallet/cln.js
@@ -1,4 +1,3 @@
-import React from 'react'
 import { CLNAutowithdrawSchema } from '@/lib/validate'
 import { ensureB64 } from '@/lib/format'
 
@@ -29,12 +28,7 @@ export const fields = [
     label: 'cert',
     type: 'text',
     placeholder: 'LS0tLS1CRUdJTiBDRVJUSUZJQ0FURS0tLS0tCk1JSUNNVENDQWRpZ0F3SUJBZ0lRSHBFdFdrcGJwZHV4RVF2eVBPc3NWVEFLQmdncWhrak9QUVFEQWpBdk1SOHcKSFFZRFZRUUtFeFpzYm1RZ1lYVjBiMmRsYm1WeVlYUmxaQ0JqWlhKME1Rd3dDZ1lEVlFRREV3TmliMkl3SGhjTgpNalF3TVRBM01qQXhORE0wV2hjTk1qVXdNekF6TWpBeE5ETTBXakF2TVI4d0hRWURWUVFLRXhac2JtUWdZWFYwCmIyZGxibVZ5WVhSbFpDQmpaWEowTVF3d0NnWURWUVFERXdOaWIySXdXVEFUQmdjcWhrak9QUUlCQmdncWhrak8KUFFNQkJ3TkNBQVJUS3NMVk5oZnhqb1FLVDlkVVdDbzUzSmQwTnBuL1BtYi9LUE02M1JxbU52dFYvdFk4NjJJZwpSbE41cmNHRnBEajhUeFc2OVhIK0pTcHpjWDdlN3N0Um80SFZNSUhTTUE0R0ExVWREd0VCL3dRRUF3SUNwREFUCkJnTlZIU1VFRERBS0JnZ3JCZ0VGQlFjREFUQVBCZ05WSFJNQkFmOEVCVEFEQVFIL01CMEdBMVVkRGdRV0JCVDAKMnh3V25GeHRUNzI0MWxwZlNoNm9FWi9UMWpCN0JnTlZIUkVFZERCeWdnTmliMktDQ1d4dlkyRnNhRzl6ZElJRApZbTlpZ2d4d2IyeGhjaTF1TVMxaWIyS0NGR2h2YzNRdVpHOWphMlZ5TG1sdWRHVnlibUZzZ2dSMWJtbDRnZ3AxCmJtbDRjR0ZqYTJWMGdnZGlkV1pqYjI1dWh3Ui9BQUFCaHhBQUFBQUFBQUFBQUFBQUFBQUFBQUFCaHdTc0VnQUQKTUFvR0NDcUdTTTQ5QkFNQ0EwY0FNRVFDSUEwUTlkRXdoNXpPRnpwL3hYeHNpemh5SkxNVG5yazU1VWx1NHJPRwo4WW52QWlBVGt4U3p3Y3hZZnFscGx0UlNIbmd0NUJFcDBzcXlHL05nenBzb2pmMGNqQT09Ci0tLS0tRU5EIENFUlRJRklDQVRFLS0tLS0K',
-    optional: React.createElement(
-      React.Fragment,
-      {},
-      'optional if from ',
-      React.createElement('a', { href: 'https://en.wikipedia.org/wiki/Certificate_authority', target: '_blank', rel: 'noreferrer' }, 'CA'),
-      ' (e.g. voltage)'),
+    optional: 'optional if from [CA](https://en.wikipedia.org/wiki/Certificate_authority) (e.g. voltage)',
     hint: 'hex or base64 encoded',
     clear: true
   }
@@ -42,12 +36,7 @@ export const fields = [
 
 export const card = {
   title: 'CLN',
-  subtitle: React.createElement(
-    React.Fragment,
-    {},
-    'autowithdraw to your Core Lightning node via ',
-    React.createElement('a', { href: 'https://docs.corelightning.org/docs/rest', target: '_blank', rel: 'noreferrer' }, 'CLNRest')
-  ),
+  subtitle: 'autowithdraw to your Core Lightning node via [CLNRest](https://docs.corelightning.org/docs/rest)',
   badges: ['receive only', 'non-custodialish']
 }
 
diff --git a/components/wallet/lnbits.js b/components/wallet/lnbits.js
index a8b01295..d90faa4f 100644
--- a/components/wallet/lnbits.js
+++ b/components/wallet/lnbits.js
@@ -1,4 +1,3 @@
-import React from 'react'
 import { lnbitsSchema } from '@/lib/validate'
 
 export const name = 'lnbits'
@@ -18,12 +17,7 @@ export const fields = [
 
 export const card = {
   title: 'LNbits',
-  subtitle: React.createElement(
-    React.Fragment,
-    {},
-    'use ',
-    React.createElement('a', { href: 'https://lnbits.com/', target: '_blank', rel: 'noreferrer' }, 'LNbits'),
-    ' for payments'),
+  subtitle: 'use [LNbits](https://lnbits.com/) for payments',
   badges: ['send only', 'non-custodialish']
 }
 
diff --git a/components/wallet/lnd.js b/components/wallet/lnd.js
index 0e0e1731..05c0d86a 100644
--- a/components/wallet/lnd.js
+++ b/components/wallet/lnd.js
@@ -1,5 +1,3 @@
-import React from 'react'
-
 import { ensureB64 } from '@/lib/format'
 import { datePivot } from '@/lib/time'
 import { LNDAutowithdrawSchema } from '@/lib/validate'
@@ -32,13 +30,7 @@ export const fields = [
     label: 'cert',
     type: 'text',
     placeholder: 'LS0tLS1CRUdJTiBDRVJUSUZJQ0FURS0tLS0tCk1JSUNNVENDQWRpZ0F3SUJBZ0lRSHBFdFdrcGJwZHV4RVF2eVBPc3NWVEFLQmdncWhrak9QUVFEQWpBdk1SOHcKSFFZRFZRUUtFeFpzYm1RZ1lYVjBiMmRsYm1WeVlYUmxaQ0JqWlhKME1Rd3dDZ1lEVlFRREV3TmliMkl3SGhjTgpNalF3TVRBM01qQXhORE0wV2hjTk1qVXdNekF6TWpBeE5ETTBXakF2TVI4d0hRWURWUVFLRXhac2JtUWdZWFYwCmIyZGxibVZ5WVhSbFpDQmpaWEowTVF3d0NnWURWUVFERXdOaWIySXdXVEFUQmdjcWhrak9QUUlCQmdncWhrak8KUFFNQkJ3TkNBQVJUS3NMVk5oZnhqb1FLVDlkVVdDbzUzSmQwTnBuL1BtYi9LUE02M1JxbU52dFYvdFk4NjJJZwpSbE41cmNHRnBEajhUeFc2OVhIK0pTcHpjWDdlN3N0Um80SFZNSUhTTUE0R0ExVWREd0VCL3dRRUF3SUNwREFUCkJnTlZIU1VFRERBS0JnZ3JCZ0VGQlFjREFUQVBCZ05WSFJNQkFmOEVCVEFEQVFIL01CMEdBMVVkRGdRV0JCVDAKMnh3V25GeHRUNzI0MWxwZlNoNm9FWi9UMWpCN0JnTlZIUkVFZERCeWdnTmliMktDQ1d4dlkyRnNhRzl6ZElJRApZbTlpZ2d4d2IyeGhjaTF1TVMxaWIyS0NGR2h2YzNRdVpHOWphMlZ5TG1sdWRHVnlibUZzZ2dSMWJtbDRnZ3AxCmJtbDRjR0ZqYTJWMGdnZGlkV1pqYjI1dWh3Ui9BQUFCaHhBQUFBQUFBQUFBQUFBQUFBQUFBQUFCaHdTc0VnQUQKTUFvR0NDcUdTTTQ5QkFNQ0EwY0FNRVFDSUEwUTlkRXdoNXpPRnpwL3hYeHNpemh5SkxNVG5yazU1VWx1NHJPRwo4WW52QWlBVGt4U3p3Y3hZZnFscGx0UlNIbmd0NUJFcDBzcXlHL05nenBzb2pmMGNqQT09Ci0tLS0tRU5EIENFUlRJRklDQVRFLS0tLS0K',
-    // worker does not support JSX syntax
-    optional: React.createElement(
-      React.Fragment,
-      {},
-      'optional if from ',
-      React.createElement('a', { href: 'https://en.wikipedia.org/wiki/Certificate_authority', target: '_blank', rel: 'noreferrer' }, 'CA'),
-      ' (e.g. voltage)'),
+    optional: 'optional if from [CA](https://en.wikipedia.org/wiki/Certificate_authority) (e.g. voltage)',
     hint: 'hex or base64 encoded',
     clear: true
   }
diff --git a/pages/settings/wallets/[wallet].js b/pages/settings/wallets/[wallet].js
index 2f4fdc97..5cb2e1f0 100644
--- a/pages/settings/wallets/[wallet].js
+++ b/pages/settings/wallets/[wallet].js
@@ -36,7 +36,7 @@ export default function WalletSettings () {
   return (
     <CenterLayout>
       <h2 className='pb-2'>{wallet.card.title}</h2>
-      <h6 className='text-muted text-center pb-3'>{wallet.card.subtitle}</h6>
+      <h6 className='text-muted text-center pb-3'><Text>{wallet.card.subtitle}</Text></h6>
       {!wallet.server && <WalletSecurityBanner />}
       <Form
         initial={initial}
@@ -113,7 +113,7 @@ function WalletFields ({ wallet: { config, fields } }) {
           )}
           {optional && (
             <small className='text-muted ms-2'>
-              {typeof optional === 'boolean' ? 'optional' : optional}
+              {typeof optional === 'boolean' ? 'optional' : <Text>{optional}</Text>}
             </small>
           )}
         </div>