Merge pull request #570 from eco-stake/responsive-tweaks

UI and responsive fixes
eco-stake · Jul 26, 2022 · e5ebea5 · e5ebea5
2 parents 4c4b65b + 5063966
commit e5ebea5
Show file tree

Hide file tree

Showing 6 changed files with 52 additions and 48 deletions.
diff --git a/src/components/AddressModal.js b/src/components/AddressModal.js
@@ -28,6 +28,13 @@ function AddressModal(props) {
 
   function onHide(){
     props.onHide()
+    setSelectedNetwork(network)
+  }
+
+  function setAddress(address){
+    if(selectedNetwork.path === network.path){
+      props.setAddress(address)
+    }
   }
 
   function updateAddress(address, label){
@@ -84,7 +91,7 @@ function AddressModal(props) {
                     return (
                       <tr key={address}>
                         <td className="text-break">
-                          <span role="button" onClick={() => props.setAddress(address)}>{props.address === address ? <strong>{address}</strong> : address}</span>
+                          <span role="button" onClick={() => setAddress(address)}>{props.address === address ? <strong>{address}</strong> : address}</span>
                           {props.wallet?.address === address && (
                             <span className="ms-2"><Key /></span>
                           )}

diff --git a/src/components/App.js b/src/components/App.js
@@ -608,7 +608,7 @@ class App extends React.Component {
                             </>
                           )}
                           {this.otherFavouriteAddresses().length < 1 && this.state.wallet ? (
-                            <span className="small d-none d-lg-inline ms-2">{this.state.wallet.name || this.state.wallet.address}</span>
+                            <span role="button" onClick={() => this.setState({ showAddressModal: true })} className="small d-none d-lg-inline ms-2">{this.state.wallet.name || this.state.wallet.address}</span>
                           ) : (
                             <select className="form-select form-select-sm d-none d-lg-block ms-2" aria-label="Address" value={this.state.address || ''} onChange={(e) => this.setState({ address: e.target.value })}>
                               {this.state.wallet ? (

diff --git a/src/components/NetworkFinder.js b/src/components/NetworkFinder.js
@@ -187,14 +187,7 @@ function NetworkFinder() {
       network.load().then(() => {
         return network.connect().then(() => {
           if (network.connected) {
-            setState({
-              active: grantMatch ? 'grants' : govMatch ? 'governance' : 'delegations',
-              network: network,
-              queryClient: network.queryClient,
-              validators: network.getValidators(),
-              operators: network.getOperators(),
-              loading: false
-            })
+            changeNetwork(network)
           } else {
             throw false
           }

diff --git a/src/components/Networks.js b/src/components/Networks.js
@@ -109,7 +109,7 @@ function Networks(props) {
 
   return (
     <>
-      <div className="d-flex flex-wrap justify-content-center align-items-start mb-3 position-relative">
+      <div className="d-flex flex-nowrap justify-content-center align-items-start mb-3 position-relative">
         <div className="flex-fill flex-md-grow-0 me-2 me-md-5 mb-2 mb-md-0">
           <div className="input-group">
             <input className="form-control border-right-0 border" onChange={filterNetworks} value={filter.keywords} type="text" placeholder="Search.." />

diff --git a/src/components/ValidatorProfile.js b/src/components/ValidatorProfile.js
@@ -40,16 +40,16 @@ function ValidatorProfile(props) {
     if(!validator) return
 
     let status = ''
-    let className = ''
+    let className = 'p-0'
     if(active()){
       status = 'Active'
     }else{
       status = 'Inactive'
-      className = 'text-danger'
+      className += ' text-danger'
     }
     if(validator.jailed){
       status += ' (JAILED)' 
-      className = 'text-danger'
+      className += ' text-danger'
     }
 
     return <span className={className}>{status}</span>
@@ -86,7 +86,7 @@ function ValidatorProfile(props) {
 
     const period = validator.uptime_periods.slice(-1)[0]
     const blockPeriod = validator.missed_blocks_periods.slice(-1)[0]
-    return <span>{_.round(period.uptime * 100, 2)}% (missed {blockPeriod.missed.toLocaleString()} of {blockPeriod.blocks.toLocaleString()} blocks)</span>
+    return <span className="p-0">{_.round(period.uptime * 100, 2)}% (missed {blockPeriod.missed.toLocaleString()} of {blockPeriod.blocks.toLocaleString()} blocks)</span>
   }
 
   return (
@@ -95,7 +95,7 @@ function ValidatorProfile(props) {
         <tbody className="table-sm small">
           <tr>
             <td scope="row">Validator Address</td>
-            <td className="text-break"><span>{validator.operator_address}</span></td>
+            <td className="text-break"><span className="p-0">{validator.operator_address}</span></td>
           </tr>
           {!active() && (
             <tr>
@@ -112,7 +112,7 @@ function ValidatorProfile(props) {
           {!!website() && (
             <tr>
               <td scope="row">Website</td>
-              <td><ValidatorLink className="text-decoration-underline" validator={validator}>{website()}</ValidatorLink></td>
+              <td className="text-break"><ValidatorLink className="text-decoration-underline p-0" validator={validator}>{website()}</ValidatorLink></td>
             </tr>
           )}
           <tr>
@@ -133,7 +133,7 @@ function ValidatorProfile(props) {
             <td scope="row">REStake</td>
             <td>
               {!!operator ? (
-                <span>{operator.runTimesString()} (<Coins coins={minimumReward()} asset={network.baseAsset} /> min)</span>
+                <span className="p-0">{operator.runTimesString()} (<Coins coins={minimumReward()} asset={network.baseAsset} /> min)</span>
               ) :
                 <TooltipIcon icon={<XCircle className="opacity-50 p-0" />} identifier={validator.operator_address} tooltip="This validator is not a REStake operator" />
               }
@@ -155,7 +155,7 @@ function ValidatorProfile(props) {
               <td>
                 {Object.keys(props.validatorApy).length > 0
                   ? props.validatorApy[validator.operator_address]
-                    ? <span>{Math.round(props.validatorApy[validator.operator_address] * 100).toLocaleString()}%</span>
+                    ? <span className="p-0">{Math.round(props.validatorApy[validator.operator_address] * 100).toLocaleString()}%</span>
                     : "-"
                   : (
                     <Spinner animation="border" role="status" className="spinner-border-sm text-secondary">
@@ -167,20 +167,20 @@ function ValidatorProfile(props) {
           )}
           <tr>
             <td scope="row">Commission</td>
-            <td><span>{validator.commission.commission_rates.rate * 100}%</span></td>
+            <td><span className="p-0">{validator.commission.commission_rates.rate * 100}%</span></td>
           </tr>
           <tr>
             <td scope="row">Voting power</td>
-            <td><span>{bondedTokens()}</span></td>
+            <td><span className="p-0">{bondedTokens()}</span></td>
           </tr>
           <tr>
             <td scope="row">Rank</td>
-            <td><span>#{validator.rank}</span></td>
+            <td><span className="p-0">#{validator.rank}</span></td>
           </tr>
           {!!securityContact() && (
             <tr>
               <td scope="row">Contact</td>
-              <td><a href={`mailto:${securityContact()}`}>{securityContact()}</a></td>
+              <td><a className="p-0" href={`mailto:${securityContact()}`}>{securityContact()}</a></td>
             </tr>
           )}
         </tbody>

diff --git a/src/components/Validators.js b/src/components/Validators.js
@@ -160,7 +160,7 @@ function Validators(props) {
 
     return (
       <tr key={validatorAddress} className={rowVariant}>
-        <td>{validator.rank || '-'}</td>
+        <td className="d-none d-md-table-cell">{validator.rank || '-'}</td>
         <td width={30}>
           <ValidatorImage
             validator={validator}
@@ -267,11 +267,9 @@ function Validators(props) {
           </td>
         )}
         <td>
-          <div className="d-grid gap-3 d-md-flex justify-content-end align-items-center">
+          <div className="d-grid flex-row gap-2 gap-sm-3 d-flex justify-content-end align-items-center">
             {!props.modal && (
-              <div className="d-none d-md-block">
-                <ValidatorServices validator={validator} network={network} show={['stakingrewards']} theme={props.theme} />
-              </div>
+              <ValidatorServices validator={validator} network={network} show={['stakingrewards']} theme={props.theme} />
             )}
             {props.manageButton ? (
               <Button size="sm" onClick={() => props.showValidator(validator, {activeTab: 'delegate'})}>
@@ -370,25 +368,31 @@ function Validators(props) {
                     </Dropdown.Item>
                   </Dropdown.Menu>
                 </Dropdown>
-              ) : props.address && wallet?.hasPermission(address, 'Delegate') ? (
-                <OverlayTrigger
-                  placement="top"
-                  rootClose={true}
-                  overlay={
-                    <Tooltip id={`tooltip-${validatorAddress}`}>
-                      Delegate to enable REStake
-                    </Tooltip>
-                  }
-                >
-                  <Button variant="primary" size="sm" disabled={!wallet?.hasPermission(address, 'Delegate')} onClick={() => props.showValidator(validator, { activeTab: 'delegate' })}>
-                    Delegate
+                ) : props.address && wallet?.hasPermission(address, 'Delegate') ? (
+                  operator ? (
+                    <OverlayTrigger
+                      placement="top"
+                      rootClose={true}
+                      overlay={
+                        <Tooltip id={`tooltip-${validatorAddress}`}>
+                          Delegate to enable REStake
+                        </Tooltip>
+                      }
+                    >
+                      <Button variant="primary" size="sm" disabled={!wallet?.hasPermission(address, 'Delegate')} onClick={() => props.showValidator(validator, { activeTab: 'delegate' })}>
+                        Delegate
+                      </Button>
+                    </OverlayTrigger>
+                  ) : (
+                    <Button variant="primary" size="sm" disabled={!wallet?.hasPermission(address, 'Delegate')} onClick={() => props.showValidator(validator, { activeTab: 'delegate' })}>
+                      Delegate
+                    </Button>
+                  )
+                ) : (
+                  <Button variant="primary" size="sm" onClick={() => props.showValidator(validator)}>
+                    View
                   </Button>
-                </OverlayTrigger>
-              ) : (
-                <Button variant="primary" size="sm" onClick={() => props.showValidator(validator)}>
-                  View
-                </Button>
-              )
+                )
             ) : (
               <Button className="btn-sm btn-secondary" disabled>
                 <span
@@ -460,7 +464,7 @@ function Validators(props) {
         <Table className="align-middle table-striped">
           <thead>
             <tr>
-              <th>#</th>
+              <th className="d-none d-md-table-cell">#</th>
               <th colSpan={2}>Validator</th>
               <th className="d-none d-sm-table-cell text-center">REStake</th>
               <th className="d-none d-lg-table-cell text-center">
@@ -495,7 +499,7 @@ function Validators(props) {
           </tbody>
           <tfoot>
             <tr>
-              <td></td>
+              <td className="d-none d-md-table-cell"></td>
               <td colSpan={2}></td>
               <td className="d-none d-sm-table-cell text-center"></td>
               <td className="d-none d-lg-table-cell text-center"></td>