Skip to content

Commit dbf55cc

Browse files
samchuk-vladsamchuk-vlad
committed
Change multi account warning and disable action buttons
1 parent ee67556 commit dbf55cc

File tree

9 files changed

+162
-115
lines changed

9 files changed

+162
-115
lines changed

‎public/images/creator-staking/choose-account.gif

343 KB
Loading

‎public/tailwind.css

Lines changed: 31 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -757,6 +757,10 @@ video {
757757
margin-top: 1rem;
758758
}
759759

760+
.mt-6 {
761+
margin-top: 1.5rem;
762+
}
763+
760764
.mt-\[2px\] {
761765
margin-top: 2px;
762766
}
@@ -1189,8 +1193,7 @@ video {
11891193
}
11901194

11911195
.border-background-primary {
1192-
--tw-border-opacity: 1;
1193-
border-color: rgb(var(--background-primary) / var(--tw-border-opacity));
1196+
border-color: rgb(var(--background-primary));
11941197
}
11951198

11961199
.border-gray-300 {
@@ -1204,13 +1207,11 @@ video {
12041207
}
12051208

12061209
.border-text-muted {
1207-
--tw-border-opacity: 1;
1208-
border-color: rgb(var(--text-muted) / var(--tw-border-opacity));
1210+
border-color: rgb(var(--text-muted));
12091211
}
12101212

12111213
.border-text-primary {
1212-
--tw-border-opacity: 1;
1213-
border-color: rgb(var(--text-primary) / var(--tw-border-opacity));
1214+
border-color: rgb(var(--text-primary));
12141215
}
12151216

12161217
.border-text-red {
@@ -1227,6 +1228,11 @@ video {
12271228
border-color: rgb(255 255 255 / var(--tw-border-opacity));
12281229
}
12291230

1231+
.bg-\[\#FEFCE5\] {
1232+
--tw-bg-opacity: 1;
1233+
background-color: rgb(254 252 229 / var(--tw-bg-opacity));
1234+
}
1235+
12301236
.bg-background {
12311237
--tw-bg-opacity: 1;
12321238
background-color: rgb(var(--background) / var(--tw-bg-opacity));
@@ -1248,8 +1254,7 @@ video {
12481254
}
12491255

12501256
.bg-background-primary {
1251-
--tw-bg-opacity: 1;
1252-
background-color: rgb(var(--background-primary) / var(--tw-bg-opacity));
1257+
background-color: rgb(var(--background-primary));
12531258
}
12541259

12551260
.bg-background-stats-card\/20 {
@@ -1305,15 +1310,6 @@ video {
13051310
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
13061311
}
13071312

1308-
.bg-\[\] {
1309-
background-color: ;
1310-
}
1311-
1312-
.bg-\[\#FEFCE5\] {
1313-
--tw-bg-opacity: 1;
1314-
background-color: rgb(254 252 229 / var(--tw-bg-opacity));
1315-
}
1316-
13171313
.bg-opacity-25 {
13181314
--tw-bg-opacity: 0.25;
13191315
}
@@ -1374,6 +1370,10 @@ video {
13741370
padding: 1.25rem;
13751371
}
13761372

1373+
.p-6 {
1374+
padding: 1.5rem;
1375+
}
1376+
13771377
.p-\[1px\] {
13781378
padding: 1px;
13791379
}
@@ -1386,10 +1386,6 @@ video {
13861386
padding: 4px;
13871387
}
13881388

1389-
.p-6 {
1390-
padding: 1.5rem;
1391-
}
1392-
13931389
.\!py-4 {
13941390
padding-top: 1rem !important;
13951391
padding-bottom: 1rem !important;
@@ -1646,15 +1642,19 @@ video {
16461642
}
16471643

16481644
.\!text-text-primary {
1649-
--tw-text-opacity: 1 !important;
1650-
color: rgb(var(--text-primary) / var(--tw-text-opacity)) !important;
1645+
color: rgb(var(--text-primary)) !important;
16511646
}
16521647

16531648
.text-\[\#222\] {
16541649
--tw-text-opacity: 1;
16551650
color: rgb(34 34 34 / var(--tw-text-opacity));
16561651
}
16571652

1653+
.text-\[\#7B4511\] {
1654+
--tw-text-opacity: 1;
1655+
color: rgb(123 69 17 / var(--tw-text-opacity));
1656+
}
1657+
16581658
.text-black {
16591659
--tw-text-opacity: 1;
16601660
color: rgb(0 0 0 / var(--tw-text-opacity));
@@ -1685,8 +1685,7 @@ video {
16851685
}
16861686

16871687
.text-text-muted {
1688-
--tw-text-opacity: 1;
1689-
color: rgb(var(--text-muted) / var(--tw-text-opacity));
1688+
color: rgb(var(--text-muted));
16901689
}
16911690

16921691
.text-text-muted\/20 {
@@ -1699,8 +1698,7 @@ video {
16991698
}
17001699

17011700
.text-text-primary {
1702-
--tw-text-opacity: 1;
1703-
color: rgb(var(--text-primary) / var(--tw-text-opacity));
1701+
color: rgb(var(--text-primary));
17041702
}
17051703

17061704
.text-text-secondary {
@@ -1721,21 +1719,8 @@ video {
17211719
color: rgb(255 255 255 / 0.8);
17221720
}
17231721

1724-
.text-\[\] {
1725-
color: ;
1726-
}
1727-
1728-
.text-\[\#\] {
1729-
color: #;
1730-
}
1731-
1732-
.text-\[\#7B4511\] {
1733-
--tw-text-opacity: 1;
1734-
color: rgb(123 69 17 / var(--tw-text-opacity));
1735-
}
1736-
1737-
.text-\[7B4511\] {
1738-
color: 7B4511;
1722+
.text-\[\#6C727F33\]\/20 {
1723+
color: rgb(108 114 127 / 0.2);
17391724
}
17401725

17411726
.opacity-0 {
@@ -1950,8 +1935,7 @@ video {
19501935

19511936
.after\:bg-text-primary::after {
19521937
content: var(--tw-content);
1953-
--tw-bg-opacity: 1;
1954-
background-color: rgb(var(--text-primary) / var(--tw-bg-opacity));
1938+
background-color: rgb(var(--text-primary));
19551939
}
19561940

19571941
.after\:opacity-0::after {
@@ -1979,8 +1963,7 @@ video {
19791963
}
19801964

19811965
.hover\:border-text-primary:hover {
1982-
--tw-border-opacity: 1;
1983-
border-color: rgb(var(--text-primary) / var(--tw-border-opacity));
1966+
border-color: rgb(var(--text-primary));
19841967
}
19851968

19861969
.hover\:\!bg-background-lighter:hover {
@@ -1994,8 +1977,7 @@ video {
19941977
}
19951978

19961979
.hover\:text-text-primary:hover {
1997-
--tw-text-opacity: 1;
1998-
color: rgb(var(--text-primary) / var(--tw-text-opacity));
1980+
color: rgb(var(--text-primary));
19991981
}
20001982

20011983
.hover\:underline:hover {
@@ -2121,8 +2103,7 @@ video {
21212103
}
21222104

21232105
.group:hover .group-hover\:text-text-primary {
2124-
--tw-text-opacity: 1;
2125-
color: rgb(var(--text-primary) / var(--tw-text-opacity));
2106+
color: rgb(var(--text-primary));
21262107
}
21272108

21282109
.group:hover .group-hover\:after\:scale-y-100::after {
@@ -2201,10 +2182,6 @@ video {
22012182
align-items: center;
22022183
}
22032184

2204-
.md\:justify-start {
2205-
justify-content: flex-start;
2206-
}
2207-
22082185
.md\:gap-6 {
22092186
gap: 1.5rem;
22102187
}
@@ -2223,18 +2200,6 @@ video {
22232200
padding-bottom: 1.5rem;
22242201
}
22252202

2226-
.md\:text-left {
2227-
text-align: left;
2228-
}
2229-
2230-
.md\:text-center {
2231-
text-align: center;
2232-
}
2233-
2234-
.md\:text-start {
2235-
text-align: start;
2236-
}
2237-
22382203
.md\:text-2xl {
22392204
font-size: 1.5rem;
22402205
line-height: 2rem;

‎src/components/creatorsStaking/Creators/StakeActionButtons.tsx

Lines changed: 27 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,10 @@
11
import { useStakingConsts } from 'src/rtk/features/creatorStaking/stakingConsts/stakingConstsHooks'
22
import Button from '../tailwind-components/Button'
33
import { StakingModalVariant } from './modals/StakeModal'
4-
import { useMyAddress } from 'src/components/providers/MyExtensionAccountsContext'
4+
import {
5+
useIsMulti,
6+
useMyAddress,
7+
} from 'src/components/providers/MyExtensionAccountsContext'
58
import { useBackerInfo } from 'src/rtk/features/creatorStaking/backerInfo/backerInfoHooks'
69
import { Tooltip } from 'antd'
710
import clsx from 'clsx'
@@ -28,6 +31,7 @@ const StakeActionButtons = ({
2831
const myAddress = useMyAddress()
2932
const stakingConsts = useStakingConsts()
3033
const backerInfo = useBackerInfo(spaceId, myAddress || '')
34+
const isMulti = useIsMulti()
3135

3236
const { info } = backerInfo || {}
3337

@@ -74,15 +78,32 @@ const StakeActionButtons = ({
7478
</div>
7579
)
7680

77-
const tooltipText = !myAddress ? 'Connect your wallet' : 'Claim your rewards first'
78-
79-
return disableButtons ? (
80-
<Tooltip title={tooltipText}>
81-
{buttons}
81+
const multiAccountButton = (
82+
<Tooltip title={'Switch to single account mode'}>
83+
<div>
84+
<Button
85+
variant='primaryOutline'
86+
className={clsx('w-full', className)}
87+
size={buttonsSize}
88+
disabled={true}
89+
>
90+
Stake
91+
</Button>
92+
</div>
8293
</Tooltip>
94+
)
95+
96+
const tooltipText = !myAddress
97+
? 'Connect your wallet'
98+
: 'Claim your rewards first'
99+
100+
const actionButtons = disableButtons ? (
101+
<Tooltip title={tooltipText}>{buttons}</Tooltip>
83102
) : (
84103
buttons
85104
)
105+
106+
return isMulti ? multiAccountButton : actionButtons
86107
}
87108

88109
export default StakeActionButtons

‎src/components/creatorsStaking/Creators/index.tsx

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import { useFetchCreatorsSpaces } from '../../../rtk/features/creatorStaking/cre
77
import { useFetchEraStakes } from 'src/rtk/features/creatorStaking/eraStake/eraStakeHooks'
88
import { useGeneralEraInfo } from 'src/rtk/features/creatorStaking/generalEraInfo/generalEraInfoHooks'
99
import { useFetchBackerInfoBySpaces } from '../../../rtk/features/creatorStaking/backerInfo/backerInfoHooks'
10-
import { useMyAddress } from 'src/components/providers/MyExtensionAccountsContext'
10+
import { useIsMulti, useMyAddress } from 'src/components/providers/MyExtensionAccountsContext'
1111
import { useFetchBalanceByNetwork } from 'src/rtk/features/balances/balancesHooks'
1212
import SortByDropDown from './SortByDropDown'
1313
import { useGetMyCreatorsIds } from '../hooks/useGetMyCreators'
@@ -84,6 +84,7 @@ const CreatorsSectionInner = ({ spaceIds, era }: CreatorsSectionInnerProps) => {
8484
const { showSuccessModal, setShowSuccessModal, amount, stakedSpaceId } =
8585
useModalContext()
8686
const creatorsList = useCreatorsList()
87+
const isMulti = useIsMulti()
8788

8889
const isCreator = !!creatorsList?.find(
8990
(item) => toGenericAccountId(item.creator.stakeholder) === myAddress
@@ -109,11 +110,11 @@ const CreatorsSectionInner = ({ spaceIds, era }: CreatorsSectionInnerProps) => {
109110
},
110111
{
111112
id: 'my-creators',
112-
text: `My Creators (${myCreatorsIds.length || 0})`,
113+
text: `My Creators (${isMulti ? 0 : myCreatorsIds.length || 0})`,
113114
content: () => (
114115
<CreatorsCards spaceIds={myCreatorsIds} era={era} sortBy={sortBy} />
115116
),
116-
disabled: myCreatorsIds.length === 0,
117+
disabled: myCreatorsIds.length === 0 || isMulti,
117118
},
118119
]
119120

0 commit comments

Comments
 (0)