@meshsdk/react 1.1.2 → 1.1.4

package/package.json

@@ -3,7 +3,7 @@
   "description": "React Hooks & Components you need for building dApps on Cardano.",
   "homepage": "https://meshjs.dev",
   "author": "MeshJS",
-  "version": "1.1.2",
+  "version": "1.1.4",
   "license": "Apache-2.0",
   "type": "module",
   "repository": {
@@ -61,7 +61,7 @@
     "vite": "3.1.4"
   },
   "peerDependencies": {
-    "@meshsdk/core": "1.2.1-beta.2",
+    "@meshsdk/core": "1.4.0",
     "react-dom": "17.x || 18.x",
     "react": "17.x || 18.x"
   },

package/src/components/CardanoWallet/CardanoWallet.tsx

@@ -1,5 +1,5 @@
 import tw, { styled } from 'twin.macro';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { useWallet, useWalletList } from '@mesh/hooks';
 import { MenuItem } from '../MenuItem';
 import { WalletBalance } from './WalletBalance';
@@ -22,13 +22,25 @@ const StyledMenuList = styled.div(({ hidden }: { hidden: boolean }) => [
   hidden && tw`hidden`,
 ]);
 
-export const CardanoWallet = () => {
+export const CardanoWallet = ({
+  label = 'Connect Wallet',
+  onConnected = undefined
+}: {
+  label?: string,
+  onConnected?: Function
+}) => {
   const wallets = useWalletList();
 
   const [hideMenuList, setHideMenuList] = useState(true);
 
   const { connect, connecting, connected, disconnect, name } = useWallet();
 
+  useEffect(() => {
+    if (connected && onConnected) {
+      onConnected();
+    }
+  }, [connected]);
+
   return (
     <div
       style={{ width: 'fit-content' }}
@@ -37,15 +49,20 @@ export const CardanoWallet = () => {
     >
       <StyledMenuButton
         type="button"
+        className="mr-wallet-button"
         onClick={() => setHideMenuList(!hideMenuList)}
       >
         <WalletBalance
           name={name}
           connected={connected}
           connecting={connecting}
+          label={label}
         />
       </StyledMenuButton>
-      <StyledMenuList hidden={hideMenuList}>
+      <StyledMenuList
+        hidden={hideMenuList}
+        className="mr-menu-list"
+      >
         {!connected && wallets.length > 0 ? (
           wallets.map((wallet, index) => (
             <MenuItem
@@ -59,18 +76,18 @@ export const CardanoWallet = () => {
               active={name === wallet.name}
             />
           ))
-          ) : wallets.length === 0 ? (
-            <span>No Wallet Found</span>
-          ) : (
-            <>
-              <MenuItem
-                active={false}
-                label="disconnect"
-                action={disconnect}
-                icon={undefined}
-              />
-            </>
-          )}
+        ) : wallets.length === 0 ? (
+          <span>No Wallet Found</span>
+        ) : (
+          <>
+            <MenuItem
+              active={false}
+              label="disconnect"
+              action={disconnect}
+              icon={undefined}
+            />
+          </>
+        )}
       </StyledMenuList>
     </div>
   );

package/src/components/CardanoWallet/WalletBalance.tsx

@@ -10,14 +10,14 @@ const StyledSmall = tw.span`
   text-xs
 `;
 
-export const WalletBalance = ({ connected, name, connecting }) => {
+export const WalletBalance = ({ connected, name, connecting, label }) => {
   const wallet = useWalletList().find((wallet) => wallet.name === name);
   const balance = useLovelace();
 
   return connected && balance && wallet?.icon ? (
     <>
-      <StyledIcon src={wallet.icon} />
-      ₳ {parseInt((parseInt(balance, 10) / 1_000_000).toString(), 10)}.
+      <StyledIcon src={wallet.icon} />₳{' '}
+      {parseInt((parseInt(balance, 10) / 1_000_000).toString(), 10)}.
       <StyledSmall>{balance.substr(balance.length - 6)}</StyledSmall>
     </>
   ) : connected && wallet?.icon ? (
@@ -28,7 +28,7 @@ export const WalletBalance = ({ connected, name, connecting }) => {
     <>Connecting...</>
   ) : (
     <>
-      Connect Wallet <ChevronDown />
+      {label} <ChevronDown />
     </>
   );
 };

package/src/components/MenuItem/MenuItem.tsx

@@ -24,7 +24,7 @@ const StyledActive = tw.span`
 export const MenuItem = ({ icon, label, action, active }) => (
   <StyledItem onClick={action}>
     {icon && <StyledIcon src={icon} />}
-    <StyledName>
+    <StyledName className='mr-menu-item'>
       {label
         .split(' ')
         .map((word: string) => {