Add logos to new account screen

src/app/components/LinkButton/index.tsx

@@ -5,9 +5,10 @@ type Props = {
   to: string;
   title: string;
   description?: string;
+  logo?: string;
 };
 
-export default function LinkButton({ to, title, description }: Props) {
+export default function LinkButton({ to, title, description, logo }: Props) {
   return (
     <Link to={to} className="block">
       <div className="p-4 bg-white flex justify-between items-center shadow overflow-hidden border-b border-gray-200 rounded-lg hover:bg-gray-50 transition duration-200">
@@ -17,7 +18,16 @@ export default function LinkButton({ to, title, description }: Props) {
             <span className="text-sm text-gray-500">{description}</span>
           )}
         </div>
-        <CaretRightIcon className="h-5 w-5" />
+        <div>
+          <img
+            src={logo}
+            alt="logo"
+            width="75em"
+            height="75em"
+            className="inline rounded-lg mr-3"
+          />
+          <CaretRightIcon className="h-5 w-5 inline" />
+        </div>
       </div>
     </Link>
   );

src/app/screens/Onboard/ChooseConnector/index.tsx

@@ -7,27 +7,36 @@ import ConnectLndHub from "../ConnectLndHub";
 import ConnectLnbits from "../ConnectLnbits";
 import NewWallet from "../NewWallet";
 
+import lnbits from "/static/assets/icons/lnbits.png";
+import lndhub from "/static/assets/icons/lndhub.png";
+import lnd from "/static/assets/icons/lnd.png";
+import alby from "/static/assets/icons/alby.png";
+
 export default function ChooseConnector() {
   const connectors = [
     {
       to: "lnd",
       title: "LND",
       description: "Connect to your LND node",
+      logo: lnd,
     },
     {
       to: "lnd-hub",
       title: "LNDHub (Bluewallet)",
       description: "Connect to your Bluewallet mobile wallet",
+      logo: lndhub,
     },
     {
       to: "lnbits",
       title: "LNbits",
       description: "Connect to your LNbits account",
+      logo: lnbits,
     },
     {
       to: "create-wallet",
       title: "Create a new wallet",
       description: "We create and manage a lightning wallet for you",
+      logo: alby,
     },
   ];
 
@@ -47,12 +56,13 @@ export default function ChooseConnector() {
                 lightning payments!
               </p>
               <div className="space-y-4">
-                {connectors.map(({ to, title, description }) => (
+                {connectors.map(({ to, title, description, logo }) => (
                   <LinkButton
                     key={to}
                     to={to}
                     title={title}
                     description={description}
+                    logo={logo}
                   />
                 ))}
               </div>

src/custom.d.ts

@@ -2,3 +2,8 @@ declare module "*.svg" {
   const content: any;
   export default content;
 }
+
+declare module "*.png" {
+  const content: any;
+  export default content;
+}