Show premium banner

app/frontend/actions.ts

@@ -16,7 +16,7 @@ import printAda from './helpers/printAda'
 import debugLog from './helpers/debugLog'
 import getConversionRates from './helpers/getConversionRates'
 import sleep from './helpers/sleep'
-import {NETWORKS} from './wallet/constants'
+import {NETWORKS, PREMIUM_MEMBER_BALANCE_TRESHHOLD} from './wallet/constants'
 import NamedError from './helpers/NamedError'
 import {exportWalletSecretDef} from './wallet/keypass-json'
 import {CardanoWallet} from './wallet/cardano-wallet'
@@ -169,6 +169,8 @@ export default ({setState, getState}: {setState: SetStateFn; getState: GetStateF
       const isDemoWallet = walletSecretDef && walletSecretDef.rootSecret.equals(demoRootSecret)
       const autoLogin = state.autoLogin
       const ticker2Id = null
+      const shouldShowPremiumBanner =
+        state.shouldShowPremiumBanner && walletInfo.balance > PREMIUM_MEMBER_BALANCE_TRESHHOLD
       setState({
         walletIsLoaded: true,
         ...walletInfo,
@@ -193,6 +195,7 @@ export default ({setState, getState}: {setState: SetStateFn; getState: GetStateF
         // shelley
         ticker2Id,
         isShelleyCompatible,
+        shouldShowPremiumBanner,
       })
       await fetchConversionRates(conversionRatesPromise)
     } catch (e) {
@@ -1115,6 +1118,13 @@ export default ({setState, getState}: {setState: SetStateFn; getState: GetStateF
     })
   }
 
+  const closePremiumBanner = (state) => {
+    window.localStorage.setItem('dontShowPremiumBanner', 'true')
+    setState({
+      shouldShowPremiumBanner: false,
+    })
+  }
+
   const shouldShowContactFormModal = (state) => {
     setState({
       shouldShowContactFormModal: true,
@@ -1203,5 +1213,6 @@ export default ({setState, getState}: {setState: SetStateFn; getState: GetStateF
     withdrawRewards,
     openInfoModal,
     closeInfoModal,
+    closePremiumBanner,
   }
 }

app/frontend/components/pages/dashboard/dashboardPage.tsx

@@ -15,6 +15,7 @@ import {MainTab, SubTab} from './tabs'
 import InfoModal from '../../common/infoModal'
 import NotShelleyCompatibleDialog from '../login/nonShelleyCompatibleDialog'
 import DashboardErrorBanner from './dashboardErrorBanner'
+import PremiumBanner from './premiumBanner'
 
 interface Props {
   displayStakingPage: any
@@ -75,6 +76,7 @@ class DashboardPage extends Component<Props> {
       isShelleyCompatible,
       shouldShowNonShelleyCompatibleDialog,
       displayInfoModal,
+      shouldShowPremiumBanner,
     },
     {selectedMainTab}
   ) {
@@ -84,6 +86,7 @@ class DashboardPage extends Component<Props> {
         {isShelleyCompatible && displayInfoModal && <InfoModal />}
         {shouldShowNonShelleyCompatibleDialog && <NotShelleyCompatibleDialog />}
         {!isShelleyCompatible && <DashboardErrorBanner />}
+        {shouldShowPremiumBanner && <PremiumBanner />}
         {ADALITE_CONFIG.ADALITE_CARDANO_VERSION === 'shelley' && (
           <ul className="tabinator">
             {mainTabs.map((name, i) => (
@@ -168,6 +171,7 @@ export default connect(
     displayInfoModal: state.displayInfoModal,
     isShelleyCompatible: state.isShelleyCompatible,
     shouldShowNonShelleyCompatibleDialog: state.shouldShowNonShelleyCompatibleDialog,
+    shouldShowPremiumBanner: state.shouldShowPremiumBanner,
   }),
   actions
 )(DashboardPage)

app/frontend/components/pages/dashboard/premiumBanner.tsx

@@ -0,0 +1,31 @@
+import {h} from 'preact'
+import {connect} from '../../../helpers/connect'
+import actions from '../../../actions'
+
+interface Props {
+  closePremiumBanner: () => void
+}
+
+const PremiumBanner = ({closePremiumBanner}: Props) => {
+  const premiumMessage =
+    'VIP STAKING SERVICES - Do you own more than 3 million ADA? Contact us on  adalite@vacuumlabs.com to join our VIP staking services. We will assign you a dedicated account manager and provide you with priority support.'
+  return (
+    <div className="banner premium">
+      <div className="banner-text">{premiumMessage}</div>
+      <button
+        className="button close banner-close"
+        {
+        ...{ariaLabel: 'Close banner'} /* silence ts*/
+        }
+        onClick={(e) => {
+          closePremiumBanner()
+        }}
+      />
+    </div>
+  )
+}
+
+export default connect(
+  () => null,
+  actions
+)(PremiumBanner)

app/frontend/state.ts

@@ -73,6 +73,7 @@ export interface State {
   shouldShowTransactionErrorModal?: boolean
   shouldShowThanksForDonation?: boolean
   shouldShowContactFormModal?: boolean
+  shouldShowPremiumBanner?: boolean
 
   calculatingFee?: boolean
   transactionFee?: any
@@ -153,6 +154,7 @@ const initialState: State = {
   shouldShowStakingBanner: !(
     window.localStorage.getItem('dontShowStakingBannerTestnet3') === 'true'
   ),
+  shouldShowPremiumBanner: !(window.localStorage.getItem('dontShowPremiumBanner') === 'true'),
   displayInfoModal: !(window.localStorage.getItem('dontShowInfoModal') === 'true'),
   errorBannerContent: '',
   visibleAddresses: [],

app/frontend/wallet/constants.ts

@@ -117,3 +117,5 @@ export const RECOMMENDED_LEDGER_APP_VERSION = {
 }
 
 export const UNKNOWN_POOL_NAME = '<Unknown pool>'
+
+export const PREMIUM_MEMBER_BALANCE_TRESHHOLD = 2500000000000

app/public/css/styles.css

@@ -1173,6 +1173,13 @@ button[data-balloon] {
   background-color: var(--color-error);
 }
 
+
+.banner.premium {
+  background-color: cornflowerblue;
+  width: 100%;
+  margin-bottom: 20px;
+}
+
 .banner-text {
   flex: 1;
   padding-left: 40px;
@@ -1184,6 +1191,11 @@ button[data-balloon] {
   color: white;
 }
 
+.banner.premium > .banner-text {
+  font-weight: bold;
+  color: white;
+}
+
 .banner-text::before {
   content: '';
   width: 24px;