Refactor keygen FE code

kinode/packages/homepage/pkg/ui/index.html

@@ -9,7 +9,7 @@
   <meta httpEquiv="X-UA-Compatible" content="IE=edge" />
   <meta name="viewport"
     content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1.00001, viewport-fit=cover" />
-  <script type="module" crossorigin src="/assets/index-DBttdE6k.js"></script>
+  <script type="module" crossorigin src="/assets/index-Gt0JAj27.js"></script>
   <link rel="stylesheet" crossorigin href="/assets/index-BS5LP50I.css">
 </head>
 

kinode/packages/homepage/ui/dist/index.html

@@ -9,7 +9,7 @@
   <meta httpEquiv="X-UA-Compatible" content="IE=edge" />
   <meta name="viewport"
     content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1.00001, viewport-fit=cover" />
-  <script type="module" crossorigin src="/assets/index-DBttdE6k.js"></script>
+  <script type="module" crossorigin src="/assets/index-Gt0JAj27.js"></script>
   <link rel="stylesheet" crossorigin href="/assets/index-BS5LP50I.css">
 </head>
 

kinode/packages/homepage/ui/src/components/AppDisplay.tsx

@@ -1,6 +1,6 @@
 import classNames from "classnames"
 import { HomepageApp } from "../store/homepageStore"
-import { FaHeart, FaRegHeart } from "react-icons/fa6"
+import { FaHeart, FaRegHeart, } from "react-icons/fa6"
 import { useState } from "react"
 import usePersistentStore from "../store/persistentStore"
 import { isMobileCheck } from "../utils/dimensions"
@@ -11,7 +11,7 @@ interface AppDisplayProps {
 }
 
 const AppDisplay: React.FC<AppDisplayProps> = ({ app }) => {
-  const { favoriteApp } = usePersistentStore();
+  const { favoriteApp, favoriteApps } = usePersistentStore();
   const [isHovered, setIsHovered] = useState(false)
   const isMobile = isMobileCheck()
 
@@ -46,7 +46,7 @@ const AppDisplay: React.FC<AppDisplayProps> = ({ app }) => {
         favoriteApp(app.package_name)
       }}
     >
-      {app.is_favorite ? <FaHeart /> : <FaRegHeart />}
+      {favoriteApps[app.package_name]?.favorite ? <FaHeart /> : <FaRegHeart />}
     </button>}
   </a>
 }

kinode/packages/homepage/ui/src/components/AppsDock.tsx

@@ -13,8 +13,9 @@ const AppsDock: React.FC = () => {
 
   useEffect(() => {
     let final: HomepageApp[] = []
-    const dockedApps = Object.keys(favoriteApps)
-      .map(name => ({ ...apps.find(a => a.package_name === name), order: favoriteApps[name].order }))
+    const dockedApps = Object.entries(favoriteApps)
+      .filter(([_, { favorite }]) => favorite)
+      .map(([name, { order }]) => ({ ...apps.find(a => a.package_name === name), order }))
       .filter(a => a) as HomepageApp[]
     const orderedApps = dockedApps.filter(a => a.order !== undefined && a.order !== null)
     const unorderedApps = dockedApps.filter(a => a.order === undefined || a.order === null)
@@ -85,12 +86,15 @@ const AppsDock: React.FC = () => {
           ref={provided.innerRef}
           {...provided.droppableProps}
           className={classNames('flex-center flex-wrap border border-orange bg-orange/25 p-2 rounded !rounded-xl', {
-            'gap-8 mb-4': !isMobile,
+            'gap-8': !isMobile && dockedApps.length > 0,
+            'gap-4': !isMobile && dockedApps.length === 0,
+            'mb-4': !isMobile,
             'gap-4 mb-2': isMobile,
+            'flex-col': dockedApps.length === 0
           })}
         >
           {dockedApps.length === 0
-            ? <div>Favorite an app to pin it to your dock.</div>
+            ? <AppDisplay app={apps.find(app => app.package_name === 'app_store')!} />
             : dockedApps.map(app => <Draggable
               key={app.package_name}
               draggableId={app.package_name}
@@ -107,6 +111,7 @@ const AppsDock: React.FC = () => {
               )}
             </Draggable>)}
           {provided.placeholder}
+          {dockedApps.length === 0 && <div>Favorite an app to pin it to your dock.</div>}
         </div>
       )}
     </Droppable>

kinode/packages/homepage/ui/src/store/homepageStore.ts

@@ -6,7 +6,6 @@ export interface HomepageApp {
   path: string
   label: string,
   base64_icon?: string,
-  is_favorite: boolean,
   state?: {
     our_version: string
   }

kinode/src/register-ui/build/index.html

@@ -11,7 +11,7 @@
   <meta httpEquiv="X-UA-Compatible" content="IE=edge" />
   <meta name="viewport"
     content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1.00001, viewport-fit=cover" />
-  <script type="module" crossorigin src="/assets/index-DexQTHZb.js"></script>
+  <script type="module" crossorigin src="/assets/index-iKMNbHhl.js"></script>
   <link rel="stylesheet" crossorigin href="/assets/index-B00cPdAQ.css">
 </head>
 

kinode/src/register-ui/src/pages/Login.tsx

@@ -1,18 +1,18 @@
 import { FormEvent, useCallback, useEffect, useState } from "react";
 import { namehash } from "ethers/lib/utils";
-import { BytesLike, utils } from "ethers";
+import { utils } from "ethers";
 import KinodeHeader from "../components/KnsHeader";
-import { NetworkingInfo, PageProps, UnencryptedIdentity } from "../lib/types";
+import { PageProps, UnencryptedIdentity } from "../lib/types";
 import Loader from "../components/Loader";
 import { hooks } from "../connectors/metamask";
-import { ipToNumber } from "../utils/ipToNumber";
 import { downloadKeyfile } from "../utils/download-keyfile";
 import DirectCheckbox from "../components/DirectCheckbox";
 import { useNavigate } from "react-router-dom";
 import { Tooltip } from "../components/Tooltip";
 import { KinodeTitle } from "../components/KinodeTitle";
 import { isMobileCheck } from "../utils/dimensions";
 import classNames from "classnames";
+import { generateNetworkingKeys, getNetworkName } from "../utils/chain";
 
 const { useProvider } = hooks;
 
@@ -28,6 +28,10 @@ function Login({
   appSizeOnLoad,
   closeConnect,
   routers,
+  setNetworkingKey,
+  setIpAddress,
+  setWsPort,
+  setTcpPort,
   setRouters,
   knsName,
   setOsName,
@@ -88,51 +92,18 @@ function Login({
           }
 
           // Generate keys on server that are stored temporarily
-          const {
-            networking_key,
-            routing: {
-              Both: {
-                ip: ip_address,
-                ports: {
-                  ws: ws_port,
-                  tcp: tcp_port
-                },
-                routers: allowed_routers
-              }
-            },
-          } = (await fetch("/generate-networking-info", {
-            method: "POST",
-          }).then((res) => res.json())) as NetworkingInfo;
-
-          setLoading("Please confirm the transaction in your wallet");
-
-          const ipAddress = ipToNumber(ip_address);
-
-          const data: BytesLike[] = [
-            direct
-              ? (
-                await kns.populateTransaction.setAllIp(
-                  namehash(knsName),
-                  ipAddress,
-                  ws_port || 0,  // ws
-                  0,             // wt
-                  tcp_port || 0, // tcp
-                  0              // udp
-                )
-              ).data!
-              : (
-                await kns.populateTransaction.setRouters(
-                  namehash(knsName),
-                  allowed_routers.map((x) => namehash(x))
-                )
-              ).data!,
-            (
-              await kns.populateTransaction.setKey(
-                namehash(knsName),
-                networking_key
-              )
-            ).data!,
-          ];
+          const data = await generateNetworkingKeys({
+            direct,
+            kns,
+            nodeChainId,
+            chainName: getNetworkName(nodeChainId),
+            nameToSet: namehash(knsName),
+            setNetworkingKey,
+            setIpAddress,
+            setWsPort,
+            setTcpPort,
+            setRouters,
+          })
 
           setLoading("Please confirm the transaction");
 

kinode/src/register-ui/src/pages/RegisterEthName.tsx

@@ -2,13 +2,12 @@ import { useState, useEffect, FormEvent, useCallback } from "react";
 import { hooks } from "../connectors/metamask";
 import { useNavigate } from "react-router-dom";
 import { toDNSWireFormat } from "../utils/dnsWire";
-import { BytesLike, utils } from "ethers";
+import { utils } from "ethers";
 import EnterEthName from "../components/EnterEthName";
 import Loader from "../components/Loader";
 import KinodeHeader from "../components/KnsHeader";
-import { NetworkingInfo, PageProps } from "../lib/types";
-import { ipToNumber } from "../utils/ipToNumber";
-import { getNetworkName, setChain } from "../utils/chain";
+import { PageProps } from "../lib/types";
+import { generateNetworkingKeys, getNetworkName, setChain } from "../utils/chain";
 import { hash } from "@ensdomains/eth-ens-namehash";
 import DirectCheckbox from "../components/DirectCheckbox";
 import { MAINNET_OPT_HEX, OPTIMISM_OPT_HEX } from "../constants/chainId";
@@ -69,83 +68,36 @@ function RegisterEthName({
 
       if (!provider) return openConnect();
 
+      setLoading("Please confirm the transaction in your wallet");
       try {
-        setLoading("Please confirm the transaction in your wallet");
-
-        const {
-          networking_key,
-          routing: {
-            Both: {
-              ip: ip_address,
-              ports: {
-                ws: ws_port,
-                tcp: tcp_port
-              },
-              routers: allowed_routers
-            }
-          }
-        } = (await fetch("/generate-networking-info", { method: "POST" }).then(
-          (res) => res.json()
-        )) as NetworkingInfo;
-
-        const ipAddress = ipToNumber(ip_address);
-
-        setNetworkingKey(networking_key);
-        setIpAddress(ipAddress);
-        setWsPort(ws_port || 0);
-        setTcpPort(tcp_port || 0);
-        setRouters(allowed_routers);
-
         const cleanedName = name.trim().replace(".eth", "");
-
+        const nameToSet = utils.namehash(`${cleanedName}.eth`);
         const targetChainId = nodeChainId === OPTIMISM_OPT_HEX ? MAINNET_OPT_HEX : nodeChainId;
 
-        try {
-          await setChain(targetChainId);
-        } catch (error) {
-          window.alert(
-            `You must connect to the ${getNetworkName(targetChainId)} network to continue. Please connect and try again.`
-          );
-          throw new Error(`${getNetworkName(targetChainId)} not connected`);
-        }
-
-        const data: BytesLike[] = [
-          direct
-            ? (
-              await kns.populateTransaction.setAllIp(
-                utils.namehash(`${cleanedName}.eth`),
-                ipAddress,
-                ws_port || 0,  // ws
-                0,             // wt
-                tcp_port || 0, // tcp
-                0              // udp
-              )
-            ).data!
-            : (
-              await kns.populateTransaction.setRouters(
-                utils.namehash(`${cleanedName}.eth`),
-                allowed_routers.map((x) => utils.namehash(x))
-              )
-            ).data!,
-          (
-            await kns.populateTransaction.setKey(
-              utils.namehash(`${cleanedName}.eth`),
-              networking_key
-            )
-          ).data!,
-        ];
+        const data = await generateNetworkingKeys({
+          direct,
+          kns,
+          nodeChainId: targetChainId,
+          chainName,
+          nameToSet,
+          setNetworkingKey,
+          setIpAddress,
+          setWsPort,
+          setTcpPort,
+          setRouters,
+        });
 
         setLoading("Please confirm the transaction in your wallet");
 
         // console.log("node chain id", nodeChainId);
 
         const dnsFormat = toDNSWireFormat(`${cleanedName}.eth`);
-        const namehash = hash(`${cleanedName}.eth`);
+        const hashedName = hash(`${cleanedName}.eth`);
 
         const tx = await knsEnsEntry.setKNSRecords(dnsFormat, data, { gasLimit: 300000 });
 
         const onRegistered = (node: any, _name: any) => {
-          if (node === namehash) {
+          if (node === hashedName) {
             kns.off("NodeRegistered", onRegistered);
             setLoading("");
             setOsName(`${cleanedName}.eth`);