@meshsdk/react 1.1.8 → 1.1.10-beta.1

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.8",
+  "version": "1.1.10-beta.1",
   "license": "Apache-2.0",
   "type": "module",
   "repository": {
@@ -62,7 +62,7 @@
     "vite": "3.1.4"
   },
   "peerDependencies": {
-    "@meshsdk/core": "1.5.7",
+    "@meshsdk/core": "1.5.11-beta.3",
     "react-dom": "17.x || 18.x",
     "react": "17.x || 18.x"
   },

package/src/components/CardanoWallet/CardanoWallet.tsx

@@ -3,6 +3,7 @@ import { useEffect, useState } from 'react';
 import { useWallet, useWalletList } from '@mesh/hooks';
 import { MenuItem } from '../MenuItem';
 import { WalletBalance } from './WalletBalance';
+// import { AppWallet } from '@meshsdk/core';
 
 const StyledMenuButton = tw.button`
   flex items-center justify-center
@@ -24,11 +25,15 @@ const StyledMenuList = styled.div(({ hidden }: { hidden: boolean }) => [
 
 export const CardanoWallet = ({
   label = 'Connect Wallet',
-  onConnected = undefined
+  onConnected = undefined,
+  isDark = false,
 }: {
-  label?: string,
-  onConnected?: Function
+  label?: string;
+  onConnected?: Function;
+  isDark?: boolean;
 }) => {
+  const [isDarkMode, setIsDarkMode] = useState(false);
+
   const wallets = useWalletList();
 
   const [hideMenuList, setHideMenuList] = useState(true);
@@ -41,6 +46,37 @@ export const CardanoWallet = ({
     }
   }, [connected]);
 
+  useEffect(() => {
+    setIsDarkMode(isDark);
+  }, [isDark]);
+
+  // async function connectLocalWallet() {
+  //   // check if local has wallet
+
+  //   // if yes, connect to it
+
+  //   // if no, create a new wallet
+  //   const mnemonic = AppWallet.brew();
+  //   console.log('mnemonic', mnemonic);
+
+  //   // have to create wallet without provider,
+  //   // so we can get wallet address,
+  //   // get keys with wallet info,
+  //   // add koios provider later
+
+  //   // const wallet = new AppWallet({
+  //   //   networkId: 0,
+  //   //   fetcher: blockchainProvider, // ?? keys? api to get keys, and use koios
+  //   //   submitter: blockchainProvider,
+  //   //   key: {
+  //   //     type: 'mnemonic',
+  //   //     words: mnemonic,
+  //   //   },
+  //   // });
+
+  //   // save `wallet` to `WalletContext`, so we can use it at `useWallet()`
+  // }
+
   return (
     <div
       style={{ width: 'fit-content' }}
@@ -50,6 +86,10 @@ export const CardanoWallet = ({
       <StyledMenuButton
         type="button"
         className="mr-wallet-button"
+        style={{
+          backgroundColor: isDarkMode ? '#1f1f1f' : '#fff',
+          color: isDarkMode ? '#fff' : '#000',
+        }}
         onClick={() => setHideMenuList(!hideMenuList)}
       >
         <WalletBalance
@@ -62,20 +102,39 @@ export const CardanoWallet = ({
       <StyledMenuList
         hidden={hideMenuList}
         className="mr-menu-list"
+        style={{
+          backgroundColor: isDarkMode ? '#1f1f1f' : '#fff',
+          color: isDarkMode ? '#fff' : '#000',
+        }}
       >
         {!connected && wallets.length > 0 ? (
-          wallets.map((wallet, index) => (
-            <MenuItem
-              key={index}
-              icon={wallet.icon}
-              label={wallet.name}
+          <>
+            {wallets.map((wallet, index) => (
+              <MenuItem
+                key={index}
+                icon={wallet.icon}
+                label={wallet.name}
+                action={() => {
+                  connect(wallet.name);
+                  setHideMenuList(!hideMenuList);
+                }}
+                active={name === wallet.name}
+              />
+            ))}
+            {/* <MenuItem
+              icon={
+                isDarkMode
+                  ? `https://meshjs.dev/logo-mesh/white/logo-mesh-white-128x128.png`
+                  : `https://meshjs.dev/logo-mesh/black/logo-mesh-black-128x128.png`
+              }
+              label={'Local'}
               action={() => {
-                connect(wallet.name);
+                connectLocalWallet();
                 setHideMenuList(!hideMenuList);
               }}
-              active={name === wallet.name}
-            />
-          ))
+              active={false}
+            /> */}
+          </>
         ) : wallets.length === 0 ? (
           <span>No Wallet Found</span>
         ) : (

package/src/contexts/WalletContext.tsx

@@ -8,6 +8,7 @@ interface WalletContext {
   connectingWallet: boolean,
   connectWallet?: (walletName: string) => Promise<void>,
   disconnect?: () => void,
+  // setWallet?: () => void,
   error?: unknown,
 }
 
@@ -48,6 +49,11 @@ export const useWalletStore = () => {
     setConnectedWalletInstance(INITIAL_STATE.walletInstance);
   }, []);
 
+  // const setWallet = useCallback((wallet: AppWallet) => {
+  //   setConnectedWalletName(INITIAL_STATE.walletName);
+  //   setConnectedWalletInstance(wallet);
+  // }, []);
+
   return {
     hasConnectedWallet: INITIAL_STATE.walletName !== connectedWalletName,
     connectedWalletInstance,
@@ -55,6 +61,7 @@ export const useWalletStore = () => {
     connectingWallet,
     connectWallet,
     disconnect,
+    // setWallet,
     error,
   };
 };

package/src/contexts/index.tsx

@@ -2,9 +2,12 @@ export { WalletContext } from './WalletContext';
 
 import { useWalletStore, WalletContext } from './WalletContext';
 
-export const MeshProvider = ({ children }) => {
-  const store = useWalletStore();
+interface Props {
+  children: React.ReactNode
+}
 
+export const MeshProvider: React.FC<Props> = ({children}): JSX.Element => {
+  const store = useWalletStore();
   return (
     <WalletContext.Provider value={store}>
       {children}