Merge pull request #11 from Emurgo/denis/yoext-964

Tabs for gov actions

src/App.js

@@ -4,6 +4,10 @@ import MainTab from './components/tabs/mainTab'
 import TabsComponent from './components/tabs/tabsComponent'
 import useYoroi from './hooks/yoroiProvider'
 import {CONNECTED, NO_CARDANO} from './utils/connectionStates'
+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'
 
 const App = () => {
   const {connectionState} = useYoroi()
@@ -15,11 +19,34 @@ const App = () => {
     isNotCardanoWallet,
   }
 
+  const data = [
+    {
+      label: 'CIP-30',
+      value: 'cip30',
+      children: <Cip30Tab />,
+    },
+    {
+      label: 'CIP-95',
+      value: 'cip95',
+      children: <Cip95Tab />,
+    },
+    {
+      label: 'CIP-95 Tools',
+      value: 'cip95Tools',
+      children: <Cip95TabTools />,
+    },
+    {
+      label: 'NFTs',
+      value: 'nfts',
+      children: <NFTTab />,
+    },
+  ]
+
   return (
     <div className="min-h-screen bg-gray-800">
       <AccessButton />
       <MainTab {...mainTabProps} />
-      <TabsComponent />
+      <TabsComponent tabsData={data} />
     </div>
   )
 }

src/components/cards/govToolsPanel.js

@@ -0,0 +1,29 @@
+import React from 'react'
+import {ModalWindowContent} from '../ui-constants'
+
+const GovToolsPanel = (props) => {
+  const {certLabel, clickFunction, children} = props
+  const handleAction = () => {
+    console.log(`[dApp][GovToolsPanel][${certLabel}] Building the certificate is called`)
+    // action here
+    clickFunction()
+  }
+
+  return (
+    <div className={ModalWindowContent.contentPadding}>
+      {children}
+      <div className="flex">
+        <div className="flex-auto mt-5">
+          <button
+            className="w-full py-1 rounded-md text-xl text-white font-semibold bg-orange-700 hover:bg-orange-800 active:bg-orange-500"
+            onClick={handleAction}
+          >
+            Build Cert
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default GovToolsPanel

src/components/cards/voteDelegation.js → src/components/cards/voteDelegationPanel.js

@@ -1,6 +1,4 @@
 import React, {useState} from 'react'
-import ApiCardWithModal from './apiCardWithModal'
-import {ModalWindowContent} from '../ui-constants'
 import InputWithLabel from '../inputWithLabel'
 import {
   getCertOfNewVoteDelegation,
@@ -11,8 +9,9 @@ import {
   getDRepNoConfidence,
   getVoteDelegCert,
 } from '../../utils/cslTools'
+import GovToolsPanel from './govToolsPanel'
 
-const VoteDelationCard = ({api, wasm, onWaiting, onError, getters, setters}) => {
+const VoteDelegationPanel = ({api, wasm, onWaiting, onError, getters, setters}) => {
   const [currentTarget, setTarget] = useState('')
   const [currentStake, setStake] = useState('')
   const {currentDRepIdBech32, currentRegPubStakeKey, currentUnregPubStakeKey, getCertBuilder} = getters
@@ -28,7 +27,9 @@ const VoteDelationCard = ({api, wasm, onWaiting, onError, getters, setters}) =>
         return getCslCredentialFromBech32(wasm, input)
       } catch (err2) {
         onWaiting(false)
-        console.error(`Error in parsing credential, not Hex or Bech32: ${JSON.stringify(err1)}, ${JSON.stringify(err2)}`)
+        console.error(
+          `Error in parsing credential, not Hex or Bech32: ${JSON.stringify(err1)}, ${JSON.stringify(err2)}`,
+        )
         onError()
         return null
       }
@@ -83,31 +84,29 @@ const VoteDelationCard = ({api, wasm, onWaiting, onError, getters, setters}) =>
     }
   }
 
-  const apiProps = {
-    buttonLabel: 'voteDelegation',
+  const panelProps = {
+    certLabel: 'voteDelegation',
     clickFunction: buildVoteDelegationCert,
   }
 
   return (
-    <ApiCardWithModal {...apiProps}>
-      <div className={ModalWindowContent.contentPadding}>
-        <InputWithLabel
-          inputName="Target of vote delegation | abstain | no confidence"
-          inputValue={currentDRepIdBech32}
-          onChangeFunction={(event) => {
-            setTarget(event.target.value)
-          }}
-        />
-        <InputWithLabel
-          inputName="Stake credential"
-          inputValue={currentRegPubStakeKey.length > 0 ? currentRegPubStakeKey: currentUnregPubStakeKey}
-          onChangeFunction={(event) => {
-            setStake(event.target.value)
-          }}
-        />
-      </div>
-    </ApiCardWithModal>
+    <GovToolsPanel {...panelProps}>
+      <InputWithLabel
+        inputName="Target of vote delegation | abstain | no confidence"
+        inputValue={currentDRepIdBech32}
+        onChangeFunction={(event) => {
+          setTarget(event.target.value)
+        }}
+      />
+      <InputWithLabel
+        inputName="Stake credential"
+        inputValue={currentRegPubStakeKey.length > 0 ? currentRegPubStakeKey : currentUnregPubStakeKey}
+        onChangeFunction={(event) => {
+          setStake(event.target.value)
+        }}
+      />
+    </GovToolsPanel>
   )
 }
 
-export default VoteDelationCard
+export default VoteDelegationPanel

src/components/tabs/subtabs/cip95AdditionalPart.js

@@ -1,6 +1,9 @@
 import React, {useState} from 'react'
-import VoteDelationCard from '../../cards/voteDelegation'
 import {getCertificateBuilder} from '../../../utils/cslTools'
+import TabsComponent from '../tabsComponent'
+import GovBasicFunctionsTab from './govBasicFunctionsTab'
+import GovActionsTab from './govActionsTab'
+import ConstitCommCertsTab from './constitCommCertsTab'
 
 const Cip95AdditionalPart = ({api, wasm, onWaiting, onError, getters, setters}) => {
   const [currentCertsInTx, setCertInTx] = useState([])
@@ -27,18 +30,35 @@ const Cip95AdditionalPart = ({api, wasm, onWaiting, onError, getters, setters})
   const newGetters = Object.assign(getters, {currentCertsInTx, getCertBuilder})
   const newSetters = Object.assign(setters, {handleAddingCertInTx})
 
-  return (
-    <div className="grid justify-items-stretch grid-cols-1 lg:grid-cols-5 gap-2">
-      <div>
-        <VoteDelationCard
+  const data = [
+    {
+      label: 'Governance Basic Functions',
+      value: 'govBasicFuncs',
+      children: (
+        <GovBasicFunctionsTab
           api={api}
           wasm={wasm}
           onWaiting={onWaiting}
           onError={onError}
           getters={newGetters}
           setters={newSetters}
         />
-      </div>
+      ),
+    },
+    {
+      label: 'Governance Actions',
+      value: 'govActions',
+      children: <GovActionsTab />,
+    },
+    {
+      label: 'Constitutional Commitee Certs',
+      value: 'ccCerts',
+      children: <ConstitCommCertsTab />,
+    },
+  ]
+  return (
+    <div className="block rounded-lg border bg-gray-900 border-gray-700">
+      <TabsComponent tabsData={data} />
     </div>
   )
 }

src/components/tabs/subtabs/cip95ToolsTab.js

@@ -29,7 +29,7 @@ const Cip95TabTools = () => {
   // Unregistered public stake key
   const [currentUnregPubStakeKey, setUnregPubStakeKey] = useState('')
 
-  const showWarning = () =>{
+  const showWarning = () => {
     setErrorState(true)
     setTimeout(() => setErrorState(false), 3000)
   }
@@ -72,14 +72,23 @@ const Cip95TabTools = () => {
             {/* info panel here */}
             <InfoPanel getters={getters} />
           </div>
+          {/* Info and error message is here */}
           <div className="grid justify-items-center content-end h-12 text-2xl">
             <label className="text-white">{currentWaiterState ? 'Waiting ...' : ''}</label>
             <label className="text-red-500">
               {currentErrorState ? 'An error has happend. Please check logs.' : ''}
             </label>
           </div>
+          {/* Tabs with gov. actions */}
           <div>
-            <Cip95AdditionalPart api={api} wasm={wasm} onWaiting={setWaiterState} onError={showWarning} getters={getters} setters={setters} />
+            <Cip95AdditionalPart
+              api={api}
+              wasm={wasm}
+              onWaiting={setWaiterState}
+              onError={showWarning}
+              getters={getters}
+              setters={setters}
+            />
           </div>
         </div>
       ) : (

src/components/tabs/subtabs/constitCommCertsTab.js

@@ -0,0 +1,25 @@
+import React from 'react'
+import TabsComponent from '../tabsComponent'
+
+const ConstitCommCertsTab = () => {
+  const data = [
+    {
+      label: 'Authorize CC Hot Credential',
+      value: 'authHotCred',
+      children: <></>,
+    },
+    {
+      label: 'Resign CC Cold Credential',
+      value: 'resignColdCredential',
+      children: <></>,
+    },
+  ]
+
+  return (
+    <div className="mt-2">
+      <TabsComponent tabsData={data} />
+    </div>
+  )
+}
+
+export default ConstitCommCertsTab

src/components/tabs/subtabs/govActionsTab.js

@@ -0,0 +1,45 @@
+import React from 'react'
+import TabsComponent from '../tabsComponent'
+
+const GovActionsTab = () => {
+  const data = [
+    {
+      label: 'Motion of no-confidence',
+      value: 'motionNoConfidence',
+      children: <></>,
+    },
+    {
+      label: 'Update Cons. Committe',
+      value: 'updConsComm',
+      children: <></>,
+    },
+    {
+      label: 'Update Constitution',
+      value: 'updConstitution',
+      children: <></>,
+    },
+    {
+      label: 'Hard-Fork Initation',
+      value: 'hfInit',
+      children: <></>,
+    },
+    {
+      label: 'Treasury Withdrawal',
+      value: 'treasuryWithdrawal',
+      children: <></>,
+    },
+    {
+      label: 'Info Action',
+      value: 'infoAct',
+      children: <></>,
+    },
+  ]
+
+  return (
+    <div className="mt-2">
+      <TabsComponent tabsData={data} />
+    </div>
+  )
+}
+
+export default GovActionsTab

src/components/tabs/subtabs/govBasicFunctionsTab.js

@@ -0,0 +1,60 @@
+import React from 'react'
+import TabsComponent from '../tabsComponent'
+import VoteDelegationPanel from '../../cards/voteDelegationPanel'
+
+const GovBasicFunctionsTab = ({api, wasm, onWaiting, onError, getters, setters}) => {
+  const data = [
+    {
+      label: 'Vote Delegation',
+      value: 'voteDeleg',
+      children: (
+        <VoteDelegationPanel
+          api={api}
+          wasm={wasm}
+          onWaiting={onWaiting}
+          onError={onError}
+          getters={getters}
+          setters={setters}
+        />
+      ),
+    },
+    {
+      label: 'DRep Registration',
+      value: 'drepReg',
+      children: <></>,
+    },
+    {
+      label: 'DRep Update',
+      value: 'drepUpdate',
+      children: <></>,
+    },
+    {
+      label: 'DRep Retirement',
+      value: 'drepRet',
+      children: <></>,
+    },
+    {
+      label: 'Vote',
+      value: 'vote',
+      children: <></>,
+    },
+    {
+      label: 'Register Stake Key',
+      value: 'regStakeKey',
+      children: <></>,
+    },
+    {
+      label: 'Unregister Stake Key',
+      value: 'unregStakeKey',
+      children: <></>,
+    },
+  ]
+
+  return (
+    <div className="mt-2">
+      <TabsComponent tabsData={data} />
+    </div>
+  )
+}
+
+export default GovBasicFunctionsTab