@meshsdk/react 1.1.12 → 1.6.0-alpha.11

package/.eslintrc.js

@@ -0,0 +1,3 @@
+module.exports = {
+  extends: ["@meshsdk/eslint-config/react.js"],
+};

package/README.md

@@ -1,5 +1,5 @@
-![Mesh Logo](https://meshjs.dev/logo-mesh/mesh.png)
+# mesh-react
 
-Mesh is an open-source library to make building dApps accessible. Whether you're a beginner developer, startup, web3 market leader, or a large enterprise, Mesh makes web3 development easy with reliable, scalable, and well-engineered APIs & developer tools.
+React component library - [meshjs.dev/react](https://meshjs.dev/react)
 
-Explore the features on [Mesh Playground](https://meshjs.dev/).
+[meshjs.dev](https://meshjs.dev/)

package/package.json

@@ -1,72 +1,36 @@
 {
   "name": "@meshsdk/react",
-  "description": "React Hooks & Components you need for building dApps on Cardano.",
-  "homepage": "https://meshjs.dev",
-  "author": "MeshJS",
-  "version": "1.1.12",
-  "license": "Apache-2.0",
-  "type": "module",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/MeshJS/mesh.git"
-  },
-  "bugs": {
-    "url": "https://github.com/MeshJS/mesh/issues"
-  },
-  "keywords": [
-    "blockchain",
-    "cardano",
-    "react"
+  "version": "1.6.0-alpha.11",
+  "sideEffects": [
+    "**/*.css"
   ],
-  "main": "dist/react.cjs",
-  "module": "dist/react.js",
-  "typings": "dist/index.d.ts",
-  "scripts": {
-    "build": "vite build",
-    "dev": "start-storybook -p 6006"
-  },
   "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/react.js",
-      "require": "./dist/react.cjs"
-    }
-  },
-  "babelMacros": {
-    "twin": {
-      "config": "./tailwind.config.cjs",
-      "preset": "styled-components"
-    }
+    "./styles.css": "./dist/index.css",
+    ".": "./src/index.ts"
   },
-  "devDependencies": {
-    "@babel/core": "7.19.6",
-    "@rollup/plugin-babel": "6.0.2",
-    "@rollup/plugin-typescript": "9.0.2",
-    "@storybook/addon-actions": "6.5.13",
-    "@storybook/addon-essentials": "6.5.13",
-    "@storybook/addon-interactions": "6.5.13",
-    "@storybook/addon-links": "6.5.13",
-    "@storybook/builder-vite": "0.2.5",
-    "@storybook/react": "6.5.13",
-    "@storybook/testing-library": "0.0.13",
-    "@types/styled-components": "5.1.26",
-    "@vitejs/plugin-react": "2.2.0",
-    "autoprefixer": "10.4.12",
-    "babel-loader": "8.2.5",
-    "babel-plugin-macros": "3.1.0",
-    "babel-plugin-styled-components": "2.0.7",
-    "postcss": "8.4.18",
-    "rollup": "3.2.3",
-    "tailwindcss": "3.2.1",
-    "twin.macro": "3.0.0-rc.5",
-    "vite": "3.1.4"
+  "license": "MIT",
+  "scripts": {
+    "build:mesh": "tailwindcss -i ./src/styles.css -o ./dist/index.css",
+    "lint": "eslint",
+    "dev": "tailwindcss -i ./src/styles.css -o ./dist/index.css --watch",
+    "type-check": "tsc --noEmit",
+    "clean": "rm -rf .turbo && rm -rf dist && rm -rf node_modules",
+    "format": "prettier --check . --ignore-path ../../.gitignore"
   },
   "peerDependencies": {
-    "@meshsdk/core": "^1.0.0",
-    "react-dom": "17.x || 18.x",
-    "react": "17.x || 18.x"
+    "react": "^18.2.0",
+    "@meshsdk/transaction": "*"
+  },
+  "devDependencies": {
+    "@meshsdk/eslint-config": "*",
+    "@meshsdk/tailwind-config": "*",
+    "@meshsdk/typescript-config": "*",
+    "@types/react": "^18.2.61",
+    "autoprefixer": "^10.4.18",
+    "postcss": "^8.4.35",
+    "react": "^18.2.0",
+    "tailwindcss": "^3.4.1",
+    "typescript": "latest"
   },
-  "dependencies": {
-    "styled-components": "5.3.6"
-  }
-}
+  "prettier": "@meshsdk/prettier-config"
+}

package/postcss.config.js

@@ -1,6 +1,9 @@
-export default {
+// If you want to use other PostCSS plugins, see the following:
+// https://tailwindcss.com/docs/using-with-preprocessors
+
+module.exports = {
   plugins: {
     tailwindcss: {},
     autoprefixer: {},
   },
-}
+};

package/src/{components/MenuItem/CheckMark.tsx → cardano-wallet/checkmark.tsx}

@@ -1,13 +1,10 @@
-import tw from 'twin.macro';
-
-const StyledCheckMark = tw.svg`h-6 m-2`;
-
 export const CheckMark = () => (
-  <StyledCheckMark
+  <svg
+    className="ui-m-2 ui-h-6"
     fill="currentColor"
     viewBox="0 0 512 512"
     xmlns="http://www.w3.org/2000/svg"
   >
     <path d="M470.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 338.7 425.4 105.4c12.5-12.5 32.8-12.5 45.3 0z" />
-  </StyledCheckMark>
+  </svg>
 );

package/src/{components/ChevronDown/ChevronDown.tsx → cardano-wallet/chevron-down.tsx}

@@ -1,9 +1,6 @@
-import tw from 'twin.macro';
-
-const StyledChevronDown = tw.svg`h-6 m-2`;
-
 export const ChevronDown = () => (
-  <StyledChevronDown
+  <svg
+    className="ui-m-2 ui-h-6"
     fill="none"
     aria-hidden="true"
     viewBox="0 0 24 24"
@@ -16,5 +13,5 @@ export const ChevronDown = () => (
       strokeWidth="2"
       d="M19 9l-7 7-7-7"
     />
-  </StyledChevronDown>
+  </svg>
 );

package/src/cardano-wallet/index.tsx

@@ -0,0 +1,106 @@
+import { useEffect, useState } from "react";
+
+import { Wallet } from "@meshsdk/common";
+import { BrowserWallet } from "@meshsdk/core";
+
+import Button from "../common/button";
+import { useWallet } from "../hooks";
+import { MenuItem } from "./menu-item";
+import { WalletBalance } from "./wallet-balance";
+
+interface ButtonProps {
+  label?: string;
+  onConnected?: Function;
+  isDark?: boolean;
+}
+
+export const CardanoWallet = ({
+  label = "Connect Wallet",
+  onConnected = undefined,
+  isDark = false,
+}: ButtonProps) => {
+  const [isDarkMode, setIsDarkMode] = useState(false);
+  const [hideMenuList, setHideMenuList] = useState(true);
+  const [wallets, setWallets] = useState<Wallet[]>([]);
+
+  const { connect, connecting, connected, disconnect, name } = useWallet();
+
+  useEffect(() => {
+    if (connected && onConnected) {
+      onConnected();
+    }
+  }, [connected]);
+
+  useEffect(() => {
+    setWallets(BrowserWallet.getInstalledWallets());
+  }, []);
+
+  useEffect(() => {
+    setIsDarkMode(isDark);
+  }, [isDark]);
+
+  return (
+    <div
+      className="w-fit"
+      onMouseEnter={() => setHideMenuList(false)}
+      onMouseLeave={() => setHideMenuList(true)}
+    >
+      <Button
+        isDarkMode={isDarkMode}
+        hideMenuList={hideMenuList}
+        setHideMenuList={setHideMenuList}
+      >
+        <WalletBalance
+          connected={connected}
+          connecting={connecting}
+          label={label}
+          wallet={wallets.find((wallet) => wallet.name === name)}
+        />
+      </Button>
+      <div
+        className={`ui-mr-menu-list ui-absolute ui-w-60 ui-rounded-b-md ui-border ui-text-center ui-shadow-sm ui-backdrop-blur ${hideMenuList && "ui-hidden"} ${isDarkMode ? `ui-bg-neutral-950	ui-text-neutral-50` : `ui-bg-neutral-50	ui-text-neutral-950`}`}
+      >
+        {!connected && wallets.length > 0 ? (
+          <>
+            {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={() => {
+                connectLocalWallet();
+                setHideMenuList(!hideMenuList);
+              }}
+              active={false}
+            /> */}
+          </>
+        ) : wallets.length === 0 ? (
+          <span>No Wallet Found</span>
+        ) : (
+          <>
+            <MenuItem
+              active={false}
+              label="disconnect"
+              action={disconnect}
+              icon={undefined}
+            />
+          </>
+        )}
+      </div>
+    </div>
+  );
+};

package/src/cardano-wallet/menu-item.tsx

@@ -0,0 +1,28 @@
+export function MenuItem({
+  icon,
+  label,
+  action,
+  active,
+}: {
+  icon?: string;
+  label: string;
+  action: () => void;
+  active: boolean;
+}) {
+  return (
+    <div
+      className="ui-flex ui-cursor-pointer ui-items-center ui-px-4 ui-py-2 ui-opacity-80 hover:ui-opacity-100 ui-h-16"
+      onClick={action}
+    >
+      {icon && <img className="ui-pr-2 m-1 h-8" src={icon} />}
+      <span className="ui-mr-menu-item ui-text-xl ui-font-normal">
+        {label
+          .split(" ")
+          .map((word: string) => {
+            return word.charAt(0).toUpperCase() + word.slice(1).toLowerCase();
+          })
+          .join(" ")}
+      </span>
+    </div>
+  );
+}

package/src/cardano-wallet/wallet-balance.tsx

@@ -0,0 +1,36 @@
+import { Wallet } from "@meshsdk/common";
+import { useLovelace } from "@meshsdk/react";
+
+import { ChevronDown } from "./chevron-down";
+
+export const WalletBalance = ({
+  connected,
+  connecting,
+  label,
+  wallet,
+}: {
+  connected: boolean;
+  connecting: boolean;
+  label: string;
+  wallet: Wallet | undefined;
+}) => {
+  const lovelace = useLovelace();
+
+  return connected && lovelace && wallet?.icon ? (
+    <>
+      <img className="ui-m-2 ui-h-6" src={wallet.icon} />₳{" "}
+      {parseInt((parseInt(lovelace, 10) / 1_000_000).toString(), 10)}.
+      <span className="text-xs">{lovelace.substring(lovelace.length - 6)}</span>
+    </>
+  ) : connected && wallet?.icon ? (
+    <>
+      <img className="ui-m-2 ui-h-6" src={wallet.icon} />
+    </>
+  ) : connecting ? (
+    <>Connecting...</>
+  ) : (
+    <>
+      {label} <ChevronDown />
+    </>
+  );
+};

package/src/common/button.tsx

@@ -0,0 +1,22 @@
+import React from "react";
+
+export default function Button({
+  children,
+  isDarkMode = false,
+  hideMenuList = false,
+  setHideMenuList,
+}: {
+  children: React.ReactNode;
+  isDarkMode?: boolean;
+  hideMenuList?: boolean;
+  setHideMenuList?: (hideMenuList: boolean) => void;
+}) {
+  return (
+    <button
+      className={`ui-mr-menu-list ui-flex ui-w-60 ui-items-center ui-justify-center ui-rounded-t-md ui-border ui-px-4 ui-py-2 ui-text-lg ui-font-normal ui-shadow-sm ${isDarkMode ? `ui-bg-neutral-950	ui-text-neutral-50` : `ui-bg-neutral-50	ui-text-neutral-950`}`}
+      onClick={() => setHideMenuList && setHideMenuList(!hideMenuList)}
+    >
+      {children}
+    </button>
+  );
+}

package/src/contexts/{WalletContext.tsx → WalletContext.ts}

@@ -1,32 +1,34 @@
-import { createContext, useCallback, useState } from 'react';
-import { BrowserWallet } from '@meshsdk/core';
+import { createContext, useCallback, useState } from "react";
+
+import { BrowserWallet } from "@meshsdk/wallet";
 
 interface WalletContext {
-  hasConnectedWallet: boolean,
-  connectedWalletInstance: BrowserWallet,
-  connectedWalletName: string,
-  connectingWallet: boolean,
-  connectWallet?: (walletName: string) => Promise<void>,
-  disconnect?: () => void,
+  hasConnectedWallet: boolean;
+  connectedWalletInstance: BrowserWallet;
+  connectedWalletName: string;
+  connectingWallet: boolean;
+  connectWallet?: (walletName: string) => Promise<void>;
+  disconnect?: () => void;
   // setWallet?: () => void,
-  error?: unknown,
+  error?: unknown;
 }
 
 const INITIAL_STATE = {
-  walletName: '', walletInstance: {} as BrowserWallet,
+  walletName: "",
+  walletInstance: {} as BrowserWallet,
 };
 
 export const useWalletStore = () => {
   const [error, setError] = useState<unknown>(undefined);
 
-  const [connectingWallet, setConnectingWallet] =
-    useState<boolean>(false);
+  const [connectingWallet, setConnectingWallet] = useState<boolean>(false);
 
   const [connectedWalletInstance, setConnectedWalletInstance] =
     useState<BrowserWallet>(INITIAL_STATE.walletInstance);
 
-  const [connectedWalletName, setConnectedWalletName] =
-    useState<string>(INITIAL_STATE.walletName);
+  const [connectedWalletName, setConnectedWalletName] = useState<string>(
+    INITIAL_STATE.walletName,
+  );
 
   const connectWallet = useCallback(async (walletName: string) => {
     setConnectingWallet(true);

package/src/contexts/index.tsx

@@ -1,15 +1,12 @@
-export { WalletContext } from './WalletContext';
+import { useWalletStore, WalletContext } from "./WalletContext";
 
-import { useWalletStore, WalletContext } from './WalletContext';
+export { WalletContext } from "./WalletContext";
 
 interface Props {
   children: React.ReactNode;
 }
 
-export const MeshProvider: React.FC<Props> = (
-  props: any,
-  deprecatedLegacyContext?: any
-) => {
+export const MeshProvider: React.FC<Props> = (props: any) => {
   const store = useWalletStore();
   return (
     <WalletContext.Provider value={store}>

package/src/hooks/index.ts

@@ -1,9 +1,9 @@
-export * from './useAddress';
-export * from './useAssets';
-export * from './useWalletList';
-export * from './useLovelace';
-export * from './useNetwork';
-export * from './useRewardAddress';
-export * from './useWallet';
-export * from './useWalletSubmit';
-export * from './useWalletTx';
+export * from "./useAddress";
+export * from "./useAssets";
+export * from "./useWalletList";
+export * from "./useLovelace";
+export * from "./useNetwork";
+export * from "./useRewardAddress";
+export * from "./useWallet";
+export * from "./useWalletSubmit";
+// export * from "./useWalletTx";

package/src/hooks/useAddress.ts

@@ -1,13 +1,11 @@
-import { useContext, useEffect, useState } from 'react';
-import { WalletContext } from '@mesh/contexts';
+import { useContext, useEffect, useState } from "react";
+
+import { WalletContext } from "../contexts";
 
 export const useAddress = (accountId = 0) => {
   const [address, setAddress] = useState<string>();
-  const {
-    hasConnectedWallet,
-    connectedWalletName,
-    connectedWalletInstance,
-  } = useContext(WalletContext);
+  const { hasConnectedWallet, connectedWalletName, connectedWalletInstance } =
+    useContext(WalletContext);
 
   useEffect(() => {
     if (hasConnectedWallet) {

package/src/hooks/useAssets.ts

@@ -1,21 +1,19 @@
-import { useContext, useEffect, useState } from 'react';
-import { WalletContext } from '@mesh/contexts';
-import type { Asset } from '@meshsdk/core';
+import { useContext, useEffect, useState } from "react";
+
+import type { Asset } from "@meshsdk/common";
+
+import { WalletContext } from "../contexts";
 
 export const useAssets = () => {
-  const [asstes, setAsstes] = useState<Asset[]>();
-  const {
-    hasConnectedWallet,
-    connectedWalletName,
-    connectedWalletInstance,
-  } = useContext(WalletContext);
+  const [assets, setAssets] = useState<Asset[]>();
+  const { hasConnectedWallet, connectedWalletName, connectedWalletInstance } =
+    useContext(WalletContext);
 
   useEffect(() => {
     if (hasConnectedWallet) {
-      connectedWalletInstance.getAssets()
-        .then(setAsstes);
+      connectedWalletInstance.getAssets().then(setAssets);
     }
   }, [connectedWalletName]);
 
-  return asstes;
+  return assets;
 };

package/src/hooks/useLovelace.ts

@@ -1,18 +1,15 @@
-import { useContext, useEffect, useState } from 'react';
-import { WalletContext } from '@mesh/contexts';
+import { useContext, useEffect, useState } from "react";
+
+import { WalletContext } from "../contexts";
 
 export const useLovelace = () => {
   const [lovelace, setLovelace] = useState<string>();
-  const {
-    hasConnectedWallet,
-    connectedWalletName,
-    connectedWalletInstance,
-  } = useContext(WalletContext);
+  const { hasConnectedWallet, connectedWalletName, connectedWalletInstance } =
+    useContext(WalletContext);
 
   useEffect(() => {
     if (hasConnectedWallet) {
-      connectedWalletInstance.getLovelace()
-        .then(setLovelace);
+      connectedWalletInstance.getLovelace().then(setLovelace);
     }
   }, [connectedWalletName]);
 

package/src/hooks/useNetwork.ts

@@ -1,18 +1,15 @@
-import { useContext, useEffect, useState } from 'react';
-import { WalletContext } from '@mesh/contexts';
+import { useContext, useEffect, useState } from "react";
+
+import { WalletContext } from "../contexts";
 
 export const useNetwork = () => {
   const [networkId, setNetworkId] = useState<number>();
-  const {
-    hasConnectedWallet,
-    connectedWalletName,
-    connectedWalletInstance,
-  } = useContext(WalletContext);
+  const { hasConnectedWallet, connectedWalletName, connectedWalletInstance } =
+    useContext(WalletContext);
 
   useEffect(() => {
     if (hasConnectedWallet) {
-      connectedWalletInstance.getNetworkId()
-        .then(setNetworkId);
+      connectedWalletInstance.getNetworkId().then(setNetworkId);
     }
   }, [connectedWalletName]);
 

package/src/hooks/useRewardAddress.ts

@@ -1,13 +1,11 @@
-import { useContext, useEffect, useState } from 'react';
-import { WalletContext } from '@mesh/contexts';
+import { useContext, useEffect, useState } from "react";
+
+import { WalletContext } from "../contexts";
 
 export const useRewardAddress = (accountId = 0) => {
   const [rewardAddress, setRewardAddress] = useState<string>();
-  const {
-    hasConnectedWallet,
-    connectedWalletName,
-    connectedWalletInstance,
-  } = useContext(WalletContext);
+  const { hasConnectedWallet, connectedWalletName, connectedWalletInstance } =
+    useContext(WalletContext);
 
   useEffect(() => {
     if (hasConnectedWallet) {

package/src/hooks/useWallet.ts

@@ -1,5 +1,6 @@
-import { useContext } from 'react';
-import { WalletContext } from '@mesh/contexts';
+import { useContext } from "react";
+
+import { WalletContext } from "../contexts";
 
 export const useWallet = () => {
   const {
@@ -14,7 +15,7 @@ export const useWallet = () => {
 
   if (connectWallet === undefined || disconnect === undefined) {
     throw new Error(
-      'Can\'t call useWallet outside of the WalletProvider context',
+      "Can't call useWallet outside of the WalletProvider context",
     );
   }
 

package/src/hooks/useWalletList.ts

@@ -1,6 +1,7 @@
-import { useEffect, useState } from 'react';
-import { BrowserWallet } from '@meshsdk/core';
-import type { Wallet } from '@meshsdk/core';
+import { useEffect, useState } from "react";
+
+import type { Wallet } from "@meshsdk/common";
+import { BrowserWallet } from "@meshsdk/wallet";
 
 export const useWalletList = () => {
   const [wallets, setWallets] = useState<Wallet[]>([]);

package/src/hooks/useWalletSubmit.ts

@@ -1,5 +1,6 @@
-import { useCallback, useContext, useState } from 'react';
-import { WalletContext } from '@mesh/contexts';
+import { useCallback, useContext, useState } from "react";
+
+import { WalletContext } from "../contexts";
 
 export const useWalletSubmit = () => {
   const [error, setError] = useState<unknown>();
@@ -20,7 +21,7 @@ export const useWalletSubmit = () => {
       }
 
       throw new Error(
-        'Please make sure to connect a wallet before calling useWalletSubmit'
+        "Please make sure to connect a wallet before calling useWalletSubmit",
       );
     } catch (error) {
       setError(error);
@@ -31,7 +32,8 @@ export const useWalletSubmit = () => {
   }, []);
 
   return {
-    error, result,
+    error,
+    result,
     submitting,
     submitTx,
   };