add deploy sc demo

Author: juliancwirko

CHANGELOG.md

@@ -1,3 +1,6 @@
+### [9.4.0](https://github.com/xdevguild/nextjs-dapp-template/releases/tag/v9.4.0) (2023-12-03)
+- update useElven and add deploy a smart contract demo
+
 ### [9.3.0](https://github.com/xdevguild/nextjs-dapp-template/releases/tag/v9.3.0) (2023-11-30)
 - update useElven and add Sign message demo
 

components/demo/simple-demo.tsx

@@ -14,6 +14,7 @@ import { SimpleNftMintDemo } from './simple-nft-mint-demo';
 import { SimpleScQeryDemo } from './simple-sc-query-demo';
 import { shortenHash } from '@/lib/shortenHash';
 import { SimpleSignMessageDemo } from './sign-message-demo';
+import { SimpleDeployScDemo } from './simple-deploy-sc-demo';
 
 export const SimpleDemo = () => {
   const [result, setResult] = useState<{ type: string; content: string }>();
@@ -65,6 +66,27 @@ export const SimpleDemo = () => {
     []
   );
 
+  const handleDeployCb = useCallback(
+    ({ txResult, pending, error }: TransactionCallbackParams) => {
+      if (txResult) {
+        setResult({ type: 'tx', content: txResult.hash });
+        setPending(false);
+        setError(undefined);
+      }
+      if (pending) {
+        setPending(true);
+        setError(undefined);
+        setResult(undefined);
+      }
+      if (error) {
+        setError(error);
+        setPending(false);
+        setResult(undefined);
+      }
+    },
+    []
+  );
+
   const handleClose = useCallback(() => {
     setResult(undefined);
     setPending(false);
@@ -76,9 +98,10 @@ export const SimpleDemo = () => {
       <div className="flex gap-8 flex-wrap justify-center items-stretch mb-4 flex-col lg:flex-row">
         <SimpleEGLDTxDemo cb={handleTxCb} />
         <SimpleNftMintDemo cb={handleTxCb} />
+        <SimpleScQeryDemo cb={handleQueryCb} />
       </div>
       <div className="flex gap-8 flex-wrap justify-center items-stretch mb-4 flex-col lg:flex-row">
-        <SimpleScQeryDemo cb={handleQueryCb} />
+        <SimpleDeployScDemo cb={handleDeployCb} />
         <SimpleSignMessageDemo />
       </div>
       {error && (

components/demo/simple-deploy-sc-demo.tsx

@@ -0,0 +1,59 @@
+'use client';
+
+import {
+  TransactionCallbackParams,
+  useConfig,
+  useScDeploy,
+} from '@useelven/core';
+import { Card, CardContent, CardFooter } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+
+export const SimpleDeployScDemo = ({
+  cb,
+}: {
+  cb: (params: TransactionCallbackParams) => void;
+}) => {
+  const { explorerAddress } = useConfig();
+  const { deploy, scAddress, txResult, pending } = useScDeploy({ cb });
+
+  const handleDeploy = () => {
+    deploy({ source: '/piggybank.wasm' });
+  };
+
+  return (
+    <Card className="flex-1 flex flex-col justify-between w-full">
+      <CardContent className="mt-6">
+        <div className="mb-4">
+          You will be deploying a{' '}
+          <a
+            href="https://github.com/xdevguild/multiversx-simple-sc"
+            target="_blank"
+            className="underline"
+          >
+            <strong>Piggy Bank</strong>
+          </a>{' '}
+          simple smart contract.
+        </div>
+        {!pending && txResult && scAddress && (
+          <div className="lg:max-w-lg w-full break-words white">
+            Your deployed smart contract address:
+            <br />
+            <strong>
+              <a
+                href={`${explorerAddress}/accounts/${scAddress}`}
+                target="_blank"
+              >
+                {scAddress}
+              </a>
+            </strong>
+          </div>
+        )}
+      </CardContent>
+      <CardFooter>
+        <Button variant="outline" disabled={pending} onClick={handleDeploy}>
+          {pending ? 'Pending...' : 'Deploy'}
+        </Button>
+      </CardFooter>
+    </Card>
+  );
+};

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "nextjs-dapp-template",
-  "version": "9.3.0",
+  "version": "9.4.0",
   "author": "Julian Ćwirko <julian.io>",
   "license": "MIT",
   "homepage": "https://github.com/xdevguild/nextjs-dapp-template",
@@ -23,7 +23,7 @@
     "@radix-ui/react-dropdown-menu": "2.0.6",
     "@radix-ui/react-slot": "1.0.2",
     "@radix-ui/react-tooltip": "1.0.7",
-    "@useelven/core": "0.12.0",
+    "@useelven/core": "0.13.0",
     "class-variance-authority": "0.7.0",
     "clsx": "2.0.0",
     "lucide-react": "0.294.0",
@@ -32,22 +32,22 @@
     "qrcode": "1.5.3",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "tailwind-merge": "2.0.0",
+    "tailwind-merge": "2.1.0",
     "tailwindcss": "3.3.5",
     "tailwindcss-animate": "1.0.7"
   },
   "devDependencies": {
-    "@types/node": "20.10.1",
+    "@types/node": "20.10.2",
     "@types/qrcode": "1.5.5",
-    "@types/react": "18.2.39",
+    "@types/react": "18.2.41",
     "@types/react-dom": "18.2.17",
     "@typescript-eslint/eslint-plugin": "6.13.1",
     "@typescript-eslint/parser": "6.13.1",
     "autoprefixer": "10.4.16",
-    "eslint": "8.54.0",
+    "eslint": "8.55.0",
     "eslint-config-next": "14.0.3",
-    "eslint-config-prettier": "9.0.0",
-    "postcss": "8.4.31",
+    "eslint-config-prettier": "9.1.0",
+    "postcss": "8.4.32",
     "prettier": "3.1.0",
     "typescript": "5.3.2"
   }