[draft] Mattupham/fe 785 portfolio recent withdrawals / deposits

packages/trpc/src/chains.ts

@@ -1,5 +1,9 @@
 import { getChain } from "@osmosis-labs/server";
-import { EthereumChainInfo } from "@osmosis-labs/utils";
+import {
+  BitcoinChainInfo,
+  EthereumChainInfo,
+  SolanaChainInfo,
+} from "@osmosis-labs/utils";
 import { z } from "zod";
 
 import { createTRPCRouter, publicProcedure } from "./api";
@@ -27,4 +31,76 @@ export const chainsRouter = createTRPCRouter({
     .query(({ input: { chainId } }) =>
       Object.values(EthereumChainInfo).find((chain) => chain.id === chainId)
     ),
+  getChainDisplayInfo: publicProcedure
+    .input(
+      z.object({
+        chainId: z.union([z.string(), z.number()]),
+      })
+    )
+    .query(
+      ({
+        input: { chainId },
+        ctx,
+      }):
+        | {
+            chainId: string | number;
+            prettyName: string;
+            relativeLogoUrl?: string;
+            color?: string;
+          }
+        | undefined => {
+        // cosmos chains
+        try {
+          const cosmosChain = getChain({
+            ...ctx,
+            chainNameOrId: String(chainId),
+          });
+
+          return {
+            chainId: cosmosChain.chain_id,
+            prettyName: cosmosChain.pretty_name,
+            relativeLogoUrl: cosmosChain?.logoURIs?.svg,
+            color: cosmosChain?.logoURIs?.theme?.background_color_hex,
+          };
+        } catch (error) {
+          // if cosmos chain is undefined, check evm chains
+          const evmChain = Object.values(EthereumChainInfo).find(
+            (chain) => chain.id === chainId
+          );
+
+          if (evmChain) {
+            return {
+              chainId: evmChain.id,
+              prettyName: evmChain.chainName,
+              relativeLogoUrl: evmChain.relativeLogoUrl,
+              color: evmChain.color,
+            };
+          }
+
+          const bitcoinChain =
+            BitcoinChainInfo.chainId === chainId ? BitcoinChainInfo : undefined;
+          if (bitcoinChain) {
+            return {
+              chainId: bitcoinChain.chainId,
+              prettyName: bitcoinChain.prettyName,
+              relativeLogoUrl: bitcoinChain.relativeLogoUrl,
+              color: bitcoinChain.color,
+            };
+          }
+
+          const solanaChain =
+            SolanaChainInfo.chainId === chainId ? SolanaChainInfo : undefined;
+          if (solanaChain) {
+            return {
+              chainId: solanaChain.chainId,
+              prettyName: solanaChain.prettyName,
+              relativeLogoUrl: solanaChain.relativeLogoUrl,
+              color: solanaChain.color,
+            };
+          }
+
+          throw new Error(`Chain with ID ${chainId} not found`);
+        }
+      }
+    ),
 });

packages/utils/src/bitcoin.ts

@@ -3,4 +3,5 @@ export const BitcoinChainInfo = {
   chainId: "bitcoin",
   chainName: "Bitcoin",
   color: "#F7931A",
+  relativeLogoUrl: "/networks/bitcoin.svg",
 };

packages/utils/src/solana.ts

@@ -3,4 +3,5 @@ export const SolanaChainInfo = {
   chainId: "solana",
   chainName: "Solana",
   color: "#9945FF",
+  relativeLogoUrl: "/networks/solana.svg",
 };

packages/web/components/assets/chain-logo.tsx

@@ -2,14 +2,28 @@ import classNames from "classnames";
 import { rgba } from "polished";
 import { FunctionComponent } from "react";
 
+import { FallbackImg } from "~/components/assets/fallback-img";
 interface ChainLogoProps {
   color: string | undefined;
   logoUri: string | undefined;
   prettyName?: string;
-  size?: "xs" | "sm" | "lg";
+  size?: "xs" | "sm" | "md" | "lg";
   className?: string;
 }
 
+const getImageClasses = (size: ChainLogoProps["size"]) => {
+  switch (size) {
+    case "xs":
+      return "h-3 w-3";
+    case "sm":
+      return "h-4 w-4";
+    case "md":
+      return "h-5 w-5";
+    default:
+      return "h-6 w-6";
+  }
+};
+
 export const ChainLogo: FunctionComponent<ChainLogoProps> = ({
   color,
   logoUri,
@@ -25,6 +39,7 @@ export const ChainLogo: FunctionComponent<ChainLogoProps> = ({
         {
           xs: "h-4 w-4 rounded-sm",
           sm: "h-6 w-6 rounded-md",
+          md: "h-8 w-8 rounded-lg",
           lg: "h-12 w-12 rounded-xl",
         }[size],
         className
@@ -34,13 +49,11 @@ export const ChainLogo: FunctionComponent<ChainLogoProps> = ({
       }}
     >
       {logoUri && (
-        <img
-          className={classNames(
-            "object-contain",
-            size === "xs" ? "h-3 w-3" : size === "sm" ? "h-4 w-4" : "h-8 w-8"
-          )}
+        <FallbackImg
+          className={classNames("object-contain", getImageClasses(size))}
           src={logoUri}
           alt={`${prettyName} logo`}
+          fallbacksrc="/icons/question-mark.svg"
         />
       )}
     </div>

packages/web/components/buttons/link-button.tsx

@@ -10,22 +10,24 @@ export function LinkButton({
   ariaLabel,
   href,
   className: optionalClassNames,
+  size = "default",
 }: {
   label: string;
-  icon: ReactElement;
+  icon?: ReactElement;
   ariaLabel: string;
   href: string;
   className?: string;
+  size?: "sm" | "md" | "default";
 }) {
   return (
-    <Button asChild variant="ghost">
+    <Button asChild variant="ghost" size={size}>
       <Link
         href={href}
         passHref
         aria-label={ariaLabel}
         className={`flex flex-row gap-2 ${optionalClassNames ?? ""}`}
       >
-        {icon}
+        {icon && icon}
         <p className="text-base font-subtitle1 leading-6 tracking-wide text-osmoverse-200">
           {label}
         </p>