hotfix: update create-dubhe template tx alert

0xobelisk · Nov 26, 2024 · 2fa5e2a · 2fa5e2a
1 parent 950c18e
commit 2fa5e2a
Show file tree

Hide file tree

Showing 12 changed files with 102 additions and 22 deletions.
diff --git a/packages/create-dubhe/package.json b/packages/create-dubhe/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "create-dubhe",
-	"version": "0.0.7",
+	"version": "0.0.8",
 	"type": "module",
 	"license": "MIT",
 	"author": "[email protected]",

diff --git a/packages/create-dubhe/template/101/rooch-template/package.json b/packages/create-dubhe/template/101/rooch-template/package.json
@@ -39,6 +39,7 @@
     "react-dom": "18.1.0",
     "react-select": "^5.4.0",
     "swiper": "^9.2.4",
+    "sonner": "^1.5.0",
     "chalk": "^4.1.2"
   },
   "devDependencies": {

diff --git a/packages/create-dubhe/template/101/rooch-template/scripts/generateAccount.ts b/packages/create-dubhe/template/101/rooch-template/scripts/generateAccount.ts
@@ -24,8 +24,10 @@ async function generateAccount() {
 export const ACCOUNT = '${keypair.getRoochAddress().toHexAddress()}';
 `,
       );
-
-      console.log(`Using existing Account: ${keypair.getRoochAddress().toHexAddress()}`);
+      console.log(`Using existing account:`);
+      console.log(`Rooch Bech32 address: ${keypair.getRoochAddress().toStr()}`);
+      console.log(`Rooch Hex address: ${keypair.getRoochAddress().toHexAddress()}`);
+      console.log(`Bitcoin address: ${keypair.getBitcoinAddress().toStr()}`);
       return;
     }
   } catch (error) {
@@ -49,7 +51,10 @@ export const ACCOUNT = '${keypair.getRoochAddress().toHexAddress()}';
   `,
   );
 
-  console.log(`Generate new Account: ${keypair.getRoochAddress().toHexAddress()}`);
+  console.log(`Generate new Account:`);
+  console.log(`Rooch Bech32 address: ${keypair.getRoochAddress().toStr()}`);
+  console.log(`Rooch Hex address: ${keypair.getRoochAddress().toHexAddress()}`);
+  console.log(`Bitcoin address: ${keypair.getBitcoinAddress().toStr()}`);
 }
 
 generateAccount();
diff --git a/packages/create-dubhe/template/101/rooch-template/src/pages/_app.tsx b/packages/create-dubhe/template/101/rooch-template/src/pages/_app.tsx
@@ -1,9 +1,15 @@
 import 'tailwindcss/tailwind.css';
 import '../css/font-awesome.css';
 import type { AppProps } from 'next/app';
+import { Toaster } from 'sonner';
 
 function MyApp({ Component, pageProps }: AppProps) {
-  return <Component {...pageProps} />;
+  return (
+    <>
+      <Toaster />
+      <Component {...pageProps} />
+    </>
+  );
 }
 
 export default MyApp;
diff --git a/packages/create-dubhe/template/101/rooch-template/src/pages/home/index.tsx b/packages/create-dubhe/template/101/rooch-template/src/pages/home/index.tsx
@@ -1,10 +1,11 @@
-import { loadMetadata, Dubhe, Transaction } from '@0xobelisk/rooch-client';
+import { loadMetadata, Dubhe, Transaction, NetworkType } from '@0xobelisk/rooch-client';
 import { useEffect, useState } from 'react';
 import { useAtom } from 'jotai';
 import { Value } from '../../jotai';
 import { useRouter } from 'next/router';
 import { NETWORK, PACKAGE_ID } from '../../chain/config';
 import { PRIVATEKEY } from '../../chain/key';
+import { toast } from 'sonner';
 
 const Home = () => {
   const router = useRouter();
@@ -43,10 +44,18 @@ const Home = () => {
       if (response.execution_info.status.type == 'executed') {
         setTimeout(async () => {
           await query_counter_value();
+          toast('Transfer Successful', {
+            description: new Date().toUTCString(),
+            action: {
+              label: 'Check in Explorer',
+              onClick: () => window.open(`https://roochscan.io/tx/${response.execution_info.tx_hash}`, '_blank'),
+            },
+          });
           setLoading(false);
         }, 200);
       }
     } catch (error) {
+      toast.error('Transaction failed. Please try again.');
       setLoading(false);
       console.error(error);
     }

diff --git a/packages/create-dubhe/template/101/sui-template/package.json b/packages/create-dubhe/template/101/sui-template/package.json
@@ -41,6 +41,7 @@
     "react-dom": "18.1.0",
     "react-select": "^5.4.0",
     "swiper": "^9.2.4",
+    "sonner": "^1.5.0",
     "chalk": "^4.1.2"
   },
   "devDependencies": {

diff --git a/packages/create-dubhe/template/101/sui-template/src/pages/_app.tsx b/packages/create-dubhe/template/101/sui-template/src/pages/_app.tsx
@@ -1,9 +1,15 @@
 import 'tailwindcss/tailwind.css';
 import '../css/font-awesome.css';
 import type { AppProps } from 'next/app';
+import { Toaster } from 'sonner';
 
 function MyApp({ Component, pageProps }: AppProps) {
-  return <Component {...pageProps} />;
+  return (
+    <>
+      <Toaster />
+      <Component {...pageProps} />
+    </>
+  );
 }
 
 export default MyApp;
diff --git a/packages/create-dubhe/template/101/sui-template/src/pages/home/index.tsx b/packages/create-dubhe/template/101/sui-template/src/pages/home/index.tsx
@@ -1,10 +1,31 @@
-import { loadMetadata, Dubhe, Transaction, TransactionResult, DevInspectResults } from '@0xobelisk/sui-client';
+import {
+  loadMetadata,
+  Dubhe,
+  Transaction,
+  TransactionResult,
+  DevInspectResults,
+  NetworkType,
+} from '@0xobelisk/sui-client';
 import { useEffect, useState } from 'react';
 import { useAtom } from 'jotai';
 import { Value } from '../../jotai';
 import { useRouter } from 'next/router';
 import { Counter_Object_Id, NETWORK, PACKAGE_ID } from '../../chain/config';
 import { PRIVATEKEY } from '../../chain/key';
+import { toast } from 'sonner';
+
+function getExplorerUrl(network: NetworkType, digest: string) {
+  switch (network) {
+    case 'testnet':
+      return `https://explorer.polymedia.app/txblock/${digest}?network=${network}`;
+    case 'mainnet':
+      return `https://suiscan.xyz/tx/${digest}`;
+    case 'devnet':
+      return `https://explorer.polymedia.app/txblock/${digest}?network=${network}`;
+    case 'localnet':
+      return `https://explorer.polymedia.app/txblock/${digest}?network=local`;
+  }
+}
 
 const Home = () => {
   const router = useRouter();
@@ -19,11 +40,10 @@ const Home = () => {
       metadata: metadata,
     });
     const tx = new Transaction();
-    console.log('counterObjectId:', Counter_Object_Id);
     const query_value = (await dubhe.query.counter_schema.get_value(tx, [
       tx.object(Counter_Object_Id),
     ])) as DevInspectResults;
-    console.log(dubhe.view(query_value)[0]);
+    console.log('Counter value:', dubhe.view(query_value)[0]);
     setValue(dubhe.view(query_value)[0]);
   };
 
@@ -43,10 +63,20 @@ const Home = () => {
       if (response.effects.status.status == 'success') {
         setTimeout(async () => {
           await query_counter_value();
+          console.log(response);
+          console.log(response.digest);
+          toast('Transfer Successful', {
+            description: new Date().toUTCString(),
+            action: {
+              label: 'Check in Explorer',
+              onClick: () => window.open(getExplorerUrl(NETWORK, response.digest), '_blank'),
+            },
+          });
           setLoading(false);
         }, 200);
       }
     } catch (error) {
+      toast.error('Transaction failed. Please try again.');
       setLoading(false);
       console.error(error);
     }

diff --git a/packages/create-dubhe/template/101/sui-template/src/pages/index.tsx b/packages/create-dubhe/template/101/sui-template/src/pages/index.tsx
@@ -1,14 +1,12 @@
 import type { NextPage } from 'next';
-import Home from "./home";
+import Home from './home';
 
 const IndexPage: NextPage = () => {
   return (
-      <main>
-          <Home/>
-      </main>
-  )
-}
-
-export default IndexPage
-
+    <main>
+      <Home />
+    </main>
+  );
+};
 
+export default IndexPage;
diff --git a/packages/create-dubhe/template/nextjs/sui-template/package.json b/packages/create-dubhe/template/nextjs/sui-template/package.json
@@ -43,6 +43,7 @@
     "react-dom": "18.1.0",
     "react-select": "^5.4.0",
     "swiper": "^9.2.4",
+    "sonner": "^1.5.0",
     "chalk": "^4.1.2"
   },
   "devDependencies": {

diff --git a/packages/create-dubhe/template/nextjs/sui-template/src/pages/_app.tsx b/packages/create-dubhe/template/nextjs/sui-template/src/pages/_app.tsx
@@ -2,6 +2,7 @@ import 'tailwindcss/tailwind.css';
 import type { AppProps } from 'next/app';
 import '../css/font-awesome.css';
 import '@mysten/dapp-kit/dist/index.css';
+import { Toaster } from 'sonner';
 
 import { createNetworkConfig, SuiClientProvider, WalletProvider } from '@mysten/dapp-kit';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
@@ -15,13 +16,15 @@ const { networkConfig } = createNetworkConfig({
   testnet: { url: getFullnodeUrl('testnet') },
   mainnet: { url: getFullnodeUrl('mainnet') },
 });
+
 const queryClient = new QueryClient();
 
 function MyApp({ Component, pageProps }: AppProps) {
   return (
     <QueryClientProvider client={queryClient}>
       <SuiClientProvider networks={networkConfig} defaultNetwork={NETWORK}>
         <WalletProvider>
+          <Toaster />
           <Component {...pageProps} />
         </WalletProvider>
       </SuiClientProvider>

diff --git a/packages/create-dubhe/template/nextjs/sui-template/src/pages/home/index.tsx b/packages/create-dubhe/template/nextjs/sui-template/src/pages/home/index.tsx
@@ -1,11 +1,24 @@
-import { loadMetadata, Dubhe, Transaction, DevInspectResults } from '@0xobelisk/sui-client';
+import { loadMetadata, Dubhe, Transaction, DevInspectResults, NetworkType } from '@0xobelisk/sui-client';
 import { useEffect, useState } from 'react';
 import { useAtom } from 'jotai';
 import { Value } from '../../jotai';
 import { useRouter } from 'next/router';
 import { Counter_Object_Id, NETWORK, PACKAGE_ID } from '../../chain/config';
 import { ConnectButton, useCurrentWallet, useSignAndExecuteTransaction, useCurrentAccount } from '@mysten/dapp-kit';
+import { toast } from 'sonner';
 
+function getExplorerUrl(network: NetworkType, digest: string) {
+  switch (network) {
+    case 'testnet':
+      return `https://explorer.polymedia.app/txblock/${digest}?network=${network}`;
+    case 'mainnet':
+      return `https://suiscan.xyz/tx/${digest}`;
+    case 'devnet':
+      return `https://explorer.polymedia.app/txblock/${digest}?network=${network}`;
+    case 'localnet':
+      return `https://explorer.polymedia.app/txblock/${digest}?network=local`;
+  }
+}
 /**
  * Home component for the counter application
  * Manages the counter state, user balance, and interactions with the Sui blockchain
@@ -32,7 +45,6 @@ const Home: React.FC = () => {
         metadata: metadata,
       });
       const tx = new Transaction();
-      console.log('Counter Object ID:', Counter_Object_Id);
       const queryValue = (await dubhe.query.counter_schema.get_value(tx, [
         tx.object(Counter_Object_Id),
       ])) as DevInspectResults;
@@ -77,16 +89,24 @@ const Home: React.FC = () => {
           chain: `sui:${NETWORK}`,
         },
         {
-          onSuccess: async () => {
+          onSuccess: async result => {
             // Wait for a short period before querying the latest data
             setTimeout(async () => {
               await queryCounter();
               await getBalance();
+              toast('Transfer Successful', {
+                description: new Date().toUTCString(),
+                action: {
+                  label: 'Check in Explorer',
+                  onClick: () => window.open(getExplorerUrl(NETWORK, result.digest), '_blank'),
+                },
+              });
               setLoading(false);
             }, 2000); // Wait for 2 seconds before querying, adjust as needed
           },
           onError: error => {
             console.error('Transaction failed:', error);
+            toast.error('Transaction failed. Please try again.');
             setLoading(false);
           },
         },