@meshsdk/react 1.5.30 → 1.6.0-alpha.20

package/.eslintrc.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@meshsdk/react",
-  "version": "1.5.30",
+  "version": "1.6.0-alpha.20",
   "sideEffects": [
     "**/*.css"
   ],
@@ -8,9 +8,6 @@
     "./styles.css": "./dist/index.css",
     ".": "./src/index.ts"
   },
-  "files": [
-    "dist/**"
-  ],
   "license": "MIT",
   "scripts": {
     "build:mesh": "tailwindcss -i ./src/styles.css -o ./dist/index.css",
@@ -35,8 +32,5 @@
     "tailwindcss": "^3.4.1",
     "typescript": "latest"
   },
-  "prettier": "@meshsdk/prettier-config",
-  "publishConfig": {
-    "access": "public"
-  }
+  "prettier": "@meshsdk/prettier-config"
 }

package/postcss.config.js

@@ -0,0 +1,9 @@
+// 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/cardano-wallet/checkmark.tsx

@@ -0,0 +1,10 @@
+export const CheckMark = () => (
+  <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" />
+  </svg>
+);

package/src/cardano-wallet/chevron-down.tsx

@@ -0,0 +1,17 @@
+export const ChevronDown = () => (
+  <svg
+    className="ui-m-2 ui-h-6"
+    fill="none"
+    aria-hidden="true"
+    viewBox="0 0 24 24"
+    stroke="currentColor"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="2"
+      d="M19 9l-7 7-7-7"
+    />
+  </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.ts

@@ -0,0 +1,76 @@
+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;
+  // setWallet?: () => void,
+  error?: unknown;
+}
+
+const INITIAL_STATE = {
+  walletName: "",
+  walletInstance: {} as BrowserWallet,
+};
+
+export const useWalletStore = () => {
+  const [error, setError] = useState<unknown>(undefined);
+
+  const [connectingWallet, setConnectingWallet] = useState<boolean>(false);
+
+  const [connectedWalletInstance, setConnectedWalletInstance] =
+    useState<BrowserWallet>(INITIAL_STATE.walletInstance);
+
+  const [connectedWalletName, setConnectedWalletName] = useState<string>(
+    INITIAL_STATE.walletName,
+  );
+
+  const connectWallet = useCallback(async (walletName: string) => {
+    setConnectingWallet(true);
+
+    try {
+      const walletInstance = await BrowserWallet.enable(walletName);
+      setConnectedWalletInstance(walletInstance);
+      setConnectedWalletName(walletName);
+      setError(undefined);
+    } catch (error) {
+      setError(error);
+      console.error(error);
+    }
+
+    setConnectingWallet(false);
+  }, []);
+
+  const disconnect = useCallback(() => {
+    setConnectedWalletName(INITIAL_STATE.walletName);
+    setConnectedWalletInstance(INITIAL_STATE.walletInstance);
+  }, []);
+
+  // const setWallet = useCallback((wallet: AppWallet) => {
+  //   setConnectedWalletName(INITIAL_STATE.walletName);
+  //   setConnectedWalletInstance(wallet);
+  // }, []);
+
+  return {
+    hasConnectedWallet: INITIAL_STATE.walletName !== connectedWalletName,
+    connectedWalletInstance,
+    connectedWalletName,
+    connectingWallet,
+    connectWallet,
+    disconnect,
+    // setWallet,
+    error,
+  };
+};
+
+export const WalletContext = createContext<WalletContext>({
+  hasConnectedWallet: false,
+  connectedWalletInstance: INITIAL_STATE.walletInstance,
+  connectedWalletName: INITIAL_STATE.walletName,
+  connectingWallet: false,
+});

package/src/contexts/index.tsx

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

package/src/hooks/index.ts

@@ -0,0 +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";

package/src/hooks/useAddress.ts

@@ -0,0 +1,21 @@
+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);
+
+  useEffect(() => {
+    if (hasConnectedWallet) {
+      connectedWalletInstance.getUsedAddresses().then((addresses) => {
+        if (addresses[accountId]) {
+          setAddress(addresses[accountId]);
+        }
+      });
+    }
+  }, [accountId, connectedWalletName]);
+
+  return address;
+};

package/src/hooks/useAssets.ts

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

package/src/hooks/useLovelace.ts

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

package/src/hooks/useNetwork.ts

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

package/src/hooks/useRewardAddress.ts

@@ -0,0 +1,21 @@
+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);
+
+  useEffect(() => {
+    if (hasConnectedWallet) {
+      connectedWalletInstance.getRewardAddresses().then((addresses) => {
+        if (addresses[accountId]) {
+          setRewardAddress(addresses[accountId]);
+        }
+      });
+    }
+  }, [accountId, connectedWalletName]);
+
+  return rewardAddress;
+};

package/src/hooks/useWallet.ts

@@ -0,0 +1,31 @@
+import { useContext } from "react";
+
+import { WalletContext } from "../contexts";
+
+export const useWallet = () => {
+  const {
+    hasConnectedWallet,
+    connectedWalletName,
+    connectedWalletInstance,
+    connectingWallet,
+    connectWallet,
+    disconnect,
+    error,
+  } = useContext(WalletContext);
+
+  if (connectWallet === undefined || disconnect === undefined) {
+    throw new Error(
+      "Can't call useWallet outside of the WalletProvider context",
+    );
+  }
+
+  return {
+    name: connectedWalletName,
+    connecting: connectingWallet,
+    connected: hasConnectedWallet,
+    wallet: connectedWalletInstance,
+    connect: connectWallet,
+    disconnect,
+    error,
+  };
+};

package/src/hooks/useWalletList.ts

@@ -0,0 +1,14 @@
+import { useEffect, useState } from "react";
+
+import type { Wallet } from "@meshsdk/common";
+import { BrowserWallet } from "@meshsdk/wallet";
+
+export const useWalletList = () => {
+  const [wallets, setWallets] = useState<Wallet[]>([]);
+
+  useEffect(() => {
+    setWallets(BrowserWallet.getInstalledWallets());
+  }, []);
+
+  return wallets;
+};

package/src/hooks/useWalletSubmit.ts

@@ -0,0 +1,40 @@
+import { useCallback, useContext, useState } from "react";
+
+import { WalletContext } from "../contexts";
+
+export const useWalletSubmit = () => {
+  const [error, setError] = useState<unknown>();
+  const [result, setResult] = useState<string>();
+  const [submitting, setSubmitting] = useState<boolean>(false);
+
+  const { hasConnectedWallet, connectedWalletInstance } =
+    useContext(WalletContext);
+
+  const submitTx = useCallback(async (signedTx: string) => {
+    setSubmitting(true);
+
+    try {
+      if (hasConnectedWallet) {
+        const txHash = await connectedWalletInstance.submitTx(signedTx);
+        setError(undefined);
+        setResult(txHash);
+      }
+
+      throw new Error(
+        "Please make sure to connect a wallet before calling useWalletSubmit",
+      );
+    } catch (error) {
+      setError(error);
+      console.error(error);
+    }
+
+    setSubmitting(false);
+  }, []);
+
+  return {
+    error,
+    result,
+    submitting,
+    submitTx,
+  };
+};

package/src/hooks/useWalletTx.ts

@@ -0,0 +1,32 @@
+// import { useContext, useState } from "react";
+// import { Transaction } from "@meshsdk/core";
+// import { WalletContext } from "../contexts";
+// import type { Era, Protocol } from "@meshsdk/common";
+
+// export const useWalletTx = (
+//   options: {
+//     era?: Era;
+//     parameters?: Protocol;
+//   } = {}
+// ) => {
+//   const { era, parameters } = options;
+
+//   const { hasConnectedWallet, connectedWalletInstance } =
+//     useContext(WalletContext);
+
+//   const [tx] = useState<Transaction>(() => {
+//     if (hasConnectedWallet) {
+//       return new Transaction({
+//         initiator: connectedWalletInstance,
+//         parameters,
+//         era,
+//       });
+//     }
+
+//     throw new Error(
+//       "Please make sure to connect a wallet before calling useWalletTx"
+//     );
+//   });
+
+//   return tx;
+// };

package/src/index.ts

@@ -0,0 +1,5 @@
+export * from "./cardano-wallet";
+export * from "./contexts";
+export * from "./hooks";
+export * from "./mesh-badge";
+export * from "./stake-button";

package/src/mesh-badge/index.tsx

@@ -0,0 +1,17 @@
+import { MeshLogo } from "./mesh-logo";
+
+export const MeshBadge = ({ isDark = false }) => (
+  <a
+    className={`ui-flex ui-max-w-fit ui-flex-col ui-items-center ui-rounded-md ui-border ui-border-solid ui-border-current ui-p-1 ui-text-xl ui-font-semibold ui-no-underline ${isDark ? `ui-bg-neutral-950	ui-text-neutral-50` : `ui-bg-neutral-50	ui-text-neutral-950`}`}
+    style={{
+      color: isDark ? "#EEEEEE" : "#111111",
+      backgroundColor: isDark ? "#111111" : "#EEEEEE",
+    }}
+    href="https://meshjs.dev/"
+    rel="noopener noreferrer"
+    target="_blank"
+  >
+    <MeshLogo />
+    Mesh
+  </a>
+);

package/src/mesh-badge/mesh-logo.tsx

@@ -0,0 +1,10 @@
+export const MeshLogo = () => (
+  <svg
+    className="ui-h-16 ui-p-2"
+    fill="currentColor"
+    viewBox="0 0 300 200"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path d="m289 127-45-60-45-60c-.9-1.3-2.4-2-4-2s-3.1.7-4 2l-37 49.3c-2 2.7-6 2.7-8 0l-37-49.3c-.9-1.3-2.4-2-4-2s-3.1.7-4 2l-45 60-45 60c-1.3 1.8-1.3 4.2 0 6l45 60c.9 1.3 2.4 2 4 2s3.1-.7 4-2l37-49.3c2-2.7 6-2.7 8 0l37 49.3c.9 1.3 2.4 2 4 2s3.1-.7 4-2l37-49.3c2-2.7 6-2.7 8 0l37 49.3c.9 1.3 2.4 2 4 2s3.1-.7 4-2l45-60c1.3-1.8 1.3-4.2 0-6zm-90-103.3 32.5 43.3c1.3 1.8 1.3 4.2 0 6l-32.5 43.3c-2 2.7-6 2.7-8 0l-32.5-43.3c-1.3-1.8-1.3-4.2 0-6l32.5-43.3c2-2.7 6-2.7 8 0zm-90 0 32.5 43.3c1.3 1.8 1.3 4.2 0 6l-32.5 43.3c-2 2.7-6 2.7-8 0l-32.5-43.3c-1.3-1.8-1.3-4.2 0-6l32.5-43.3c2-2.7 6-2.7 8 0zm-53 152.6-32.5-43.3c-1.3-1.8-1.3-4.2 0-6l32.5-43.3c2-2.7 6-2.7 8 0l32.5 43.3c1.3 1.8 1.3 4.2 0 6l-32.5 43.3c-2 2.7-6 2.7-8 0zm90 0-32.5-43.3c-1.3-1.8-1.3-4.2 0-6l32.5-43.3c2-2.7 6-2.7 8 0l32.5 43.3c1.3 1.8 1.3 4.2 0 6l-32.5 43.3c-2 2.7-6 2.7-8 0zm90 0-32.5-43.3c-1.3-1.8-1.3-4.2 0-6l32.5-43.3c2-2.7 6-2.7 8 0l32.5 43.3c1.3 1.8 1.3 4.2 0 6l-32.5 43.3c-2 2.7-6 2.7-8 0z" />
+  </svg>
+);