Add info rectangle for big delegators

vacuumlabs · Nov 27, 2020 · effd250 · effd250
1 parent b626f08
commit effd250
Show file tree

Hide file tree

Showing 5 changed files with 40 additions and 1 deletion.
diff --git a/app/frontend/actions.ts b/app/frontend/actions.ts
@@ -16,7 +16,11 @@ import printAda from './helpers/printAda'
 import debugLog from './helpers/debugLog'
 import getConversionRates from './helpers/getConversionRates'
 import sleep from './helpers/sleep'
-import {NETWORKS, PREMIUM_MEMBER_BALANCE_TRESHHOLD} from './wallet/constants'
+import {
+  NETWORKS,
+  PREMIUM_MEMBER_BALANCE_TRESHHOLD,
+  BIG_DELEGATOR_THRESHOLD,
+} from './wallet/constants'
 import NamedError from './helpers/NamedError'
 import {exportWalletSecretDef} from './wallet/keypass-json'
 import {CardanoWallet} from './wallet/cardano-wallet'
@@ -172,6 +176,7 @@ export default ({setState, getState}: {setState: SetStateFn; getState: GetStateF
       const ticker2Id = null
       const shouldShowPremiumBanner =
         state.shouldShowPremiumBanner && walletInfo.balance > PREMIUM_MEMBER_BALANCE_TRESHHOLD
+      const isBigDelegator = walletInfo.balance > BIG_DELEGATOR_THRESHOLD
       setState({
         walletIsLoaded: true,
         ...walletInfo,
@@ -197,6 +202,7 @@ export default ({setState, getState}: {setState: SetStateFn; getState: GetStateF
         ticker2Id,
         isShelleyCompatible,
         shouldShowPremiumBanner,
+        isBigDelegator,
       })
       await fetchConversionRates(conversionRatesPromise)
     } catch (e) {

diff --git a/app/frontend/components/pages/delegations/delegatePage.tsx b/app/frontend/components/pages/delegations/delegatePage.tsx
@@ -71,6 +71,17 @@ const StakePoolInfo = ({pool, gettingPoolInfo}) => {
   )
 }
 
+const BigDelegatorOffer = () => (
+  <div className="banner delegation-offer delegation-offer-text">
+    Due to factors such as pool saturation, maximizing staking rewards is no easy task for high
+    balance wallets like yours. Get our premium assistance via{' '}
+    <a href="https://t.me/pepo6969" target="_blank" rel="noopener">
+      Telegram
+    </a>{' '}
+    or at <a href={'mailto:michal.petro@vacuumlabs.com'}>michal.petro@vacuumlabs.com</a>.
+  </div>
+)
+
 interface Props {
   updateStakePoolIdentifier: any
   removeStakePool: any
@@ -89,6 +100,7 @@ interface Props {
   gettingPoolInfo: boolean
   poolRecommendation: any
   pool: any
+  isBigDelegator: boolean
 }
 
 class Delegate extends Component<Props> {
@@ -117,6 +129,7 @@ class Delegate extends Component<Props> {
     gettingPoolInfo,
     poolRecommendation,
     pool,
+    isBigDelegator,
   }) {
     const delegationHandler = async () => {
       await confirmTransaction('delegate')
@@ -136,6 +149,7 @@ class Delegate extends Component<Props> {
               <div className="stake-pool">
                 <ul className="stake-pool-list">
                   <li className="stake-pool-item">
+                    {isBigDelegator && <BigDelegatorOffer />}
                     <input
                       type="text"
                       className="input stake-pool-id"
@@ -219,6 +233,7 @@ export default connect(
     isShelleyCompatible: state.isShelleyCompatible,
     poolRecommendation: state.poolRecommendation,
     pool: state.shelleyAccountInfo.delegation,
+    isBigDelegator: state.isBigDelegator,
   }),
   actions
 )(Delegate)
diff --git a/app/frontend/state.ts b/app/frontend/state.ts
@@ -142,6 +142,7 @@ export interface State {
     status: string
     shouldShowSaturatedBanner: boolean
   }
+  isBigDelegator: boolean
 }
 
 const initialState: State = {
@@ -246,6 +247,7 @@ const initialState: State = {
     status: '',
     shouldShowSaturatedBanner: false,
   },
+  isBigDelegator: false,
 }
 
 export {initialState}
diff --git a/app/frontend/wallet/constants.ts b/app/frontend/wallet/constants.ts
@@ -119,5 +119,6 @@ export const RECOMMENDED_LEDGER_APP_VERSION = {
 export const UNKNOWN_POOL_NAME = '<Unknown pool>'
 
 export const PREMIUM_MEMBER_BALANCE_TRESHHOLD = 2500000000000
+export const BIG_DELEGATOR_THRESHOLD = 10000000000000
 
 export const SATURATION_POINT = 62224967000000
diff --git a/app/public/css/styles.css b/app/public/css/styles.css
@@ -1177,6 +1177,21 @@ button[data-balloon] {
   background-color: var(--color-grey-dark);
 }
 
+.banner.delegation-offer {
+  margin: -32px 0 24px 0px;
+  background-color: #408c40;
+  opacity: 80%;
+  padding: 12px 12px;
+}
+
+.delegation-offer-text {
+  color: white;
+  display: block;
+}
+
+.delegation-offer-text > a {
+  color: white;
+}
 
 .banner.premium {
   background-color: cornflowerblue;