@meshsdk/react 1.1.12 → 1.5.28

package/dist/resolvers/index.d.ts

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

package/dist/resolvers/resolveMedia.d.ts

@@ -1 +0,0 @@
-export declare const resolveMedia: (src: String, ipfsUrl?: string) => string | String;

package/postcss.config.js

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

package/src/components/CardanoWallet/CardanoWallet.tsx

@@ -1,153 +0,0 @@
-import tw, { styled } from 'twin.macro';
-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
-  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 = ({
-  label = 'Connect Wallet',
-  onConnected = undefined,
-  isDark = false,
-}: {
-  label?: string;
-  onConnected?: Function;
-  isDark?: boolean;
-}) => {
-  const [isDarkMode, setIsDarkMode] = useState(false);
-
-  const wallets = useWalletList();
-
-  const [hideMenuList, setHideMenuList] = useState(true);
-
-  const { connect, connecting, connected, disconnect, name } = useWallet();
-
-  useEffect(() => {
-    if (connected && onConnected) {
-      onConnected();
-    }
-  }, [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' }}
-      onMouseEnter={() => setHideMenuList(false)}
-      onMouseLeave={() => setHideMenuList(true)}
-    >
-      <StyledMenuButton
-        type="button"
-        className="mr-wallet-button"
-        style={{
-          backgroundColor: isDarkMode ? '#1f1f1f' : '#fff',
-          color: isDarkMode ? '#fff' : '#000',
-        }}
-        onClick={() => setHideMenuList(!hideMenuList)}
-      >
-        <WalletBalance
-          name={name}
-          connected={connected}
-          connecting={connecting}
-          label={label}
-        />
-      </StyledMenuButton>
-      <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}
-                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}
-            />
-          </>
-        )}
-      </StyledMenuList>
-    </div>
-  );
-};

package/src/components/CardanoWallet/WalletBalance.tsx

@@ -1,34 +0,0 @@
-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, 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)}.
-      <StyledSmall>{balance.substr(balance.length - 6)}</StyledSmall>
-    </>
-  ) : connected && wallet?.icon ? (
-    <>
-      <StyledIcon src={wallet.icon} />
-    </>
-  ) : connecting ? (
-    <>Connecting...</>
-  ) : (
-    <>
-      {label} <ChevronDown />
-    </>
-  );
-};

package/src/components/CardanoWallet/index.ts

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

package/src/components/ChevronDown/ChevronDown.tsx

@@ -1,20 +0,0 @@
-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

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

package/src/components/MenuItem/CheckMark.tsx

@@ -1,13 +0,0 @@
-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

@@ -1,41 +0,0 @@
-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 className='mr-menu-item'>
-      {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

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

package/src/components/MeshBadge/MeshBadge.tsx

@@ -1,23 +0,0 @@
-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

@@ -1,13 +0,0 @@
-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

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

package/src/components/StakeButton/StakeButton.tsx

@@ -1,170 +0,0 @@
-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

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

package/src/components/index.ts

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

package/src/contexts/WalletContext.tsx

@@ -1,74 +0,0 @@
-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,
-  // 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

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

package/src/hooks/index.ts

@@ -1,9 +0,0 @@
-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,23 +0,0 @@
-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

@@ -1,21 +0,0 @@
-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

@@ -1,20 +0,0 @@
-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;
-};