added utils tab and random key generator

src/App.js

@@ -8,6 +8,7 @@ import Cip30Tab from './components/tabs/subtabs/cip30Tab'
 import Cip95Tab from './components/tabs/subtabs/cip95Tab'
 import Cip95TabTools from './components/tabs/subtabs/cip95ToolsTab'
 import NFTTab from './components/tabs/subtabs/NFTTab'
+import UtilsTab from './components/tabs/subtabs/utilsTab';
 
 const App = () => {
   const {connectionState} = useYoroi()
@@ -40,6 +41,11 @@ const App = () => {
       value: 'nfts',
       children: <NFTTab />,
     },
+    {
+      label: 'Utils',
+      value: 'utils',
+      children: <UtilsTab />,
+    },
   ]
 
   return (

src/components/cards/apiCardWithModal.js

@@ -2,7 +2,7 @@ import React from 'react'
 import Popup from 'reactjs-popup'
 
 export const ApiCardWithModal = (props) => {
-  const {buttonLabel, clickFunction, halfOpacity, children} = props
+  const {buttonLabel, submitButtonLabel, clickFunction, halfOpacity, children} = props
 
   const handleActionAndClose = (closeFunc) => {
     console.log(`[dApp][ApiCardWithModal][${buttonLabel}] is called`)
@@ -54,7 +54,7 @@ export const ApiCardWithModal = (props) => {
                   handleActionAndClose(close)
                 }}
               >
-                Send
+                {submitButtonLabel || 'Send'}
               </button>
             </div>
           </div>

src/components/cards/createRandomKeyCard.js

@@ -0,0 +1,33 @@
+import React from 'react'
+import ApiCard from './apiCard'
+
+const CreateRandomKeyPart = ({wasm, onResponse, onWaiting}) => {
+
+  const clickFunction = () => {
+    onWaiting(true)
+    try {
+      const wasmSK = wasm.Bip32PrivateKey.generate_ed25519_bip32();
+      const wasmPK = wasmSK.to_public();
+      const hash = wasmPK.to_raw_key().hash();
+      const cred = wasm.Credential.from_keyhash(hash);
+      const mainnetAddress = wasm.EnterpriseAddress.new(1, cred).to_address().to_bech32();
+      const testnetAddress = wasm.EnterpriseAddress.new(0, cred).to_address().to_bech32();
+      onResponse({
+        privateKeyHex: wasmSK.to_raw_key().to_hex(),
+        publicKeyHex: wasmPK.to_raw_key().to_hex(),
+        pubKeyHash: hash.to_hex(),
+        mainnetAddress,
+        testnetAddress,
+      });
+    } finally {
+      onWaiting(false);
+    }
+  }
+
+  return <ApiCard
+    apiName="Random Key"
+    clickFunction={clickFunction}
+  />
+}
+
+export default CreateRandomKeyPart

src/components/tabs/subtabs/utilsTab.js

@@ -0,0 +1,52 @@
+import React, {useState} from 'react'
+import useYoroi from '../../../hooks/yoroiProvider'
+import useWasm from '../../../hooks/useWasm'
+import ExperimentalPart from './experimentalPart'
+import ResponsesPart from './responsesPart'
+import OfficialPart from './officialPart'
+import {CONNECTED} from '../../../utils/connectionStates'
+import IsEnabledCard from '../../cards/isEnabledCard';
+import GetNetworkIdCard from '../../cards/getNetworkIdCard';
+import GetExtensionsCard from '../../cards/getExtensionsCard';
+import GetBalanceCard from '../../cards/getBalanceCard';
+import GetUnusedAddressesCard from '../../cards/getUnusedAddressCard';
+import GetUsedAddresses from '../../cards/getUsedAddressCard';
+import GetChangeAddressCard from '../../cards/getChangeAddressCard';
+import GetRewardAddressesCard from '../../cards/getRewardAddressesCard';
+import GetUtxosCard from '../../cards/getUtxosCard';
+import GetCollateralUtxosCard from '../../cards/getCollateralUtxosCard';
+import SignDataCard from '../../cards/signDataCard';
+import BuildTransactionCard from '../../cards/buildTransactionCard';
+import SignTransactionCard from '../../cards/signTransactionCard';
+import SubmitTransactionCard from '../../cards/submitTransactionCard';
+import CreateRandomKeyCard from '../../cards/createRandomKeyCard';
+
+const UtilsTab = () => {
+  const {api} = useYoroi()
+  const wasm = useWasm()
+  const [currentText, setCurrentText] = useState('')
+  const [rawCurrentText, setRawCurrentText] = useState('')
+  const [waiterState, setWaiterState] = useState(false)
+
+  const setResponse = (response, stringifyIt = true) => {
+    setCurrentText(stringifyIt ? JSON.stringify(response, undefined, 2) : response)
+  }
+
+  return (
+    <div className="py-5 px-5 text-gray-300">
+      <div className="grid grid-cols-3 gap-2">
+        <div className="grid justify-items-stretch grid-cols-1 lg:grid-cols-2 gap-2">
+          <div>
+            <CreateRandomKeyCard
+              wasm={wasm}
+              onResponse={setResponse}
+              onWaiting={setWaiterState} />
+          </div>
+        </div>
+        <ResponsesPart rawCurrentText={rawCurrentText} currentText={currentText} currentWaiterState={waiterState} />
+      </div>
+    </div>
+  )
+}
+
+export default UtilsTab