@rango-dev/ui 0.43.1-next.8 → 0.44.0

package/dist/widget/ui/src/components/Wallet/ClickableWallet.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ClickableWallet.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Wallet/ClickableWallet.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAGzD,OAAO,KAAmB,MAAM,OAAO,CAAC;AAkBxC,iBAAS,MAAM,CAAC,KAAK,EAAE,eAAe,qBAoDrC;AAED,eAAe,MAAM,CAAC"}
+{"version":3,"file":"ClickableWallet.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Wallet/ClickableWallet.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAGzD,OAAO,KAAK,MAAM,OAAO,CAAC;AAkB1B,iBAAS,MAAM,CAAC,KAAK,EAAE,eAAe,qBA2DrC;AAED,eAAe,MAAM,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/ui",
-  "version": "0.43.1-next.8",
+  "version": "0.44.0",
   "license": "MIT",
   "type": "module",
   "source": "./src/index.ts",
@@ -53,7 +53,7 @@
     "@radix-ui/react-select": "^2.0.0",
     "@radix-ui/react-switch": "^1.0.1",
     "@radix-ui/react-tooltip": "^1.0.2",
-    "@rango-dev/wallets-shared": "^0.41.1-next.7",
+    "@rango-dev/wallets-shared": "^0.42.0",
     "@stitches/react": "^1.2.8",
     "copy-to-clipboard": "^3.3.3",
     "rango-types": "^0.1.78",

package/src/components/Wallet/ClickableWallet.tsx

@@ -1,7 +1,7 @@
 import type { WalletPropTypes } from './Wallet.types.js';
 
 import { detectInstallLink } from '@rango-dev/wallets-shared';
-import React, { Fragment } from 'react';
+import React from 'react';
 
 import { Image } from '../common/index.js';
 import { Divider } from '../Divider/index.js';
@@ -35,41 +35,48 @@ function Wallet(props: WalletPropTypes) {
     );
   }
 
-  const WrapperComponent = disabled ? Fragment : Tooltip;
+  const wrapComponentWithTooltip = (children: React.ReactNode) => {
+    if (disabled) {
+      return <>{children}</>;
+    }
+    return (
+      <Tooltip
+        container={props.container}
+        content={info.tooltipText}
+        side="top">
+        {children}
+      </Tooltip>
+    );
+  };
 
-  return (
-    <WrapperComponent
-      container={props.container}
-      content={info.tooltipText}
-      side="top">
-      <WalletButton
-        disabled={props.state == WalletState.CONNECTING || disabled}
-        onClick={() => {
-          if (props.state === WalletState.NOT_INSTALLED) {
-            window.open(detectInstallLink(props.link), '_blank');
-          } else {
-            onClick(type);
-          }
-        }}>
-        <WalletImageContainer>
-          <Image src={image} size={35} />
-        </WalletImageContainer>
+  return wrapComponentWithTooltip(
+    <WalletButton
+      disabled={props.state == WalletState.CONNECTING || disabled}
+      onClick={() => {
+        if (props.state === WalletState.NOT_INSTALLED) {
+          window.open(detectInstallLink(props.link), '_blank');
+        } else {
+          onClick(type);
+        }
+      }}>
+      <WalletImageContainer>
+        <Image src={image} size={35} />
+      </WalletImageContainer>
 
-        <Text>
-          <Title variant="label" size="medium" noWrap={false}>
-            {title}
-          </Title>
+      <Text>
+        <Title variant="label" size="medium" noWrap={false}>
+          {title}
+        </Title>
 
-          <Typography
-            variant="body"
-            size="xsmall"
-            noWrap={false}
-            color={info.color}>
-            {info.description}
-          </Typography>
-        </Text>
-      </WalletButton>
-    </WrapperComponent>
+        <Typography
+          variant="body"
+          size="xsmall"
+          noWrap={false}
+          color={info.color}>
+          {info.description}
+        </Typography>
+      </Text>
+    </WalletButton>
   );
 }