Fix/noble components improve v2

package.json

@@ -17,12 +17,11 @@
     "mitosis:react": "rm -rf packages/react/src && node ./compiler/frameworks/react.compile.js",
     "mitosis:vue": "rm -rf packages/vue/src && node ./compiler/frameworks/vue.compile.js",
     "c:react": "node ./compiler -p react",
-    "b:react": "lerna run --stream --scope=@interchain-ui/react build",
+    "b:react": "pnpm run --stream --filter '@interchain-ui/react' build",
     "c:vue": "pnpm run mitosis:vue && pnpm run b:vue",
-    "b:vue": "lerna run --stream --scope=@interchain-ui/vue build",
+    "b:vue": "pnpm run --stream --filter '@interchain-ui/vue' build",
     "dev": "node ./compiler/dev",
-    "start": "cross-env NODE_OPTIONS=--openssl-legacy-provider start-storybook -p 6006 --no-manager-cache",
-    "story:react": "lerna run --scope @interchain-ui/react-example --stream dev",
+    "story:react": "pnpm run --stream --filter '@interchain-ui/react' storybook",
     "lerna": "lerna run",
     "pub:beta": "lerna publish --no-private --preid beta",
     "prepublishOnly": "pnpm run clear:cache && pnpm run c:react",

packages/react/scaffolds/popover/popover.types.ts

@@ -24,6 +24,6 @@ export type UseInteractionsValue = ReturnType<typeof useInteractions>;
 export type UseFloatingValue = ReturnType<typeof useFloating>;
 
 export type UsePopoverReturnValue = PopoverOptions & {
-  arrowRef: React.RefObject<SVGSVGElement>;
+  arrowRef?: React.RefObject<SVGSVGElement>;
 } & UseFloatingValue &
   UseInteractionsValue;

packages/react/stories/noble/NobleBaseComponents.stories.tsx

@@ -167,6 +167,14 @@ export const Primary: Story = {
               subLogoUrl={OSMO_LOGO_URL}
               subLogoAlt="USDC"
             />
+
+            <NobleTokenAvatar
+              isLoadingSubLogo
+              mainLogoUrl={USDC_LOGO_URL}
+              mainLogoAlt="USDC"
+              subLogoUrl={OSMO_LOGO_URL}
+              subLogoAlt="USDC"
+            />
           </Box>
 
           <Box display="flex" gap="$4" flexDirection="column" maxWidth="466px">

src/ui/noble/noble-token-avatar.lite.tsx

@@ -4,6 +4,7 @@ import {
   useRef,
   onMount,
   onUnMount,
+  Show,
   useDefaultProps,
 } from "@builder.io/mitosis";
 
@@ -60,23 +61,41 @@ export default function NobleTokenAvatar(props: NobleTokenAvatarProps) {
         }}
       />
 
-      <Box
-        as="img"
-        width="$9"
-        height="$9"
-        position="absolute"
-        bottom="-4px"
-        right="-2px"
-        borderRadius="$full"
-        borderWidth="2px"
-        borderStyle="solid"
-        borderColor="$cardBg"
-        bg="$cardBg"
-        attributes={{
-          src: props.subLogoUrl,
-          alt: props.subLogoAlt ?? "Token logo",
-        }}
-      />
+      <Show
+        when={props.isLoadingSubLogo}
+        else={
+          <Box
+            as="img"
+            width="$9"
+            height="$9"
+            position="absolute"
+            bottom="-4px"
+            right="-2px"
+            borderRadius="$full"
+            borderWidth="2px"
+            borderStyle="solid"
+            borderColor="$cardBg"
+            bg="$cardBg"
+            attributes={{
+              src: props.subLogoUrl,
+              alt: props.subLogoAlt ?? "Token logo",
+            }}
+          />
+        }
+      >
+        <Box
+          width="$9"
+          height="$9"
+          position="absolute"
+          bottom="-4px"
+          right="-2px"
+          borderRadius="$full"
+          borderWidth="2px"
+          borderStyle="solid"
+          borderColor="$cardBg"
+          bg={state.theme === "light" ? "$gray800" : "$blue500"}
+        />
+      </Show>
     </Box>
   );
 }

src/ui/noble/noble.types.tsx

@@ -56,6 +56,7 @@ export interface NobleTokenAvatarProps {
   subLogoUrl: string;
   subLogoAlt?: string;
   isRound?: boolean;
+  isLoadingSubLogo?: boolean;
 }
 
 type DisplayToken = {