Skip to content

Commit

Permalink
Merge pull request #1628 from AmbireTech/update/disable-wallet-rewards
Browse files Browse the repository at this point in the history 
Update/ Replace wallet rewards UI with a message
  • Loading branch information
@stojnovsky
stojnovsky authored Jul 22, 2024
2 parents ace9841 + 4ba9586 commit 8d4cbac
Show file tree
Hide file tree
Showing 2 changed files with 48 additions and 214 deletions.
120 changes: 13 additions & 107 deletions src/components/Modals/WalletTokenModal/WalletTokenModal.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,16 +5,13 @@ import { rpcProviders } from 'config/providers'

import { formatFloatTokenAmount } from 'lib/formatters'

import { Button, Modal, ToolTip, RemoteLottie, Loading } from 'components/common'
import { Button, Modal, ToolTip, Loading } from 'components/common'
import { useModals } from 'hooks'
import MultiplierBadges from './MultiplierBadges/MultiplierBadges'
import { ReactComponent as InfoIcon } from 'resources/icons/information.svg'
import UnbondModal from './UnbondModal/UnbondModal'

import styles from './WalletTokenModal.module.scss'

const MIN_ELIGIBLE_USD = 1000
const MIN_CLAIMABLE_WALLET = 1000

const WalletTokenModal = ({ accountId, claimableWalletToken, rewards, network }) => {
const [isUnbondModalVisible, setIsUnbondModalVisible] = useState(false)
const provider = rpcProviders['ethereum-ambire-earn']
Expand All @@ -38,7 +35,7 @@ const WalletTokenModal = ({ accountId, claimableWalletToken, rewards, network })
shouldDisplayMintableVesting
} = claimableWalletToken

const { walletTokenAPYPercentage, adxTokenAPYPercentage, xWALLETAPYPercentage } = rewards
const { walletTokenAPYPercentage, xWALLETAPYPercentage } = rewards

const claimWithBurn = () => {
claimEarlyRewards(false)
Expand All @@ -56,18 +53,6 @@ const WalletTokenModal = ({ accountId, claimableWalletToken, rewards, network })
hideModal()
}

const eligibilityLeft = MIN_ELIGIBLE_USD - rewards.balance.balanceInUSD
const isEligible = eligibilityLeft <= 0
const accumulatedWallets = rewards['balance-rewards'] + rewards['adx-rewards']
const canClaimWallet = accumulatedWallets >= MIN_CLAIMABLE_WALLET

const apys = {
adxStakingApy: {
unlocked: rewards['adx-rewards'] > 0,
apy: adxTokenAPYPercentage
}
}

const formatAmount = (amount) => (amount ? amount.toFixed(6) : 0)

return (
Expand All @@ -84,100 +69,23 @@ const WalletTokenModal = ({ accountId, claimableWalletToken, rewards, network })
Are you sure?"
onClick={claimWithBurn}
/>

<div>
<div className={styles.rewardsProgressPath}>
<div>
<div className={styles.rewardsProgressHoldingIcon} />
</div>
<div className={styles.rewardsProgressBar}>
<div
className={cn(styles.rewardsProgressBarFiller, styles.rewardsProgressBarFillerActive)}
style={{
width: `${Math.min(rewards.balance.balanceInUSD / MIN_ELIGIBLE_USD, 1) * 100}%`
}}
/>
<span>
<b>
${Math.floor(Math.min(rewards.balance.balanceInUSD, MIN_ELIGIBLE_USD))}
{rewards.balance.balanceInUSD > MIN_ELIGIBLE_USD && '+'}
</b>
/${MIN_ELIGIBLE_USD}
</span>
</div>

<div>
{isEligible ? (
<ToolTip label="You are earning $WALLET rewards">
<RemoteLottie
remoteJson="/resources/rewards/rewards-active.mp4.lottie.json"
className={styles.rewardsWalletIconAnimated}
background="transparent"
speed="1"
loop
autoplay
/>
</ToolTip>
) : (
<ToolTip
label={`You need a balance worth more than $${MIN_ELIGIBLE_USD} worth of tokens to start accumulating $WALLET rewards`}
>
<div className={styles.rewardsWalletIcon} />
</ToolTip>
)}
</div>

<div className={styles.rewardsProgressBar}>
<div
className={cn(styles.rewardsProgressBarFiller, {
[styles.rewardsProgressBarFillerActive]: isEligible
})}
style={{ width: `${Math.min(accumulatedWallets / MIN_CLAIMABLE_WALLET, 1) * 100}%` }}
/>
<span>
<b>
$WALLET {Math.floor(Math.min(accumulatedWallets, MIN_CLAIMABLE_WALLET))}
{accumulatedWallets > MIN_CLAIMABLE_WALLET && '+'}
</b>
/{MIN_CLAIMABLE_WALLET}
</span>
</div>
<ToolTip
label={
canClaimWallet
? 'You can claim accumulated $WALLET rewards'
: `You need to accumulate ${MIN_CLAIMABLE_WALLET} $WALLET to claim`
}
>
<div>
<div
className={cn(styles.rewardsProgressClaimIcon, {
[styles.rewardsProgressClaimIconActive]: canClaimWallet
})}
/>
</div>
</ToolTip>
</div>
<div className={styles.rewardsProgressLabels}>
<span>Balance</span>
<span>My Ambire Rewards</span>
<span>Unlock Claim</span>
</div>
</div>

<MultiplierBadges rewards={rewards} apys={apys} />

<div className={styles.info}>
You are receiving $WALLETs for holding funds on your Ambire wallet as an early user.{' '}
<div className={styles.rewardsDisabled}>
<InfoIcon className={styles.rewardsDisabledIcon} />
<p className={styles.rewardsDisabledText}>
{' '}
We are preparing for the public launch of our browser extension. Following a recent
governance vote, early users $WALLET rewards are no longer available in the Web and Mobile
versions of Ambire Wallet.
</p>
<a
href="https://blog.ambire.com/announcing-the-wallet-token/"
className={styles.rewardsDisabledLink}
href="https://blog.ambire.com/stop-early-user-incentives/"
target="_blank"
rel="noreferrer"
>
Read More
</a>
</div>

<div className={styles.item}>
<div className={styles.details}>
<label>Claimable now</label>
Expand Down Expand Up @@ -212,7 +120,6 @@ const WalletTokenModal = ({ accountId, claimableWalletToken, rewards, network })
</ToolTip>
</div>
</div>

<div className={styles.item}>
<div className={styles.details}>
<label>Early users Incentive total (Early users + ADX Staking bonus)</label>
Expand All @@ -226,7 +133,6 @@ const WalletTokenModal = ({ accountId, claimableWalletToken, rewards, network })
</div>
</div>
</div>

{shouldDisplayMintableVesting && (
<div className={styles.item}>
<div className={styles.details}>
Expand Down
142 changes: 35 additions & 107 deletions src/components/Modals/WalletTokenModal/WalletTokenModal.module.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,103 +11,42 @@
padding-bottom: 0.625rem;
}

.rewardsProgressPath {
display: flex;
align-items: center;
gap: 0.625rem;

.rewardsWalletIcon {
width: 5rem;
height: 5rem;
background-position: 50% 50%;
background-size: contain;
background-repeat: no-repeat;
background-image: url('../../../resources/rewards/icon-rewards-inactive.svg');
}

.rewardsWalletIconAnimated {
width: 5rem;
height: 5rem;
}

.rewardsProgressHoldingIcon {
width: 3.125rem;
height: 3.125rem;
background-position: 50% 50%;
background-size: contain;
background-repeat: no-repeat;
background-image: url('../../../resources/rewards/icon-hold.svg');
}

.rewardsProgressClaimIcon {
width: 3.125rem;
height: 3.125rem;
background-position: 50% 50%;
background-size: contain;
background-repeat: no-repeat;
background-image: url('../../../resources/rewards/icon-wallet-inactive.svg');
}

.rewardsProgressClaimIconActive {
background-image: url('../../../resources/rewards/icon-wallet-active.svg');
}

.rewardsProgressBar {
height: 0.25rem;
border-bottom: 1px dotted $c-scampi;
flex-grow: 1;
position: relative;

.rewardsProgressBarFiller {
position: absolute;
height: 0.3125rem;
border-radius: 0.25rem;
background: $c-scampi;
top: 0.0625rem;
}

.rewardsProgressBarFillerActive {
background: $c-turquoise;
}

span {
position: absolute;
bottom: 0.625rem;
width: 100%;
text-align: center;
font-size: 0.75rem;
color: $c-scampi;
.rewardsDisabled {
padding: 0.75rem;
border: 1px solid $ambire-purple;
border-radius: $border-radius;

b {
font-size: 0.75rem;
}
.rewardsDisabledIcon {
width: 1.25rem;
height: 1.25rem;
color: $ambire-purple;
display: inline;
line-height: 1.75rem;
vertical-align: middle;
}
.rewardsDisabledText {
font-size: .875rem;
display: inline;
vertical-align: middle;
font-weight: 500;
line-height: 1.25rem;
}
.rewardsDisabledLink {
display: block;
width: fit-content;
margin-left: auto;
color: $ambire-purple;
font-size: .875rem;
font-weight: 600;
text-decoration: underline;
transition: $basic-transition;

&:hover {
opacity: .6;
}
}
}

.rewardsProgressLabels {
margin-top: 0.5rem;
display: flex;
align-items: center;
justify-content: space-between;

span {
font-size: 0.75rem;
color: $c-scampi;
text-align: center;
}

span:first-child {
flex-basis: 20%;
text-align: left;
}

span:last-child {
flex-basis: 20%;
text-align: right;
}
}

.info {
font-size: 0.75rem;
text-align: center;
Expand Down Expand Up @@ -298,21 +237,10 @@
}
}

// Mobile
@include lg-breakpoint {
.wrapper {
.rewardsProgressPath {
.rewardsProgressBar {
.rewardsWalletIcon {
width: 4.375rem;
height: 4.375rem;
}
span {
white-space: nowrap;
bottom: 2.5rem;
left: -1.875rem;
}
}
.wrapper .rewardsDisabled {
.rewardsDisabledLink {
margin-top: .5rem;
}
}
}
}

0 comments on commit 8d4cbac

Please sign in to comment.