UI/wormhole form

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 displaySymbol: boolean;
+};
+
+export const WormholeTokenIcon = ({
+  token,
+  displaySymbol,
+}: WormholeTokenIconProps): ReactElement => {
+  const { logo, symbol, displayName } = token;
+  return (
+    <div>
+      <WithIcon
+        type={logo || "questionInCircle"}
+        size="m"
+        title={displayName}
+        style={{ marginRight: 5 }}
+      />
+      <span>{displaySymbol ? `${symbol}` : `${symbol} - ${displayName}`}</span>
+    </div>
+  );
+};
+
 type WithIconProps = ComponentProps<typeof EuiIcon>;
 const WithIcon = ({ children, ...rest }: WithIconProps) => {
   return (