Merge pull request #493 from sudoblockio/bugs

chore: bonding dropdown
sudoblockio · Sep 18, 2024 · f94fb43 · f94fb43
2 parents d9934e4 + 9b34703
commit f94fb43
Show file tree

Hide file tree

Showing 7 changed files with 62 additions and 20 deletions.
diff --git a/src/components/AddressesPage/AddressDetailPage/AddressTabs/index.js b/src/components/AddressesPage/AddressDetailPage/AddressTabs/index.js
@@ -19,6 +19,7 @@ import {
     addressInternalTxList,
 } from '../../../../redux/store/addresses'
 import { getBondList, getBonders, getDelegation } from '../../../../redux/store/iiss'
+import { findTabIndex } from '../../../../utils/utils'
 
 function AddressTabs(props) {
     const [bondList, setBondList] = useState('')
@@ -45,11 +46,10 @@ function AddressTabs(props) {
         addressVoted,
         addressReward,
     } = props
+
+    // console.log("Address tabs props", props)
     const { loading, data } = wallet
     const { address } = data
-    console.log('walletAddress and address')
-    console.log(walletAddress)
-    console.log(address)
 
     let bondObj = {}
     const getEachBond = async (addr) => {
@@ -242,6 +242,25 @@ function AddressTabs(props) {
         listBonders()
     }, [props.match.params.addressId])
 
+    const [isBondingModalOpen, setIsBondingModalOpen] = useState(false);
+
+    useEffect(() => {
+        if (!Array.isArray(props.TABS)) {
+            return;
+        }
+
+
+        const params = new URLSearchParams(props.location.search);
+        const isBonding = params.get("isBonding") === "true";
+        setIsBondingModalOpen(isBonding)
+
+        if (isBonding) {
+            const index = findTabIndex(props.TABS, "#bonded")
+            setActiveTabIndex(index);
+        }
+
+    }, [props.location.search, props.TABS])
+
     return (
         <TabTable2
             {...props}
@@ -329,6 +348,7 @@ function AddressTabs(props) {
                                 address={address}
                                 wallet={wallet}
                                 walletAddress={walletAddress}
+                                isBondingModalOpen={isBondingModalOpen}
                             />
                         )
                     case ADDRESS_TABS[7]:

diff --git a/src/components/CommonComponent/TxBottom/TxBottomComponent.js b/src/components/CommonComponent/TxBottom/TxBottomComponent.js
@@ -1,8 +1,8 @@
-import React, { useState, Component } from 'react'
+import React, { useState, Component, useEffect } from 'react'
 import { withRouter } from 'react-router-dom'
 import TxBottomTitle from './TxBottomTitle'
 import { TxTableHead, TxTableBody, LoadingComponent, NoBox } from '../../../components'
-import { getBondList } from '../../../redux/store/iiss'
+// import { getBondList } from '../../../redux/store/iiss'
 import BondersModal from '../../BondersUpdateModal/bondersUpdateModal'
 import BondedModal from '../../BondUpdateModal/bondUpdateModal'
 import customStyles from './TxBottomComponent.module.css'
@@ -22,9 +22,11 @@ class TxBottomComponent extends Component {
             onClickTab,
             wallet,
             walletAddress,
+            isBondingModalOpen
         } = this.props
         const { data, listSize, totalSize, loading } = txData
 
+
         let totalCount = txData.headers ? txData.headers['x-total-count'] : 0
 
         let tableBodyData
@@ -54,6 +56,8 @@ class TxBottomComponent extends Component {
                             address={this.props.address}
                             walletAddress={this.props.walletAddress}
                             wallet={wallet}
+                            isBondingModalOpen={isBondingModalOpen}
+
                         />
                         <div className="table-box">
                             <table className={tableClassName}>
@@ -162,6 +166,7 @@ function CustomHeader({
     address,
     walletAddress,
     wallet,
+    isBondingModalOpen
 }) {
     const [isBondersModalOpen, setIsBondersModalOpen] = useState(false)
     const [isBondedModalOpen, setIsBondedModalOpen] = useState(false)
@@ -185,6 +190,12 @@ function CustomHeader({
     function closeBondedModal() {
         setIsBondedModalOpen(false)
     }
+
+    useEffect(() => {
+        console.log({ isBondingModalOpen })
+        setIsBondedModalOpen(isBondingModalOpen)
+    }, [isBondingModalOpen])
+
     return (
         <>
             <BondersModal

diff --git a/src/components/CommonComponent/TxBottom/index.js b/src/components/CommonComponent/TxBottom/index.js
@@ -7,10 +7,13 @@ class TxBottom extends Component {
         const { txData, goAllTx, txType, address, tokenTotal, onClickTab, wallet, walletAddress } =
             this.props
 
+
         const tableClassName = TX_TYPE_DATA[txType] ? TX_TYPE_DATA[txType]['className'] : ''
 
         const noBoxText = TX_TYPE_DATA[txType] ? TX_TYPE_DATA[txType]['noBoxText'] : ''
 
+        console.log("props in txBottom", this.props);
+
         return (
             <TxBottomComponent
                 noBorder={true}
@@ -26,6 +29,7 @@ class TxBottom extends Component {
                 bondMap={this.props.bondMap ? this.props.bondMap : ''}
                 onClickTab={onClickTab}
                 walletAddress={walletAddress}
+                isBondingModalOpen={this.props.isBondingModalOpen}
             />
         )
     }

diff --git a/src/components/CommonPage/DetailPage.js b/src/components/CommonPage/DetailPage.js
@@ -12,8 +12,8 @@ class DetailPage extends Component {
 
     componentDidMount() {
         this.setInitialData(this.props.url)
-    }
 
+    }
     componentWillReceiveProps(nextProps) {
         const url = this.props.url
         const urlNext = nextProps.url
@@ -33,16 +33,22 @@ class DetailPage extends Component {
             const { hash: nextHash } = locationObjNext
             const { TABS: currentTabs } = this.props
             const { TABS: nextTabs } = nextProps
+
+
+
             if (currentHash !== nextHash || currentTabs.length !== nextTabs.length) {
                 this.setTab(findTabIndex(nextTabs, nextHash))
             }
         }
     }
 
+
+
     setInitialData = (url) => {
         const locationObj = Object.keys(url).includes('location') ? url.location : url
         const { pathname, hash } = locationObj
         const query = pathname.split('/')[2]
+
         if (query) {
             const { TABS } = this.props
             this.props.getInfo(query)
@@ -97,15 +103,15 @@ class DetailPage extends Component {
         const { loading, error, pending } = this.props
         const isNotFoundPage = !loading && error !== '' && !isHxAddress(error) && !pending
 
+        console.log("Detail Page", this.state)
+
         const Content = () => {
             if (pending) {
                 return <PendingPage error={error} />
             } else if (isNotFoundPage) {
                 return <NotFoundPage error={error} />
             } else {
                 const { InfoComponent, TabsComponent } = this.props
-                console.log(this.props, 'the props detail page')
-
                 return (
                     <div className="content-wrap">
                         <InfoComponent {...this.props} />

diff --git a/src/components/Header/Connect.js b/src/components/Header/Connect.js
@@ -151,15 +151,11 @@ function Connect(props) {
             </span>
             {walletAddress ? (
                 <div className={clsx("sub-menu", style.dropdown)} >
-                    <p className={style.top}>
+                    <p className={style.top} onClick={() => {
+                        props.history.push(`/address/${walletAddress}`)
+                    }}>
                         <span className={style.caption}>My Address</span>
-                        <span className={style.value}
-                            onClick={() => {
-                                props.history.push(`/address/${walletAddress}`)
-                            }}
-                        >
-                            {walletAddress}
-                        </span>
+                        <span className={style.value}>{walletAddress}</span>
 
                         {/* <CopyButton data={walletAddress} title={'Copy Address'} wallet={true} /> */}
                     </p>
@@ -175,6 +171,11 @@ function Connect(props) {
                         }}>
                             <MdHowToVote size={17} /> Voting
                         </button>
+                        <button onClick={() => {
+                            props.history.push(`/address/${walletAddress}?isBonding=true`)
+                        }}>
+                            <MdHowToVote size={17} /> Bonding
+                        </button>
                         <button onClick={disconnect}> <IoLogOutOutline size={17} /> Disconnect</button>
                     </div>
 

diff --git a/src/components/LoginComponent/LoginModal/LoginModal.js b/src/components/LoginComponent/LoginModal/LoginModal.js
@@ -205,12 +205,12 @@ function LoginSelectionModal({ isOpen, closeModal, handleLedgerLogin, handleLogi
                         <span className={styles.bodySectionItemImg}>
                             <img alt="" src={hanaImg} />
                         </span>
-                        <span className={styles.bodySectionItemImg}>
+                        {/* <span className={styles.bodySectionItemImg}>
                             <img alt="" src={iconImg} />
-                        </span>
+                        </span> */}
                     </div>
                     <div className={styles.bodySectionItem}>
-                        <p>Login using ICONex / Hana wallet</p>
+                        <p>Login using Hana Wallet</p>
                     </div>
                 </div>
                 <hr />

diff --git a/src/style-custom/custom.css b/src/style-custom/custom.css
@@ -448,7 +448,7 @@
 
 .header-wrap .connect .sub-menu {
     width: 280px;
-    height: 208px;
+    height: 255px;
     background: #fff;
     border-radius: 4px;
     box-shadow: 0 8px 8px 0 rgba(0, 0, 0, 0.15);