Merge pull request #27 from lum-network/hotfix/lum-801

[LUM-801] Add tooltip on claim and compound button when is disabled
lum-network · Aug 16, 2023 · 16b254a · 16b254a
2 parents b071f23 + 1f0d3d5
commit 16b254a
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 18 deletions.
diff --git a/src/locales/en.ts b/src/locales/en.ts
@@ -402,6 +402,7 @@ export default {
                 },
             ],
             claimAndCompound: 'CLAIM & COMPOUND',
+            claimAndCompoundHint: "You can't compound your prizes if you have less than the minimum deposit.",
             claimMyPrizes: 'Claim My Prizes',
             drawId: 'Draw #{{ drawId }}',
             shareTitle: 'Spread the word!',

diff --git a/src/pages/MySavings/components/Modals/Claim/Claim.tsx b/src/pages/MySavings/components/Modals/Claim/Claim.tsx
@@ -350,24 +350,23 @@ const Claim = ({ prizes, prices, pools }: Props) => {
                                                     </span>
                                                     {I18n.t('deposit.feesWarning')}
                                                 </Card>
-                                                {!blockedCompound && (
-                                                    <>
-                                                        <Button
-                                                            type='button'
-                                                            onClick={() => {
-                                                                onClaim(true);
-                                                            }}
-                                                            className='w-100'
-                                                            disabled={isLoading}
-                                                            loading={isLoading}
-                                                        >
-                                                            <img src={Assets.images.yellowStar} alt='Star' className='me-3' />
-                                                            {I18n.t('mySavings.claimModal.claimAndCompound')}
-                                                            <img src={Assets.images.yellowStar} alt='Star' className='ms-3' />
-                                                        </Button>
-                                                        <hr />
-                                                    </>
-                                                )}
+                                                <span data-tooltip-id='claim-and-compound-hint' data-tooltip-html={I18n.t('mySavings.claimModal.claimAndCompoundHint')} className='ms-2 mb-2'>
+                                                    <Button
+                                                        type='button'
+                                                        onClick={() => {
+                                                            onClaim(true);
+                                                        }}
+                                                        className='w-100'
+                                                        disabled={isLoading || blockedCompound}
+                                                        loading={isLoading}
+                                                    >
+                                                        <img src={Assets.images.yellowStar} alt='Star' className='me-3' />
+                                                        {I18n.t('mySavings.claimModal.claimAndCompound')}
+                                                        <img src={Assets.images.yellowStar} alt='Star' className='ms-3' />
+                                                    </Button>
+                                                    {blockedCompound ? <Tooltip id='claim-and-compound-hint' /> : null}
+                                                </span>
+                                                <hr />
                                                 <Button
                                                     type='button'
                                                     onClick={() => {