Refactor wallet guide links into own component (#2621)

Author: ekzyis

wallets/client/components/form/index.js

@@ -8,12 +8,10 @@ import CancelButton from '@/components/cancel-button'
 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, walletGuideUrl, walletLud16Domain } from '@/wallets/lib/util'
-import { WalletLayout, WalletLayoutHeader, WalletLayoutImageOrName, WalletLogs } from '@/wallets/client/components'
+import { isTemplate, isWallet, protocolDisplayName, protocolFormId, protocolLogName, walletLud16Domain } from '@/wallets/lib/util'
+import { WalletGuide, WalletLayout, WalletLayoutHeader, WalletLayoutImageOrName, 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 InfoIcon from '@/svgs/information-fill.svg'
-import Link from 'next/link'
 import { useFormikContext } from 'formik'
 
 import { WalletMultiStepFormContextProvider, Step, useWallet, useWalletProtocols, useProtocol, useProtocolForm } from './hooks'
@@ -40,20 +38,13 @@ export function WalletMultiStepForm ({ wallet }) {
     ].filter(Boolean),
   [support])
 
-  const guideUrl = walletGuideUrl(wallet.name)
-
   return (
     <WalletLayout>
       <div className={styles.form}>
         <WalletLayoutHeader>
           <WalletLayoutImageOrName name={wallet.name} maxHeight='80px' />
         </WalletLayoutHeader>
-        {guideUrl && (
-          <Link href={guideUrl} className='text-center text-reset fw-bold text-underline' target='_blank' rel='noreferrer'>
-            <InfoIcon width={18} height={18} className='mx-1' />
-            guide
-          </Link>
-        )}
+        <WalletGuide 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,7 +1,8 @@
 import Layout from '@/components/layout'
 import { useWalletImage } from '@/wallets/client/hooks'
-import { walletDisplayName } from '@/wallets/lib/util'
+import { walletDisplayName, walletGuideUrl } from '@/wallets/lib/util'
 import Link from 'next/link'
+import InfoIcon from '@/svgs/information-fill.svg'
 
 export function WalletLayout ({ children }) {
   // TODO(wallet-v2): py-5 doesn't work, I think it gets overriden by the layout class
@@ -56,3 +57,15 @@ export function WalletLayoutImageOrName ({ name, maxHeight = '50px' }) {
     </div>
   )
 }
+
+export function WalletGuide ({ name }) {
+  const guideUrl = walletGuideUrl(name)
+  if (!guideUrl) return null
+
+  return (
+    <Link href={guideUrl} className='text-center text-reset fw-bold text-underline' target='_blank' rel='noreferrer'>
+      <InfoIcon width={18} height={18} className='mx-1' />
+      guide
+    </Link>
+  )
+}