Skip to content

Commit

Permalink
Merge branch 'main' into fix/transfer-native-change
Browse files Browse the repository at this point in the history
  • Loading branch information
@JIOjosBG
JIOjosBG committed Aug 6, 2024
2 parents 139edf6 + b4eae1a commit 6a81785
Show file tree
Hide file tree
Showing 11 changed files with 178 additions and 276 deletions.
123 changes: 16 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,26 @@ 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{' '}
<a href="https://www.ambire.com/" target="_blank" rel="noreferrer">
our browser extension
</a>
. 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 +123,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 +136,6 @@ const WalletTokenModal = ({ accountId, claimableWalletToken, rewards, network })
</div>
</div>
</div>

{shouldDisplayMintableVesting && (
<div className={styles.item}>
<div className={styles.details}>
Expand Down
147 changes: 42 additions & 105 deletions src/components/Modals/WalletTokenModal/WalletTokenModal.module.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,100 +11,48 @@
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;

a {
color: $ambire-purple;
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;
.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;
}
}
}

Expand Down Expand Up @@ -298,21 +246,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;
}
}
}
}
10 changes: 8 additions & 2 deletions src/components/SendTransaction/DetailsPanel/ActionsWrapper/Actions/Actions.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -137,12 +137,18 @@ const Actions = ({
.catch((e) => {
if (isMounted.current) setSigningStatus(null)
console.error(e)
if (e && e.message.includes('must provide an Ethereum address')) {
if(!e || !e.message || typeof e.message !== 'string') {
addToast(`Signing error: Unknown error`, { error: true })
} else if (
e.message.includes('must provide an Ethereum address') ||
// used for ambire extension
e.message.includes('the dApp is trying to sign using an address different from the currently selected account')
){
addToast(
`Signing error: not connected with the correct address. Make sure you're connected with ${bundle.signer.address}.`,
{ error: true }
)
} else if (e && e.message.includes('0x6b0c')) {
} else if (e.message.includes('0x6b0c')) {
// not sure if that's actually the case with this hellish error, but after unlocking the device it no longer appeared
// however, it stopped appearing after that even if the device is locked, so I'm not sure it's related...
addToast(
Expand Down
Loading

0 comments on commit 6a81785

Please sign in to comment.