Fix tabs and add staking key hex

vacuumlabs · Nov 24, 2020 · 22b4390 · 22b4390
1 parent 0da8fca
commit 22b4390
Show file tree

Hide file tree

Showing 5 changed files with 71 additions and 19 deletions.
diff --git a/app/frontend/components/pages/advanced/keys.tsx b/app/frontend/components/pages/advanced/keys.tsx
@@ -2,17 +2,49 @@ import {Fragment, h} from 'preact'
 import {connect} from '../../../libs/unistore/preact'
 import actions from '../../../actions'
 
-const Keys = ({pool, nearestReward, currentDelegationReward}) => {
-  return <Fragment>lol</Fragment>
+const Keys = ({stakePubKeyHex, stakePubKeyAddress}) => {
+  console.log(stakePubKeyHex)
+  return (
+    <div className="card">
+      <h2 className="card-title small-margin">Keys</h2>
+      <div className="current-delegation-wrapper">
+        <b>Staking public key hex:</b>
+        {/* <div className="current-delegation-id">{pool.poolHash}</div>
+        <div className="current-delegation-id">Ticker: {pool.ticker || ''}</div>
+        <div className="current-delegation-id">Tax: {pool.margin * 100 || ''}%</div>
+        <div className="current-delegation-id">
+          Fixed cost: {printAda(parseInt(pool.fixedCost, 10) as Lovelace)}
+        </div>
+        <div className="current-delegation-id">
+          {'Homepage: '}
+          <a href={pool.homepage}>{pool.homepage}</a>
+        </div>
+        <div className="current-delegation-id">
+          {'View on '}
+          <a
+            className="transaction-address"
+            href={`https://cardanoscan.io/pool/${pool.poolHash}`}
+          >
+            CardanoScan
+              </a>
+        </div>
+        <div className="current-delegation-id">
+          Next reward:{' '}
+          <EpochDateTime
+            epoch={currentDelegationReward.distributionEpoch}
+            dateTime={new Date(currentDelegationReward.rewardDate)}
+          />
+        </div> */}
+      </div>
+      {stakePubKeyHex}
+    </div>
+  )
 }
 
 export default connect(
   (state) => ({
-    pool: state.shelleyAccountInfo.delegation,
-    delegationValidationError: state.delegationValidationError,
-    calculatingDelegationFee: state.calculatingDelegationFee,
-    nearestReward: state.shelleyAccountInfo.rewardDetails.nearest,
-    currentDelegationReward: state.shelleyAccountInfo.rewardDetails.currentDelegation,
+    stakePubKeyHex: state.shelleyAccountInfo.stakePubKeyHex,
+    stakePubKeyAddress: state.shelleyAccountInfo.accountPubkeyHex,
   }),
   actions
 )(Keys)
diff --git a/app/frontend/components/pages/dashboard/dashboardPage.tsx b/app/frontend/components/pages/dashboard/dashboardPage.tsx
@@ -61,6 +61,9 @@ const AdvancedPage = () => {
       <div className="dashboard-column">
         <Keys />
       </div>
+      <div className="dashboard-column">
+        <div />
+      </div>
     </Fragment>
   )
 }
@@ -102,7 +105,7 @@ class DashboardPage extends Component<Props> {
     const displayedSubPages = {
       Sending: <Balance />,
       Staking: <ShelleyBalances />,
-      Advanced: <Keys />,
+      Advanced: <div />,
     }
     return (
       <div className="page-wrapper">
@@ -135,7 +138,7 @@ class DashboardPage extends Component<Props> {
   }
 }
 
-class DashboardMobileContent extends Component<Props> {
+class DashboardMobileContent extends Component<Props, {selectedSubTab}> {
   constructor(props) {
     super(props)
     const selectedSubTabs = {
@@ -148,8 +151,10 @@ class DashboardMobileContent extends Component<Props> {
     }
     this.selectSubTab = this.selectSubTab.bind(this)
   }
-  selectSubTab(name, state) {
-    this.setState({selectedSubTab: name})
+  selectSubTab(name) {
+    if (this.state.selectedSubTab !== name) {
+      this.setState({selectedSubTab: name})
+    }
   }
   pages = {
     'Delegate ADA': DelegatePage,
@@ -164,18 +169,21 @@ class DashboardMobileContent extends Component<Props> {
   sendingTabs = ['Send ADA', 'Transactions', 'Recieve ADA']
   advancedTabs = ['Keys']
   render({displayStakingPage}, {selectedSubTab}) {
-    // if (displayStakingPage === 'Sending' && stakingTabs.includes(selectedSubTab)) {
-    //   this.selectSubTab('Delegate ADA')
-    // }
-    // if (displayStakingPage === 'Staking' && sendingTabs.includes(selectedSubTab)) {
-    //   this.selectSubTab('Transactions')
-    // }
-    const Page = this.pages[selectedSubTab]
     const tabs = {
       Sending: this.sendingTabs,
       Staking: this.stakingTabs,
       Advanced: this.advancedTabs,
     }
+    if (displayStakingPage === 'Sending') {
+      this.selectSubTab('Delegate ADA')
+    }
+    if (displayStakingPage === 'Staking') {
+      this.selectSubTab('Transactions')
+    }
+    if (displayStakingPage === 'Advanced') {
+      this.selectSubTab('Keys')
+    }
+    const Page = this.pages[selectedSubTab]
     return (
       <div className="dashboard-content">
         <ul className="dashboard-tabs">

diff --git a/app/frontend/state.ts b/app/frontend/state.ts
@@ -123,6 +123,7 @@ export interface State {
   gettingPoolInfo: boolean
   shelleyAccountInfo?: {
     accountPubkeyHex: string
+    stakePubKeyHex: string
     currentEpoch: number
     delegation: any
     hasStakingKey: boolean
@@ -226,6 +227,7 @@ const initialState: State = {
   },
   shelleyAccountInfo: {
     accountPubkeyHex: '',
+    stakePubKeyHex: '',
     currentEpoch: 0,
     delegation: {},
     hasStakingKey: false,

diff --git a/app/frontend/wallet/shelley-wallet.ts b/app/frontend/wallet/shelley-wallet.ts
@@ -6,6 +6,7 @@ import NamedError from '../helpers/NamedError'
 import {Lovelace} from '../state'
 import {
   stakeAccountPubkeyHex,
+  stakePubKey,
   ShelleyStakingAccountProvider,
   ShelleyBaseAddressProvider,
 } from './shelley/shelley-address-provider'
@@ -341,6 +342,7 @@ const ShelleyWallet = ({
     const {validStakepools} = await getValidStakepools()
     const {stakingBalance, nonStakingBalance, balance} = await getBalance()
     const shelleyAccountInfo = await getAccountInfo(validStakepools)
+    console.log(shelleyAccountInfo, shelleyAccountInfo.stakePubKeyHex)
     const visibleAddresses = await getVisibleAddresses()
     const transactionHistory = await getHistory()
     const stakingHistory = await getStakingHistory(shelleyAccountInfo, validStakepools)
@@ -356,6 +358,7 @@ const ShelleyWallet = ({
         stakingBalance: stakingBalance + shelleyAccountInfo.value,
         rewardsAccountBalance: shelleyAccountInfo.value,
       },
+      stakePubkeyHex: shelleyAccountInfo.stakePubKeyHex,
       shelleyAccountInfo,
       transactionHistory,
       stakingHistory,
@@ -392,6 +395,7 @@ const ShelleyWallet = ({
   }
 
   async function getAccountInfo(validStakepools) {
+    const stakePubKeyHex = await stakePubKey(cryptoProvider, accountIndex)
     const accountPubkeyHex = await stakeAccountPubkeyHex(cryptoProvider, accountIndex)
     const {nextRewardDetails, ...accountInfo} = await blockchainExplorer.getAccountInfo(
       accountPubkeyHex
@@ -406,6 +410,7 @@ const ShelleyWallet = ({
 
     return {
       accountPubkeyHex,
+      stakePubKeyHex,
       ...accountInfo,
       delegation: {
         ...accountInfo.delegation,

diff --git a/app/frontend/wallet/shelley/shelley-address-provider.ts b/app/frontend/wallet/shelley/shelley-address-provider.ts
@@ -31,7 +31,12 @@ export const stakeAccountPubkeyHex = async (cryptoProvider, accountIndex: number
   return accountHexAddressFromXpub(stakeXpub, cryptoProvider.network.networkId)
 }
 
-// TODO: this is probably useless
+export const stakePubKey = async (cryptoProvider, accountIndex: number) => {
+  const pathStake = shelleyStakeAccountPath(accountIndex)
+  const stakeXpub = (await cryptoProvider.deriveXpub(pathStake)).slice(0, 32)
+  return stakeXpub.toString('hex')
+}
+
 export const ShelleyStakingAccountProvider = (cryptoProvider, accountIndex) => async () => {
   const pathStake = shelleyStakeAccountPath(accountIndex)
   const stakeXpub = await cryptoProvider.deriveXpub(pathStake)