@meshsdk/react 1.1.1

package/package.json

@@ -0,0 +1,71 @@
+{
+  "name": "@meshsdk/react",
+  "description": "React Hooks & Components you need for building dApps on Cardano.",
+  "homepage": "https://meshjs.dev",
+  "author": "MeshJS",
+  "version": "1.1.1",
+  "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"
+  ],
+  "main": "dist/react.cjs",
+  "module": "dist/react.js",
+  "typings": "dist/index.d.ts",
+  "scripts": {
+    "build": "vite build",
+    "dev": "start-storybook -p 6006"
+  },
+  "exports": {
+    ".": {
+      "import": "./dist/react.js",
+      "require": "./dist/react.cjs"
+    }
+  },
+  "babelMacros": {
+    "twin": {
+      "config": "./tailwind.config.cjs",
+      "preset": "styled-components"
+    }
+  },
+  "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"
+  },
+  "peerDependencies": {
+    "@meshsdk/core": "1.2.0-beta.4",
+    "react-dom": "17.x || 18.x",
+    "react": "17.x || 18.x"
+  },
+  "dependencies": {
+    "styled-components": "5.3.6"
+  }
+}

package/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

package/src/components/CardanoWallet/CardanoWallet.tsx

@@ -0,0 +1,77 @@
+import tw, { styled } from 'twin.macro';
+import { useState } from 'react';
+import { useWallet, useWalletList } from '@mesh/hooks';
+import { MenuItem } from '../MenuItem';
+import { WalletBalance } from './WalletBalance';
+
+const StyledMenuButton = tw.button`
+  flex items-center justify-center
+  font-normal text-lg
+  border rounded-t-md
+  w-60 px-4 py-2
+  shadow-sm
+`;
+
+const StyledMenuList = styled.div(({ hidden }: { hidden: boolean }) => [
+  tw`
+    shadow-sm backdrop-blur
+    border rounded-b-md
+    absolute w-60
+    text-center
+  `,
+  hidden && tw`hidden`,
+]);
+
+export const CardanoWallet = () => {
+  const wallets = useWalletList();
+
+  const [hideMenuList, setHideMenuList] = useState(true);
+
+  const { connect, connecting, connected, disconnect, name } = useWallet();
+
+  return (
+    <div
+      style={{ width: 'fit-content' }}
+      onMouseEnter={() => setHideMenuList(false)}
+      onMouseLeave={() => setHideMenuList(true)}
+    >
+      <StyledMenuButton
+        type="button"
+        onClick={() => setHideMenuList(!hideMenuList)}
+      >
+        <WalletBalance
+          name={name}
+          connected={connected}
+          connecting={connecting}
+        />
+      </StyledMenuButton>
+      <StyledMenuList hidden={hideMenuList}>
+        {!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}
+            />
+          ))
+          ) : 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

@@ -0,0 +1,34 @@
+import tw from 'twin.macro';
+import { useLovelace, useWalletList } from '@mesh/hooks';
+import { ChevronDown } from '../ChevronDown';
+
+const StyledIcon = tw.img`
+  h-6 m-2
+`;
+
+const StyledSmall = tw.span`
+  text-xs
+`;
+
+export const WalletBalance = ({ connected, name, connecting }) => {
+  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)}.
+      <StyledSmall>{balance.substr(balance.length - 6)}</StyledSmall>
+    </>
+  ) : connected && wallet?.icon ? (
+    <>
+      <StyledIcon src={wallet.icon} />
+    </>
+  ) : connecting ? (
+    <>Connecting...</>
+  ) : (
+    <>
+      Connect Wallet <ChevronDown />
+    </>
+  );
+};

package/src/components/CardanoWallet/index.ts

@@ -0,0 +1 @@
+export * from './CardanoWallet';

package/src/components/ChevronDown/ChevronDown.tsx

@@ -0,0 +1,20 @@
+import tw from 'twin.macro';
+
+const StyledChevronDown = tw.svg`h-6 m-2`;
+
+export const ChevronDown = () => (
+  <StyledChevronDown
+    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"
+    />
+  </StyledChevronDown>
+);

package/src/components/ChevronDown/index.ts

@@ -0,0 +1 @@
+export * from './ChevronDown';

package/src/components/MenuItem/CheckMark.tsx

@@ -0,0 +1,13 @@
+import tw from 'twin.macro';
+
+const StyledCheckMark = tw.svg`h-6 m-2`;
+
+export const CheckMark = () => (
+  <StyledCheckMark
+    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>
+);

package/src/components/MenuItem/MenuItem.tsx

@@ -0,0 +1,41 @@
+import tw from 'twin.macro';
+import { CheckMark } from './CheckMark';
+
+const StyledItem = tw.div`
+  opacity-80 hover:opacity-100
+  flex items-center
+  cursor-pointer
+  px-4 py-2
+`;
+
+const StyledIcon = tw.img`
+  h-8 m-1 pr-2
+`;
+
+const StyledName = tw.span`
+  font-normal
+  text-xl
+`;
+
+const StyledActive = tw.span`
+  ml-auto
+`;
+
+export const MenuItem = ({ icon, label, action, active }) => (
+  <StyledItem onClick={action}>
+    {icon && <StyledIcon src={icon} />}
+    <StyledName>
+      {label
+        .split(' ')
+        .map((word: string) => {
+          return word.charAt(0).toUpperCase() + word.slice(1).toLowerCase();
+        })
+        .join(' ')}
+    </StyledName>
+    {active && (
+      <StyledActive>
+        <CheckMark />
+      </StyledActive>
+    )}
+  </StyledItem>
+);

package/src/components/MenuItem/index.ts

@@ -0,0 +1 @@
+export * from './MenuItem';

package/src/components/MeshBadge/MeshBadge.tsx

@@ -0,0 +1,23 @@
+import tw from 'twin.macro';
+import { MeshLogo } from './MeshLogo';
+
+const StyledLink = tw.a`
+  flex flex-col items-center max-w-fit p-1
+  border border-current border-solid rounded-md
+  font-semibold text-xl text-stone-700 no-underline
+`;
+
+export const MeshBadge = ({ dark = false }) => (
+  <StyledLink
+    style={{
+      color: dark ? '#EEEEEE' : '#111111',
+      backgroundColor: dark ? '#111111' : '#EEEEEE',
+    }}
+    href="https://meshjs.dev/"
+    rel="noopener noreferrer"
+    target="_blank"
+  >
+    <MeshLogo />
+    Mesh
+  </StyledLink>
+);

package/src/components/MeshBadge/MeshLogo.tsx

@@ -0,0 +1,13 @@
+import tw from 'twin.macro';
+
+const StyledLogo = tw.svg`h-16 p-2`;
+
+export const MeshLogo = () => (
+  <StyledLogo
+    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" />
+  </StyledLogo>
+);

package/src/components/MeshBadge/index.ts

@@ -0,0 +1 @@
+export * from './MeshBadge';

package/src/components/StakeButton/StakeButton.tsx

@@ -0,0 +1,170 @@
+import tw, { styled } from 'twin.macro';
+import { useEffect, useState } from 'react';
+import {
+  useRewardAddress,
+  useWallet,
+  useWalletList,
+  useWalletTx,
+} from '@mesh/hooks';
+import { ChevronDown } from '../ChevronDown';
+import { MenuItem } from '../MenuItem';
+import type { AccountInfo } from '@meshsdk/core';
+
+const StyledMenuButton = tw.button`
+  flex items-center justify-center
+  font-normal text-lg
+  border rounded-t-md
+  w-60 px-4 py-2
+  shadow-sm
+`;
+
+const StyledMenuList = styled.div(({ hidden }: { hidden: boolean }) => [
+  tw`
+    shadow-sm backdrop-blur
+    border rounded-b-md
+    absolute w-60
+    text-center
+  `,
+  hidden && tw`hidden`,
+]);
+
+export const StakeButton = ({ poolId, onCheck }) => {
+  const wallets = useWalletList();
+
+  const [hideMenuList, setHideMenuList] = useState(true);
+
+  const { connect, connecting, connected, name } = useWallet();
+
+  return (
+    <div
+      style={{ width: 'fit-content' }}
+      onMouseEnter={() => setHideMenuList(false)}
+      onMouseLeave={() => setHideMenuList(true)}
+    >
+      <StyledMenuButton
+        type="button"
+        onClick={() => setHideMenuList(!hideMenuList)}
+      >
+        {connected ? (
+          <Delegate poolId={poolId} onCheck={onCheck} />
+        ) : connecting ? (
+          <>Connecting...</>
+        ) : (
+          <>
+            Connect Wallet <ChevronDown />
+          </>
+        )}
+      </StyledMenuButton>
+      <StyledMenuList hidden={hideMenuList || 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}
+            />
+          ))
+        ) : (
+          <span>No Wallet Found</span>
+        )}
+      </StyledMenuList>
+    </div>
+  );
+};
+
+const Delegate = ({ poolId, onCheck }) => {
+  const tx = useWalletTx();
+  const { wallet } = useWallet();
+  const rewardAddress = useRewardAddress();
+  const [error, setError] = useState<unknown>();
+  const [checking, setChecking] = useState(false);
+  const [accountInfo, setAccountInfo] = useState<AccountInfo>();
+  const [processing, setProcessing] = useState(false);
+  const [done, setDone] = useState(false);
+
+  const checkAccountStatus = async () => {
+    try {
+      setChecking(true);
+
+      if (rewardAddress) {
+        const info = await onCheck(rewardAddress);
+        setAccountInfo(info);
+      }
+
+      setChecking(false);
+    } catch (error) {
+      setError(error);
+    }
+  };
+
+  const registerAddress = async () => {
+    setProcessing(true);
+    setDone(false);
+    try {
+      if (rewardAddress) {
+        const unsignedTx = await tx
+          .registerStake(rewardAddress)
+          .delegateStake(rewardAddress, poolId)
+          .build();
+
+        const signedTx = await wallet.signTx(unsignedTx);
+        const txHash = await wallet.submitTx(signedTx);
+        console.log('txHash', txHash);
+        setDone(true);
+      }
+    } catch (error) {
+      console.error('error', error);
+      setError(error);
+    }
+    setProcessing(false);
+  };
+
+  const delegateStake = async () => {
+    setProcessing(true);
+    setDone(false);
+    try {
+      if (rewardAddress) {
+        const unsignedTx = await tx
+          .delegateStake(rewardAddress, poolId)
+          .build();
+
+        const signedTx = await wallet.signTx(unsignedTx);
+        const txHash = await wallet.submitTx(signedTx);
+        setDone(true);
+      }
+    } catch (error) {
+      console.error('error', error);
+      setError(error);
+    }
+    setProcessing(false);
+  };
+
+  useEffect(() => {
+    checkAccountStatus();
+  }, [rewardAddress]);
+
+  if (checking) {
+    return <span>Checking...</span>;
+  }
+  if (processing) {
+    return <span>Loading...</span>;
+  }
+  if (done) {
+    return <span>Stake Delegated</span>;
+  }
+
+  if (accountInfo?.active) {
+    return accountInfo.poolId === poolId ? (
+      <span>Stake Delegated</span>
+    ) : (
+      <span onClick={delegateStake}>Delegate Stake</span>
+    );
+  }
+
+  return <span onClick={registerAddress}>Register Address</span>;
+};

package/src/components/StakeButton/index.ts

@@ -0,0 +1 @@
+export * from './StakeButton';

package/src/components/index.ts

@@ -0,0 +1,3 @@
+export * from './CardanoWallet';
+export * from './MeshBadge';
+export * from './StakeButton';

package/src/contexts/WalletContext.tsx

@@ -0,0 +1,67 @@
+import { createContext, useCallback, useState } from 'react';
+import { BrowserWallet } from '@meshsdk/core';
+
+interface WalletContext {
+  hasConnectedWallet: boolean,
+  connectedWalletInstance: BrowserWallet,
+  connectedWalletName: string,
+  connectingWallet: boolean,
+  connectWallet?: (walletName: string) => Promise<void>,
+  disconnect?: () => 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);
+  }, []);
+
+  return {
+    hasConnectedWallet: INITIAL_STATE.walletName !== connectedWalletName,
+    connectedWalletInstance,
+    connectedWalletName,
+    connectingWallet,
+    connectWallet,
+    disconnect,
+    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,13 @@
+export { WalletContext } from './WalletContext';
+
+import { useWalletStore, WalletContext } from './WalletContext';
+
+export const MeshProvider = ({ children }) => {
+  const store = useWalletStore();
+
+  return (
+    <WalletContext.Provider value={store}>
+      {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,23 @@
+import { useContext, useEffect, useState } from 'react';
+import { WalletContext } from '@mesh/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,21 @@
+import { useContext, useEffect, useState } from 'react';
+import { WalletContext } from '@mesh/contexts';
+import type { Asset } from '@meshsdk/core';
+
+export const useAssets = () => {
+  const [asstes, setAsstes] = useState<Asset[]>();
+  const {
+    hasConnectedWallet,
+    connectedWalletName,
+    connectedWalletInstance,
+  } = useContext(WalletContext);
+
+  useEffect(() => {
+    if (hasConnectedWallet) {
+      connectedWalletInstance.getAssets()
+        .then(setAsstes);
+    }
+  }, [connectedWalletName]);
+
+  return asstes;
+};

package/src/hooks/useLovelace.ts

@@ -0,0 +1,20 @@
+import { useContext, useEffect, useState } from 'react';
+import { WalletContext } from '@mesh/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,20 @@
+import { useContext, useEffect, useState } from 'react';
+import { WalletContext } from '@mesh/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;
+};