Merge pull request #73 from MeshJS/plutus-minting

Plutus Minting
MeshJS · Dec 23, 2022 · 92cc310 · 92cc310 · vercel · Dec 23, 2022
2 parents 9998d62 + b9f5f1f
commit 92cc310
Show file tree

Hide file tree

Showing 75 changed files with 2,044 additions and 577 deletions.
diff --git a/packages/demo/components/common/connectCipWallet.tsx b/packages/demo/components/common/connectCipWallet.tsx
@@ -1,32 +1,9 @@
-import Button from '../ui/button';
-import useWallet from '../../contexts/wallet';
+import { CardanoWallet, useWalletList } from '@meshsdk/react';
 
 export default function ConnectCipWallet() {
-  const { connecting, walletNameConnected, connectWallet, availableWallets } = useWallet();
-
+  const wallets = useWalletList();
+  const hasAvailableWallets = wallets.length > 0;
   return (
-    <>
-      {availableWallets
-        ? availableWallets.length == 0
-          ? 'No wallets installed'
-          : availableWallets.map((wallet, i) => (
-              <Button
-                key={i}
-                onClick={() => connectWallet(wallet.name)}
-                style={
-                  walletNameConnected == wallet.name
-                    ? 'success'
-                    : connecting
-                    ? 'warning'
-                    : 'light'
-                }
-                disabled={connecting || walletNameConnected == wallet.name}
-              >
-                <img src={`${wallet.icon}`} className="m-0 mr-2 w-6 h-6" />
-                Connect with {wallet.name}
-              </Button>
-            ))
-        : ''}
-    </>
+    <>{hasAvailableWallets ? <CardanoWallet /> : <>No wallets installed</>}</>
   );
 }
diff --git a/packages/demo/components/common/fetchSelectAssets.tsx b/packages/demo/components/common/fetchSelectAssets.tsx
@@ -1,14 +1,14 @@
 import type { AssetExtended } from '@meshsdk/core';
 import { useEffect, useState } from 'react';
-import useWallet from '../../contexts/wallet';
+import { useWallet } from '@meshsdk/react';
 import Button from '../ui/button';
 
 export default function FetchSelectAssets({
   index,
   selectedAssets,
   selectAssetFn,
 }) {
-  const { wallet, walletConnected, connecting } = useWallet();
+  const { wallet, connected, connecting } = useWallet();
   const [loadingAssets, setLoadingAssets] = useState<boolean>(false);
   const [walletAssets, setWalletAssets] = useState<AssetExtended[]>([
     {
@@ -34,13 +34,13 @@ export default function FetchSelectAssets({
       setWalletAssets(assets);
       setLoadingAssets(false);
     }
-    if (walletConnected) {
+    if (connected) {
       init();
     }
-  }, [walletConnected]);
+  }, [connected]);
 
   useEffect(() => {
-    if (connecting && !walletConnected) {
+    if (connecting && !connected) {
       setWalletAssets([]);
     }
   }, [connecting]);

diff --git a/packages/demo/components/pages/apis/browserwallet/connectWallet.tsx b/packages/demo/components/pages/apis/browserwallet/connectWallet.tsx
@@ -1,7 +1,8 @@
 import Codeblock from '../../../ui/codeblock';
 import Card from '../../../ui/card';
 import SectionTwoCol from '../../../common/sectionTwoCol';
-import useWallet from '../../../../contexts/wallet';
+import { useWallet, useWalletList } from '@meshsdk/react';
+
 import ConnectCipWallet from '../../../common/connectCipWallet';
 
 export default function ConnectWallet() {
@@ -35,16 +36,18 @@ function Left() {
 }
 
 function Right() {
-  const { hasAvailableWallets, walletNameConnected } = useWallet();
+  const { name } = useWallet();
+  const wallets = useWalletList();
+  const hasAvailableWallets = wallets.length > 0;
   return (
     <Card>
       <Codeblock
         data={`const wallet = await BrowserWallet.enable('${
-          walletNameConnected ? walletNameConnected : 'eternl'
+          name ? name : 'eternl'
         }');`}
         isJson={false}
       />
-      {hasAvailableWallets && <ConnectCipWallet />}
+      {<ConnectCipWallet />}
     </Card>
   );
 }
diff --git a/packages/demo/components/pages/apis/browserwallet/getAssets.tsx b/packages/demo/components/pages/apis/browserwallet/getAssets.tsx
@@ -4,7 +4,7 @@ import Card from '../../../ui/card';
 import RunDemoButton from '../../../common/runDemoButton';
 import RunDemoResult from '../../../common/runDemoResult';
 import SectionTwoCol from '../../../common/sectionTwoCol';
-import useWallet from '../../../../contexts/wallet';
+import { useWallet } from '@meshsdk/react';
 import ConnectCipWallet from '../../../common/connectCipWallet';
 
 export default function GetAssets() {
@@ -19,17 +19,35 @@ export default function GetAssets() {
 }
 
 function Left() {
+  let codeSample = `[\n`;
+  codeSample += `  {\n`;
+  codeSample += `    "unit": "1207329a668cf5c42b80a220a8c85d5e82ac0b6f5ecedda4c07a8acc4d657368486f6e6f72546f6b656e2d3530343935",\n`;
+  codeSample += `    "policyId": "1207329a668cf5c42b80a220a8c85d5e82ac0b6f5ecedda4c07a8acc",\n`;
+  codeSample += `    "assetName": "Mesh Token Of Appreciation",\n`;
+  codeSample += `    "fingerprint": "asset1dw74h0w0meqg9cxkc9sezp8zqcxu8nl93fzfpz",\n`;
+  codeSample += `    "quantity": "1"\n`;
+  codeSample += `  }\n`;
+  codeSample += `  {\n`;
+  codeSample += `    "unit": "9c8e9da7f81e3ca90485f32ebefc98137c8ac260a072a00c4aaf142d4d657368546f6b656e",\n`;
+  codeSample += `    "policyId": "9c8e9da7f81e3ca90485f32ebefc98137c8ac260a072a00c4aaf142d",\n`;
+  codeSample += `    "assetName": "MeshToken",\n`;
+  codeSample += `    "fingerprint": "asset177e7535dclmkkph8ewt9fsghllkwmpspa3n98p",\n`;
+  codeSample += `    "quantity": "10"\n`;
+  codeSample += `  }\n`;
+  codeSample += `]\n`;
+
   return (
     <>
-      <p>Returns a list of assets in wallet excluding lovelace.</p>
+      <p>Returns a list of assets in wallet excluding lovelace, example:</p>
+      <Codeblock data={codeSample} isJson={false} />
     </>
   );
 }
 
 function Right() {
   const [loading, setLoading] = useState<boolean>(false);
   const [response, setResponse] = useState<null | any>(null);
-  const { wallet, walletConnected, hasAvailableWallets } = useWallet();
+  const { wallet, connected } = useWallet();
 
   async function runDemo() {
     setLoading(true);
@@ -44,7 +62,7 @@ function Right() {
           data={`const assets = await wallet.getAssets();`}
           isJson={false}
         />
-        {walletConnected ? (
+        {connected ? (
           <>
             <RunDemoButton
               runDemoFn={runDemo}
@@ -54,7 +72,7 @@ function Right() {
             <RunDemoResult response={response} />
           </>
         ) : (
-          hasAvailableWallets && <ConnectCipWallet />
+          <ConnectCipWallet />
         )}
       </Card>
     </>

diff --git a/packages/demo/components/pages/apis/browserwallet/getBalance.tsx b/packages/demo/components/pages/apis/browserwallet/getBalance.tsx
@@ -4,7 +4,8 @@ import Card from '../../../ui/card';
 import RunDemoButton from '../../../common/runDemoButton';
 import RunDemoResult from '../../../common/runDemoResult';
 import SectionTwoCol from '../../../common/sectionTwoCol';
-import useWallet from '../../../../contexts/wallet';
+import { useWallet } from '@meshsdk/react';
+
 import ConnectCipWallet from '../../../common/connectCipWallet';
 
 export default function GetBalance() {
@@ -19,20 +20,36 @@ export default function GetBalance() {
 }
 
 function Left() {
+  let codeSample = `[\n`;
+  codeSample += `  {\n`;
+  codeSample += `    "unit": "lovelace",\n`;
+  codeSample += `    "quantity": "796105407"\n`;
+  codeSample += `  },\n`;
+  codeSample += `  {\n`;
+  codeSample += `    "unit": "0f5560dbc05282e05507aedb02d823d9d9f0e583cce579b81f9d1cd8",\n`;
+  codeSample += `    "quantity": "1"\n`;
+  codeSample += `  },\n`;
+  codeSample += `  {\n`;
+  codeSample += `    "unit": "9c8e9da7f81e3ca90485f32ebefc98137c8ac260a072a00c4aaf142d4d657368546f6b656e",\n`;
+  codeSample += `    "quantity": "2"\n`;
+  codeSample += `  },\n`;
+  codeSample += `]\n`;
+
   return (
     <>
       <p>
         Returns a list of assets in the wallet. This API will return every
-        assets in the wallet.
+        assets in the wallet, example:
       </p>
+      <Codeblock data={codeSample} isJson={false} />
     </>
   );
 }
 
 function Right() {
   const [loading, setLoading] = useState<boolean>(false);
   const [response, setResponse] = useState<null | any>(null);
-  const { wallet, walletConnected, hasAvailableWallets } = useWallet();
+  const { wallet, connected } = useWallet();
 
   async function runDemo() {
     setLoading(true);
@@ -47,7 +64,7 @@ function Right() {
           data={`const balance = await wallet.getBalance();`}
           isJson={false}
         />
-        {walletConnected ? (
+        {connected ? (
           <>
             <RunDemoButton
               runDemoFn={runDemo}
@@ -57,7 +74,7 @@ function Right() {
             <RunDemoResult response={response} />
           </>
         ) : (
-          hasAvailableWallets && <ConnectCipWallet />
+          <ConnectCipWallet />
         )}
       </Card>
     </>

diff --git a/packages/demo/components/pages/apis/browserwallet/getChangeAddress.tsx b/packages/demo/components/pages/apis/browserwallet/getChangeAddress.tsx
@@ -4,7 +4,7 @@ import Card from '../../../ui/card';
 import RunDemoButton from '../../../common/runDemoButton';
 import RunDemoResult from '../../../common/runDemoResult';
 import SectionTwoCol from '../../../common/sectionTwoCol';
-import useWallet from '../../../../contexts/wallet';
+import { useWallet } from '@meshsdk/react';
 import ConnectCipWallet from '../../../common/connectCipWallet';
 
 export default function GetChangeAddress() {
@@ -33,7 +33,7 @@ function Left() {
 function Right() {
   const [loading, setLoading] = useState<boolean>(false);
   const [response, setResponse] = useState<null | any>(null);
-  const { wallet, walletConnected, hasAvailableWallets } = useWallet();
+  const { wallet, connected } = useWallet();
 
   async function runDemo() {
     setLoading(true);
@@ -48,7 +48,7 @@ function Right() {
           data={`const changeAddress = await wallet.getChangeAddress();`}
           isJson={false}
         />
-        {walletConnected ? (
+        {connected ? (
           <>
             <RunDemoButton
               runDemoFn={runDemo}
@@ -58,7 +58,7 @@ function Right() {
             <RunDemoResult response={response} />
           </>
         ) : (
-          hasAvailableWallets && <ConnectCipWallet />
+          <ConnectCipWallet />
         )}
       </Card>
     </>

diff --git a/packages/demo/components/pages/apis/browserwallet/getLovelace.tsx b/packages/demo/components/pages/apis/browserwallet/getLovelace.tsx
@@ -4,7 +4,7 @@ import Card from '../../../ui/card';
 import RunDemoButton from '../../../common/runDemoButton';
 import RunDemoResult from '../../../common/runDemoResult';
 import SectionTwoCol from '../../../common/sectionTwoCol';
-import useWallet from '../../../../contexts/wallet';
+import { useWallet } from '@meshsdk/react';
 import ConnectCipWallet from '../../../common/connectCipWallet';
 
 export default function GetLovelace() {
@@ -29,7 +29,7 @@ function Left() {
 function Right() {
   const [loading, setLoading] = useState<boolean>(false);
   const [response, setResponse] = useState<null | any>(null);
-  const { wallet, walletConnected, hasAvailableWallets } = useWallet();
+  const { wallet, connected } = useWallet();
 
   async function runDemo() {
     setLoading(true);
@@ -44,7 +44,7 @@ function Right() {
           data={`const lovelace = await wallet.getLovelace();`}
           isJson={false}
         />
-        {walletConnected ? (
+        {connected ? (
           <>
             <RunDemoButton
               runDemoFn={runDemo}
@@ -54,7 +54,7 @@ function Right() {
             <RunDemoResult response={response} />
           </>
         ) : (
-          hasAvailableWallets && <ConnectCipWallet />
+          <ConnectCipWallet />
         )}
       </Card>
     </>

diff --git a/packages/demo/components/pages/apis/browserwallet/getNetworkId.tsx b/packages/demo/components/pages/apis/browserwallet/getNetworkId.tsx
@@ -4,7 +4,7 @@ import Card from '../../../ui/card';
 import RunDemoButton from '../../../common/runDemoButton';
 import RunDemoResult from '../../../common/runDemoResult';
 import SectionTwoCol from '../../../common/sectionTwoCol';
-import useWallet from '../../../../contexts/wallet';
+import { useWallet } from '@meshsdk/react';
 import ConnectCipWallet from '../../../common/connectCipWallet';
 
 export default function GetNetworkId() {
@@ -34,7 +34,7 @@ function Left() {
 function Right() {
   const [loading, setLoading] = useState<boolean>(false);
   const [response, setResponse] = useState<null | any>(null);
-  const { wallet, walletConnected, hasAvailableWallets } = useWallet();
+  const { wallet, connected } = useWallet();
 
   async function runDemo() {
     setLoading(true);
@@ -49,7 +49,7 @@ function Right() {
           data={`const networkId = await wallet.getNetworkId();`}
           isJson={false}
         />
-        {walletConnected ? (
+        {connected ? (
           <>
             <RunDemoButton
               runDemoFn={runDemo}
@@ -59,7 +59,7 @@ function Right() {
             <RunDemoResult response={response} />
           </>
         ) : (
-          hasAvailableWallets && <ConnectCipWallet />
+          <ConnectCipWallet />
         )}
       </Card>
     </>

diff --git a/packages/demo/components/pages/apis/browserwallet/getPolicyIdAssets.tsx b/packages/demo/components/pages/apis/browserwallet/getPolicyIdAssets.tsx
@@ -4,7 +4,7 @@ import Card from '../../../ui/card';
 import RunDemoButton from '../../../common/runDemoButton';
 import RunDemoResult from '../../../common/runDemoResult';
 import SectionTwoCol from '../../../common/sectionTwoCol';
-import useWallet from '../../../../contexts/wallet';
+import { useWallet } from '@meshsdk/react';
 import ConnectCipWallet from '../../../common/connectCipWallet';
 import Input from '../../../ui/input';
 
@@ -37,7 +37,7 @@ function Left({ policyId }) {
 function Right({ policyId, setPolicyId }) {
   const [loading, setLoading] = useState<boolean>(false);
   const [response, setResponse] = useState<null | any>(null);
-  const { wallet, walletConnected, hasAvailableWallets } = useWallet();
+  const { wallet, connected } = useWallet();
 
   async function runDemo() {
     setLoading(true);
@@ -57,21 +57,18 @@ function Right({ policyId, setPolicyId }) {
         data={`const assets = await wallet.getPolicyIdAssets('${policyId}');`}
         isJson={false}
       />
-      {hasAvailableWallets && (
+
+      {connected ? (
         <>
-          {walletConnected ? (
-            <>
-              <RunDemoButton
-                runDemoFn={runDemo}
-                loading={loading}
-                response={response}
-              />
-              <RunDemoResult response={response} />
-            </>
-          ) : (
-            <ConnectCipWallet />
-          )}
+          <RunDemoButton
+            runDemoFn={runDemo}
+            loading={loading}
+            response={response}
+          />
+          <RunDemoResult response={response} />
         </>
+      ) : (
+        <ConnectCipWallet />
       )}
     </Card>
   );