feat(ui): Add improved WormholeForm

Author: @cyphertrace

apps/ui/src/components/Layout/Layout.tsx

@@ -48,6 +48,9 @@ export const Layout = ({
                 </CustomHeaderLink>
                 {/* TODO: Enable when token is launched */}
                 {/* <CustomHeaderLink to={"/stake"}>Stake</CustomHeaderLink> */}
+                <CustomHeaderLink to={"/wormhole"}>
+                  {t("nav.wormhole")}
+                </CustomHeaderLink>
                 <CustomHeaderLink to={"/help"}>
                   {t("nav.help")}
                 </CustomHeaderLink>

apps/ui/src/components/TokenIcon.tsx

@@ -1,12 +1,13 @@
 import { EuiIcon } from "@elastic/eui";
 import type { TokenProject } from "@swim-io/token-projects";
 import { TOKEN_PROJECTS_BY_ID } from "@swim-io/token-projects";
+import type { WormholeToken } from "models";
 import type { ComponentProps, ReactElement } from "react";
 import { Fragment } from "react";
 import { Trans } from "react-i18next";
 
-import type { EcosystemId, TokenConfig } from "../config";
 import { ECOSYSTEMS } from "../config";
+import type { EcosystemId, TokenConfig } from "../config";
 import { useIntlListSeparators } from "../hooks";
 import type { Amount } from "../models/amount";
 
@@ -18,6 +19,29 @@ interface TokenIconProps
   readonly showFullName?: boolean;
 }
 
+type WormholeTokenIconProps = {
+  readonly token: WormholeToken;
+  readonly isSelected: boolean;
+};
+
+export const WormholeTokenIcon = ({
+  token,
+  isSelected,
+}: WormholeTokenIconProps): ReactElement => {
+  const { logo, symbol, displayName } = token;
+  return (
+    <div>
+      <WithIcon
+        type={logo}
+        size="m"
+        title={displayName}
+        style={{ marginRight: 5 }}
+      />
+      <span>{isSelected ? `${symbol}` : `${symbol} - ${displayName}`}</span>
+    </div>
+  );
+};
+
 type WithIconProps = ComponentProps<typeof EuiIcon>;
 const WithIcon = ({ children, ...rest }: WithIconProps) => {
   return (

apps/ui/src/components/TokenSearchModal.scss

@@ -1,6 +1,6 @@
 .tokenSearchModal {
   min-height: 50vh;
-  max-width: 430px;
+  max-width: 430px !important;
 }
 .modalBody {
   height: 30vh;