From 2b8d933157e7b298131ae80952588fd6dee09d07 Mon Sep 17 00:00:00 2001 From: corlard3y Date: Wed, 17 Jul 2024 14:07:17 +0100 Subject: [PATCH 01/34] update structure --- .../components/MultipleRewardsCoin.tsx | 350 ++++++++++++++++++ .../illustrations/components/RewardsCoin.tsx | 120 ++++++ .../components/TripleRewardsCoin.tsx | 163 ++++++++ src/blocks/illustrations/index.ts | 10 + src/modules/rewards/Rewards.tsx | 2 + .../rewards/components/DailyRewardsItem.tsx | 33 ++ .../components/DailyRewardsSection.tsx | 95 +++++ .../RewardsActivitiesBottomSection.tsx | 31 ++ .../components/RewardsActivitiesSection.tsx | 4 + .../components/RewardsTabsContainer.tsx | 4 +- 10 files changed, 810 insertions(+), 2 deletions(-) create mode 100644 src/blocks/illustrations/components/MultipleRewardsCoin.tsx create mode 100644 src/blocks/illustrations/components/RewardsCoin.tsx create mode 100644 src/blocks/illustrations/components/TripleRewardsCoin.tsx create mode 100644 src/modules/rewards/components/DailyRewardsItem.tsx create mode 100644 src/modules/rewards/components/DailyRewardsSection.tsx create mode 100644 src/modules/rewards/components/RewardsActivitiesBottomSection.tsx diff --git a/src/blocks/illustrations/components/MultipleRewardsCoin.tsx b/src/blocks/illustrations/components/MultipleRewardsCoin.tsx new file mode 100644 index 0000000000..1d03bf22ae --- /dev/null +++ b/src/blocks/illustrations/components/MultipleRewardsCoin.tsx @@ -0,0 +1,350 @@ +import { FC } from 'react'; +import { IllustrationWrapper } from '../IllustrationWrapper'; +import { IllustrationProps } from '../Illustrations.types'; + +const MultipleRewardsIcon: FC = (allProps) => { + const { svgProps: props, ...restProps } = allProps; + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + } + {...restProps} + /> + ); +}; + +export default MultipleRewardsIcon; diff --git a/src/blocks/illustrations/components/RewardsCoin.tsx b/src/blocks/illustrations/components/RewardsCoin.tsx new file mode 100644 index 0000000000..1c90c5db7a --- /dev/null +++ b/src/blocks/illustrations/components/RewardsCoin.tsx @@ -0,0 +1,120 @@ +import { FC } from 'react'; +import { IllustrationWrapper } from '../IllustrationWrapper'; +import { IllustrationProps } from '../Illustrations.types'; + +const RewardsIcon: FC = (allProps) => { + const { svgProps: props, ...restProps } = allProps; + return ( + + + + + + + + + + + + + + + + + + + + + } + {...restProps} + /> + ); +}; + +export default RewardsIcon; diff --git a/src/blocks/illustrations/components/TripleRewardsCoin.tsx b/src/blocks/illustrations/components/TripleRewardsCoin.tsx new file mode 100644 index 0000000000..6c2732dab3 --- /dev/null +++ b/src/blocks/illustrations/components/TripleRewardsCoin.tsx @@ -0,0 +1,163 @@ +import { FC } from 'react'; +import { IllustrationWrapper } from '../IllustrationWrapper'; +import { IllustrationProps } from '../Illustrations.types'; + +const TripleRewardsIcon: FC = (allProps) => { + const { svgProps: props, ...restProps } = allProps; + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + } + {...restProps} + /> + ); +}; + +export default TripleRewardsIcon; diff --git a/src/blocks/illustrations/index.ts b/src/blocks/illustrations/index.ts index 6e0636a6e1..5dc810e0f7 100644 --- a/src/blocks/illustrations/index.ts +++ b/src/blocks/illustrations/index.ts @@ -2,9 +2,11 @@ export * from './IllustrationWrapper'; export * from './Illustrations.types'; export { default as ChatIllustration } from './components/Chat'; + export { default as ChatDark } from './components/ChatDark'; export { default as Communication } from './components/Communication'; + export { default as CommunicationDark } from './components/CommunicationDark'; export { default as Discord } from './components/Discord'; @@ -21,14 +23,22 @@ export { default as Points } from './components/Points'; export { default as Metamask } from './components/Metamask'; +export { default as MultipleRewardsCoin } from './components/MultipleRewardsCoin'; + export { default as Notification } from './components/Notification'; + export { default as NotificationDark } from './components/NotificationDark'; export { default as RewardsBell } from './components/RewardsBell'; + export { default as Referral } from './components/Referral'; +export { default as TripleRewardsCoin } from './components/TripleRewardsCoin'; + export { default as Twitter } from './components/Twitter'; export { default as RewardsActivity } from './components/RewardsActivity'; +export { default as RewardsCoin } from './components/RewardsCoin'; + export { default as PushLogo } from './components/PushLogo'; diff --git a/src/modules/rewards/Rewards.tsx b/src/modules/rewards/Rewards.tsx index a1fc28453d..9075b7f832 100644 --- a/src/modules/rewards/Rewards.tsx +++ b/src/modules/rewards/Rewards.tsx @@ -21,6 +21,7 @@ import { ReferralSection } from './components/ReferralSection'; import { RewardsTabsContainer } from './components/RewardsTabsContainer'; import UnlockProfileWrapper, { UNLOCK_PROFILE_TYPE } from 'components/chat/unlockProfile/UnlockProfileWrapper'; import { useRewardsContext } from 'contexts/RewardsContext'; +import { RewardsActivitiesBottomSection } from './components/RewardsActivitiesBottomSection'; export type RewardsProps = {}; @@ -83,6 +84,7 @@ const Rewards: FC = () => { /> {activeTab === 'dashboard' && } + {activeTab === 'activity' && } {userPushSDKInstance && userPushSDKInstance?.readmode() && isAuthModalVisible && ( diff --git a/src/modules/rewards/components/DailyRewardsItem.tsx b/src/modules/rewards/components/DailyRewardsItem.tsx new file mode 100644 index 0000000000..3417ccdf0d --- /dev/null +++ b/src/modules/rewards/components/DailyRewardsItem.tsx @@ -0,0 +1,33 @@ +// React and other libraries +import { FC } from 'react'; + +// components +import { Box, Text } from 'blocks'; + +interface DailyItemProp { + day: number; + points: number; + status: string; +} + +export type DailyRewardsItemProps = { + item: DailyItemProp; +}; + +const DailyRewardsItem: FC = ({ item }) => { + return ( + + + Day {item.day} + + + ); +}; + +export { DailyRewardsItem }; diff --git a/src/modules/rewards/components/DailyRewardsSection.tsx b/src/modules/rewards/components/DailyRewardsSection.tsx new file mode 100644 index 0000000000..47dba3989e --- /dev/null +++ b/src/modules/rewards/components/DailyRewardsSection.tsx @@ -0,0 +1,95 @@ +// React and other libraries +import { FC } from 'react'; + +// third party libraries +import { css } from 'styled-components'; + +// components +import { Box, Button, Text } from 'blocks'; +import { DailyRewardsItem } from './DailyRewardsItem'; + +export type DailyRewardsSectionProps = {}; + +const DailyRewardsSection: FC = () => { + const dailyRewardsArray = [ + { + day: 1, + points: 100, + status: 'active', + }, + { + day: 2, + points: 100, + status: 'active', + }, + { + day: 3, + points: 100, + status: 'active', + }, + { + day: 4, + points: 100, + status: 'active', + }, + + { + day: 5, + points: 100, + status: 'active', + }, + { + day: 6, + points: 100, + status: 'active', + }, + { + day: 7, + points: 100, + status: 'active', + }, + ]; + return ( + + + + + Daily Rewards + + + Check-in daily and unlock more rewards each day. + + + + + + + + {dailyRewardsArray.map((item) => ( + + ))} + + + ); +}; + +export { DailyRewardsSection }; diff --git a/src/modules/rewards/components/RewardsActivitiesBottomSection.tsx b/src/modules/rewards/components/RewardsActivitiesBottomSection.tsx new file mode 100644 index 0000000000..db8493ee7d --- /dev/null +++ b/src/modules/rewards/components/RewardsActivitiesBottomSection.tsx @@ -0,0 +1,31 @@ +// React and other libraries +import { FC } from 'react'; + +// hooks +import { useRewardsTabs } from '../hooks/useRewardsTabs'; + +// components +import { RewardsActivitiesSection } from './RewardsActivitiesSection'; +import { Box } from 'blocks'; + +export type RewardsActivitiesBottomSectionProps = {}; + +const RewardsActivitiesBottomSection: FC = () => { + const { activeTab } = useRewardsTabs(); + + return ( + <> + + {activeTab === 'activity' && } + {' '} + + ); +}; + +export { RewardsActivitiesBottomSection }; diff --git a/src/modules/rewards/components/RewardsActivitiesSection.tsx b/src/modules/rewards/components/RewardsActivitiesSection.tsx index 86c9648499..fb45a10fb6 100644 --- a/src/modules/rewards/components/RewardsActivitiesSection.tsx +++ b/src/modules/rewards/components/RewardsActivitiesSection.tsx @@ -15,6 +15,10 @@ const RewardsActivitiesSection = () => { Activities + + {/* add hr */} + + {/* update activities */} ); }; diff --git a/src/modules/rewards/components/RewardsTabsContainer.tsx b/src/modules/rewards/components/RewardsTabsContainer.tsx index ce0308712e..b0cc3bcdea 100644 --- a/src/modules/rewards/components/RewardsTabsContainer.tsx +++ b/src/modules/rewards/components/RewardsTabsContainer.tsx @@ -5,8 +5,8 @@ import { Box } from 'blocks'; import { RewardsTabs } from './RewardsTabs'; import { DashboardSection } from './DashboardSection'; import { LeaderBoardSection } from './LeaderBoardSection'; -import { RewardsActivitiesSection } from './RewardsActivitiesSection'; import { RewardsTabs as RewardsTabsType } from '../Rewards.types'; +import { DailyRewardsSection } from './DailyRewardsSection'; export type RewardsTabsContainerProps = { activeTab: RewardsTabsType; @@ -34,7 +34,7 @@ const RewardsTabsContainer: FC = ({ activeTab, handle /> {activeTab === 'dashboard' && handleSetActiveTab('activity')} />} - {activeTab === 'activity' && } + {activeTab === 'activity' && } {activeTab === 'leaderboard' && } From 6580f4392c0139a23fa3d35dbcc26d235e4b85f1 Mon Sep 17 00:00:00 2001 From: corlard3y Date: Wed, 17 Jul 2024 15:38:40 +0100 Subject: [PATCH 02/34] update daily rewards ui --- .../rewards/components/DailyRewardsItem.tsx | 28 ++++++++++++- .../components/DailyRewardsSection.tsx | 39 ++++++++++++------- 2 files changed, 51 insertions(+), 16 deletions(-) diff --git a/src/modules/rewards/components/DailyRewardsItem.tsx b/src/modules/rewards/components/DailyRewardsItem.tsx index 3417ccdf0d..315572f730 100644 --- a/src/modules/rewards/components/DailyRewardsItem.tsx +++ b/src/modules/rewards/components/DailyRewardsItem.tsx @@ -3,6 +3,9 @@ import { FC } from 'react'; // components import { Box, Text } from 'blocks'; +import RewardsIcon from 'blocks/illustrations/components/RewardsCoin'; +import MultipleRewardsIcon from 'blocks/illustrations/components/MultipleRewardsCoin'; +import TripleRewardsIcon from 'blocks/illustrations/components/TripleRewardsCoin'; interface DailyItemProp { day: number; @@ -18,14 +21,35 @@ const DailyRewardsItem: FC = ({ item }) => { return ( Day {item.day} + + {item.day < 5 && } + + {item.day >= 5 && item.day < 7 && } + + {item.day == 7 && } + + + +{item.points} + ); }; diff --git a/src/modules/rewards/components/DailyRewardsSection.tsx b/src/modules/rewards/components/DailyRewardsSection.tsx index 47dba3989e..24e434eba8 100644 --- a/src/modules/rewards/components/DailyRewardsSection.tsx +++ b/src/modules/rewards/components/DailyRewardsSection.tsx @@ -15,42 +15,46 @@ const DailyRewardsSection: FC = () => { { day: 1, points: 100, - status: 'active', + status: 'inactive', }, { day: 2, - points: 100, + points: 50, status: 'active', }, { day: 3, - points: 100, - status: 'active', + points: 25, + status: 'inactive', }, { day: 4, - points: 100, - status: 'active', + points: 25, + status: 'inactive', }, { day: 5, - points: 100, - status: 'active', + points: 75, + status: 'inactive', }, { day: 6, - points: 100, - status: 'active', + points: 75, + status: 'inactive', }, { day: 7, - points: 100, - status: 'active', + points: 150, + status: 'inactive', }, ]; return ( - + = () => { {dailyRewardsArray.map((item) => ( From 4f10807c7faca62dd4a86716a565a55f3a2cc31d Mon Sep 17 00:00:00 2001 From: corlard3y Date: Wed, 17 Jul 2024 16:15:11 +0100 Subject: [PATCH 03/34] update lock and add hr --- src/blocks/icons/components/Lock.tsx | 42 +++++++++++++++++++ src/blocks/icons/index.ts | 2 + .../components/RewardsActivitiesSection.tsx | 35 +++++++++++++++- 3 files changed, 78 insertions(+), 1 deletion(-) create mode 100644 src/blocks/icons/components/Lock.tsx diff --git a/src/blocks/icons/components/Lock.tsx b/src/blocks/icons/components/Lock.tsx new file mode 100644 index 0000000000..7ca6460e13 --- /dev/null +++ b/src/blocks/icons/components/Lock.tsx @@ -0,0 +1,42 @@ +import { FC } from 'react'; +import { IconWrapper } from '../IconWrapper'; +import { IconProps } from '../Icons.types'; + +const Lock: FC = (allProps) => { + const { svgProps: props, ...restProps } = allProps; + return ( + + + + + + + + + + + } + {...restProps} + /> + ); +}; + +export default Lock; diff --git a/src/blocks/icons/index.ts b/src/blocks/icons/index.ts index dbf5c774f8..5320bb711b 100644 --- a/src/blocks/icons/index.ts +++ b/src/blocks/icons/index.ts @@ -68,6 +68,8 @@ export { default as KebabMenuHorizontal } from './components/KebabMenuHorizontal export { default as LightFilled } from './components/LightFilled'; +export { default as Lock } from './components/Lock'; + export { default as MaximizeRight } from './components/MaximizeRight'; export { default as MaximizeLeft } from './components/MaximizeLeft'; diff --git a/src/modules/rewards/components/RewardsActivitiesSection.tsx b/src/modules/rewards/components/RewardsActivitiesSection.tsx index fb45a10fb6..db38968f89 100644 --- a/src/modules/rewards/components/RewardsActivitiesSection.tsx +++ b/src/modules/rewards/components/RewardsActivitiesSection.tsx @@ -1,5 +1,6 @@ -import { Box, Text } from 'blocks'; +import { Box, Lock, Text } from 'blocks'; import { RewardsActivitiesList } from './RewardsActivitiesList'; +import { css } from 'styled-components'; const RewardsActivitiesSection = () => { return ( @@ -16,6 +17,38 @@ const RewardsActivitiesSection = () => { + + + + Verify X and Discord to unlock more activities + + + {/* add hr */} {/* update activities */} From ee14242054d39582e242bba864b10472099baf65 Mon Sep 17 00:00:00 2001 From: corlard3y Date: Thu, 18 Jul 2024 13:53:09 +0100 Subject: [PATCH 04/34] add bonus section --- .../rewards/components/ActivityButton.tsx | 12 ++++++++++++ .../rewards/components/BonusActivities.tsx | 17 +++++++++++++++++ .../RewardsActivitiesBottomSection.tsx | 10 +++++----- src/queries/types/rewards.ts | 2 +- 4 files changed, 35 insertions(+), 6 deletions(-) create mode 100644 src/modules/rewards/components/BonusActivities.tsx diff --git a/src/modules/rewards/components/ActivityButton.tsx b/src/modules/rewards/components/ActivityButton.tsx index 85b644c7bf..5073f1cd94 100644 --- a/src/modules/rewards/components/ActivityButton.tsx +++ b/src/modules/rewards/components/ActivityButton.tsx @@ -25,6 +25,18 @@ const ActivityButton: FC = ({ usersSingleActivity, isLoadingActivity, }) => { + if (usersSingleActivity?.status === 'LOCKED') { + return ( + + ); + } + if (usersSingleActivity?.status === 'COMPLETED') { return ( + + + ); +}; + +export { BonusActivitiesItem }; diff --git a/src/modules/rewards/components/BonusActivitiesSection.tsx b/src/modules/rewards/components/BonusActivitiesSection.tsx new file mode 100644 index 0000000000..c9238ca098 --- /dev/null +++ b/src/modules/rewards/components/BonusActivitiesSection.tsx @@ -0,0 +1,88 @@ +// React and other libraries +import { FC } from 'react'; + +// third party libraries +import { css } from 'styled-components'; + +// components +import { Box, Text } from 'blocks'; +import { BonusActivitiesItem } from './BonusActivitiesItem'; + +export type BonusActivitiesSectionProps = {}; + +const BonusActivities: FC = () => { + const bonusActivities = [ + { + header: 'Create a Channel on Push', + subheader: 'Visit app.push.org and create a notification channel.', + points: 20000, + }, + { + header: '100 Subscribers', + subheader: 'Get 100 Subscribers for your channel.', + points: 500, + }, + { + header: '500 Subscribers', + subheader: 'Get 500 Subscribers for your channel.', + points: 3000, + }, + { + header: '1k Subscribers', + subheader: 'Get 1,000 Subscribers for your channel.', + points: 6000, + }, + { + header: '5k Subscribers', + subheader: 'Get 5,000 Subscribers for your channel.', + points: 32000, + }, + { + header: '10k Subscribers', + subheader: 'Get 10,000 Subscribers for your channel.', + points: 72000, + }, + { + header: '50k Subscribers', + subheader: 'Get 50,000 Subscribers for your channel.', + multipliers: 1.5, + }, + { + header: '100k Subscribers', + subheader: 'Get 100,000 Subscribers for your channel.', + multipliers: 2, + }, + ]; + return ( + + + Bonus Activities + + + + {bonusActivities.map((item) => ( + + ))} + + + ); +}; + +export { BonusActivities }; diff --git a/src/modules/rewards/components/RewardsActivitiesBottomSection.tsx b/src/modules/rewards/components/RewardsActivitiesBottomSection.tsx index c87e007f84..d071b4f4ce 100644 --- a/src/modules/rewards/components/RewardsActivitiesBottomSection.tsx +++ b/src/modules/rewards/components/RewardsActivitiesBottomSection.tsx @@ -6,7 +6,9 @@ import { FC } from 'react'; // components import { RewardsActivitiesSection } from './RewardsActivitiesSection'; import { Box } from 'blocks'; -import { BonusActivities } from './BonusActivities'; +import { BonusActivities } from './BonusActivitiesSection'; +import { StakePushSection } from './StakePushSection'; +import { stakePush, stakePushMultiplier } from '../utils/stakePushArray'; export type RewardsActivitiesBottomSectionProps = {}; @@ -14,7 +16,7 @@ const RewardsActivitiesBottomSection: FC = return ( <> = + + + + + + + + ); }; diff --git a/src/modules/rewards/components/RewardsActivityTitle.tsx b/src/modules/rewards/components/RewardsActivityTitle.tsx index f17b304fca..7dfcd459e8 100644 --- a/src/modules/rewards/components/RewardsActivityTitle.tsx +++ b/src/modules/rewards/components/RewardsActivityTitle.tsx @@ -14,10 +14,21 @@ const RewardsActivityTitle: FC = ({ activityTitle, is const { preText, url, linkedText, postText } = extractedTitle; return ( - + {preText} - - + + {linkedText} @@ -26,11 +37,16 @@ const RewardsActivityTitle: FC = ({ activityTitle, is ); } else { - return - - {activityTitle} - - + return ( + + + {activityTitle} + + + ); } }; diff --git a/src/modules/rewards/components/StakePushActivitiesListItem.tsx b/src/modules/rewards/components/StakePushActivitiesListItem.tsx new file mode 100644 index 0000000000..c3963c562a --- /dev/null +++ b/src/modules/rewards/components/StakePushActivitiesListItem.tsx @@ -0,0 +1,96 @@ +import { Box, Button, Lock, Multiplier, RewardsBell, Text } from 'blocks'; + +const StakePushActivitiesListItem = ({ item }: { item: any }) => { + return ( + + + + + + + + + {item.header} + + {item.points && ( + + + + {item.points?.toLocaleString()} + + + )} + {item.multiplier && ( + + + + {item.multiplier?.toLocaleString()}x + + + )}{' '} + + + + + + + + ); +}; + +export { StakePushActivitiesListItem }; diff --git a/src/modules/rewards/components/StakePushSection.tsx b/src/modules/rewards/components/StakePushSection.tsx new file mode 100644 index 0000000000..63f6adb9cc --- /dev/null +++ b/src/modules/rewards/components/StakePushSection.tsx @@ -0,0 +1,92 @@ +// React and other libraries +import { FC } from 'react'; + +// components +import { Box, Clockwise, Text } from 'blocks'; +import { StakePushActivitiesListItem } from './StakePushActivitiesListItem'; +import { css } from 'styled-components'; + +export type StakePushPoints = { + stakeArray: any; + title: string; + subtitle: string; + timeline?: boolean; + bottomText?: boolean; +}; + +const StakePushSection: FC = ({ title, subtitle, timeline, stakeArray, bottomText }) => { + return ( + + + + + {title} + + + {subtitle} + + + + {timeline && ( + + + + Activity resets in 13 days + + + )} + + + + {stakeArray?.map((item: any) => ( + + ))} + + + {bottomText && ( + + Activity rewards will be distributed and added to your points after the epoch ends. + + )} + + ); +}; + +export { StakePushSection }; diff --git a/src/modules/rewards/utils/stakePushArray.ts b/src/modules/rewards/utils/stakePushArray.ts new file mode 100644 index 0000000000..592972daec --- /dev/null +++ b/src/modules/rewards/utils/stakePushArray.ts @@ -0,0 +1,105 @@ +export const stakePush = [ + { + header: 'Stake 1k Push', + points: 1000, + status: 'Locked', + }, + { + header: 'Stake 10k Push', + points: 10000, + status: 'Locked', + }, + { + header: 'Stake 50k Push', + points: 50000, + status: 'Locked', + }, + { + header: 'Stake 100k Push', + points: 100000, + status: 'Locked', + }, + { + header: 'Stake 500k Push', + points: 500000, + status: 'Locked', + }, + { + header: 'Stake 1 UNI V2 LP', + points: 500, + status: 'Locked', + }, + { + header: 'Stake 10 UNI V2 LP', + points: 5000, + status: 'Locked', + }, + { + header: 'Stake 50 UNI V2 LP', + points: 25000, + status: 'Locked', + }, + { + header: 'Stake 100 UNI V2 LP', + points: 50000, + status: 'Locked', + }, + { + header: 'Stake 500 UNI V2 LP', + points: 250000, + status: 'Locked', + }, +]; + +export const stakePushMultiplier = [ + { + header: 'Stake 1k Push', + multiplier: 1.1, + status: 'Locked', + }, + { + header: 'Stake 10k Push', + multiplier: 1.5, + status: 'Locked', + }, + { + header: 'Stake 50k Push', + multiplier: 2, + status: 'Locked', + }, + { + header: 'Stake 100k Push', + multiplier: 2.5, + status: 'Locked', + }, + { + header: 'Stake 500k Push', + multiplier: 3, + status: 'Locked', + }, + { + header: 'Stake 1 UNI V2 LP', + multiplier: 1.1, + status: 'Locked', + }, + { + header: 'Stake 10 UNI V2 LP', + multiplier: 1.5, + status: 'Locked', + }, + { + header: 'Stake 50 UNI V2 LP', + multiplier: 2, + status: 'Locked', + }, + { + header: 'Stake 100 UNI V2 LP', + multiplier: 2.5, + status: 'Locked', + }, + { + header: 'Stake 500 UNI V2 LP', + multiplier: 3, + status: 'Locked', + }, +]; From d4f424c0b4d41c840f5c65a8528bcd1017b05f13 Mon Sep 17 00:00:00 2001 From: corlard3y Date: Tue, 23 Jul 2024 10:29:43 +0100 Subject: [PATCH 06/34] fix gap --- .../components/RewardsActivitiesBottomSection.tsx | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/src/modules/rewards/components/RewardsActivitiesBottomSection.tsx b/src/modules/rewards/components/RewardsActivitiesBottomSection.tsx index d071b4f4ce..c9de814e40 100644 --- a/src/modules/rewards/components/RewardsActivitiesBottomSection.tsx +++ b/src/modules/rewards/components/RewardsActivitiesBottomSection.tsx @@ -14,12 +14,17 @@ export type RewardsActivitiesBottomSectionProps = {}; const RewardsActivitiesBottomSection: FC = () => { return ( - <> + @@ -57,7 +62,7 @@ const RewardsActivitiesBottomSection: FC = subtitle="Visit app.push.org/yieldv2 and stake tokens in the Fee Pool or LP Pool to activate multipliers." /> - + ); }; From 81b221df57eabb196c4dc55ffcd33ad2e35ec1df Mon Sep 17 00:00:00 2001 From: corlard3y Date: Wed, 24 Jul 2024 14:04:14 +0100 Subject: [PATCH 07/34] update bonus and other rewards --- src/App.tsx | 2 +- .../rewards/components/ActivityButton.tsx | 22 +-- .../components/ActivityVerificationButton.tsx | 37 ++++ .../components/BonusActivitiesItem.tsx | 162 ++++++++++-------- .../components/BonusActivitiesSection.tsx | 77 ++++----- .../RewardsActivitiesBottomSection.tsx | 4 +- .../components/RewardsActivitiesList.tsx | 71 +++++++- .../components/RewardsActivitiesSection.tsx | 39 +---- .../rewards/hooks/useVerifyRewards.tsx | 97 +++++++++++ src/queries/types/rewards.ts | 25 ++- 10 files changed, 358 insertions(+), 178 deletions(-) create mode 100644 src/modules/rewards/hooks/useVerifyRewards.tsx diff --git a/src/App.tsx b/src/App.tsx index 2391304112..66a0305c6b 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -331,7 +331,7 @@ export default function App() { = ({ usersSingleActivity, isLoadingActivity, }) => { - if (usersSingleActivity?.status === 'LOCKED') { - return ( - - ); - } + // if (usersSingleActivity?.status === 'LOCKED') { + // return ( + // + // ); + // } if (usersSingleActivity?.status === 'COMPLETED') { return ( diff --git a/src/modules/rewards/components/ActivityVerificationButton.tsx b/src/modules/rewards/components/ActivityVerificationButton.tsx index bb009ee639..2b1f4fc055 100644 --- a/src/modules/rewards/components/ActivityVerificationButton.tsx +++ b/src/modules/rewards/components/ActivityVerificationButton.tsx @@ -16,6 +16,7 @@ import { UserStoreType } from 'types'; // components import { Button } from 'blocks'; +import { useVerifyRewards } from '../hooks/useVerifyRewards'; type ActivityVerificationButtonProps = { userId: string; @@ -37,6 +38,27 @@ export const ActivityVerificationButton = ({ const { isWalletConnected } = useAccount(); const { userPushSDKInstance } = useSelector((state: UserStoreType) => state.user); + const otherRewardActivities = [ + 'create_gated_group_push_chat', + 'subscribe_5_channels_push', + 'subscribe_20_channels_push', + 'setup_push_user_profile', + 'active_push_chat_user', + 'hold_push_alpha_access_nft', + 'hold_push_rockstar_nft', + ]; + + const bonusRewardActivities = [ + 'create_channel_push', + 'reach_100_subscribers', + 'reach_500_subscribers', + 'reach_1000_subscribers', + 'reach_5000_subscribers', + 'reach_10000_subscribers', + 'reach_50000_subscribers', + 'reach_100000_subscribers', + ]; + const { handleTwitterVerification, verifyingTwitter, twitterActivityStatus } = useVerifyTwitter({ activityTypeId, refetchActivity, @@ -49,6 +71,12 @@ export const ActivityVerificationButton = ({ setErrorMessage, }); + const { handleRewardsVerification, verifyingRewards, rewardsActivityStatus } = useVerifyRewards({ + activityTypeId, + refetchActivity, + setErrorMessage, + }); + const activityData = useMemo(() => { if (activityType === 'follow_push_on_discord') { return { @@ -67,6 +95,15 @@ export const ActivityVerificationButton = ({ isVerificationComplete: twitterActivityStatus == 'Claimed' || twitterActivityStatus == 'Pending', }; } + + if (otherRewardActivities.includes(activityType) || bonusRewardActivities.includes(activityType)) { + return { + isLoading: verifyingRewards, + label: 'Verify', + action: handleRewardsVerification, + isVerificationComplete: rewardsActivityStatus == 'Claimed' || rewardsActivityStatus == 'Pending', + }; + } }, [activityType, userPushSDKInstance, twitterActivityStatus, discordActivityStatus]); const { isAuthenticated, authButton } = useAuthWithButton({ diff --git a/src/modules/rewards/components/BonusActivitiesItem.tsx b/src/modules/rewards/components/BonusActivitiesItem.tsx index 7c2a7e6b52..f4e2a3b832 100644 --- a/src/modules/rewards/components/BonusActivitiesItem.tsx +++ b/src/modules/rewards/components/BonusActivitiesItem.tsx @@ -1,94 +1,114 @@ // React and other libraries -import { FC } from 'react'; +import { FC, useState } from 'react'; -// components -import { Box, Button, Lock, RewardsBell, Text } from 'blocks'; +// hooks +import { Activity, useGetRewardsActivity } from 'queries'; -interface BonusItemProp { - header: string; - subheader: string; - points?: number; - multipliers?: number; -} +// components +import { Box, Lock, RewardsBell, Skeleton, Text } from 'blocks'; +import { RewardsActivityTitle } from './RewardsActivityTitle'; +import { ActivityButton } from './ActivityButton'; export type BonusActivitiesItemProps = { - item: BonusItemProp; + userId: string; + activity: Activity; + isLoadingItem: boolean; }; -const BonusActivitiesItem: FC = ({ item }) => { - return ( - - - - +const BonusActivitiesItem: FC = ({ userId, activity, isLoadingItem }) => { + const { + data: usersSingleActivity, + isLoading, + refetch: refetchActivity, + } = useGetRewardsActivity({ userId, activityId: activity.id }, { enabled: !!userId }); + + const [errorMessage, setErrorMessage] = useState(''); + return ( + - - {item.header} - - + + + - {item.subheader} - - + + + + + {activity.activityDesc} + + - - - - {item.points?.toLocaleString()} Points - - + + + {activity.points?.toLocaleString()} Points + + - - + + - + ); }; diff --git a/src/modules/rewards/components/BonusActivitiesSection.tsx b/src/modules/rewards/components/BonusActivitiesSection.tsx index c9238ca098..a1de241cdd 100644 --- a/src/modules/rewards/components/BonusActivitiesSection.tsx +++ b/src/modules/rewards/components/BonusActivitiesSection.tsx @@ -4,6 +4,13 @@ import { FC } from 'react'; // third party libraries import { css } from 'styled-components'; +// hooks +import { useGetRewardsActivities, useGetUserRewardsDetails } from 'queries'; +import { useAccount } from 'hooks'; + +// helpers +import { walletToCAIP10 } from 'helpers/w2w'; + // components import { Box, Text } from 'blocks'; import { BonusActivitiesItem } from './BonusActivitiesItem'; @@ -11,48 +18,25 @@ import { BonusActivitiesItem } from './BonusActivitiesItem'; export type BonusActivitiesSectionProps = {}; const BonusActivities: FC = () => { - const bonusActivities = [ - { - header: 'Create a Channel on Push', - subheader: 'Visit app.push.org and create a notification channel.', - points: 20000, - }, - { - header: '100 Subscribers', - subheader: 'Get 100 Subscribers for your channel.', - points: 500, - }, - { - header: '500 Subscribers', - subheader: 'Get 500 Subscribers for your channel.', - points: 3000, - }, - { - header: '1k Subscribers', - subheader: 'Get 1,000 Subscribers for your channel.', - points: 6000, - }, - { - header: '5k Subscribers', - subheader: 'Get 5,000 Subscribers for your channel.', - points: 32000, - }, - { - header: '10k Subscribers', - subheader: 'Get 10,000 Subscribers for your channel.', - points: 72000, - }, - { - header: '50k Subscribers', - subheader: 'Get 50,000 Subscribers for your channel.', - multipliers: 1.5, - }, - { - header: '100k Subscribers', - subheader: 'Get 100,000 Subscribers for your channel.', - multipliers: 2, - }, - ]; + const { account } = useAccount(); + + const { data: rewardActivitiesResponse, isLoading: isLoadingActivities } = useGetRewardsActivities({ pageSize: 50 }); + + // Getting user Id by wallet address + const caip10WalletAddress = walletToCAIP10({ account }); + const { data: userDetails } = useGetUserRewardsDetails({ + caip10WalletAddress: caip10WalletAddress, + }); + + const isLoading = isLoadingActivities; + + // If there are activities then render them else render 2 skeletons + const activityList = isLoading + ? Array(8).fill(0) + : rewardActivitiesResponse?.pages.flatMap((page) => page.activities) || []; + + const bonusActivities = activityList.filter((activity) => activity.index >= 5 && activity.index <= 12); + return ( = () => { } `} > - {bonusActivities.map((item) => ( - + {bonusActivities.map((activity) => ( + ))} diff --git a/src/modules/rewards/components/RewardsActivitiesBottomSection.tsx b/src/modules/rewards/components/RewardsActivitiesBottomSection.tsx index c9de814e40..1fc58d2060 100644 --- a/src/modules/rewards/components/RewardsActivitiesBottomSection.tsx +++ b/src/modules/rewards/components/RewardsActivitiesBottomSection.tsx @@ -1,14 +1,14 @@ // React and other libraries import { FC } from 'react'; -// hooks +// helpers +import { stakePush, stakePushMultiplier } from '../utils/stakePushArray'; // components import { RewardsActivitiesSection } from './RewardsActivitiesSection'; import { Box } from 'blocks'; import { BonusActivities } from './BonusActivitiesSection'; import { StakePushSection } from './StakePushSection'; -import { stakePush, stakePushMultiplier } from '../utils/stakePushArray'; export type RewardsActivitiesBottomSectionProps = {}; diff --git a/src/modules/rewards/components/RewardsActivitiesList.tsx b/src/modules/rewards/components/RewardsActivitiesList.tsx index e78a563aae..c83a6df8e1 100644 --- a/src/modules/rewards/components/RewardsActivitiesList.tsx +++ b/src/modules/rewards/components/RewardsActivitiesList.tsx @@ -1,7 +1,9 @@ import { FC } from 'react'; + +import { css } from 'styled-components'; import InfiniteScroll from 'react-infinite-scroller'; -import { Box } from 'blocks'; +import { Box, Lock, Text } from 'blocks'; import { useAccount } from 'hooks'; import { walletToCAIP10 } from 'helpers/w2w'; import { Activity, useGetRewardsActivities, useGetUserRewardsDetails } from 'queries'; @@ -20,7 +22,7 @@ const RewardsActivitiesList: FC = () => { fetchNextPage, hasNextPage, isFetchingNextPage, - } = useGetRewardsActivities({ pageSize: 5 }); + } = useGetRewardsActivities({ pageSize: 50 }); // Getting user Id by wallet address const caip10WalletAddress = walletToCAIP10({ account }); @@ -36,6 +38,11 @@ const RewardsActivitiesList: FC = () => { ? Array(2).fill(0) : rewardActivitiesResponse?.pages.flatMap((page) => page.activities) || []; + // Filter activities based on the index + const firstGroupActivities = activityList.filter((activity) => activity.index >= 0 && activity.index <= 1); + + const secondGroupActivities = activityList.filter((activity) => activity.index >= 13); + const hasMoreData = !isFetchingNextPage && hasNextPage; return ( @@ -62,13 +69,59 @@ const RewardsActivitiesList: FC = () => { useWindow={false} threshold={150} > - {activityList.map((activity: Activity) => ( - + {firstGroupActivities?.map((activity: Activity) => ( + <> + + + ))} + + + + + Verify X and Discord to unlock more activities + + + + {secondGroupActivities?.map((activity: Activity) => ( + <> + + ))} diff --git a/src/modules/rewards/components/RewardsActivitiesSection.tsx b/src/modules/rewards/components/RewardsActivitiesSection.tsx index db38968f89..86c9648499 100644 --- a/src/modules/rewards/components/RewardsActivitiesSection.tsx +++ b/src/modules/rewards/components/RewardsActivitiesSection.tsx @@ -1,6 +1,5 @@ -import { Box, Lock, Text } from 'blocks'; +import { Box, Text } from 'blocks'; import { RewardsActivitiesList } from './RewardsActivitiesList'; -import { css } from 'styled-components'; const RewardsActivitiesSection = () => { return ( @@ -16,42 +15,6 @@ const RewardsActivitiesSection = () => { Activities - - - - - Verify X and Discord to unlock more activities - - - - {/* add hr */} - - {/* update activities */} ); }; diff --git a/src/modules/rewards/hooks/useVerifyRewards.tsx b/src/modules/rewards/hooks/useVerifyRewards.tsx new file mode 100644 index 0000000000..d2df31a1f6 --- /dev/null +++ b/src/modules/rewards/hooks/useVerifyRewards.tsx @@ -0,0 +1,97 @@ +// react and other libraries +import { useEffect, useState } from 'react'; + +// third party libraries +import { useSelector } from 'react-redux'; + +// helpers +import { generateVerificationProof } from '../utils/generateVerificationProof'; +import { useClaimRewardsActivity } from 'queries'; + +// types +import { UserStoreType } from 'types'; + +export type UseVerifyRewardsParams = { + activityTypeId: string; + setErrorMessage: (errorMessage: string) => void; + refetchActivity: () => void; +}; + +const useVerifyRewards = ({ activityTypeId, setErrorMessage, refetchActivity }: UseVerifyRewardsParams) => { + const [verifyingRewards, setVerifyingRewards] = useState(false); + const [rewardsActivityStatus, setRewardsActivityStatus] = useState(null); + const { userPushSDKInstance } = useSelector((state: UserStoreType) => state.user); + const [updatedId, setUpdatedId] = useState(null); + + useEffect(() => { + setErrorMessage(''); + }, [setErrorMessage]); + + const handleRewardsVerification = (userId: string) => { + setUpdatedId(userId); + handleVerify(userId); + }; + + const { mutate: claimRewardsActivity } = useClaimRewardsActivity({ + userId: updatedId as string, + activityTypeId, + }); + + const handleVerify = async (userId: string | null) => { + setErrorMessage(''); + setVerifyingRewards(true); + + const data = {}; + + const verificationProof = await generateVerificationProof(data, userPushSDKInstance); + + if (verificationProof == null || verificationProof == undefined) { + if (userPushSDKInstance && userPushSDKInstance.readmode()) { + setVerifyingRewards(false); + setErrorMessage('Please Enable Push profile'); + } + return; + } + + console.log('final stage', activityTypeId); + + // claimRewardsActivity( + // { + // userId: updatedId || (userId as string), + // activityTypeId, + // pgpPublicKey: userPushSDKInstance.pgpPublicKey as string, + // data: {}, + // verificationProof: verificationProof as string, + // }, + // { + // onSuccess: (response) => { + // if (response.status === 'COMPLETED') { + // setRewardsActivityStatus('Claimed'); + // refetchActivity(); + // setVerifyingRewards(false); + // } + // if (response.status === 'PENDING') { + // setRewardsActivityStatus('Pending'); + // refetchActivity(); + // setVerifyingRewards(false); + // } + // }, + // onError: (error: any) => { + // console.log('Error in creating activity', error); + // setVerifyingRewards(false); + // if (error.name) { + // setErrorMessage(error.response.data.error); + // } + // }, + // } + // ); + }; + + return { + verifyingRewards, + rewardsActivityStatus, + handleRewardsVerification, + }; +}; + +export { useVerifyRewards }; diff --git a/src/queries/types/rewards.ts b/src/queries/types/rewards.ts index 0bcc0626bc..49cea4ebac 100644 --- a/src/queries/types/rewards.ts +++ b/src/queries/types/rewards.ts @@ -6,7 +6,25 @@ export type RewardsAcitivitesResponse = { }; //TODO: Remove the test expiry type -export type ActvityType = 'follow_push_on_discord' | 'follow_push_on_twitter' | 'test_expiry_type'; +export type ActvityType = + | 'follow_push_on_discord' + | 'follow_push_on_twitter' + | 'test_expiry_type' + | 'create_gated_group_push_chat' + | 'subscribe_5_channels_push' + | 'subscribe_20_channels_push' + | 'setup_push_user_profile' + | 'active_push_chat_user' + | 'hold_push_alpha_access_nft' + | 'hold_push_rockstar_nft' + | 'create_channel_push' + | 'reach_100_subscribers' + | 'reach_500_subscribers' + | 'reach_1000_subscribers' + | 'reach_5000_subscribers' + | 'reach_10000_subscribers' + | 'reach_50000_subscribers' + | 'reach_100000_subscribers'; export type Activity = { id: string; @@ -18,6 +36,9 @@ export type Activity = { expiryType: number; name?: string; JoinURL: string; + index: number; + status: 'ENABLED' | 'DISABLED'; + tags: []; }; export type UsersAllActivitiesResponse = { @@ -32,7 +53,7 @@ export type UsersActivity = { userId: string; activityTypeId: string; data: { twitter?: string; discord?: string }; - status: 'COMPLETED' | 'PENDING' | 'LOCKED'; + status: 'COMPLETED' | 'PENDING'; points: number; multiplier: number; verificationProof: string; From b56f68dee1e9a7acd66c04c87059d00e1d51e2af Mon Sep 17 00:00:00 2001 From: corlard3y Date: Wed, 24 Jul 2024 16:18:02 +0100 Subject: [PATCH 08/34] update daily rewards --- .../rewards/components/DailyRewardsItem.tsx | 28 ++++---- .../components/DailyRewardsSection.tsx | 65 ++++++++----------- 2 files changed, 38 insertions(+), 55 deletions(-) diff --git a/src/modules/rewards/components/DailyRewardsItem.tsx b/src/modules/rewards/components/DailyRewardsItem.tsx index 315572f730..22f776ba96 100644 --- a/src/modules/rewards/components/DailyRewardsItem.tsx +++ b/src/modules/rewards/components/DailyRewardsItem.tsx @@ -6,23 +6,19 @@ import { Box, Text } from 'blocks'; import RewardsIcon from 'blocks/illustrations/components/RewardsCoin'; import MultipleRewardsIcon from 'blocks/illustrations/components/MultipleRewardsCoin'; import TripleRewardsIcon from 'blocks/illustrations/components/TripleRewardsCoin'; - -interface DailyItemProp { - day: number; - points: number; - status: string; -} +import { Activity } from 'queries'; export type DailyRewardsItemProps = { - item: DailyItemProp; + activity: Activity; }; -const DailyRewardsItem: FC = ({ item }) => { +const DailyRewardsItem: FC = ({ activity }) => { + const day = parseInt(activity?.activityTitle?.split('- Day')[1]); return ( = ({ item }) => { > - Day {item.day} + {activity?.activityTitle?.split('-')[1]} - {item.day < 5 && } + {day < 5 && } - {item.day >= 5 && item.day < 7 && } + {day >= 5 && day < 7 && } - {item.day == 7 && } + {day == 7 && } - +{item.points} + {activity.points?.toLocaleString()} Points ); diff --git a/src/modules/rewards/components/DailyRewardsSection.tsx b/src/modules/rewards/components/DailyRewardsSection.tsx index 24e434eba8..564cc88487 100644 --- a/src/modules/rewards/components/DailyRewardsSection.tsx +++ b/src/modules/rewards/components/DailyRewardsSection.tsx @@ -4,6 +4,9 @@ import { FC } from 'react'; // third party libraries import { css } from 'styled-components'; +// hooks +import { useGetRewardsActivities } from 'queries'; + // components import { Box, Button, Text } from 'blocks'; import { DailyRewardsItem } from './DailyRewardsItem'; @@ -11,44 +14,28 @@ import { DailyRewardsItem } from './DailyRewardsItem'; export type DailyRewardsSectionProps = {}; const DailyRewardsSection: FC = () => { - const dailyRewardsArray = [ - { - day: 1, - points: 100, - status: 'inactive', - }, - { - day: 2, - points: 50, - status: 'active', - }, - { - day: 3, - points: 25, - status: 'inactive', - }, - { - day: 4, - points: 25, - status: 'inactive', - }, + const { data: rewardActivitiesResponse, isLoading: isLoadingActivities } = useGetRewardsActivities({ pageSize: 50 }); + + const isLoading = isLoadingActivities; + // const isLoading = isLoadingUserDetails || isLoadingActivities; + + // If there are activities then render them else render 2 skeletons + const activityList = isLoading + ? Array(7).fill(0) + : rewardActivitiesResponse?.pages.flatMap((page) => page.activities) || []; + + // Filter activities based on the index + const dailyActivities = activityList.filter((activity) => activity.index < 0); + + // Function to extract the day number from the activity title or type + const getDayNumber = (activity: any) => { + const dayMatch = activity?.activityTitle.match(/Day (\d+)/) || activity?.activityType.match(/day(\d+)/); + return dayMatch ? parseInt(dayMatch[1], 10) : 0; + }; + + // Sort the activities based on the extracted day number + const dailyRewardsActivities = dailyActivities?.sort((a, b) => getDayNumber(a) - getDayNumber(b)); - { - day: 5, - points: 75, - status: 'inactive', - }, - { - day: 6, - points: 75, - status: 'inactive', - }, - { - day: 7, - points: 150, - status: 'inactive', - }, - ]; return ( = () => { } `} > - {dailyRewardsArray.map((item) => ( - + {dailyRewardsActivities.map((activity) => ( + ))} From 717d839a9ce6ebc6c0e3b816547829427d57ed5b Mon Sep 17 00:00:00 2001 From: corlard3y Date: Thu, 25 Jul 2024 13:14:51 +0100 Subject: [PATCH 09/34] add sendrecentactivities api --- .../components/DailyRewardsSection.tsx | 38 ++++++++++++++++++- .../hooks/rewards/claimRewardsActivity.ts | 2 +- src/queries/hooks/rewards/index.ts | 1 + .../hooks/rewards/useSendRecentActivities.ts | 9 +++++ .../rewards/createUserRewardsDetailsModel.ts | 2 +- src/queries/models/rewards/index.ts | 1 + .../rewards/sendRecentActivitiesModel.ts | 1 + src/queries/queryKeys.ts | 1 + src/queries/services/rewards/index.ts | 1 + .../services/rewards/sendRecentActivities.ts | 14 +++++++ src/queries/types/rewards.ts | 5 +++ 11 files changed, 72 insertions(+), 3 deletions(-) create mode 100644 src/queries/hooks/rewards/useSendRecentActivities.ts create mode 100644 src/queries/models/rewards/sendRecentActivitiesModel.ts create mode 100644 src/queries/services/rewards/sendRecentActivities.ts diff --git a/src/modules/rewards/components/DailyRewardsSection.tsx b/src/modules/rewards/components/DailyRewardsSection.tsx index 564cc88487..9d51a8632b 100644 --- a/src/modules/rewards/components/DailyRewardsSection.tsx +++ b/src/modules/rewards/components/DailyRewardsSection.tsx @@ -5,7 +5,11 @@ import { FC } from 'react'; import { css } from 'styled-components'; // hooks -import { useGetRewardsActivities } from 'queries'; +import { useGetRewardsActivities, useGetUserRewardsDetails, useSendRecentActivities } from 'queries'; +import { useAccount } from 'hooks'; + +//helpers +import { walletToCAIP10 } from 'helpers/w2w'; // components import { Box, Button, Text } from 'blocks'; @@ -14,6 +18,13 @@ import { DailyRewardsItem } from './DailyRewardsItem'; export type DailyRewardsSectionProps = {}; const DailyRewardsSection: FC = () => { + const { account } = useAccount(); + + // Getting user Id by wallet address + const caip10WalletAddress = walletToCAIP10({ account }); + const { data: userDetails } = useGetUserRewardsDetails({ + caip10WalletAddress: caip10WalletAddress, + }); const { data: rewardActivitiesResponse, isLoading: isLoadingActivities } = useGetRewardsActivities({ pageSize: 50 }); const isLoading = isLoadingActivities; @@ -36,6 +47,30 @@ const DailyRewardsSection: FC = () => { // Sort the activities based on the extracted day number const dailyRewardsActivities = dailyActivities?.sort((a, b) => getDayNumber(a) - getDayNumber(b)); + const { mutate: sendRecentActivities } = useSendRecentActivities({ + userId: userDetails?.userId as string, + }); + + const handleCheckIn = () => { + // Extract activityType into an array + const activityTitles = dailyRewardsActivities?.map((activity) => activity.activityType); + + console.log(activityTitles); + + sendRecentActivities( + { + userId: userDetails?.userId as string, + activities: ['a', 'b'], + }, + { + onSuccess: () => {}, + onError: (err) => { + console.error('Error', err); + }, + } + ); + }; + return ( = () => { diff --git a/src/queries/hooks/rewards/claimRewardsActivity.ts b/src/queries/hooks/rewards/claimRewardsActivity.ts index 65103f6744..690cd7ee7d 100644 --- a/src/queries/hooks/rewards/claimRewardsActivity.ts +++ b/src/queries/hooks/rewards/claimRewardsActivity.ts @@ -5,5 +5,5 @@ import { claimRewardsActivity } from 'queries/services'; export const useClaimRewardsActivity = (payload: { userId: string; activityTypeId: string }) => useMutation({ mutationKey: [claimRewards, payload.userId, payload.activityTypeId], - mutationFn: claimRewardsActivity + mutationFn: claimRewardsActivity, }); diff --git a/src/queries/hooks/rewards/index.ts b/src/queries/hooks/rewards/index.ts index 85bd786ba1..1337eb2b58 100644 --- a/src/queries/hooks/rewards/index.ts +++ b/src/queries/hooks/rewards/index.ts @@ -5,3 +5,4 @@ export * from './claimRewardsActivity'; export * from './useGetUserRewardsDetails'; export * from './useCreateRewardsUser'; export * from './useGetRewardsLedearboard'; +export * from './useSendRecentActivities'; diff --git a/src/queries/hooks/rewards/useSendRecentActivities.ts b/src/queries/hooks/rewards/useSendRecentActivities.ts new file mode 100644 index 0000000000..2f6690dc60 --- /dev/null +++ b/src/queries/hooks/rewards/useSendRecentActivities.ts @@ -0,0 +1,9 @@ +import { useMutation } from '@tanstack/react-query'; +import { sendUserRecentActivities } from 'queries/queryKeys'; +import { sendRecentActivities } from 'queries/services'; + +export const useSendRecentActivities = (payload: { userId: string }) => + useMutation({ + mutationKey: [sendUserRecentActivities, payload?.userId], + mutationFn: sendRecentActivities, + }); diff --git a/src/queries/models/rewards/createUserRewardsDetailsModel.ts b/src/queries/models/rewards/createUserRewardsDetailsModel.ts index ce12240975..643b58182f 100644 --- a/src/queries/models/rewards/createUserRewardsDetailsModel.ts +++ b/src/queries/models/rewards/createUserRewardsDetailsModel.ts @@ -1,4 +1,4 @@ -import { createUserRewardsDetailsResponse } from '../../types/rewards'; +import { UserRewardsDetailResponse } from '../../types/rewards'; export const createUserRewardsDetailModel = (response: UserRewardsDetailResponse): UserRewardsDetailResponse => response; diff --git a/src/queries/models/rewards/index.ts b/src/queries/models/rewards/index.ts index c7e2db9da7..d6dcc0a80c 100644 --- a/src/queries/models/rewards/index.ts +++ b/src/queries/models/rewards/index.ts @@ -5,3 +5,4 @@ export * from './claimRewardsActivityModelCreator'; export * from './getUserRewardDetailsModel'; export * from './createUserRewardsDetailsModel'; export * from './getRewardsLeaderboardModalCreator'; +export * from './sendRecentActivitiesModel'; diff --git a/src/queries/models/rewards/sendRecentActivitiesModel.ts b/src/queries/models/rewards/sendRecentActivitiesModel.ts new file mode 100644 index 0000000000..9d3895c433 --- /dev/null +++ b/src/queries/models/rewards/sendRecentActivitiesModel.ts @@ -0,0 +1 @@ +export const sendRecentActivitiesModel = (response: any): any => response; diff --git a/src/queries/queryKeys.ts b/src/queries/queryKeys.ts index 2bcd343398..185bae2a9a 100644 --- a/src/queries/queryKeys.ts +++ b/src/queries/queryKeys.ts @@ -10,6 +10,7 @@ export const generateUserIdByWallet = 'generateUserIdByWallet'; export const UserRewardsDetails = 'userRewardsDetails'; export const userRewardsDetails = 'userRewardsDetails'; export const createUserRewardsDetails = 'createUserRewardsDetails'; +export const sendUserRecentActivities = 'sendUserRecentActivities'; export const rewardsLeaderboard = 'rewardsLeaderboard'; export const pointsVaultUserLoginKey = 'pointsVaultUserLogin'; export const pointsVaultPendingUsers = 'pointsVaultPendingUsers'; diff --git a/src/queries/services/rewards/index.ts b/src/queries/services/rewards/index.ts index 4c24a2a16d..73fc484beb 100644 --- a/src/queries/services/rewards/index.ts +++ b/src/queries/services/rewards/index.ts @@ -5,3 +5,4 @@ export * from './claimRewardsActivity.ts'; export * from './getUserRewardsDetail.ts'; export * from './createUserRewardsDetail.ts'; export * from './getRewardsLeaderboard'; +export * from './sendRecentActivities'; diff --git a/src/queries/services/rewards/sendRecentActivities.ts b/src/queries/services/rewards/sendRecentActivities.ts new file mode 100644 index 0000000000..9f9e7aff4a --- /dev/null +++ b/src/queries/services/rewards/sendRecentActivities.ts @@ -0,0 +1,14 @@ +import axios from 'axios'; +import { getRewardsBaseURL } from 'queries/baseURL'; +import { sendRecentActivitiesModel } from 'queries/models'; +import { SendRecentActivityProps } from 'queries/types'; + +export const sendRecentActivities = (payload: SendRecentActivityProps) => + axios({ + method: 'POST', + url: `${getRewardsBaseURL()}/users/${payload.userId}/recent-activities`, + data: payload.activities, + headers: { + 'Content-Type': 'application/json', + }, + }).then((response) => sendRecentActivitiesModel(response.data)); diff --git a/src/queries/types/rewards.ts b/src/queries/types/rewards.ts index 49cea4ebac..2102f9656e 100644 --- a/src/queries/types/rewards.ts +++ b/src/queries/types/rewards.ts @@ -73,6 +73,11 @@ export type ClaimRewardsActivityProps = { pgpPublicKey: string; }; +export type SendRecentActivityProps = { + userId: string; + activities: any; +}; + export type PointsVaultUserLoginProps = { username: string; password: string; From b83959bdbcb40d972f5cb81f1b9c137a08bb6011 Mon Sep 17 00:00:00 2001 From: corlard3y Date: Thu, 25 Jul 2024 13:34:01 +0100 Subject: [PATCH 10/34] update verify rewards --- .../components/DailyRewardsSection.tsx | 8 ++- .../rewards/hooks/useVerifyRewards.tsx | 62 +++++++++---------- 2 files changed, 36 insertions(+), 34 deletions(-) diff --git a/src/modules/rewards/components/DailyRewardsSection.tsx b/src/modules/rewards/components/DailyRewardsSection.tsx index 9d51a8632b..b5c2066c00 100644 --- a/src/modules/rewards/components/DailyRewardsSection.tsx +++ b/src/modules/rewards/components/DailyRewardsSection.tsx @@ -28,7 +28,6 @@ const DailyRewardsSection: FC = () => { const { data: rewardActivitiesResponse, isLoading: isLoadingActivities } = useGetRewardsActivities({ pageSize: 50 }); const isLoading = isLoadingActivities; - // const isLoading = isLoadingUserDetails || isLoadingActivities; // If there are activities then render them else render 2 skeletons const activityList = isLoading @@ -63,7 +62,12 @@ const DailyRewardsSection: FC = () => { activities: ['a', 'b'], }, { - onSuccess: () => {}, + onSuccess: () => { + // get response + // sort response according to latest timestamp + // and check if it up to 24 hrs btw latest timestamp and current time + // if not up to 24 hrs, set Check In status as disabled. If more than 24 hrs, set Check In status as allowed + }, onError: (err) => { console.error('Error', err); }, diff --git a/src/modules/rewards/hooks/useVerifyRewards.tsx b/src/modules/rewards/hooks/useVerifyRewards.tsx index d2df31a1f6..3cade8d2ed 100644 --- a/src/modules/rewards/hooks/useVerifyRewards.tsx +++ b/src/modules/rewards/hooks/useVerifyRewards.tsx @@ -53,38 +53,36 @@ const useVerifyRewards = ({ activityTypeId, setErrorMessage, refetchActivity }: return; } - console.log('final stage', activityTypeId); - - // claimRewardsActivity( - // { - // userId: updatedId || (userId as string), - // activityTypeId, - // pgpPublicKey: userPushSDKInstance.pgpPublicKey as string, - // data: {}, - // verificationProof: verificationProof as string, - // }, - // { - // onSuccess: (response) => { - // if (response.status === 'COMPLETED') { - // setRewardsActivityStatus('Claimed'); - // refetchActivity(); - // setVerifyingRewards(false); - // } - // if (response.status === 'PENDING') { - // setRewardsActivityStatus('Pending'); - // refetchActivity(); - // setVerifyingRewards(false); - // } - // }, - // onError: (error: any) => { - // console.log('Error in creating activity', error); - // setVerifyingRewards(false); - // if (error.name) { - // setErrorMessage(error.response.data.error); - // } - // }, - // } - // ); + claimRewardsActivity( + { + userId: updatedId || (userId as string), + activityTypeId, + pgpPublicKey: userPushSDKInstance.pgpPublicKey as string, + data: {}, + verificationProof: verificationProof as string, + }, + { + onSuccess: (response) => { + if (response.status === 'COMPLETED') { + setRewardsActivityStatus('Claimed'); + refetchActivity(); + setVerifyingRewards(false); + } + if (response.status === 'PENDING') { + setRewardsActivityStatus('Pending'); + refetchActivity(); + setVerifyingRewards(false); + } + }, + onError: (error: any) => { + console.log('Error in creating activity', error); + setVerifyingRewards(false); + if (error.name) { + setErrorMessage(error.response.data.error); + } + }, + } + ); }; return { From e9934f4e01237067c2f665f49b2ddc03e94a06ec Mon Sep 17 00:00:00 2001 From: corlard3y Date: Sat, 27 Jul 2024 11:47:12 +0100 Subject: [PATCH 11/34] update daily rewards --- .../illustrations/components/CheckCircle.tsx | 42 +++++++ .../components/MultipleRewardsCoin.tsx | 6 +- .../illustrations/components/RewardsCoin.tsx | 6 +- .../components/TripleRewardsCoin.tsx | 6 +- src/blocks/illustrations/index.ts | 2 + .../components/ActivityVerificationButton.tsx | 19 +++ .../rewards/components/DailyRewardsItem.tsx | 86 ++++++++------ .../components/DailyRewardsSection.tsx | 109 ++++++++++++++---- .../StakePushActivitiesListItem.tsx | 8 +- .../rewards/hooks/useVerifyRewards.tsx | 2 + .../rewards/utils/getDailyActivityStatus.ts | 58 ++++++++++ src/queries/types/rewards.ts | 9 +- 12 files changed, 281 insertions(+), 72 deletions(-) create mode 100644 src/blocks/illustrations/components/CheckCircle.tsx create mode 100644 src/modules/rewards/utils/getDailyActivityStatus.ts diff --git a/src/blocks/illustrations/components/CheckCircle.tsx b/src/blocks/illustrations/components/CheckCircle.tsx new file mode 100644 index 0000000000..a6fcc3cf70 --- /dev/null +++ b/src/blocks/illustrations/components/CheckCircle.tsx @@ -0,0 +1,42 @@ +import { FC } from 'react'; +import { IllustrationWrapper } from '../IllustrationWrapper'; +import { IllustrationProps } from '../Illustrations.types'; + +const CheckCircle: FC = (allProps) => { + const { svgProps: props, ...restProps } = allProps; + return ( + + + + + + + + + + + } + {...restProps} + /> + ); +}; + +export default CheckCircle; diff --git a/src/blocks/illustrations/components/MultipleRewardsCoin.tsx b/src/blocks/illustrations/components/MultipleRewardsCoin.tsx index 1d03bf22ae..826238a072 100644 --- a/src/blocks/illustrations/components/MultipleRewardsCoin.tsx +++ b/src/blocks/illustrations/components/MultipleRewardsCoin.tsx @@ -2,11 +2,11 @@ import { FC } from 'react'; import { IllustrationWrapper } from '../IllustrationWrapper'; import { IllustrationProps } from '../Illustrations.types'; -const MultipleRewardsIcon: FC = (allProps) => { +const MultipleRewardsCoin: FC = (allProps) => { const { svgProps: props, ...restProps } = allProps; return ( = (allProps) => { ); }; -export default MultipleRewardsIcon; +export default MultipleRewardsCoin; diff --git a/src/blocks/illustrations/components/RewardsCoin.tsx b/src/blocks/illustrations/components/RewardsCoin.tsx index 1c90c5db7a..8363e92be7 100644 --- a/src/blocks/illustrations/components/RewardsCoin.tsx +++ b/src/blocks/illustrations/components/RewardsCoin.tsx @@ -2,11 +2,11 @@ import { FC } from 'react'; import { IllustrationWrapper } from '../IllustrationWrapper'; import { IllustrationProps } from '../Illustrations.types'; -const RewardsIcon: FC = (allProps) => { +const RewardsCoin: FC = (allProps) => { const { svgProps: props, ...restProps } = allProps; return ( = (allProps) => { ); }; -export default RewardsIcon; +export default RewardsCoin; diff --git a/src/blocks/illustrations/components/TripleRewardsCoin.tsx b/src/blocks/illustrations/components/TripleRewardsCoin.tsx index 6c2732dab3..410c018504 100644 --- a/src/blocks/illustrations/components/TripleRewardsCoin.tsx +++ b/src/blocks/illustrations/components/TripleRewardsCoin.tsx @@ -2,11 +2,11 @@ import { FC } from 'react'; import { IllustrationWrapper } from '../IllustrationWrapper'; import { IllustrationProps } from '../Illustrations.types'; -const TripleRewardsIcon: FC = (allProps) => { +const TripleRewardsCoin: FC = (allProps) => { const { svgProps: props, ...restProps } = allProps; return ( = (allProps) => { ); }; -export default TripleRewardsIcon; +export default TripleRewardsCoin; diff --git a/src/blocks/illustrations/index.ts b/src/blocks/illustrations/index.ts index 5dc810e0f7..6aa2b56b9f 100644 --- a/src/blocks/illustrations/index.ts +++ b/src/blocks/illustrations/index.ts @@ -5,6 +5,8 @@ export { default as ChatIllustration } from './components/Chat'; export { default as ChatDark } from './components/ChatDark'; +export { default as CheckCircle } from './components/CheckCircle'; + export { default as Communication } from './components/Communication'; export { default as CommunicationDark } from './components/CommunicationDark'; diff --git a/src/modules/rewards/components/ActivityVerificationButton.tsx b/src/modules/rewards/components/ActivityVerificationButton.tsx index 2b1f4fc055..f53b007c6b 100644 --- a/src/modules/rewards/components/ActivityVerificationButton.tsx +++ b/src/modules/rewards/components/ActivityVerificationButton.tsx @@ -59,6 +59,16 @@ export const ActivityVerificationButton = ({ 'reach_100000_subscribers', ]; + const dailyRewardActivities = [ + 'daily_check_in_7_days_day1', + 'daily_check_in_7_days_day2', + 'daily_check_in_7_days_day3', + 'daily_check_in_7_days_day4', + 'daily_check_in_7_days_day5', + 'daily_check_in_7_days_day6', + 'daily_check_in_7_days_day7', + ]; + const { handleTwitterVerification, verifyingTwitter, twitterActivityStatus } = useVerifyTwitter({ activityTypeId, refetchActivity, @@ -104,6 +114,15 @@ export const ActivityVerificationButton = ({ isVerificationComplete: rewardsActivityStatus == 'Claimed' || rewardsActivityStatus == 'Pending', }; } + + if (dailyRewardActivities.includes(activityType)) { + return { + isLoading: verifyingRewards, + label: 'Check In', + action: handleRewardsVerification, + isVerificationComplete: rewardsActivityStatus == 'Claimed' || rewardsActivityStatus == 'Pending', + }; + } }, [activityType, userPushSDKInstance, twitterActivityStatus, discordActivityStatus]); const { isAuthenticated, authButton } = useAuthWithButton({ diff --git a/src/modules/rewards/components/DailyRewardsItem.tsx b/src/modules/rewards/components/DailyRewardsItem.tsx index 22f776ba96..c3a4632adc 100644 --- a/src/modules/rewards/components/DailyRewardsItem.tsx +++ b/src/modules/rewards/components/DailyRewardsItem.tsx @@ -1,52 +1,70 @@ // React and other libraries import { FC } from 'react'; -// components -import { Box, Text } from 'blocks'; -import RewardsIcon from 'blocks/illustrations/components/RewardsCoin'; -import MultipleRewardsIcon from 'blocks/illustrations/components/MultipleRewardsCoin'; -import TripleRewardsIcon from 'blocks/illustrations/components/TripleRewardsCoin'; +// types import { Activity } from 'queries'; +// components +import { Box, CheckCircle, Skeleton, Text, RewardsCoin, TripleRewardsCoin, MultipleRewardsCoin } from 'blocks'; + export type DailyRewardsItemProps = { activity: Activity; + activeDay: number; + isLoading: boolean; + isActivityDisabled: boolean; }; -const DailyRewardsItem: FC = ({ activity }) => { +const DailyRewardsItem: FC = ({ activity, activeDay, isLoading, isActivityDisabled }) => { const day = parseInt(activity?.activityTitle?.split('- Day')[1]); - return ( - - - {activity?.activityTitle?.split('-')[1]} - + const isActive = day === activeDay && !isActivityDisabled; - {day < 5 && } + // style variables + const backgroundColor = isActive ? 'surface-brand-medium' : day === 7 ? 'surface-brand-subtle' : 'surface-secondary'; - {day >= 5 && day < 7 && } + const textColor = isActive + ? 'text-on-dark-bg' + : activeDay > day + ? 'text-tertiary' + : day == 7 + ? 'text-on-light-bg' + : 'text-secondary'; - {day == 7 && } + const getIconComponent = (day: number) => { + if (day < 5) return ; + if (day >= 5 && day < 7) return ; + return ; + }; - + day ? '1px solid gray-200' : 'none'} > - {activity.points?.toLocaleString()} Points - - + + {activity?.activityTitle?.split('-')[1]} + + + {activeDay <= day ? {getIconComponent(day)} : } + + + +{activity.points?.toLocaleString()} + + + ); }; diff --git a/src/modules/rewards/components/DailyRewardsSection.tsx b/src/modules/rewards/components/DailyRewardsSection.tsx index b5c2066c00..743f5e8f8d 100644 --- a/src/modules/rewards/components/DailyRewardsSection.tsx +++ b/src/modules/rewards/components/DailyRewardsSection.tsx @@ -1,24 +1,32 @@ // React and other libraries -import { FC } from 'react'; +import { FC, useEffect, useState } from 'react'; // third party libraries import { css } from 'styled-components'; // hooks -import { useGetRewardsActivities, useGetUserRewardsDetails, useSendRecentActivities } from 'queries'; +import { Activity, useGetRewardsActivities, useGetUserRewardsDetails, useSendRecentActivities } from 'queries'; import { useAccount } from 'hooks'; //helpers import { walletToCAIP10 } from 'helpers/w2w'; +import { checkTimeToCurrent, getActivityStatus, getDayNumber } from '../utils/getDailyActivityStatus'; // components import { Box, Button, Text } from 'blocks'; import { DailyRewardsItem } from './DailyRewardsItem'; +import { ActivityVerificationButton } from './ActivityVerificationButton'; export type DailyRewardsSectionProps = {}; const DailyRewardsSection: FC = () => { - const { account } = useAccount(); + const { account, isWalletConnected } = useAccount(); + const [activeItem, setActiveItem] = useState(null); + const [activeDay, setActiveDay] = useState(0); + const [isActivityDisabled, setIsActivityDisabled] = useState(false); + + const [errorMessage, setErrorMessage] = useState(''); + const [isLoadingRewards, setIsLoadingRewards] = useState(false); // Getting user Id by wallet address const caip10WalletAddress = walletToCAIP10({ account }); @@ -37,12 +45,6 @@ const DailyRewardsSection: FC = () => { // Filter activities based on the index const dailyActivities = activityList.filter((activity) => activity.index < 0); - // Function to extract the day number from the activity title or type - const getDayNumber = (activity: any) => { - const dayMatch = activity?.activityTitle.match(/Day (\d+)/) || activity?.activityType.match(/day(\d+)/); - return dayMatch ? parseInt(dayMatch[1], 10) : 0; - }; - // Sort the activities based on the extracted day number const dailyRewardsActivities = dailyActivities?.sort((a, b) => getDayNumber(a) - getDayNumber(b)); @@ -50,23 +52,37 @@ const DailyRewardsSection: FC = () => { userId: userDetails?.userId as string, }); + const resetState = () => { + setActiveDay(0); + setActiveItem(null); + setIsActivityDisabled(false); + setIsLoadingRewards(false); + }; + + useEffect(() => { + if (dailyRewardsActivities && isWalletConnected && userDetails?.userId) { + setIsLoadingRewards(true); + handleCheckIn(); + } + + if (!isWalletConnected) { + resetState(); + } + }, [userDetails?.userId, isWalletConnected, account]); + const handleCheckIn = () => { + if (userDetails?.userId == undefined) return; // Extract activityType into an array const activityTitles = dailyRewardsActivities?.map((activity) => activity.activityType); - console.log(activityTitles); - sendRecentActivities( { userId: userDetails?.userId as string, - activities: ['a', 'b'], + activities: activityTitles, }, { - onSuccess: () => { - // get response - // sort response according to latest timestamp - // and check if it up to 24 hrs btw latest timestamp and current time - // if not up to 24 hrs, set Check In status as disabled. If more than 24 hrs, set Check In status as allowed + onSuccess: (data) => { + handleSuccess(data); }, onError: (err) => { console.error('Error', err); @@ -75,6 +91,31 @@ const DailyRewardsSection: FC = () => { ); }; + const handleSuccess = (data: any) => { + let dataActivity = data?.activities; + const { isEmpty, firstEmptyActivity, latestActivityKey } = getActivityStatus(data?.activities); + + const targetActivity = isEmpty + ? dailyRewardsActivities?.find((activity) => activity.activityType === firstEmptyActivity) + : dailyRewardsActivities?.find((activity) => activity.activityType === latestActivityKey); + + const newDay = isEmpty ? 1 : getDayNumber(targetActivity) + 1; + const newDayData = dailyRewardsActivities?.find( + (activity) => activity.activityType === `daily_check_in_7_days_day${newDay}` + ); + + if (latestActivityKey && !isEmpty) { + const number = checkTimeToCurrent(dataActivity?.[latestActivityKey]?.updatedAt); + if (number) { + setIsActivityDisabled(true); + } + } + + setActiveDay(newDay); + setActiveItem(newDayData); + setIsLoadingRewards(false); + }; + return ( = () => { - + {isActivityDisabled && activeDay > 1 && userDetails && ( + + )} + + {!isActivityDisabled && activeDay > 0 && activeItem && userDetails && ( + handleCheckIn()} + setErrorMessage={setErrorMessage} + isLoadingActivity={false} + /> + )} = () => { `} > {dailyRewardsActivities.map((activity) => ( - + ))} diff --git a/src/modules/rewards/components/StakePushActivitiesListItem.tsx b/src/modules/rewards/components/StakePushActivitiesListItem.tsx index c3963c562a..40fa8f0982 100644 --- a/src/modules/rewards/components/StakePushActivitiesListItem.tsx +++ b/src/modules/rewards/components/StakePushActivitiesListItem.tsx @@ -6,14 +6,14 @@ const StakePushActivitiesListItem = ({ item }: { item: any }) => { backgroundColor="surface-secondary" borderRadius="radius-md" display="flex" - flexDirection="row" + flexDirection={{ ml: 'column', initial: 'row' }} alignItems="center" padding="spacing-sm" justifyContent="space-between" > { display="flex" flexDirection="column" justifyContent="center" - margin="spacing-none spacing-none spacing-none spacing-md" + margin={{ ml: 'spacing-none', initial: 'spacing-none spacing-none spacing-none spacing-md' }} gap="spacing-xxxs" + alignItems={{ ml: 'center' }} > {item.header} diff --git a/src/modules/rewards/hooks/useVerifyRewards.tsx b/src/modules/rewards/hooks/useVerifyRewards.tsx index 3cade8d2ed..9fb97dfaba 100644 --- a/src/modules/rewards/hooks/useVerifyRewards.tsx +++ b/src/modules/rewards/hooks/useVerifyRewards.tsx @@ -53,6 +53,8 @@ const useVerifyRewards = ({ activityTypeId, setErrorMessage, refetchActivity }: return; } + console.log('final call', activityTypeId); + claimRewardsActivity( { userId: updatedId || (userId as string), diff --git a/src/modules/rewards/utils/getDailyActivityStatus.ts b/src/modules/rewards/utils/getDailyActivityStatus.ts new file mode 100644 index 0000000000..011fb3ddab --- /dev/null +++ b/src/modules/rewards/utils/getDailyActivityStatus.ts @@ -0,0 +1,58 @@ +// process date +const processDateString = (dateString: string) => { + return new Date(dateString); +}; + +// Function to find the closest date to the target +const findClosest = (data: any[], accessor: (item: any) => Date, target = Date.now()) => { + return data.reduce((prev, curr) => { + const a = Math.abs(accessor(curr).getTime() - target); + const b = Math.abs(accessor(prev).getTime() - target); + return a - b < 0 ? curr : prev; + }); +}; + +// check time to current time +export const checkTimeToCurrent = (updatedAt: string | undefined) => { + if (!updatedAt) return true; + const lastActivityDate = new Date(updatedAt).getTime(); + const currentTime = Date.now(); + const timeDifference = currentTime - lastActivityDate; + const hoursDifference = timeDifference / (1000 * 60 * 60); + return hoursDifference < 24; +}; + +// Function to extract the day number from the activity title or type +export const getDayNumber = (activity: any) => { + const dayMatch = activity?.activityTitle.match(/Day (\d+)/) || activity?.activityType.match(/day(\d+)/); + return dayMatch ? parseInt(dayMatch[1], 10) : 0; +}; + +// Function to get the status of activities +export const getActivityStatus = (activities: Record>) => { + let firstEmptyActivity = null; + let latestActivityKey = null; + let isEmpty = true; + + const nonEmptyActivities: { key: string; updatedAt: Date }[] = []; + + for (const [key, value] of Object.entries(activities)) { + if (Object.keys(value).length === 0) { + if (!firstEmptyActivity) { + firstEmptyActivity = key; + } + } else { + isEmpty = false; + nonEmptyActivities.push({ key, updatedAt: processDateString(value?.updatedAt) }); + } + } + + const closestActivity = + nonEmptyActivities.length > 0 ? findClosest(nonEmptyActivities, (item) => item.updatedAt) : null; + + if (closestActivity) { + latestActivityKey = closestActivity.key; + } + + return { isEmpty, firstEmptyActivity, latestActivityKey }; +}; diff --git a/src/queries/types/rewards.ts b/src/queries/types/rewards.ts index 2102f9656e..5e78df37bd 100644 --- a/src/queries/types/rewards.ts +++ b/src/queries/types/rewards.ts @@ -24,7 +24,14 @@ export type ActvityType = | 'reach_5000_subscribers' | 'reach_10000_subscribers' | 'reach_50000_subscribers' - | 'reach_100000_subscribers'; + | 'reach_100000_subscribers' + | 'daily_check_in_7_days_day1' + | 'daily_check_in_7_days_day2' + | 'daily_check_in_7_days_day3' + | 'daily_check_in_7_days_day4' + | 'daily_check_in_7_days_day5' + | 'daily_check_in_7_days_day6' + | 'daily_check_in_7_days_day7'; export type Activity = { id: string; From aefec5e52693b957c62572111f8b9eb48248e49e Mon Sep 17 00:00:00 2001 From: corlard3y Date: Sat, 27 Jul 2024 12:36:39 +0100 Subject: [PATCH 12/34] add label flow --- .../rewards/components/ActivityVerificationButton.tsx | 3 +++ src/modules/rewards/components/DailyRewardsItem.tsx | 5 ++++- src/modules/rewards/components/DailyRewardsSection.tsx | 9 +++++---- src/modules/rewards/hooks/useWithAuthButton.tsx | 4 +++- 4 files changed, 15 insertions(+), 6 deletions(-) diff --git a/src/modules/rewards/components/ActivityVerificationButton.tsx b/src/modules/rewards/components/ActivityVerificationButton.tsx index f53b007c6b..438e5a9022 100644 --- a/src/modules/rewards/components/ActivityVerificationButton.tsx +++ b/src/modules/rewards/components/ActivityVerificationButton.tsx @@ -25,6 +25,7 @@ type ActivityVerificationButtonProps = { refetchActivity: () => void; setErrorMessage: (errorMessage: string) => void; isLoadingActivity: boolean; + startingLabel?: string; }; export const ActivityVerificationButton = ({ @@ -34,6 +35,7 @@ export const ActivityVerificationButton = ({ setErrorMessage, userId, isLoadingActivity, + startingLabel, }: ActivityVerificationButtonProps) => { const { isWalletConnected } = useAccount(); const { userPushSDKInstance } = useSelector((state: UserStoreType) => state.user); @@ -127,6 +129,7 @@ export const ActivityVerificationButton = ({ const { isAuthenticated, authButton } = useAuthWithButton({ isLoading: isLoadingActivity, + startingLabel: startingLabel, onSuccess: (userDetails) => activityData?.action(userDetails?.userId), }); diff --git a/src/modules/rewards/components/DailyRewardsItem.tsx b/src/modules/rewards/components/DailyRewardsItem.tsx index c3a4632adc..93e29a3c39 100644 --- a/src/modules/rewards/components/DailyRewardsItem.tsx +++ b/src/modules/rewards/components/DailyRewardsItem.tsx @@ -36,7 +36,10 @@ const DailyRewardsItem: FC = ({ activity, activeDay, isLo }; return ( - + = () => { userId: userDetails?.userId as string, }); - const resetState = () => { + const resetState = useCallback(() => { setActiveDay(0); setActiveItem(null); setIsActivityDisabled(false); setIsLoadingRewards(false); - }; + }, []); useEffect(() => { - if (dailyRewardsActivities && isWalletConnected && userDetails?.userId) { + if (dailyRewardsActivities.length > 0 && isWalletConnected && userDetails?.userId) { setIsLoadingRewards(true); handleCheckIn(); } @@ -161,6 +161,7 @@ const DailyRewardsSection: FC = () => { refetchActivity={() => handleCheckIn()} setErrorMessage={setErrorMessage} isLoadingActivity={false} + startingLabel="Check In" /> )} diff --git a/src/modules/rewards/hooks/useWithAuthButton.tsx b/src/modules/rewards/hooks/useWithAuthButton.tsx index c133b00cfd..33a9f44855 100644 --- a/src/modules/rewards/hooks/useWithAuthButton.tsx +++ b/src/modules/rewards/hooks/useWithAuthButton.tsx @@ -19,9 +19,11 @@ import { Button } from 'blocks'; export const useAuthWithButton = ({ onSuccess, isLoading, + startingLabel, }: { onSuccess: (userDetails: UserRewardsDetailResponse) => void; isLoading: boolean; + startingLabel?: string; }) => { const [isWalletConnectedAndProfileUnlocked, setIsWalletConnectedAndProfileUnlocked] = useState(false); const [showAuth, setShowAuth] = useState(false); // Track button click @@ -66,7 +68,7 @@ export const useAuthWithButton = ({ onClick={handleAuthModal} disabled={isLoading} > - Verify + {startingLabel || 'Verify'} ), From 57c91507b06d2771dd4805254c97051ec4c225aa Mon Sep 17 00:00:00 2001 From: corlard3y Date: Sat, 27 Jul 2024 13:38:55 +0100 Subject: [PATCH 13/34] unlock profile --- src/App.tsx | 2 +- .../components/BonusActivitiesItem.tsx | 33 +++++++--- .../components/DailyRewardsSection.tsx | 43 ++++++++---- .../components/RewardsActivitiesListItem.tsx | 54 +++++++++++---- src/modules/rewards/hooks/useLockedStatus.tsx | 65 +++++++++++++++++++ 5 files changed, 161 insertions(+), 36 deletions(-) create mode 100644 src/modules/rewards/hooks/useLockedStatus.tsx diff --git a/src/App.tsx b/src/App.tsx index 66a0305c6b..2391304112 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -331,7 +331,7 @@ export default function App() { = ({ userId, activity, i const [errorMessage, setErrorMessage] = useState(''); + const { isLocked } = useLockedStatus(); + return ( = ({ userId, activity, i display="flex" margin="spacing-md spacing-none spacing-none spacing-none" > - + {isLocked ? ( + + ) : ( + + )} diff --git a/src/modules/rewards/components/DailyRewardsSection.tsx b/src/modules/rewards/components/DailyRewardsSection.tsx index ea5b77062b..58acc0615a 100644 --- a/src/modules/rewards/components/DailyRewardsSection.tsx +++ b/src/modules/rewards/components/DailyRewardsSection.tsx @@ -16,6 +16,7 @@ import { checkTimeToCurrent, getActivityStatus, getDayNumber } from '../utils/ge import { Box, Button, Text } from 'blocks'; import { DailyRewardsItem } from './DailyRewardsItem'; import { ActivityVerificationButton } from './ActivityVerificationButton'; +import useLockedStatus from '../hooks/useLockedStatus'; export type DailyRewardsSectionProps = {}; @@ -48,6 +49,8 @@ const DailyRewardsSection: FC = () => { // Sort the activities based on the extracted day number const dailyRewardsActivities = dailyActivities?.sort((a, b) => getDayNumber(a) - getDayNumber(b)); + const { isLocked } = useLockedStatus(); + const { mutate: sendRecentActivities } = useSendRecentActivities({ userId: userDetails?.userId as string, }); @@ -143,26 +146,38 @@ const DailyRewardsSection: FC = () => { - {isActivityDisabled && activeDay > 1 && userDetails && ( + {isLocked ? ( - )} - - {!isActivityDisabled && activeDay > 0 && activeItem && userDetails && ( - handleCheckIn()} - setErrorMessage={setErrorMessage} - isLoadingActivity={false} - startingLabel="Check In" - /> + ) : ( + <> + {isActivityDisabled && activeDay > 1 && userDetails && ( + + )} + + {!isActivityDisabled && activeDay > 0 && activeItem && userDetails && ( + handleCheckIn()} + setErrorMessage={setErrorMessage} + isLoadingActivity={false} + startingLabel="Check In" + /> + )} + )} diff --git a/src/modules/rewards/components/RewardsActivitiesListItem.tsx b/src/modules/rewards/components/RewardsActivitiesListItem.tsx index cbfea77991..181b10d93e 100644 --- a/src/modules/rewards/components/RewardsActivitiesListItem.tsx +++ b/src/modules/rewards/components/RewardsActivitiesListItem.tsx @@ -2,10 +2,11 @@ import { FC, useState } from 'react'; import { Activity, useGetRewardsActivity } from 'queries'; -import { Box, ErrorFilled, InfoFilled, Lozenge, RewardsBell, Skeleton, Text } from 'blocks'; +import { Box, Button, ErrorFilled, InfoFilled, Lozenge, RewardsBell, Skeleton, Text, Lock } from 'blocks'; import { ActivityButton } from './ActivityButton'; import { RewardsActivityIcon } from './RewardsActivityIcon'; import { RewardsActivityTitle } from './RewardsActivityTitle'; +import useLockedStatus from '../hooks/useLockedStatus'; export type RewardActivitiesListItemProps = { userId: string; @@ -20,6 +21,7 @@ const getUpdatedExpiryTime = (timestamp: number) => { }; const RewardsActivitiesListItem: FC = ({ userId, activity, isLoadingItem }) => { + const { isLocked } = useLockedStatus(); const { data: usersSingleActivity, isLoading, @@ -28,6 +30,11 @@ const RewardsActivitiesListItem: FC = ({ userId, const [errorMessage, setErrorMessage] = useState(''); + const isRewardsLocked = + isLocked && + activity.activityType !== 'follow_push_on_discord' && + activity.activityType !== 'follow_push_on_twitter'; + return ( = ({ userId, alignItems={{ ml: 'flex-start', initial: 'center' }} gap="s4" > - + {isRewardsLocked ? ( + + + + ) : ( + + )} = ({ userId, {/* Buttons Logic */} - + {isRewardsLocked ? ( + + ) : ( + + )} diff --git a/src/modules/rewards/hooks/useLockedStatus.tsx b/src/modules/rewards/hooks/useLockedStatus.tsx new file mode 100644 index 0000000000..801d9ae4d4 --- /dev/null +++ b/src/modules/rewards/hooks/useLockedStatus.tsx @@ -0,0 +1,65 @@ +// React and other libraries +import { useEffect, useState } from 'react'; + +// hooks +import { useAccount } from 'hooks'; +import { useGetUserRewardsDetails, useSendRecentActivities } from 'queries'; + +// helpers +import { walletToCAIP10 } from 'helpers/w2w'; + +const useLockedStatus = () => { + const { account, isWalletConnected } = useAccount(); + const [isLocked, setIsLocked] = useState(false); + + const caip10WalletAddress = walletToCAIP10({ account }); + const { data: userDetails } = useGetUserRewardsDetails({ caip10WalletAddress }); + + const { mutate: sendRecentActivities } = useSendRecentActivities({ + userId: userDetails?.userId as string, + }); + + useEffect(() => { + if (isWalletConnected && userDetails?.userId) { + checkIfLocked(); + } + + if (!isWalletConnected) { + setIsLocked(false); // Reset the lock status when the wallet is not connected + } + }, [userDetails?.userId, isWalletConnected, account]); + + const getLockStatus = (data: any) => { + if ( + data?.follow_push_on_discord?.status === 'COMPLETED' && + (data?.follow_push_on_twitter?.status === 'COMPLETED' || data?.follow_push_on_twitter?.status === 'PENDING') + ) { + setIsLocked(false); + } else { + setIsLocked(true); + } + }; + + const checkIfLocked = () => { + if (!userDetails?.userId) return; + + sendRecentActivities( + { + userId: userDetails.userId, + activities: ['follow_push_on_discord', 'follow_push_on_twitter'], + }, + { + onSuccess: (data) => { + getLockStatus(data.activities); + }, + onError: (err) => { + console.error('Error', err); + }, + } + ); + }; + + return { isLocked }; +}; + +export default useLockedStatus; From 29d22250d4fbed2a2e2e25c78a7b0e97d3464d4d Mon Sep 17 00:00:00 2001 From: corlard3y Date: Sat, 27 Jul 2024 14:20:58 +0100 Subject: [PATCH 14/34] add multiplier to dashboard --- .../rewards/components/DashboardSection.tsx | 8 ++++ .../components/DashboardSectionPoints.tsx | 37 ++++++++++++++++++- 2 files changed, 43 insertions(+), 2 deletions(-) diff --git a/src/modules/rewards/components/DashboardSection.tsx b/src/modules/rewards/components/DashboardSection.tsx index f01270a5e1..b7a56f36d2 100644 --- a/src/modules/rewards/components/DashboardSection.tsx +++ b/src/modules/rewards/components/DashboardSection.tsx @@ -60,6 +60,14 @@ const DashboardSection: FC = ({ onGetStarted }) => { refetch={() => refetch()} /> + + = ({ @@ -28,6 +29,7 @@ const DashboardSectionPoints: FC = ({ isLoading, isFetching, data, + multiplier, }) => { const { isWalletConnected } = useAccount(); @@ -84,8 +86,9 @@ const DashboardSectionPoints: FC = ({ + {/* total points */} - {isWalletConnected && ( + {isWalletConnected && !multiplier && ( = ({ )} - {!isWalletConnected && ( + {/* other section placeholder */} + {!isWalletConnected && !multiplier && ( = ({ )} + {/* multipler placeholder */} + {!isWalletConnected && multiplier && ( + + 1x + + )} + + {/* show multiplier for center box */} + {isWalletConnected && multiplier && data && ( + <> + + {`${data?.multiplier}x`} + + + Complete activities to increase + + + )} + {/* show rank only when user has points more than 0 */} {points && points > 0 && rank != null ? ( @@ -116,6 +148,7 @@ const DashboardSectionPoints: FC = ({ ) : null} + {/* show users invited only when user has a1or more users invited */} {usersInvited && usersInvited > 0 ? ( Date: Tue, 2 Jul 2024 09:50:59 +0100 Subject: [PATCH 15/34] update changes --- src/blocks/dropdown/Dropdown.utils.tsx | 35 +++++++++++++++ .../components/FeaturedChannelsListItem.tsx | 43 ++++++++++++++++++- 2 files changed, 77 insertions(+), 1 deletion(-) create mode 100644 src/blocks/dropdown/Dropdown.utils.tsx diff --git a/src/blocks/dropdown/Dropdown.utils.tsx b/src/blocks/dropdown/Dropdown.utils.tsx new file mode 100644 index 0000000000..e726e923f2 --- /dev/null +++ b/src/blocks/dropdown/Dropdown.utils.tsx @@ -0,0 +1,35 @@ +import { DropdownPosition } from './Dropdown.types'; +import { DropdownMenuContentProps } from '@radix-ui/react-dropdown-menu'; + +export const getDropdownPositionalCSS = (dropdownPosition: DropdownPosition) => { + let style: { + align: DropdownMenuContentProps['align']; + side: DropdownMenuContentProps['side']; + } = { + align: 'center', + side: 'bottom', + }; + + switch (dropdownPosition) { + case 'top': + style = { + align: 'center', + side: 'top', + }; + break; + case 'left': + style = { + align: 'center', + side: 'left', + }; + break; + case 'right': + style = { + align: 'center', + side: 'right', + }; + break; + } + + return style; +}; diff --git a/src/modules/dashboard/components/FeaturedChannelsListItem.tsx b/src/modules/dashboard/components/FeaturedChannelsListItem.tsx index 9668e41825..f91ce3bc62 100644 --- a/src/modules/dashboard/components/FeaturedChannelsListItem.tsx +++ b/src/modules/dashboard/components/FeaturedChannelsListItem.tsx @@ -13,7 +13,8 @@ import { useAccount } from 'hooks'; import { formatSubscriberCount } from '../Dashboard.utils'; // Components -import { Box, Button, CaretDown, NotificationMobile, Skeleton, Text } from 'blocks'; +import { Box, Button, CaretDown, CaretUp, Dropdown, Menu, MenuItem, NotificationMobile, Skeleton, Text } from 'blocks'; +import { AiFillExclamationCircle } from 'react-icons/ai'; import { SubscribeChannelDropdown } from 'common/components/SubscribeChannelDropdown'; import { UnsubscribeChannelDropdown } from 'common/components/UnsubscribeChannelDropdown'; import TickDecoratedCircleFilled from 'blocks/icons/components/TickDecoratedCircleFilled'; @@ -82,6 +83,46 @@ const FeaturedChannelsListItem: FC = (props) => { /> + + } + onClick={() => { + alert('wewe'); + }} + label="Archive" + /> + } + onClick={() => {}} + label="New Archive" + /> + } + onClick={() => {}} + label="New Test" + /> + } + onClick={() => {}} + label="Delete" + /> + + } + trigger="hover" + // dropdownPosition="top" + > + {({ isOpen }: { isOpen: boolean }) => ( + + )} + + {!isSubscribed && ( Date: Tue, 2 Jul 2024 10:33:33 +0100 Subject: [PATCH 16/34] add props type --- .../dashboard/components/FeaturedChannelsListItem.tsx | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/src/modules/dashboard/components/FeaturedChannelsListItem.tsx b/src/modules/dashboard/components/FeaturedChannelsListItem.tsx index f91ce3bc62..1830dd4488 100644 --- a/src/modules/dashboard/components/FeaturedChannelsListItem.tsx +++ b/src/modules/dashboard/components/FeaturedChannelsListItem.tsx @@ -32,6 +32,10 @@ type FeaturedChannelsListItemProps = { channelAddress: string; }; +type isOpenProps = { + isOpen: boolean; +}; + const FeaturedChannelsListItem: FC = (props) => { const { channelAddress } = props; @@ -110,10 +114,10 @@ const FeaturedChannelsListItem: FC = (props) => { /> } - trigger="hover" + // trigger="hover" // dropdownPosition="top" > - {({ isOpen }: { isOpen: boolean }) => ( + {({ isOpen }: isOpenProps) => ( - )} - - {!isSubscribed && ( Date: Thu, 18 Jul 2024 12:09:06 +0530 Subject: [PATCH 18/34] chore: handle rejected user state in rewards (#1738) * chore: handle rejected user state in rewards * chore: allow user to reverify --- src/modules/rewards/components/RewardsActivitiesListItem.tsx | 4 ++-- src/queries/types/rewards.ts | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/modules/rewards/components/RewardsActivitiesListItem.tsx b/src/modules/rewards/components/RewardsActivitiesListItem.tsx index 181b10d93e..c7d253ccd7 100644 --- a/src/modules/rewards/components/RewardsActivitiesListItem.tsx +++ b/src/modules/rewards/components/RewardsActivitiesListItem.tsx @@ -175,7 +175,7 @@ const RewardsActivitiesListItem: FC = ({ userId, - {errorMessage && ( + {(errorMessage || usersSingleActivity?.status === 'REJECTED') && ( = ({ userId, variant="h5-semibold" color={{ light: 'red-700', dark: 'red-300' }} > - {errorMessage} + {errorMessage || 'Verification Rejected. Please contact the Push team over discord.'} )} diff --git a/src/queries/types/rewards.ts b/src/queries/types/rewards.ts index 5e78df37bd..41b01777a4 100644 --- a/src/queries/types/rewards.ts +++ b/src/queries/types/rewards.ts @@ -60,7 +60,7 @@ export type UsersActivity = { userId: string; activityTypeId: string; data: { twitter?: string; discord?: string }; - status: 'COMPLETED' | 'PENDING'; + status: 'COMPLETED' | 'PENDING' | 'REJECTED'; points: number; multiplier: number; verificationProof: string; From a424cf5ef26aa03d110ccb5c8d0edf06b858e682 Mon Sep 17 00:00:00 2001 From: Monalisha Mishra <42746736+mishramonalisha76@users.noreply.github.com> Date: Thu, 18 Jul 2024 15:12:06 +0530 Subject: [PATCH 19/34] Implemented toggle switch (#1749) * implemented toggle switch * fixed the review issue * fixed the review issue * fixed text --- package.json | 1 + src/blocks/index.ts | 1 + src/blocks/toggleSwtich/ToggleSwitch.tsx | 127 +++++++++++++++++++++++ src/blocks/toggleSwtich/index.ts | 1 + yarn.lock | 39 +++++++ 5 files changed, 169 insertions(+) create mode 100644 src/blocks/toggleSwtich/ToggleSwitch.tsx create mode 100644 src/blocks/toggleSwtich/index.ts diff --git a/package.json b/package.json index f154f080b3..b3d0375438 100644 --- a/package.json +++ b/package.json @@ -38,6 +38,7 @@ "@pushprotocol/socket": "0.5.3", "@pushprotocol/uiweb": "1.4.2", "@radix-ui/react-dropdown-menu": "^2.1.1", + "@radix-ui/react-switch": "^1.1.0", "@radix-ui/react-tooltip": "^1.1.1", "@reach/tabs": "^0.18.0", "@reduxjs/toolkit": "^1.7.1", diff --git a/src/blocks/index.ts b/src/blocks/index.ts index 391c79191b..ecb30db71f 100644 --- a/src/blocks/index.ts +++ b/src/blocks/index.ts @@ -12,6 +12,7 @@ export { Text, type TextProps } from './text'; export { Tooltip, type TooltipProps } from './tooltip'; export { TextArea, type TextAreaProps } from './textarea'; export { TextInput } from './textInput'; +export { ToggleSwitch } from './toggleSwtich'; export * from './Blocks.colors'; export * from './Blocks.types'; diff --git a/src/blocks/toggleSwtich/ToggleSwitch.tsx b/src/blocks/toggleSwtich/ToggleSwitch.tsx new file mode 100644 index 0000000000..035bda6aa6 --- /dev/null +++ b/src/blocks/toggleSwtich/ToggleSwitch.tsx @@ -0,0 +1,127 @@ +import React from 'react'; + +import styled, { FlattenSimpleInterpolation } from 'styled-components'; +import * as Switch from '@radix-ui/react-switch'; + +import { TextVariants, textVariants } from '../text'; +import { ThemeColors } from 'blocks/theme/Theme.types'; + +export type ToggleSwitchProps = { + /* Additional prop from styled components to apply custom css to Toggle switch */ + css?: FlattenSimpleInterpolation; + /* Label for the toggle switch */ + label?: string; + /* Description for the toggle switch */ + description?: string; + /* Sets toggle switch as disabled */ + disabled?: boolean; + /* Render the toggle before text contents */ + leadingToggle?: boolean; + /* Sets toggle switch to checked */ + checked: boolean; + /* Function invoked when toggle switch is clicked*/ + onCheckedChange: (checked: boolean) => void; +}; + +const StyledToggleRoot = styled(Switch.Root)` + width: 38px; + height: 20px; + padding: 3px; + background-color: var(--components-toggle-switch-background-unselected); + border-radius: var(--radius-md); + position: relative; + &[data-state='checked'] { + background-color: var(--components-toggle-switch-background-selected); + } + &:disabled { + cursor: not-allowed; + background: var(--components-toggle-switch-background-disabled); + span { + background: var(--components-toggle-switch-icon-disabled); + } + } +`; +const StyledToggleThumb = styled(Switch.Thumb)` + display: block; + cursor: pointer; + width: 14px; + height: 14px; + background-color: var(--components-toggle-switch-icon-default); + border-radius: var(--radius-round); + transition: transform 100ms; + will-change: transform; + &[data-state='checked'] { + transform: translateX(17.5px); + } +`; + +const Container = styled.div<{ css?: FlattenSimpleInterpolation; flexDirection: string }>` + display: flex; + flex-direction: ${({ flexDirection }) => flexDirection || ''}; + gap: var(--spacing-xxs); + justifycontent: space-between; + + /* Custom CSS applied via styled component css prop */ + ${(props) => props.css || ''}; +`; + +const LabelContainer = styled.div` + display: flex; + align-items: flex-start; + flex-direction: column; +`; +const TextContainer = styled.p<{ variant: TextVariants; color: ThemeColors }>` + margin: 0; + color: ${({ color }) => color}; + ${({ variant }) => + `font-family: var(--font-family); + font-size: ${textVariants[variant].fontSize}; + font-style: ${textVariants[variant].fontStyle}; + font-weight: ${textVariants[variant].fontWeight}; + line-height: ${textVariants[variant].lineHeight};`} +`; +const ToggleSwitch: React.FC = ({ + label, + description, + disabled = false, + onCheckedChange, + leadingToggle = true, + checked, +}) => { + return ( + + + + + {(label || description) && ( + + {label && ( + + {label} + + )} + {description && ( + + {description} + + )} + + )} + + ); +}; + +ToggleSwitch.displayName = 'ToggleSwitch'; + +export { ToggleSwitch }; diff --git a/src/blocks/toggleSwtich/index.ts b/src/blocks/toggleSwtich/index.ts new file mode 100644 index 0000000000..05bf93c40e --- /dev/null +++ b/src/blocks/toggleSwtich/index.ts @@ -0,0 +1 @@ +export { ToggleSwitch, type ToggleSwitchProps } from './ToggleSwitch'; diff --git a/yarn.lock b/yarn.lock index 9a4bbd2e78..1f71c8a44b 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4775,6 +4775,31 @@ __metadata: languageName: node linkType: hard +"@radix-ui/react-switch@npm:^1.1.0": + version: 1.1.0 + resolution: "@radix-ui/react-switch@npm:1.1.0" + dependencies: + "@radix-ui/primitive": "npm:1.1.0" + "@radix-ui/react-compose-refs": "npm:1.1.0" + "@radix-ui/react-context": "npm:1.1.0" + "@radix-ui/react-primitive": "npm:2.0.0" + "@radix-ui/react-use-controllable-state": "npm:1.1.0" + "@radix-ui/react-use-previous": "npm:1.1.0" + "@radix-ui/react-use-size": "npm:1.1.0" + peerDependencies: + "@types/react": "*" + "@types/react-dom": "*" + react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + peerDependenciesMeta: + "@types/react": + optional: true + "@types/react-dom": + optional: true + checksum: 10/847930e2a25699015e83f07ffb5065c2e925ffcf84b2ef2222e63e7862a9753e09ea8cd64504d20cbb689060ece1ad2e3b8a4c04702bc8040c5fda7d13ef71ae + languageName: node + linkType: hard + "@radix-ui/react-tooltip@npm:^1.1.1": version: 1.1.2 resolution: "@radix-ui/react-tooltip@npm:1.1.2" @@ -4938,6 +4963,19 @@ __metadata: languageName: node linkType: hard +"@radix-ui/react-use-previous@npm:1.1.0": + version: 1.1.0 + resolution: "@radix-ui/react-use-previous@npm:1.1.0" + peerDependencies: + "@types/react": "*" + react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + peerDependenciesMeta: + "@types/react": + optional: true + checksum: 10/8a2407e3db6248ab52bf425f5f4161355d09f1a228038094959250ae53552e73543532b3bb80e452f6ad624621e2e1c6aebb8c702f2dfaa5e89f07ec629d9304 + languageName: node + linkType: hard + "@radix-ui/react-use-rect@npm:1.0.1": version: 1.0.1 resolution: "@radix-ui/react-use-rect@npm:1.0.1" @@ -18133,6 +18171,7 @@ __metadata: "@pushprotocol/socket": "npm:0.5.3" "@pushprotocol/uiweb": "npm:1.4.2" "@radix-ui/react-dropdown-menu": "npm:^2.1.1" + "@radix-ui/react-switch": "npm:^1.1.0" "@radix-ui/react-tooltip": "npm:^1.1.1" "@reach/tabs": "npm:^0.18.0" "@reduxjs/toolkit": "npm:^1.7.1" From a753ffd7e28da66ab6a532fba88b37e5226100c8 Mon Sep 17 00:00:00 2001 From: Kalash Shah <81062983+kalashshah@users.noreply.github.com> Date: Thu, 18 Jul 2024 21:16:15 +0530 Subject: [PATCH 20/34] Replace buttons in the app with new ds component (#1739) * chore: replace buttons in the app with new ds component * chore: add block prop to button * chore: move block styling for button to the end * chore: update spacing vars and search bar icon * chore: update color variables --- src/App.tsx | 34 +--- src/blocks/button/Button.tsx | 5 + src/components/ChangeNetwork.tsx | 33 ++-- src/components/ChannelDetails.jsx | 48 ++--- src/components/ChannelInfo.tsx | 33 ++-- src/components/ChannelSettings.jsx | 19 -- src/components/FaucetInfo.tsx | 47 ++--- src/components/ProfileModal.tsx | 28 +-- src/components/PushSnap/EnableSnoozeModal.tsx | 53 ++---- .../PushSnap/InstallPushSnapModal.tsx | 115 ++++++------ .../PushSnap/PushSnapConfigureModal.tsx | 79 +------- src/components/PushSnap/PushSnapSettings.tsx | 32 +--- .../PushSnap/SnapInformationModal.tsx | 35 +--- src/components/SearchFilter.jsx | 68 ++----- src/components/SendNotifications.tsx | 76 +++----- src/components/StakingInfo.tsx | 20 +- src/components/StepsTransactionModal.tsx | 42 ++--- src/components/UploadLogo.jsx | 17 +- src/components/VerifyAlias.tsx | 22 +-- src/components/ViewChannelItem.jsx | 153 +++++++-------- src/components/ViewDelegateeItem.jsx | 12 +- src/components/YieldFarmChainError.tsx | 32 +--- src/components/channel/ChannelButtons.tsx | 89 ++++----- src/components/channel/DepositFeeFooter.tsx | 62 ++---- .../chat/unlockProfile/UnlockProfile.tsx | 51 ++--- .../chat/w2wChat/searchBar/SearchBar.tsx | 46 ++--- .../dropdowns/OptinNotifSettingDropdown.tsx | 48 +---- .../dropdowns/UpdateNotifSettingDropdown.tsx | 49 +---- .../yield/StakingModalComponent.tsx | 78 ++------ src/components/yield/YieldPushFeeV3.tsx | 120 +++--------- src/components/yield/YieldUniswapV3.tsx | 119 +++--------- src/hooks/useToast.tsx | 18 +- .../ChannelOwnerDashboard.tsx | 48 ++--- src/modules/claimGalxe/ClaimGalxeModule.tsx | 60 +++--- src/modules/editChannel/EditChannel.tsx | 90 +++------ src/modules/editChannel/uploadLogoModal.tsx | 47 +---- src/modules/gov/GovModule.tsx | 176 +++++++----------- src/modules/snap/SnapModule.tsx | 92 ++------- src/pages/NotFoundPage.tsx | 83 ++++----- .../ModalConfirmButton.tsx | 37 +--- src/sections/chat/ChatSidebarSection.tsx | 76 +------- src/structure/Header.tsx | 18 +- 42 files changed, 711 insertions(+), 1699 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index 2391304112..1de8e6ec04 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -85,6 +85,16 @@ const GlobalStyle = createGlobalStyle` --s13: 52px; --s14: 56px; --s15: 60px; + --s16: 64px; + --s17: 68px; + --s18: 72px; + --s19: 76px; + --s20: 80px; + --s21: 84px; + --s22: 88px; + --s23: 92px; + --s24: 96px; + --s25: 100px; // TODO: Add more as needed /* deprecated */ @@ -475,30 +485,6 @@ const PushLogo = styled.div` padding-bottom: 20px; `; -const ProviderButton = styled.button` - flex: none; - min-width: 179px; - background: ${(props) => props.theme.default.bg}; - margin: 20px 15px; - overflow: hidden; - padding: 20px 5px; - display: flex; - align-items: center; - justify-content: center; - border-radius: 24px; - display: flex; - flex-direction: column; - - &:hover { - cursor: pointer; - background: rgba(207, 206, 255, 0.24); - } - &:active { - cursor: pointer; - background: rgba(207, 206, 255, 0.24); - } -`; - const ProviderImage = styled.img` width: 73px; height: 69px; diff --git a/src/blocks/button/Button.tsx b/src/blocks/button/Button.tsx index 83ec9fb5af..1c8d5f2af8 100644 --- a/src/blocks/button/Button.tsx +++ b/src/blocks/button/Button.tsx @@ -24,6 +24,8 @@ export type ButtonProps = { trailingIcon?: ReactNode; /* Sets the variant of the button */ variant?: ButtonVariant; + /* Button takes the full width if enabled */ + block?: boolean; } & TransformedHTMLAttributes; const StyledButton = styled.button` @@ -52,6 +54,9 @@ const StyledButton = styled.button` /* Circular CSS for rounded icon only buttons */ ${({ circular, iconOnly }) => circular && iconOnly && `border-radius: var(--r10)`} + /* Prop specific CSS */ + ${({ block }) => block && 'width: 100%;'} + /* Custom CSS applied via styled component css prop */ ${(props) => props.css || ''} `; diff --git a/src/components/ChangeNetwork.tsx b/src/components/ChangeNetwork.tsx index 4aba9ca2c2..56af5e9cdc 100644 --- a/src/components/ChangeNetwork.tsx +++ b/src/components/ChangeNetwork.tsx @@ -9,10 +9,11 @@ import { useSelector } from 'react-redux'; // Internal Components import useToast from 'hooks/useToast'; -import { Button, Item, Span } from '../primaries/SharedStyling'; +import { Item, Span } from '../primaries/SharedStyling'; import { aliasChainIdsMapping, CORE_CHAIN_ID, networkName } from 'helpers/UtilityHelper'; import { appConfig, CHAIN_DETAILS } from 'config/index.js'; import { useAccount } from 'hooks'; +import { Box, Button, Text } from 'blocks'; const ChangeNetwork = () => { const changeNetworkToast = useToast(); @@ -42,30 +43,20 @@ const ChangeNetwork = () => { verifying your Channel Alias. - - + ); }; diff --git a/src/components/ChannelDetails.jsx b/src/components/ChannelDetails.jsx index 2be1f54f7c..9d02827533 100644 --- a/src/components/ChannelDetails.jsx +++ b/src/components/ChannelDetails.jsx @@ -10,8 +10,8 @@ import { useNavigate } from 'react-router-dom'; import styled from 'styled-components'; // Internal Compoonents -import { Button, Item } from 'components/SharedStyling'; -import { ButtonV2, ImageV2, ItemHV2, ItemVV2, SpanV2 } from 'components/reusables/SharedStylingV2'; +import { Item } from 'components/SharedStyling'; +import { ImageV2, ItemHV2, ItemVV2, SpanV2 } from 'components/reusables/SharedStylingV2'; import { useAccount, useDeviceWidthCheck } from 'hooks'; import useModalBlur, { MODAL_POSITION } from 'hooks/useModalBlur'; import useToast from 'hooks/useToast'; @@ -33,6 +33,7 @@ import { AppContext } from 'contexts/AppContext'; import { convertAddressToAddrCaip } from 'helpers/CaipHelper'; import { getDateFromTimestamp, nextDaysDateFromTimestamp, timeRemaining } from 'helpers/TimerHelper'; import { CHANNEL_TYPE } from 'helpers/UtilityHelper'; +import { Button } from 'blocks'; const DATE_FORMAT = 'DD MMM, YYYY'; @@ -275,21 +276,26 @@ export default function ChannelDetails({ isChannelExpired, setIsChannelExpired, padding="0 0 15px 0" alignSelf="center" display="flex" + gap="8px" > - {!isChannelExpired && onCoreNetwork && Edit Channel} + {!isChannelExpired && onCoreNetwork && ( + + )} {!isChannelExpired && } {isChannelExpired && onCoreNetwork && ( - Delete Channel - + )} )} @@ -398,11 +404,6 @@ const AdaptiveMobileItemVV2 = styled(ItemVV2)` } `; -const DestroyChannelBtn = styled(ButtonV2)` - height: ${(props) => props.height || '100%'}; - width: ${(props) => props.width || '100%'}; -`; - const AdaptiveMobileItemHV2 = styled(ItemHV2)` @media (max-width: 767px) { justify-content: center; @@ -607,21 +608,6 @@ const SectionDes = styled.div` } `; -const SubmitButton = styled(Button)` - width: fit-content; - background: #d53a94; - color: #fff; - z-index: 0; - font-family: 'FK Grotesk Neu'; - font-style: normal; - font-weight: 500; - font-size: 14px; - line-height: 17px; - margin-right: 9px; - border-radius: 8px; - padding: 10px 16px; -`; - const DelegateContainer = styled(Item)` flex: 5; min-width: 280px; diff --git a/src/components/ChannelInfo.tsx b/src/components/ChannelInfo.tsx index e6cfdf3b1a..1a523a77db 100644 --- a/src/components/ChannelInfo.tsx +++ b/src/components/ChannelInfo.tsx @@ -9,7 +9,7 @@ import styled, { useTheme } from 'styled-components'; import DateTimePicker from 'react-datetime-picker'; // Internal Compoonents -import { Button, Input, Item, Section, Span, TextField } from 'primaries/SharedStyling'; +import { Button as SharedButton, Input, Item, Section, Span, TextField } from 'primaries/SharedStyling'; import '../modules/createChannel/createChannel.css'; import { useDeviceWidthCheck } from 'hooks'; import { ItemHV2 } from './reusables/SharedStylingV2'; @@ -19,6 +19,7 @@ import { device } from 'config/Globals'; import NewTag from './NewTag'; import ErrorMessage from './reusables/errorMessageLabel/errorMessageLabel'; import { getIsNewTagVisible } from 'helpers/TimerHelper'; +import { Box, Button } from 'blocks'; const coreChainId = appConfig.coreContractChain; @@ -313,19 +314,15 @@ const ChannelInfo = ({ {errorInfo?.url && } - - + ); diff --git a/src/components/ChannelSettings.jsx b/src/components/ChannelSettings.jsx index f921da4a91..a43122435a 100644 --- a/src/components/ChannelSettings.jsx +++ b/src/components/ChannelSettings.jsx @@ -8,7 +8,6 @@ import styled, { useTheme } from 'styled-components'; // Internal Compoonents import { ItemHV2, ItemVV2 } from 'components/reusables/SharedStylingV2'; import ChannelSettingsDropdown from './ChannelSettingsDropdown'; -import { Button } from './SharedStyling'; export default function ChannelSettings() { const DropdownRef = React.useRef(null); @@ -70,21 +69,3 @@ const Settings = styled(AiOutlineEllipsis)` transition: 400ms; transform: ${(props) => (props.active ? 'rotateZ(90deg)' : 'none')}; `; - -const SubmitButton = styled(Button)` - width: 7rem; - background: #cf1c84; - color: #fff; - z-index: 0; - font-family: 'FK Grotesk Neu'; - font-style: normal; - font-weight: 500; - font-size: 14px; - line-height: 17px; - margin-right: 20px; - border-radius: 8px; - padding: 11px 10px; - @media (min-width: 600px) and (max-width: 700px) { - margin-right: 9px; - } -`; diff --git a/src/components/FaucetInfo.tsx b/src/components/FaucetInfo.tsx index a8d41c76f5..6e7cd52f7a 100644 --- a/src/components/FaucetInfo.tsx +++ b/src/components/FaucetInfo.tsx @@ -2,7 +2,7 @@ import styled from 'styled-components'; // Internal Components -import { ButtonV2, ImageV2, SpanV2 } from './reusables/SharedStylingV2'; +import { ImageV2, SpanV2 } from './reusables/SharedStylingV2'; import swapIcon from '../assets/icons/swapIcon.svg'; import { useAccount } from 'hooks'; @@ -13,6 +13,7 @@ import { useEffect, useState } from 'react'; import { getHasEnoughPushToken } from 'helpers'; import useModalBlur, { MODAL_POSITION } from 'hooks/useModalBlur'; import { UniswapWidgetModal } from './UniswapWidget'; +import { Button } from 'blocks'; type FaucetInfoType = { onMintPushToken: (noOfTokens: number) => Promise; @@ -63,15 +64,19 @@ const FaucetInfo = ({ onMintPushToken, noOfPushTokensToCheck, containerProps }: : 'Follow these steps to ensure you have enough Testnet Push to proceed.'} {isProd ? ( - - - Swap Tokens for PUSH - + ) : ( { const theme = useTheme(); @@ -15,20 +16,21 @@ const ProfileModal = ({ showDropdown, setShowDropdown, dropdownValues }) => { return ( - + <> {dropdownValues.map((dropdownValue) => diff --git a/src/components/PushSnap/EnableSnoozeModal.tsx b/src/components/PushSnap/EnableSnoozeModal.tsx index e28b7e49e9..1ec3993b09 100644 --- a/src/components/PushSnap/EnableSnoozeModal.tsx +++ b/src/components/PushSnap/EnableSnoozeModal.tsx @@ -5,7 +5,8 @@ import { useState, useContext } from 'react'; import styled from 'styled-components'; // Internal Compoonents -import { ButtonV2, ItemHV2, ItemVV2 } from 'components/reusables/SharedStylingV2'; +import { ItemHV2, ItemVV2 } from 'components/reusables/SharedStylingV2'; +import { Button } from 'blocks'; // Internal Configs import { defaultSnapOrigin } from 'config/index.js'; @@ -78,10 +79,17 @@ const EnableSnoozeModal = ({ /> - - Cancel - - Enable Snooze + + + ); @@ -113,41 +121,6 @@ const SecondaryText = styled.p` color: ${(props) => props.theme.snapSecondaryText}; `; -const SnapButton = styled(ButtonV2)` - align-self: end; - height: 36px; - z-index: 0; - font-family: 'FK Grotesk Neu'; - font-style: normal; - font-weight: 500; - font-size: 14px; - line-height: normal; - border-radius: 8px; -`; - -const FilledButton = styled(SnapButton)` - min-width: 79px; - padding: 14px; - background: #d53a94; - height: 48px; - radius: 12px; - padding: 0px 24px 0px 24px; - color: #fff; - white-space: nowrap; -`; - -const EnptyButton = styled(SnapButton)` - flex-direction: row; - text-align: center; - height: 48px; - padding: 0px 24px 0px 24px; - margin-right: 8px; - border: 1px solid #bac4d6; - color: ${(props) => props.theme.default.color}; - background: ${(props) => props.theme.default.bg}; - gap: 4px; -`; - const Input = styled.input` box-sizing: border-box; display: flex; diff --git a/src/components/PushSnap/InstallPushSnapModal.tsx b/src/components/PushSnap/InstallPushSnapModal.tsx index f538c04dca..91f6e6488e 100644 --- a/src/components/PushSnap/InstallPushSnapModal.tsx +++ b/src/components/PushSnap/InstallPushSnapModal.tsx @@ -13,7 +13,7 @@ import PushIcon from 'assets/snap/PushIcon.svg'; import UDIcon from 'assets/snap/UDIcon.svg'; import VersoIcon from 'assets/snap/VersoIcon.svg'; import Metamask from 'assets/snap/metamasksnap.svg'; -import { Button } from 'components/SharedStyling'; +import { Button } from 'blocks'; import { ItemHV2, ItemVV2, SpanV2 } from 'components/reusables/SharedStylingV2'; import { A } from 'primaries/SharedStyling'; @@ -55,16 +55,22 @@ const InstallPushSnapModal = ({ setSnapState, configure, setConfigure }) => { {configure ? ( - { setSnapState(3); // navigate('/snap') }} > Configure - + ) : ( - setSnapState(2)}>Install + )} @@ -85,7 +91,7 @@ const InstallPushSnapModal = ({ setSnapState, configure, setConfigure }) => { href="https://chromewebstore.google.com/detail/push-protocol-alpha/lbdcbpaldalgiieffakjhiccoeebchmg" target="_blank" > - Install + @@ -107,27 +113,33 @@ const InstallPushSnapModal = ({ setSnapState, configure, setConfigure }) => { href="https://apps.apple.com/ng/app/verso-wallet-crypto-nft/id1539304605" target="_blank" > - - App store - + @@ -287,24 +292,6 @@ const Container = styled(ItemVV2)` padding: 0px 0px 12px 9px; `; -const ToolTipContainer = styled(ItemVV2)` - box-sizing: border-box; - width: 18.75rem; - // height: 7.5rem; - // max-height: 7.5rem; - background: ${(props) => props.theme.default.bg}; - border-radius: 1rem 1rem 1rem 0.125rem; - justify-content: flex-start; - border: 1px solid rgba(173, 176, 190, 0.2); - align-items: flex-start; - padding: 0.75rem 0.25rem 0.75rem 1rem; - box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.05); - - @media (max-width: 400px) { - width: 16.75rem; - } -`; - const PrimaryText = styled.p` margin: 0px; font-size: 18px; @@ -325,58 +312,6 @@ const SecondaryText = styled.p` color: ${(props) => props.theme.snapSecondaryText}; `; -const ToolTipText = styled.p` - margin: 0px; - font-size: 16px; - font-weight: 400; - line-height: 24px; - color: #62626a; - color: ${(props) => props.theme.modalMessageColor}; - text-align: left; -`; - -const SnapButton = styled(Button)` - align-self: end; - height: 36px; - z-index: 0; - font-family: 'FK Grotesk Neu'; - font-style: normal; - font-weight: 500; - font-size: 14px; - line-height: normal; - border-radius: 8px; -`; - -const FilledButton = styled(SnapButton)` - min-width: 79px; - padding: 14px; - background: #d53a94; - width: 79px; - height: 48px; - radius: 12px; - color: #fff; -`; - -const EnptyButton = styled(SnapButton)` - flex-direction: row; - color: ${(props) => props.theme.default.secondaryColor}; - text-align: center; - width: auto; - padding: 16px 24px; - border: 1px solid #bac4d6; - background: ${(props) => props.theme.default.bg}; - gap: 4px; -`; - -const ImageInfo = styled.img` - margin-right: 5px; - display: flex; - justify-content: center; - align-items: center; - align-self: center; - cursor: pointer; -`; - const Input = styled.input` box-sizing: border-box; display: flex; diff --git a/src/components/PushSnap/PushSnapSettings.tsx b/src/components/PushSnap/PushSnapSettings.tsx index b7d4cd07cd..413021e224 100644 --- a/src/components/PushSnap/PushSnapSettings.tsx +++ b/src/components/PushSnap/PushSnapSettings.tsx @@ -2,7 +2,7 @@ import { useState, useEffect } from 'react'; import SnapExample from 'assets/snap/SnapExample.svg?react'; import InfoLogo from 'assets/snap/spam-icon.svg?react'; import { Image, Section } from 'components/SharedStyling'; -import { ButtonV2, H2V2, ItemHV2, ItemVV2, SpanV2 } from 'components/reusables/SharedStylingV2'; +import { H2V2, ItemHV2, ItemVV2, SpanV2 } from 'components/reusables/SharedStylingV2'; import LoaderSpinner, { LOADER_TYPE } from 'components/reusables/loaders/LoaderSpinner'; import { device } from 'config/Globals'; import { useAccount } from 'hooks'; @@ -10,6 +10,7 @@ import useModalBlur, { MODAL_POSITION } from 'hooks/useModalBlur'; import AboutSnapModal from 'modules/snap/AboutSnapModal'; import styled, { useTheme } from 'styled-components'; import PushSnapConfigureModal from './PushSnapConfigureModal'; +import { Button } from 'blocks'; const PushSnapSettings = () => { const { account } = useAccount(); @@ -145,7 +146,7 @@ const PushSnapSettings = () => { spinnerSize={44} /> ) : ( - connectToMetaMask()}>{!snapInstalled && 'Connect Snap'} + )} @@ -206,33 +207,6 @@ const Container = styled(Section)` } `; -const SnapButton = styled(ButtonV2)` - height: 44px; - border-radius: 15px; - font-size: 16px; - font-weight: 500; - line-height: 141%; - letter-spacing: normal; - color: #ffffff; - flex: none; - cursor: pointer; - - & > div { - display: block; - } - - @media (max-width: 600px) { - font-size: 14px; - } -`; - -const ConnectButton = styled(SnapButton)` - min-width: 230px; - padding: 16px 24px; - background: #d53a94; - border: 1px solid #d53a94; -`; - const InfoDiv = styled(ItemHV2)` cursor: pointer; `; diff --git a/src/components/PushSnap/SnapInformationModal.tsx b/src/components/PushSnap/SnapInformationModal.tsx index beaa390204..011baa0e1a 100644 --- a/src/components/PushSnap/SnapInformationModal.tsx +++ b/src/components/PushSnap/SnapInformationModal.tsx @@ -12,8 +12,8 @@ import HandTap from 'assets/snap/HandTap.svg?react'; import NotificationLogo from 'assets/snap/Notification.svg?react'; import WalletLogo from 'assets/snap/Wallet.svg?react'; import Metamask from 'assets/snap/metamasksnap.svg?react'; -import { Button } from 'components/SharedStyling'; import { ItemHV2, ItemVV2, SpanV2 } from 'components/reusables/SharedStylingV2'; +import { Button } from 'blocks'; const SnapInformationModal = ({ handleCloseModal }) => { const theme = useTheme(); @@ -103,16 +103,14 @@ const SnapInformationModal = ({ handleCloseModal }) => { - installSnap()}> - - - Install Snap - - + ); @@ -140,18 +138,3 @@ const SecondaryText = styled.p` color: ${(props) => props.theme.snapSecondaryText}; text-align: left; `; - -const InstallButton = styled(Button)` - width: fit-content; - min-width: 102px; - background: #d53a94; - color: #fff; - z-index: 0; - font-family: 'FK Grotesk Neu'; - font-style: normal; - font-weight: 500; - font-size: 14px; - line-height: normal; - border-radius: 8px; - padding: 14px; -`; diff --git a/src/components/SearchFilter.jsx b/src/components/SearchFilter.jsx index 994d0bc405..c40d2377d1 100644 --- a/src/components/SearchFilter.jsx +++ b/src/components/SearchFilter.jsx @@ -6,6 +6,7 @@ import { MultiSelect } from 'react-multi-select-component'; import styled, { useTheme } from 'styled-components'; import { ThemeProvider } from 'styled-components'; import DateTimePicker from 'react-datetime-picker'; +import { Box, Button } from 'blocks'; // Constants const DEBOUNCE_TIMEOUT = 500; //time in millisecond which we want to wait for then to finish typing @@ -125,15 +126,28 @@ const SearchFilter = ({ - - Reset - + + + ); @@ -367,48 +381,6 @@ const Container = styled.div` } `; -const ButtonContainer = styled.div` - display: flex; - flex-direction: row; - justify-content: flex-end; - margin: 0.3rem 2rem 1.6rem 0; - font-family: FK Grotesk Neu, Source Sans Pro; - @media (max-width: 600px) { - justify-content: space-evenly; - margin-right: 0; - } -`; - -const ButtonFeed = styled.button` - width: 110px; - height: 36px; - border-radius: 8px; - display: flex; - align-items: center; - justify-content: center; - color: white; - font-weight: 500; - font-size: 14px; - line-height: 17px; - background-color: ${(props) => (props.bgColor ? props.bgColor : '')}; - margin-right: ${(props) => (props.mright ? props.mright : '')}; - &:hover { - cursor: pointer; - pointer: hand; - } - @media (max-width: 500px) { - margin-right: ${(props) => (props.mright ? '1.5rem' : '')}; - } - font-family: FK Grotesk Neu, Source Sans Pro; -`; - -const ResetButton = styled(ButtonFeed)` - background: ${(props) => props.theme.backgroundBG}; - border: 1px solid #bac4d6; - color: #657795; - margin-right: 10px; -`; - const SearchOptions = styled.div` display: flex; flex-direction: row; diff --git a/src/components/SendNotifications.tsx b/src/components/SendNotifications.tsx index df9cb9d094..d2078fe212 100644 --- a/src/components/SendNotifications.tsx +++ b/src/components/SendNotifications.tsx @@ -15,18 +15,8 @@ import styled, { useTheme } from 'styled-components'; import LoaderSpinner, { LOADER_TYPE } from 'components/reusables/loaders/LoaderSpinner'; import { AInlineV2, SectionV2 } from 'components/reusables/SharedStylingV2'; import { convertAddressToAddrCaip } from 'helpers/CaipHelper'; -import { - Button, - Content, - FormSubmision, - H2, - Input, - Item, - ItemH, - Section, - Span, - TextField, -} from 'primaries/SharedStyling'; +import { Content, FormSubmision, H2, Input, Item, ItemH, Section, Span, TextField } from 'primaries/SharedStyling'; +import { Box, Button } from 'blocks'; import useToast from '../hooks/useToast'; import PreviewNotif from './PreviewNotif'; @@ -1105,26 +1095,32 @@ function SendNotifications() { )} {nfType && ( - - {nfProcessing == 1 && ( - - )} - {nfProcessing != 1 && ( - - )} - + + + )} @@ -1388,22 +1384,6 @@ const ToggleOption = styled(ItemH)` } `; -const SubmitButton = styled(Button)` - width: 15rem; - margin: 70px auto 0px auto; - padding: 20px 10px; - border-radius: 15px; - background: #cf1c84; - color: #fff; - @media (max-width: 640px) { - width: 13rem; - padding: 20px 20px; - } - @media (max-width: 380px) { - width: 9.5rem; - } -`; - const DropdownLabel = styled.div` display: flex; flex-direction: row; diff --git a/src/components/StakingInfo.tsx b/src/components/StakingInfo.tsx index 40a2f3827b..51d85fadb8 100644 --- a/src/components/StakingInfo.tsx +++ b/src/components/StakingInfo.tsx @@ -6,7 +6,8 @@ import styled from 'styled-components'; // Internal Components import FaucetInfo from './FaucetInfo'; -import { Button, Item, Span } from 'primaries/SharedStyling'; +import { Item, Span } from 'primaries/SharedStyling'; +import { Button } from 'blocks'; // Internal Configs import { useAccount, useAsyncOperation, useDeviceWidthCheck } from 'hooks'; @@ -99,25 +100,14 @@ const StakingInfo = ({ channelStakeFees, setStakeFeesChoosen, setProcessingInfo, margin={isMobile ? '70px auto 50px auto' : '100px auto 50px auto'} > diff --git a/src/components/StepsTransactionModal.tsx b/src/components/StepsTransactionModal.tsx index c6f6942425..dbcec6a825 100644 --- a/src/components/StepsTransactionModal.tsx +++ b/src/components/StepsTransactionModal.tsx @@ -1,11 +1,11 @@ -import React from 'react'; import Close from 'assets/chat/group-chat/close.svg?react'; -import { ButtonV2, H2V2, ItemHV2, ItemVV2 } from './reusables/SharedStylingV2'; +import { H2V2, ItemHV2, ItemVV2 } from './reusables/SharedStylingV2'; import styled from 'styled-components'; import Globals from 'config/Globals'; import { LOADER_SPINNER_TYPE } from './reusables/loaders/LoaderSpinner'; import Spinner from './reusables/spinners/SpinnerUnit'; import CheckMark from 'assets/checkmark.svg?react'; +import { Button } from 'blocks'; const StepsTransactionModal = ({ onClose, InnerComponentProps }) => { const { @@ -113,7 +113,13 @@ const StepsTransactionModal = ({ onClose, InnerComponentProps }) => { - Retry + )} @@ -144,9 +150,13 @@ const StepsTransactionModal = ({ onClose, InnerComponentProps }) => { - - Close - + )} @@ -167,23 +177,3 @@ const Container = styled(ItemVV2)` min-width: 493px; padding: 32px 24px; `; - -const FilledButton = styled(ButtonV2)` - min-width: 200px; - background: #d53a94; - border: 1px solid #d53a94; - border-radius: 8px; - padding: 12px; - font-size: 16px; - line-height: 141%; - letter-spacing: normal; - color: #ffffff; - cursor: pointer; - & > div { - display: block; - } - - @media (max-width: 600px) { - font-size: 14px; - } -`; diff --git a/src/components/UploadLogo.jsx b/src/components/UploadLogo.jsx index becf8f25ea..5221b271fe 100644 --- a/src/components/UploadLogo.jsx +++ b/src/components/UploadLogo.jsx @@ -10,7 +10,8 @@ import { BsCloudUpload } from 'react-icons/bs'; import LoaderSpinner, { LOADER_TYPE } from 'components/reusables/loaders/LoaderSpinner'; import UtilityHelper from 'helpers/UtilityHelper'; import ImageClipper from 'primaries/ImageClipper'; -import { Button, Content, FormSubmision, H3, Input, Item, Section, Span } from 'primaries/SharedStyling'; +import { Content, FormSubmision, H3, Input, Item, Section, Span } from 'primaries/SharedStyling'; +import { Button } from 'blocks'; // Internal Configs import { abis, addresses } from 'config/index.js'; @@ -164,11 +165,8 @@ const UploadLogo = ({ margin="100px auto 50px auto" > ))} diff --git a/src/components/ViewChannelItem.jsx b/src/components/ViewChannelItem.jsx index e944fe7202..4474179e67 100644 --- a/src/components/ViewChannelItem.jsx +++ b/src/components/ViewChannelItem.jsx @@ -16,7 +16,7 @@ import 'react-toastify/dist/ReactToastify.min.css'; import styled, { css, useTheme } from 'styled-components'; // Internal Compoonents -import { deviceMediaQ } from 'blocks'; +import { Button, deviceMediaQ } from 'blocks'; import MetaInfoDisplayer from 'components/MetaInfoDisplayer'; import LoaderSpinner, { LOADER_TYPE } from 'components/reusables/loaders/LoaderSpinner'; import { ButtonV2 } from 'components/reusables/SharedStylingV2'; @@ -112,7 +112,7 @@ function ViewChannelItem({ channelObjectProp, loadTeaser, playTeaser, minimal, p try { //TODO:here is the data store const channelJson = await ChannelsDataStore.getInstance().getChannelJsonStartBlockAsync(channelObject.channel); - console.log("Channel JSON !!!!!", channelJson, channelObject.channel); + console.log('Channel JSON !!!!!', channelJson, channelObject.channel); return channelJson; } catch (err) { console.error(err); @@ -169,7 +169,7 @@ function ViewChannelItem({ channelObjectProp, loadTeaser, playTeaser, minimal, p verifierAddrDetails = await userPushSDKInstance.channel.info( convertAddressToAddrCaip(verifierAddress, appConfig.coreContractChain) ); - console.log("Verifier Details >>>", verifierAddrDetails); + console.log('Verifier Details >>>', verifierAddrDetails); } dispatch( @@ -450,19 +450,19 @@ function ViewChannelItem({ channelObjectProp, loadTeaser, playTeaser, minimal, p placementProps={ tooltTipHeight < 250 ? { - background: 'none', - // bottom: "25px", - top: '20px', - // right: "-175px", - left: mobileToolTip ? '-100px' : '5px', - } + background: 'none', + // bottom: "25px", + top: '20px', + // right: "-175px", + left: mobileToolTip ? '-100px' : '5px', + } : { - background: 'none', - bottom: '25px', - // top: "20px", - // right: "-175px", - left: mobileToolTip ? '-100px' : '5px', - } + background: 'none', + bottom: '25px', + // top: "20px", + // right: "-175px", + left: mobileToolTip ? '-100px' : '5px', + } } tooltipContent={ {bLoading && ( @@ -889,10 +890,11 @@ function ViewChannelItem({ channelObjectProp, loadTeaser, playTeaser, minimal, p )} Block channel - + )} {!loading && (isPushAdmin || canVerify) && !isVerified && profileType == 'Channel' && ( - @@ -906,10 +908,12 @@ function ViewChannelItem({ channelObjectProp, loadTeaser, playTeaser, minimal, p )} Verify Channel - + )} {!loading && (isPushAdmin || canUnverify) && isVerified && profileType == 'Channel' && ( - @@ -923,16 +927,21 @@ function ViewChannelItem({ channelObjectProp, loadTeaser, playTeaser, minimal, p )} Unverify Channel - + )} {!loading && !subscribed && ( <> {isOwner && ( <> {profileType == 'Profile' ? ( - navigate('/dashboard')}>Go To Dashboard + ) : ( - Owner + Owner )} )} @@ -945,10 +954,10 @@ function ViewChannelItem({ channelObjectProp, loadTeaser, playTeaser, minimal, p setSubscriberCount((prevSubscriberCount) => prevSubscriberCount + 1); }} > - { }} + )} @@ -971,9 +980,14 @@ function ViewChannelItem({ channelObjectProp, loadTeaser, playTeaser, minimal, p {isOwner && ( <> {profileType == 'Profile' ? ( - navigate('/dashboard')}>Go To Dashboard + ) : ( - Owner + Owner )} )} @@ -991,7 +1005,7 @@ function ViewChannelItem({ channelObjectProp, loadTeaser, playTeaser, minimal, p }} > { }} + onClick={() => {}} disabled={txInProgress} > {txInProgress && ( @@ -1432,15 +1446,6 @@ const SkeletonButton = styled.div` flex: 1; `; -const SubscribeButton = styled(ChannelActionButton)` - background: #e20880; - color: #fff; - border-radius: 8px; - padding: 0px; - min-height: 36px; - min-width: 108px; -`; - const UnsubscribeButton = styled(ChannelActionButton)` background: transparent; color: ${(props) => props.theme.viewChannelPrimaryText}; @@ -1452,19 +1457,15 @@ const UnsubscribeButton = styled(ChannelActionButton)` min-width: 108px; `; -const OwnerButton = styled(ChannelActionButton)` +const OwnerLabel = styled.div` background: #35c5f3; border-radius: 8px; min-height: 36px; min-width: 108px; -`; - -const DashboardButton = styled(ChannelActionButton)` - background: #e20880; - border-radius: 8px; - padding: 7px 14px; - min-height: 36px; - min-width: max-content; + display: flex; + align-items: center; + justify-content: center; + color: #fff; `; const Toaster = styled.div` diff --git a/src/components/ViewDelegateeItem.jsx b/src/components/ViewDelegateeItem.jsx index 3b4e6f61d5..c3f3a0413c 100644 --- a/src/components/ViewDelegateeItem.jsx +++ b/src/components/ViewDelegateeItem.jsx @@ -20,6 +20,7 @@ import { toolingPostReq } from '../api/index'; import { createTransactionObject } from '../helpers/GaslessHelper'; import { executeDelegateTx } from '../helpers/WithGasHelper'; import { Anchor, Image, Item, ItemBreak, ItemH, Span } from '../primaries/SharedStyling'; +import { Button } from 'blocks'; // Internal Configs import { abis, addresses } from 'config/index.js'; @@ -299,7 +300,10 @@ function ViewDelegateeItem({ delegateeObject, epnsToken, signerObject, pushBalan - + { const { chainId: currentChainId, switchChain } = useAccount(); @@ -38,7 +39,13 @@ const YieldFarmChainError = ({ onClose }) => { - Switch Network + ); @@ -72,24 +79,3 @@ const SecondaryText = styled.div` margin: 10px 0 24px 0; `; const ButtonContainer = styled.div``; - -const FilledButton = styled(ButtonV2)` - // width:100%; - background: #d53a94; - border: 1px solid #d53a94; - border-radius: 8px; - padding: 16px; - width: 165px; - font-size: 16px; - line-height: 141%; - letter-spacing: normal; - color: #ffffff; - cursor: pointer; - & > div { - display: block; - } - - @media (max-width: 600px) { - font-size: 14px; - } -`; diff --git a/src/components/channel/ChannelButtons.tsx b/src/components/channel/ChannelButtons.tsx index 3b717ca92b..9c8b35f377 100644 --- a/src/components/channel/ChannelButtons.tsx +++ b/src/components/channel/ChannelButtons.tsx @@ -1,10 +1,9 @@ // External Packages import { AiOutlinePlus } from 'react-icons/ai'; import { FiSettings } from 'react-icons/fi'; -import styled from 'styled-components'; // Internal Components -import { Button } from 'components/SharedStyling'; +import { Button } from 'blocks'; interface ChannelButtonProps { onClick: () => void; @@ -16,75 +15,51 @@ interface ModifySettingsButtonProps extends ChannelButtonProps { export const AddDelegateButton = ({ onClick }: ChannelButtonProps) => { return ( - - - Add Delegate - + ); }; export const ManageSettingsButton = ({ onClick }: ChannelButtonProps) => { return ( - - - Manage Settings - + ); }; export const ModifySettingsButton = ({ onClick, title }: ModifySettingsButtonProps) => { return ( - - {title ? title : 'Modify Settings'} - + ); }; export const AddSettingButton = ({ onClick }: ChannelButtonProps) => { return ( - - - Add Setting - + ); }; - -const ChannelButton = styled(Button)` - min-height: 36px; - background: ${(props) => props.theme.default.primaryPushThemeTextColor}; - color: #fff; - z-index: 0; - font-style: normal; - font-weight: 500; - font-size: 14px; - line-height: 17px; - border-radius: 8px; - padding: 4px 12px 4px 12px; -`; - -const ChannelButtonWhite = styled.button` - min-height: 36px; - border: 1px solid ${(props) => props.theme.default.borderColor}; - background: transparent; - color: white; - z-index: 0; - font-style: normal; - font-weight: 500; - font-size: 14px; - line-height: 17px; - border-radius: 8px; - padding: 4px 12px 4px 12px; - cursor: pointer; -`; - -const ButtonText = styled.span` - margin-left: 8px; -`; - -const TransparentButtonText = styled.span` - color: ${(props) => props.theme.default.color}; -`; - -const AddButtonIcon = styled(AiOutlinePlus)` - font-size: 16px; -`; diff --git a/src/components/channel/DepositFeeFooter.tsx b/src/components/channel/DepositFeeFooter.tsx index 3143c7157c..980d917839 100644 --- a/src/components/channel/DepositFeeFooter.tsx +++ b/src/components/channel/DepositFeeFooter.tsx @@ -11,10 +11,10 @@ import { ItemHV2, ItemVV2 } from 'components/reusables/SharedStylingV2'; import FaucetInfo from 'components/FaucetInfo'; import useToast from 'hooks/useToast'; import { useAccount } from 'hooks'; +import { Button } from 'blocks'; // Internal Configs import GLOBALS, { device } from 'config/Globals'; -import { Button } from '../SharedStyling'; import { LOADER_SPINNER_TYPE } from 'components/reusables/loaders/LoaderSpinner'; import Spinner from 'components/reusables/spinners/SpinnerUnit'; import VerifyLogo from '../../assets/Vector.svg?react'; @@ -157,27 +157,31 @@ const DepositFeeFooter = ({ title, description, onCancel, disabled, onClick, fee <> {/* This below is Footer Buttons i.e, Cancel and save changes */} - Cancel - + {pushApprovalAmount >= feeRequired ? ( - Save Changes - + ) : ( - Approve PUSH - + )} @@ -262,47 +266,9 @@ const TransactionText = styled.p` const ButtonContainer = styled(ItemHV2)` justify-content: end; margin-top: 24px; + gap: 14px; @media ${device.mobileL} { flex-direction: column-reverse; flex: 0; } `; - -const FooterButtons = styled(Button)<{ disabled: boolean }>` - font-style: normal; - font-weight: 500; - font-size: 18px; - line-height: 22px; - display: flex; - border-radius: 15px; - align-items: center; - text-align: center; - background: ${(props) => (props.disabled ? props.theme.nfsDisabled : props.theme.default.primaryPushThemeTextColor)}; - color: ${(props) => (props.disabled ? props.theme.nfsDisabledText : 'white')}; - padding: 16px 27px; - width: 12rem; - - @media ${device.tablet} { - font-size: 15px; - padding: 12px 12px; - width: 8rem; - } - - @media ${device.mobileL} { - width: -webkit-fill-available; - } -`; - -const CancelButtons = styled(FooterButtons)` - margin-right: 14px; - background: ${(props) => props.theme.default.bg}; - color: ${(props) => props.theme.logoBtnColor}; - border: 1px solid - ${(props) => - props.theme.scheme === 'light' ? props.theme.default.primaryPushThemeTextColor : props.theme.default.borderColor}; - - @media ${device.mobileL} { - margin-right: 0px; - margin-top: 10px; - } -`; diff --git a/src/components/chat/unlockProfile/UnlockProfile.tsx b/src/components/chat/unlockProfile/UnlockProfile.tsx index de08c8adf1..cbb75ac177 100644 --- a/src/components/chat/unlockProfile/UnlockProfile.tsx +++ b/src/components/chat/unlockProfile/UnlockProfile.tsx @@ -5,15 +5,7 @@ import { useCallback, useContext, useEffect, useState } from 'react'; import styled, { useTheme } from 'styled-components'; // Internal Compoonents -import { - ButtonV2, - ImageV2, - ItemHV2, - ItemVV2, - Skeleton, - SkeletonLine, - SpanV2, -} from 'components/reusables/SharedStylingV2'; +import { ImageV2, ItemHV2, ItemVV2, Skeleton, SkeletonLine, SpanV2 } from 'components/reusables/SharedStylingV2'; import { AppContext } from 'contexts/AppContext'; import { useAccount, useDeviceWidthCheck } from 'hooks'; import { retrieveUserPGPKeyFromStorage } from 'helpers/connectWalletHelper'; @@ -25,8 +17,9 @@ import { device, size } from 'config/Globals'; import Tooltip from 'components/reusables/tooltip/Tooltip'; import UnlockLogo from '../../../assets/chat/unlock.svg'; import Wallet from '../../../assets/chat/wallet.svg'; -import { Box, CrossFilled, HoverableSVG } from 'blocks'; +import { Button, Box, CrossFilled, HoverableSVG } from 'blocks'; import { checkUnlockProfileErrors } from './UnlockProfile.utils'; +import { colorBrands } from 'blocks/theme/colors/colors.brands'; // Constants export enum UNLOCK_PROFILE_TYPE { @@ -198,7 +191,7 @@ const UnlockProfile = ({ InnerComponentProps, onClose }: UnlockProfileModalProps flexDirection={type === UNLOCK_PROFILE_TYPE.MODAL || isMobile ? 'column' : 'row'} > 1 @@ -210,7 +203,7 @@ const UnlockProfile = ({ InnerComponentProps, onClose }: UnlockProfileModalProps > {!isLoading ? ( <> - connectWallet()} > Connect Wallet - + - Unlock Profile - + ) : ( (props.type === UNLOCK_PROFILE_TYPE.MODAL ? '40px' : '3px')}; background: ${(props) => props.activeState === PROFILESTATE.CONNECT_WALLET - ? `linear-gradient(to right, ${props.theme.btn.primaryBg}, ${props.theme.btn.disabledBg})` - : props.theme.btn.primaryBg}; + ? `linear-gradient(to right, ${colorBrands['primary-500']}, ${props.theme.btn.disabledBg})` + : colorBrands['primary-500']}; @media ${device.tablet} { width: 2px; @@ -412,22 +403,6 @@ const HorizontalBar = styled.div` } `; -const DefaultButton = styled(ButtonV2)` - flex: none; - padding: 12px 16px; - border-radius: 12px; - min-width: 150px; - font-size: 15px; - font-style: normal; - font-weight: 500; - line-height: 16px; - background: ${(props) => - props.activeStatus === props.status ? props.theme.btn.primaryBg : props.theme.btn.disabledBg}; - color: ${(props) => - props.activeStatus === props.status ? props.theme.btn.primaryColor : props.theme.btn.disabledColor}; - cursor: ${(props) => (props.activeStatus !== props.status ? 'not-allowed' : 'pointer')}; -`; - const SkeletonWrapper = styled.div` overflow: hidden; min-width: 220px; diff --git a/src/components/chat/w2wChat/searchBar/SearchBar.tsx b/src/components/chat/w2wChat/searchBar/SearchBar.tsx index 64a7ad8df7..b5b55d1dba 100644 --- a/src/components/chat/w2wChat/searchBar/SearchBar.tsx +++ b/src/components/chat/w2wChat/searchBar/SearchBar.tsx @@ -9,11 +9,12 @@ import styled, { useTheme } from 'styled-components'; // Internal Components import SearchIcon from 'assets/chat/search.svg?react'; -import { ButtonV2, ImageV2, ItemHV2, ItemVV2, SpanV2 } from 'components/reusables/SharedStylingV2'; +import { ImageV2, ItemHV2, ItemVV2, SpanV2 } from 'components/reusables/SharedStylingV2'; import LoaderSpinner, { LOADER_TYPE } from 'components/reusables/loaders/LoaderSpinner'; import { Context } from 'modules/chat/ChatModule'; import { AppContext } from 'types/chat'; import ArrowLeft from '../../../../assets/chat/arrowleft.svg'; +import { Box, Button } from 'blocks'; interface InputProps { typed: boolean; @@ -118,13 +119,12 @@ const SearchBar = ({ autofilled, searchedUser, setSearchedUser }) => { placeholder="Search Web3 domain or 0x123..." /> {searchedUser.length > 0 && ( - - - + /> )} { {activeTab !== 3 && activeTab !== 4 && ( - - + ); @@ -402,47 +405,6 @@ const DropdownSubmitItem = styled.div` padding: 12px 0px; `; -const DropdownSubmitButton = styled.button` - border: 0; - outline: 0; - display: flex; - align-items: center; - min-width: 90px; - justify-content: center; - margin: 0px 0px 0px 10px; - color: #fff; - font-size: 14px; - font-weight: 400; - position: relative; - background: #e20880; - border-radius: 8px; - padding: 9px 20px; - &:hover { - opacity: 0.9; - cursor: pointer; - pointer: hand; - } - &:active { - opacity: 0.75; - cursor: pointer; - pointer: hand; - } - ${(props) => - props.disabled && - css` - &:hover { - opacity: 1; - cursor: default; - pointer: default; - } - &:active { - opacity: 1; - cursor: default; - pointer: default; - } - `} -`; - const DropdownSliderItem = styled.div` display: flex; flex-direction: column; diff --git a/src/components/dropdowns/UpdateNotifSettingDropdown.tsx b/src/components/dropdowns/UpdateNotifSettingDropdown.tsx index 66f9158c5c..85403f7690 100644 --- a/src/components/dropdowns/UpdateNotifSettingDropdown.tsx +++ b/src/components/dropdowns/UpdateNotifSettingDropdown.tsx @@ -23,7 +23,7 @@ import { notifUserSettingFormatString, userSettingsFromDefaultChannelSetting } f import { MdCheckCircle, MdError } from 'react-icons/md'; import LoaderSpinner, { LOADER_TYPE } from 'components/reusables/loaders/LoaderSpinner'; import { updateUserSetting } from 'redux/slices/channelSlice'; -import { Text } from 'blocks'; +import { Button, Text } from 'blocks'; interface UpdateNotifSettingDropdownProps { children: ReactNode; @@ -158,7 +158,9 @@ const UpdateNotifSettingDropdownContainer: FC You will receive all important updates from this channel. - saveUserSettingHandler({ userSettings: modifiedSettings, setLoading: setTxInProgress })} > {txInProgress && ( @@ -169,7 +171,7 @@ const UpdateNotifSettingDropdownContainer: FC )} {!txInProgress && Save} - + ); @@ -341,47 +343,6 @@ const DropdownSubmitItem = styled.div` padding: 12px 0px; `; -const DropdownSubmitButton = styled.button` - border: 0; - outline: 0; - display: flex; - align-items: center; - min-width: 90px; - justify-content: center; - margin: 0px 0px 0px 10px; - color: #fff; - font-size: 14px; - font-weight: 400; - position: relative; - background: #e20880; - border-radius: 8px; - padding: 9px 20px; - &:hover { - opacity: 0.9; - cursor: pointer; - pointer: hand; - } - &:active { - opacity: 0.75; - cursor: pointer; - pointer: hand; - } - ${(props) => - props.disabled && - css` - &:hover { - opacity: 1; - cursor: default; - pointer: default; - } - &:active { - opacity: 1; - cursor: default; - pointer: default; - } - `} -`; - const DropdownSliderItem = styled.div` display: flex; flex-direction: column; diff --git a/src/components/yield/StakingModalComponent.tsx b/src/components/yield/StakingModalComponent.tsx index 8aa7254db8..ce04b51614 100644 --- a/src/components/yield/StakingModalComponent.tsx +++ b/src/components/yield/StakingModalComponent.tsx @@ -14,7 +14,8 @@ import Close from 'assets/chat/group-chat/close.svg?react'; import LoaderSpinner, { LOADER_TYPE } from 'components/reusables/loaders/LoaderSpinner'; import { bnToInt, formatTokens } from 'helpers/StakingHelper'; import { P } from 'components/SharedStyling'; -import { ButtonV2, H2V2, ItemHV2, ItemVV2 } from 'components/reusables/SharedStylingV2'; +import { H2V2, ItemHV2, ItemVV2 } from 'components/reusables/SharedStylingV2'; +import { Button } from 'blocks'; import { AppContext } from 'contexts/AppContext'; // Internal Configs @@ -325,11 +326,14 @@ const StakingModalComponent = ({ onClose, InnerComponentProps, toastObject }) => - - + ); @@ -425,46 +420,3 @@ const MaxText = styled.p` margin: 0px; cursor: pointer; `; - -const FilledButton = styled(ButtonV2)` - width: 100%; - border-radius: 8px; - padding: 12px; - font-size: 16px; - line-height: 141%; - letter-spacing: normal; - width: 145px; - height: 48px; - border: none; - & > div { - display: block; - } - &:after { - background: transparent; - } - - &:hover { - opacity: 1; - } -`; - -const EmptyButton = styled(ButtonV2)` - font-size: 16px; - line-height: 19px; - flex: 1; - width: 145px; - height: 48px; - border-radius: 8px; - margin-left: 10px; - border: none; - & > div { - display: block; - } - &:after { - background: transparent; - } - - &:hover { - opacity: 1; - } -`; diff --git a/src/components/yield/YieldPushFeeV3.tsx b/src/components/yield/YieldPushFeeV3.tsx index dba9dfc5cb..1d1aa61f7c 100644 --- a/src/components/yield/YieldPushFeeV3.tsx +++ b/src/components/yield/YieldPushFeeV3.tsx @@ -16,7 +16,6 @@ import { formatTokens, numberWithCommas } from 'helpers/StakingHelper'; import StakingToolTip, { StakingToolTipContent } from './StakingToolTip'; import StakingModalComponent from './StakingModalComponent'; import { - ButtonV2, H2V2, ImageV2, ItemHV2, @@ -26,6 +25,7 @@ import { SkeletonLine, SpanV2, } from 'components/reusables/SharedStylingV2'; +import { Button } from 'blocks'; // Internal Configs import { abis, addresses } from 'config/index.js'; @@ -699,7 +699,13 @@ const YieldPushFeeV3 = ({ userDataPush, getUserDataPush, PUSHPoolstats, getPUSHP {userDataPush ? ( <> - Stake $PUSH + {PUSHPoolstats?.currentEpochNumber <= 2 ? ( @@ -713,13 +719,10 @@ const YieldPushFeeV3 = ({ userDataPush, getUserDataPush, PUSHPoolstats, getPUSHP ButtonTitle={'Unstake PUSH'} /> ) : ( - {txInProgressWithdraw ? ( + )} {userDataPush?.availableRewards === 0.0 ? ( @@ -743,11 +746,9 @@ const YieldPushFeeV3 = ({ userDataPush, getUserDataPush, PUSHPoolstats, getPUSHP left={'40px'} ToolTipWidth={'10rem'} > - {txInProgressClaimRewards ? ( + ) : ( - {txInProgressClaimRewards ? ( @@ -779,7 +778,7 @@ const YieldPushFeeV3 = ({ userDataPush, getUserDataPush, PUSHPoolstats, getPUSHP ) : ( 'Claim Rewards' )} - + )} @@ -804,23 +803,19 @@ const YieldPushFeeV3 = ({ userDataPush, getUserDataPush, PUSHPoolstats, getPUSHP export default YieldPushFeeV3; const ErrorToolTip = (props) => { - const theme = useTheme(); return ( - {props.ButtonTitle} - + ); }; @@ -1004,63 +999,10 @@ const DataValue = styled(H2V2)` } `; -const EpochText = styled(ItemHV2)` - align-self: end; - margin: 12px 13px 24px 0px; - letter-spacing: normal; - color: ${(props) => props.theme.modalDescriptionTextColor}; -`; - const ButtonsContainer = styled.div` display: flex; - width: 100%; margin: 15px 0px 0px 0px; -`; - -const FilledButton = styled(ButtonV2)` - width: 100%; - background: #d53a94; - border: 1px solid #d53a94; - border-radius: 8px; - padding: 12px; - font-size: 16px; - line-height: 141%; - letter-spacing: normal; - color: #ffffff; - cursor: pointer; - & > div { - display: block; - } - - @media (max-width: 600px) { - font-size: 14px; - } -`; - -const EmptyButton = styled(ButtonV2)` - font-size: 16px; - line-height: 19px; - flex-direction: row; - flex: 1; - padding: 11px; - // width: 145px; - height: 49px; - border-radius: 8px; - - & > div { - display: block; - } - &:after { - background: transparent; - } - - &:hover { - opacity: 1; - } - - @media (max-width: 600px) { - font-size: 14px; - } + gap: var(--s3); `; const SkeletonContainer = styled(Skeleton)` @@ -1069,15 +1011,3 @@ const SkeletonContainer = styled(Skeleton)` border-radius: 5px; gap: 5px; `; - -const UserSkeletonLine = styled(SkeletonLine)` - height: 25px; - width: 100%; - border-radius: 2px; -`; - -const RewardSkeletonLine = styled(SkeletonLine)` - height: 20px; - width: 100%; - border-radius: 2px; -`; diff --git a/src/components/yield/YieldUniswapV3.tsx b/src/components/yield/YieldUniswapV3.tsx index d2087784e5..cc3dda73a8 100644 --- a/src/components/yield/YieldUniswapV3.tsx +++ b/src/components/yield/YieldUniswapV3.tsx @@ -16,7 +16,6 @@ import { formatTokens, numberWithCommas } from 'helpers/StakingHelper'; import StakingToolTip from './StakingToolTip'; import StakingModalComponent from './StakingModalComponent'; import { - ButtonV2, H2V2, ImageV2, ItemHV2, @@ -26,6 +25,7 @@ import { SkeletonLine, SpanV2, } from 'components/reusables/SharedStylingV2'; +import { Button } from 'blocks'; // Internal Configs import { abis, addresses } from 'config/index.js'; @@ -559,13 +559,15 @@ const YieldUniswapV3 = ({ lpPoolStats, userDataLP, getLpPoolStats, getUserDataLP {userDataLP ? ( <> - { handleStakingModal(); }} > Stake $UNI-V2 LP Tokens - + {formatTokens(userDataLP?.epochStakeNext) === '0' ? ( @@ -573,14 +575,11 @@ const YieldUniswapV3 = ({ lpPoolStats, userDataLP, getLpPoolStats, getUserDataLP error={true} ToolTipTitle={'Nothing to unstake! Stake First.'} ToolTipWidth={'16rem'} - margin={'0 10px 0 0'} bottom={'-30px'} > - {txInProgressWithdraw ? ( + ) : ( - {txInProgressWithdraw ? ( + )} {userDataLP?.totalAvailableReward === '0.00' ? ( @@ -624,11 +620,9 @@ const YieldUniswapV3 = ({ lpPoolStats, userDataLP, getLpPoolStats, getUserDataLP error={true} ToolTipWidth={'10rem'} > - {txInProgressClaimRewards ? ( + ) : ( - massClaimRewardsTokensAll()} > {txInProgressClaimRewards ? ( @@ -660,7 +652,7 @@ const YieldUniswapV3 = ({ lpPoolStats, userDataLP, getLpPoolStats, getUserDataLP ) : ( 'Claim Rewards' )} - + )} @@ -792,80 +784,13 @@ const DataValue = styled(H2V2)` const ButtonsContainer = styled.div` display: flex; - width: 100%; + gap: var(--spacing-xxxs, 4px); margin: 15px 0px 0px 0px; `; -const FilledButton = styled(ButtonV2)` - width: 100%; - background: #d53a94; - border: 1px solid #d53a94; - border-radius: 8px; - padding: 12px; - font-size: 16px; - line-height: 141%; - letter-spacing: normal; - color: #ffffff; - cursor: pointer; - & > div { - display: block; - } - - @media (max-width: 600px) { - font-size: 14px; - } -`; - -const EmptyButton = styled(ButtonV2)` - font-size: 16px; - line-height: 19px; - flex-direction: row; - flex: 1; - height: 49px; - padding: 12px; - border-radius: 8px; - & > div { - display: block; - } - &:after { - background: transparent; - } - - &:hover { - opacity: 1; - } - - @media (max-width: 600px) { - font-size: 14px; - } -`; - -const Toaster = styled.div` - display: flex; - flex-direction: row; - align-items: center; - margin: 0px 10px; -`; - -const ToasterMsg = styled.div` - margin: 0px 10px; -`; - const SkeletonContainer = styled(Skeleton)` // width:150px; max-width: -webkit-fill-available; border-radius: 5px; gap: 5px; `; - -const UserSkeletonLine = styled(SkeletonLine)` - height: 25px; - width: 100%; - border-radius: 2px; -`; - -const RewardSkeletonLine = styled(SkeletonLine)` - height: 20px; - width: 100%; - border-radius: 2px; -`; diff --git a/src/hooks/useToast.tsx b/src/hooks/useToast.tsx index d6b3f08211..9c77d09bdc 100644 --- a/src/hooks/useToast.tsx +++ b/src/hooks/useToast.tsx @@ -8,6 +8,7 @@ import FadeLoader from 'react-spinners/FadeLoader'; import { toast } from 'react-toastify'; import styled, { ThemeProvider, useTheme } from 'styled-components'; import useMediaQuery from './useMediaQuery'; +import { Box } from 'blocks'; // Types type LoaderToastType = { msg: string; loaderColor: string; textColor: string }; @@ -37,12 +38,16 @@ const LoaderToast = ({ msg, loaderColor, textColor }: LoaderToastType) => ( ); const CloseButton = ({ closeToast }) => ( - + ); export type ShowLoaderToastType = ({ loaderMessage }: { loaderMessage: string }) => React.ReactText; @@ -221,13 +226,4 @@ const ToastMessage = styled.div` text-align: left; `; -const Button = styled.button` - cursor: pointer; - background: none; - margin: 0; - padding: 0; - width: 1.3rem; - height: 1.3rem; -`; - export default useToast; diff --git a/src/modules/channelDashboard/ChannelOwnerDashboard.tsx b/src/modules/channelDashboard/ChannelOwnerDashboard.tsx index 2be592a9cb..ce1f49d866 100644 --- a/src/modules/channelDashboard/ChannelOwnerDashboard.tsx +++ b/src/modules/channelDashboard/ChannelOwnerDashboard.tsx @@ -12,7 +12,8 @@ import ChannelDetails from 'components/ChannelDetails'; import ChannelLoading from 'components/ChannelLoading'; import ChannelSettings from 'components/ChannelSettings'; import CreateChannelModule from '../createChannel/CreateChannelModule'; -import { ButtonV2, ItemHV2, ItemVV2 } from 'components/reusables/SharedStylingV2'; +import { ItemHV2, ItemVV2 } from 'components/reusables/SharedStylingV2'; +import { Button } from 'blocks'; import { getAliasFromChannelDetails } from 'helpers/UtilityHelper'; import { useAccount, useDeviceWidthCheck } from 'hooks'; import { @@ -28,7 +29,6 @@ import useToast from 'hooks/useToast'; // Internal Configs import { appConfig } from 'config/index.js'; -import { Button } from 'components/SharedStyling'; import EditChannel from 'modules/editChannel/EditChannel'; import useModalBlur from 'hooks/useModalBlur'; import { AppContext } from 'contexts/AppContext'; @@ -221,23 +221,26 @@ const ChannelOwnerDashboard = () => { top="0" right="0" zIndex="1" + gap="8px" > {!isChannelExpired && onCoreNetwork && ( - Edit Channel + )} {!isChannelExpired && } {isChannelExpired && onCoreNetwork && ( - Delete Channel - + )} )} @@ -272,26 +275,3 @@ const ChannelOwnerDashboard = () => { }; export default ChannelOwnerDashboard; - -const DestroyChannelBtn = styled(ButtonV2)` - height: ${(props) => props.height || '100%'}; - width: ${(props) => props.width || '100%'}; -`; - -const SubmitButton = styled(Button)` - width: 7rem; - background: #cf1c84; - color: #fff; - z-index: 0; - font-family: 'FK Grotesk Neu'; - font-style: normal; - font-weight: 500; - font-size: 14px; - line-height: 17px; - margin-right: 20px; - border-radius: 8px; - padding: 11px 10px; - @media (min-width: 600px) and (max-width: 700px) { - margin-right: 9px; - } -`; diff --git a/src/modules/claimGalxe/ClaimGalxeModule.tsx b/src/modules/claimGalxe/ClaimGalxeModule.tsx index caf4e8c9af..4dcd2fbe6f 100644 --- a/src/modules/claimGalxe/ClaimGalxeModule.tsx +++ b/src/modules/claimGalxe/ClaimGalxeModule.tsx @@ -15,6 +15,7 @@ import useToast from 'hooks/useToast'; import AlphaAccessNFTHelper from 'helpers/AlphaAccessNftHelper'; import 'react-toastify/dist/ReactToastify.min.css'; import { NFTSuccessModal } from './NFTSuccessModal'; +import { Box, Button } from 'blocks'; // Internal Configs import { abis, addresses, appConfig, CHAIN_DETAILS } from 'config/index.js'; @@ -184,18 +185,27 @@ const ClaimGalxeModule = () => { Please ensure you are using the same address used on Galxe. In-case of any issues please reach out on our community Discord. - {wallet && wallet?.accounts?.length > 0 ? ( - { - if (submitbtnInfo.enabled) mintNft(); - }} - > - {submitbtnInfo.btnText} - - ) : ( - connect()}>Connect Wallet - )} + + {wallet && wallet?.accounts?.length > 0 ? ( + + ) : ( + + )} + {submitbtnInfo.info} @@ -309,32 +319,6 @@ const GalxeImg = styled(ImageV2)` align-self: flex-start; `; -const SubmitButton = styled.button` - width: 15rem; - padding: 16px 32px; - border-radius: 15px; - background: ${(props) => (props.disabled ? props.theme.btn.disabledBg : '#cf1c84')}; - color: ${(props) => (props.disabled ? props.theme.btn.disabledColor : '#fff')}; - cursor: ${(props) => (props.disabled ? 'default' : 'pointer')}; - - align-self: flex-start; - flex: none; - margin-bottom: 1rem; - :hover { - opacity: 0.8; - } - - @media ${device.tablet} { - margin-bottom: 1rem; - } - @media (max-width: 640px) { - width: 13rem; - } - @media (max-width: 380px) { - width: 9.5rem; - } -`; - const SpanText = styled(SpanV2)` display: flex; align-self: flex-start; diff --git a/src/modules/editChannel/EditChannel.tsx b/src/modules/editChannel/EditChannel.tsx index 92e7ca96bc..74c5b1eb9a 100644 --- a/src/modules/editChannel/EditChannel.tsx +++ b/src/modules/editChannel/EditChannel.tsx @@ -14,7 +14,7 @@ import FaucetInfo from 'components/FaucetInfo'; // Internal Configs import { addresses } from 'config/index.js'; import GLOBALS, { device } from 'config/Globals'; -import { Button } from '../../components/SharedStyling'; +import { Button } from 'blocks'; import EditChannelForms from './EditChannelForms'; import useToast from 'hooks/useToast'; import { MODAL_POSITION } from 'hooks/useModalBlur'; @@ -364,14 +364,15 @@ export default function EditChannel({ closeEditChannel, UploadLogoComponent, dis - { displayUplaodLogoModal(); setShowUploadLogoModal(true); }} > Upload Logo - + {!isMobile && } @@ -423,18 +424,29 @@ export default function EditChannel({ closeEditChannel, UploadLogoComponent, dis <> {/* This below is Footer Buttons i.e, Cancel and save changes */} - Cancel + {pushApprovalAmount >= feesRequiredForEdit ? ( - Save Changes - + ) : ( - Approve PUSH + )} @@ -461,18 +473,6 @@ const EditableContainer = styled(ItemVV2)` } `; -const UploadButton = styled(Button)` - border-radius: 8px; - background: ${(props) => props.theme.logoBtnBg}; - color: ${(props) => props.theme.logoBtnColor}; - font-family: 'FK Grotesk Neu'; - font-style: normal; - font-weight: 500; - font-size: 14px; - line-height: 17px; - padding: 10px 12px; -`; - const TickImage = styled.img``; const AdaptiveMobileItemHV22 = styled(ItemHV2)` @@ -589,56 +589,8 @@ const TransactionText = styled.p` const ButtonContainer = styled(ItemHV2)` justify-content: end; margin-top: 35px; + gap: 14px; @media (max-width: 425px) { flex-direction: column-reverse; } `; - -const FooterButtons = styled(Button)` - font-family: 'FK Grotesk Neu'; - font-style: normal; - font-weight: 500; - font-size: 18px; - line-height: 22px; - display: flex; - border-radius: 15px; - align-items: center; - text-align: center; - background: #cf1c84; - color: #fff; - padding: 16px 27px; - width: 12rem; - - @media (min-width: 425px) and (max-width: 600px) { - font-size: 15px; - padding: 12px 12px; - width: 8rem; - } - - @media (max-width: 425px) { - width: -webkit-fill-available; - } -`; - -const CancelButtons = styled(FooterButtons)` - margin-right:14px; - background:${(props) => props.theme.default.bg}; - color:${(props) => props.theme.logoBtnColor}; - border:1px solid #CF1C84; - - @media (max-width:425px){ - margin-right:0px; - margin-top:10px; - } - - &:hover{ - color:#AC106C; - border:border: 1px solid #AC106C; - background:transparent; - opacity:1; - } - - &:after{ - background:white; - } -`; diff --git a/src/modules/editChannel/uploadLogoModal.tsx b/src/modules/editChannel/uploadLogoModal.tsx index db12dda356..9a0cbf0097 100644 --- a/src/modules/editChannel/uploadLogoModal.tsx +++ b/src/modules/editChannel/uploadLogoModal.tsx @@ -1,5 +1,6 @@ import { ItemVV2 } from 'components/reusables/SharedStylingV2'; -import { Button, Item } from 'components/SharedStyling'; +import { Item } from 'components/SharedStyling'; +import { Button } from 'blocks'; import ImageClipper from 'primaries/ImageClipper'; import { useRef } from 'react'; import { AiOutlineClose } from 'react-icons/ai'; @@ -116,24 +117,28 @@ const uploadLogoModal = ({ onClose, InnerComponentProps }) => { {croppedImage ? ( <> - { setChannelLogo(croppedImage); onClose(); }} > Upload Image - + ) : ( <> - { childRef.current.showCroppedImage(); }} > Crop Image - + )} @@ -182,38 +187,6 @@ const DragText = styled(Item)` const ModalFooter = styled(ItemVV2)``; -const CropButton = styled(Button)` - font-family: 'FK Grotesk Neu'; - font-style: normal; - font-weight: 500; - font-size: 18px; - line-height: 22px; - display: flex; - border-radius: 15px; - align-items: center; - text-align: center; - background: #cf1c84; - color: #fff; - padding: 16px 27px; - width: 12rem; -`; - -const UploadButton = styled(Button)` - font-family: 'FK Grotesk Neu'; - font-style: normal; - font-weight: 500; - font-size: 18px; - line-height: 22px; - display: flex; - border-radius: 15px; - align-items: center; - text-align: center; - background: #cf1c84; - color: #fff; - padding: 16px 18px; - width: 12rem; -`; - const Space = styled.div` width: 100%; margin: 24px 0px 44px 0px; diff --git a/src/modules/gov/GovModule.tsx b/src/modules/gov/GovModule.tsx index 7012ed20b8..dcf9249f91 100644 --- a/src/modules/gov/GovModule.tsx +++ b/src/modules/gov/GovModule.tsx @@ -15,7 +15,8 @@ import { GAS_LIMIT, PUSH_BALANCE_TRESHOLD } from 'components/ViewDelegateeItem'; import EPNSCoreHelper from 'helpers/EPNSCoreHelper'; import Blockies from 'primaries/BlockiesIdenticon'; import InfoTooltip from 'primaries/InfoTooltip'; -import { A, B, Button, H2, H3, Input, Item, ItemH, LI, Section, Span, UL } from 'primaries/SharedStyling'; +import { A, B, Button as ButtonSS, H2, H3, Input, Item, ItemH, LI, Section, Span, UL } from 'primaries/SharedStyling'; +import { Box, Button } from 'blocks'; import LoaderSpinner from 'components/reusables/loaders/LoaderSpinner'; import ViewDelegateeItem from 'components/ViewDelegateeItem'; import { createTransactionObject } from 'helpers/GaslessHelper'; @@ -586,82 +587,82 @@ const GovModule = () => {
- {!txInProgress && ( - { - if (showDelegateePrompt) { - delegateAction(newDelegateeAddress); - } else { - setShowDelegateePrompt(true); - } - }} - > - + {!txInProgress && ( + + )} + {!showDelegateePrompt && !txInProgress && ( + )} - - {showDelegateePrompt && ( - { - setShowDelegateePrompt(false); + if (showDelegateePrompt) { + getVotingPower(newDelegateeAddress); + } else { + setShowDelegateePrompt(true); + } }} > - + + + ) : ( + + Query Voting Power + + )} + + + {showDelegateePrompt && ( + + )} + @@ -1141,7 +1142,7 @@ const ContainerInfo = styled.div` padding: 20px; `; -const Question = styled(Button)` +const Question = styled(ButtonSS)` align-items: stretch; align-self: stretch; background: #fff; @@ -1299,45 +1300,6 @@ const StatsInnerTitle = styled.span` margin-top: 10px; `; -const ButtonAlt = styled(Button)` - border: 0; - outline: 0; - display: flex; - align-items: center; - justify-content: center; - padding: 8px 15px; - margin: 10px; - color: #fff; - border-radius: 5px; - font-size: 14px; - font-weight: 400; - position: relative; - &:hover { - opacity: 0.9; - cursor: pointer; - pointer: hand; - } - &:active { - opacity: 0.75; - cursor: pointer; - pointer: hand; - } - ${(props) => - props.disabled && - css` - &:hover { - opacity: 1; - cursor: default; - pointer: default; - } - &:active { - opacity: 1; - cursor: default; - pointer: default; - } - `} -`; - const CurvedSpan = styled(Span)` font-size: 14px; `; diff --git a/src/modules/snap/SnapModule.tsx b/src/modules/snap/SnapModule.tsx index 6d49fc701d..3c68999a04 100644 --- a/src/modules/snap/SnapModule.tsx +++ b/src/modules/snap/SnapModule.tsx @@ -14,6 +14,7 @@ import { AppContext } from 'contexts/AppContext'; import { useAccount } from 'hooks'; import useModalBlur, { MODAL_POSITION } from 'hooks/useModalBlur'; import { Image, Section } from '../../primaries/SharedStyling'; +import { Button } from 'blocks'; // Internal Configs import ActiveIcon from 'assets/snap/ActiveIcon.svg'; @@ -26,6 +27,7 @@ import SnapExample from 'assets/snap/SnapExample.svg'; import InfoLogo from 'assets/snap/spam-icon.svg'; import GLOBALS, { device, globalsMargin } from 'config/Globals'; import AboutSnapModal from './AboutSnapModal'; +import Metamask from 'assets/snap/metamasksnap.svg?react'; const SnapModule = ({ route }) => { const [loading, setLoading] = useState(false); @@ -315,12 +317,14 @@ const SnapModule = ({ route }) => { spinnerSize={44} /> ) : ( - connectToMetaMask()} + variant="primary" + size="medium" > {!snapInstalled ? 'Step 1: Install Snap' : 'Step 1: Completed'} - + )} {loading && snapInstalled ? ( { spinnerSize={44} /> ) : ( - connectToMetaMask()} + trailingIcon={} > - Step 2: Sign In with Metamask 🦊 - + Step 2: Sign In with Metamask + )} )} {walletConnected || addedAddress ? ( - - + ) : ( div { - display: block; - } - - @media (max-width: 600px) { - font-size: 14px; - } -`; - -const Steps = styled(ItemVV2)` - flex-wrap: wrap; - - &::after { - content: ''; - width: 100%; - } -`; - -const ConnectButton = styled(SnapButton)` - min-width: 280px; - padding: 16px 24px; - background: ${(props) => (props.signOnMM ? '#222222' : '#d53a94')}; - border: ${(props) => (props.signOnMM ? '1px solid #2a2a2a' : '1px solid #d53a94')}; - opacity: ${(props) => (props.disabled ? '0.5' : '1')}; - pointer-events: ${(props) => (props.disabled ? 'none' : 'auto')}; - cursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')}; -`; - -const SettingsButton = styled(SnapButton)` - flex-direction: row; - color: ${(props) => props.theme.default.secondaryColor}; - text-align: center; - width: 279px; - padding: 16px 24px; - border: 1px solid ${(props) => props.theme.snapBorderColor}; - background: ${(props) => props.theme.default.bg}; - gap: 4px; - - @media ${device.mobileL} { - min-width: 246px; - } -`; - const PrimaryText = styled.p` margin: 0px; font-size: 18px; @@ -529,16 +479,6 @@ const ChannelSpan = styled(SpanV2)` } `; -const FilledButton = styled(SnapButton)` - width: 135px; - padding: 16px 24px; - background: #d53a94; - - @media ${device.mobileL} { - min-width: 246px; - } -`; - const InfoDiv = styled(ItemHV2)` cursor: pointer; `; diff --git a/src/pages/NotFoundPage.tsx b/src/pages/NotFoundPage.tsx index 8275c6602d..f072d60568 100644 --- a/src/pages/NotFoundPage.tsx +++ b/src/pages/NotFoundPage.tsx @@ -1,24 +1,34 @@ // React + Web3 Essentials -import React from "react"; +import React from 'react'; import { useNavigate } from 'react-router-dom'; // External Packages import styled from 'styled-components'; -import ErrorGraphic from "../assets/404Graphic.svg"; +import ErrorGraphic from '../assets/404Graphic.svg'; // Internal Configs -import GLOBALS from "config/Globals"; +import GLOBALS from 'config/Globals'; +import { Button } from 'blocks'; const NotFoundPage: React.FC = () => { const navigate = useNavigate(); return ( - + Oops... The page you're trying to reach doesn't exist. - navigate("/channels")}>Go to Home + ); @@ -37,61 +47,38 @@ const NotFoundContainer = styled.div` box-sizing: border-box; // margin: ${GLOBALS.ADJUSTMENTS.MARGIN.MINI_MODULES.DESKTOP}; margin: auto; - `; - -const NotFoundText = styled.p` - color: ${(props) => props.theme.default.text}; - font-size: 1.2rem; - margin-bottom: 1.5rem; `; const OopsTitle = styled.p` - font-size: 48px; - font-weight: 500; - margin: 0; - text-align: center; - color: black; + font-size: 48px; + font-weight: 500; + margin: 0; + text-align: center; + color: black; `; - - const PageNotFoundWrapper = styled.div` - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - gap: 32px; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 32px; `; const PageNotFoundImg = styled.img` - width: 355.7px; - height: 205.79px; - border-radius: 16px; - margin: 0 auto; + width: 355.7px; + height: 205.79px; + border-radius: 16px; + margin: 0 auto; `; const PageNotFoundText = styled.p` - font-size: 24px; - font-weight: 400; - width: 100%; - text-align: center; -`; - -const PageNotFoundButton = styled.button` - padding: 14px 24px 14px 24px; - border-radius: 16px; - background-color: #DD44B9; - color: #FFFFFF; - border: none; - height: 54px; - width: 201px; - font-size: 18px; - display: flex; - text-decoration: none; - align-items: center; - justify-content: center; + font-size: 24px; + font-weight: 400; + width: 100%; + text-align: center; `; const PageNotFoundSubContainer = styled.div` - gap: 16px; -`; \ No newline at end of file + gap: 16px; +`; diff --git a/src/primaries/SharedModalComponents/ModalConfirmButton.tsx b/src/primaries/SharedModalComponents/ModalConfirmButton.tsx index d77b313cbb..a2580e4fee 100644 --- a/src/primaries/SharedModalComponents/ModalConfirmButton.tsx +++ b/src/primaries/SharedModalComponents/ModalConfirmButton.tsx @@ -6,6 +6,7 @@ import styled, { ThemeProvider, useTheme } from 'styled-components'; // Internal Compoonents import LoaderSpinner, { LOADER_TYPE } from 'components/reusables/loaders/LoaderSpinner'; +import { Button } from 'blocks'; // Types type ModalConfirmButtonType = { @@ -20,17 +21,7 @@ type ModalConfirmButtonType = { padding?: string; }; -const ModalConfirmButton = ({ - text, - onClick, - isLoading, - color, - backgroundColor, - border, - topMargin, - loaderTitle, - padding, -}: ModalConfirmButtonType) => { +const ModalConfirmButton = ({ text, onClick, isLoading, topMargin, loaderTitle }: ModalConfirmButtonType) => { const themes = useTheme(); return ( @@ -50,15 +41,13 @@ const ModalConfirmButton = ({ /> ) : ( - {text} - + )} @@ -85,18 +74,4 @@ const LoaderContainer = styled.div` padding: 8px 16px; `; -const CustomButton = styled.button` - min-width: 50%; - box-sizing: border-box; - cursor: pointer; - color: ${(props) => props.color || 'white'}; - font-family: FK Grotesk Neu; - font-size: 1.125rem; - font-weight: 500; - letter-spacing: normal; - background-color: ${(props) => props.backgroundColor || '#CF1C84'}; - border: ${(props) => props.border || '1px solid transparent'}; - border-radius: 15px; -`; - export default ModalConfirmButton; diff --git a/src/sections/chat/ChatSidebarSection.tsx b/src/sections/chat/ChatSidebarSection.tsx index 9dedd16182..8402d38573 100644 --- a/src/sections/chat/ChatSidebarSection.tsx +++ b/src/sections/chat/ChatSidebarSection.tsx @@ -17,6 +17,7 @@ import LoaderSpinner, { LOADER_TYPE } from 'components/reusables/loaders/LoaderS import StyleHelper from 'helpers/StyleHelper'; import { getIsNewTagVisible } from 'helpers/TimerHelper'; import { Context } from 'modules/chat/ChatModule'; +import { Button } from 'blocks/index.js'; // Internal Configs import GLOBALS, { device } from 'config/Globals'; @@ -213,20 +214,12 @@ const ChatSidebarSection = ({ showCreateGroupModal, chatId, selectedChatId, setS /> {!searchedUser && ( - { showCreateGroupModal(); }} - background="transparent" - hover={theme.chat.snapFocusBg} - hoverBackground="transparent" - onMouseEnter={() => StyleHelper.changeStyle(createGroupOnMouseEnter)} - onMouseLeave={() => StyleHelper.changeStyle(createGroupOnMouseLeave)} > @@ -240,7 +233,7 @@ const ChatSidebarSection = ({ showCreateGroupModal, chatId, selectedChatId, setS Create Group {isNewTagVisible && } - + )} )} @@ -290,12 +283,9 @@ const ChatSidebarSection = ({ showCreateGroupModal, chatId, selectedChatId, setS {/* // Only show refresh prompt if there are no chats */} {primaryChatLoading.showRefreshPrompt && ( - { setPrimaryChatLoading({ ...primaryChatLoading, @@ -305,7 +295,7 @@ const ChatSidebarSection = ({ showCreateGroupModal, chatId, selectedChatId, setS }} > Refresh - + )} @@ -434,54 +424,6 @@ const ProfileContainer = styled(ItemHV2)` border-top: ${(props) => props.borderTop}; `; -const QRCodeContainer = styled.div` - display: flex; - flex-direction: row; - align-items: center; - padding: 8px; - gap: 9px; - width: 200px; - z-index: 100; - height: 48px; - background: #ffffff; - border: 1px solid #bac4d6; - box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.05); - border-radius: 12px; - cursor: pointer; - position: absolute; - z-index: 100; - bottom: 45px; - - @media (max-width: 768px) { - right: 30px; - } - - @media (min-width: 768px) { - left: 85px; - } -`; - -const QROutline = styled(AiOutlineQrcode)` - width: 35px; - height: 30px; -`; - -const TextQR = styled.p` - font-family: 'FK Grotesk Neu'; - font-style: normal; - font-weight: 400; - font-size: 16px; - line-height: 140%; - text-align: center; - // color: #657795; -`; - -const CreateGroupContainer = styled(ButtonV2)` - flex-direction: row; - align-self: stretch; - justify-content: flex-start; -`; - const MainContent = styled(ItemVV2)` width: 100%; padding: 0px 0px 0px 10px; diff --git a/src/structure/Header.tsx b/src/structure/Header.tsx index dffbfbf20a..d0397580db 100644 --- a/src/structure/Header.tsx +++ b/src/structure/Header.tsx @@ -9,14 +9,14 @@ import { DarkModeSwitch } from 'react-toggle-dark-mode'; import styled, { useTheme } from 'styled-components'; // Internal Components -import { Box, Link, Text, Star, Lozenge, RewardsBell } from 'blocks'; +import { Box, Link, Text, Star, Lozenge, RewardsBell, Button } from 'blocks'; import { LOADER_SPINNER_TYPE } from 'components/reusables/loaders/LoaderSpinner'; import Spinner from 'components/reusables/spinners/SpinnerUnit'; import { ErrorContext } from 'contexts/ErrorContext'; import { NavigationContext } from 'contexts/NavigationContext'; import Profile from 'primaries/Profile'; -import { Button, Item, ItemH, Section, Span } from 'primaries/SharedStyling'; +import { Button as IButton, Item, ItemH, Section, Span } from 'primaries/SharedStyling'; import PushLogoDark from '../assets/pushDark.svg'; import PushLogoLight from '../assets/pushLight.svg'; @@ -292,19 +292,17 @@ function Header({ isDarkMode, darkModeToggle }) { {isActive && !error && ( - + )} From dbdca864f6ad824e523367a3610281a813116269 Mon Sep 17 00:00:00 2001 From: Kolade Date: Thu, 18 Jul 2024 16:47:34 +0100 Subject: [PATCH 21/34] fix verify issue (#1757) --- src/contexts/AppContext.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/contexts/AppContext.tsx b/src/contexts/AppContext.tsx index 96c82add27..19aa1446b7 100644 --- a/src/contexts/AppContext.tsx +++ b/src/contexts/AppContext.tsx @@ -164,6 +164,8 @@ const AppContextProvider = ({ children }) => { const value = localStorage.getItem(key); if (isPGPKey(value)) { + setUserProfileUnlocked(true); + return value; } From 7276c6b92f4132c0ad20cdfcd6fc05c1cc1b8bf3 Mon Sep 17 00:00:00 2001 From: Rohit Malhotra Date: Fri, 19 Jul 2024 17:02:41 +0530 Subject: [PATCH 22/34] DApp-1708-1709 new theme support in blocks and their usage (#1753) * update changes * add props type * update version and remove on dash * in progress * introduced new css variables to blocks * fixed states for semantics * fixed all the semantics codebase * fixed css bugs * lozenge css fix --------- Co-authored-by: corlard3y --- src/blocks/Blocks.constants.ts | 8 +- src/blocks/Blocks.types.ts | 18 +- src/blocks/Blocks.utils.ts | 48 +----- src/blocks/box/Box.constants.ts | 1 - src/blocks/box/Box.tsx | 32 ++-- src/blocks/box/Box.types.ts | 13 +- src/blocks/button/Button.tsx | 48 +++--- src/blocks/button/Button.utils.ts | 157 +++++++++--------- src/blocks/hoverableSVG/HoverableSVG.tsx | 46 ++--- src/blocks/icons/IconWrapper.tsx | 5 +- src/blocks/icons/Icons.types.ts | 4 +- src/blocks/link/Link.tsx | 13 +- src/blocks/lozenge/Lozenge.constants.tsx | 74 ++++----- src/blocks/lozenge/Lozenge.tsx | 14 +- src/blocks/menu/Menu.tsx | 30 +--- src/blocks/menu/MenuItem.tsx | 46 +++-- src/blocks/separator/Separator.constants.ts | 1 - src/blocks/separator/Separator.tsx | 25 +-- src/blocks/skeleton/Skeleton.constants.ts | 2 +- src/blocks/skeleton/Skeleton.tsx | 19 +-- src/blocks/tabs/Tabs.styled.ts | 91 +++++----- src/blocks/tabs/Tabs.tsx | 13 +- src/blocks/text/Text.tsx | 35 ++-- src/blocks/textInput/TextInput.tsx | 83 ++++----- src/blocks/textarea/TextArea.tsx | 72 ++++---- src/blocks/theme/Theme.types.ts | 18 +- src/blocks/theme/colors/colors.semantics.ts | 83 +++++++-- .../theme/semantics/semantics.button.ts | 54 ++++-- .../theme/semantics/semantics.checkbox.ts | 9 +- .../theme/semantics/semantics.dropdown.ts | 23 ++- src/blocks/theme/semantics/semantics.icon.ts | 18 +- src/blocks/theme/semantics/semantics.input.ts | 23 ++- src/blocks/theme/semantics/semantics.radio.ts | 9 +- .../theme/semantics/semantics.skeleton.ts | 12 ++ .../theme/semantics/semantics.stroke.ts | 24 +-- .../theme/semantics/semantics.surface.ts | 20 ++- .../theme/semantics/semantics.switch.ts | 7 +- src/blocks/theme/semantics/semantics.text.ts | 16 +- .../theme/semantics/semantics.textarea.ts | 23 ++- src/blocks/theme/semantics/semantics.toast.ts | 17 +- src/blocks/tooltip/Tooltip.tsx | 36 ++-- src/common/components/ContentLayout.tsx | 4 +- .../chat/unlockProfile/UnlockProfile.tsx | 2 +- .../dropdowns/UpdateNotifSettingDropdown.tsx | 1 - src/modules/claimGalxe/NFTSuccessModal.tsx | 11 +- src/modules/dashboard/Dashboard.tsx | 6 +- .../dashboard/components/ChannelListItem.tsx | 14 +- .../components/ChannelTabsSection.tsx | 42 ++--- .../components/ChannelVariantsSection.tsx | 12 +- .../dashboard/components/DashboardHeader.tsx | 10 +- .../components/DashboardSubHeader.tsx | 41 +++-- .../dashboard/components/EmptyChannelList.tsx | 12 +- .../dashboard/components/FeaturedChannels.tsx | 21 +-- .../components/FeaturedChannelsList.tsx | 37 +++-- .../components/FeaturedChannelsListItem.tsx | 22 +-- .../FeaturedChannelsMobileViewList.tsx | 18 +- .../components/RecommendedChatListItem.tsx | 6 +- .../components/RecommendedChatsList.tsx | 8 +- .../dashboard/components/RewardsSection.tsx | 8 +- .../components/VerifiedToolTipComponent.tsx | 8 +- .../DiscordVerification.tsx | 18 +- .../components/PointsVaultApprovedList.tsx | 4 +- .../PointsVaultListActionButtons.tsx | 2 +- .../components/PointsVaultListColumns.tsx | 8 +- .../components/PointsVaultListContainer.tsx | 23 +-- .../components/PointsVaultListItem.tsx | 13 +- .../components/PointsVaultLogin.tsx | 20 +-- .../components/PointsVaultPendingList.tsx | 4 +- .../components/PointsVaultRejectedList.tsx | 4 +- src/modules/rewards/Rewards.tsx | 6 +- .../rewards/components/DashboardSection.tsx | 6 +- .../components/DashboardSectionHeader.tsx | 12 +- .../components/DashboardSectionPoints.tsx | 32 ++-- .../rewards/components/LeaderBoardList.tsx | 4 +- .../components/LeaderBoardListColumns.tsx | 8 +- .../components/LeaderBoardListItem.tsx | 22 +-- .../rewards/components/LeaderBoardSection.tsx | 8 +- .../components/LeaderboardNullState.tsx | 12 +- .../rewards/components/ReferralSection.tsx | 32 ++-- .../components/RewardsActivitiesList.tsx | 2 +- .../components/RewardsActivitiesListItem.tsx | 50 +++--- .../components/RewardsActivitiesSection.tsx | 4 +- .../components/RewardsActivityTitle.tsx | 22 ++- .../rewards/components/RewardsTabs.tsx | 20 +-- .../components/RewardsTabsContainer.tsx | 9 +- src/structure/Header.tsx | 10 +- 86 files changed, 975 insertions(+), 953 deletions(-) create mode 100644 src/blocks/theme/semantics/semantics.skeleton.ts diff --git a/src/blocks/Blocks.constants.ts b/src/blocks/Blocks.constants.ts index 283264f2ce..7ebcd2aa8e 100644 --- a/src/blocks/Blocks.constants.ts +++ b/src/blocks/Blocks.constants.ts @@ -1,7 +1,3 @@ -export const newRadiusRegex = /\bradius-[a-z]+\b/g; +export const radiusRegex = /\bradius-[a-z]+\b/g; -export const oldRadiusRegex = /\br[0-9]+\b/g; - -export const newSpacingRegex = /\bspacing-[a-z]+\b/g; - -export const oldSpacingRegex = /\bs[0-9]+\b/g; +export const spacingRegex = /\bspacing-[a-z]+\b/g; diff --git a/src/blocks/Blocks.types.ts b/src/blocks/Blocks.types.ts index e18b5a2177..27495a4dcc 100644 --- a/src/blocks/Blocks.types.ts +++ b/src/blocks/Blocks.types.ts @@ -1,7 +1,7 @@ import { HTMLAttributes } from 'react'; import { BoxResponsiveCSSProperties, BoxResponsiveCSSPropertiesData, BoxResponsivePropValues } from './box'; import { blocksColorsLegacy } from './Blocks.colors'; -import { ThemeBorderRadius, ThemeBorderSize, ThemeColors, ThemeSpacing } from './theme/Theme.types'; +import { StrokeColors, ThemeBorderRadius, ThemeBorderSize, ThemeSpacing } from './theme/Theme.types'; import { SkeletonResponsiveCSSProperties, SkeletonResponsiveCSSPropertiesData, @@ -21,20 +21,12 @@ export type Breakpoint = 'initial' | 'ms' | 'mm' | 'ml' | 'tb' | 'lp' | 'll' | ' export type ResponsiveProp = T | { [key in Breakpoint]?: T }; -// Remove old RadiusType types export type BlocksRadiusType = - | `r${number}` - | `r${number} r${number}` - | `r${number} r${number} r${number} r${number}` | ThemeBorderRadius | `${ThemeBorderRadius} ${ThemeBorderRadius}` | `${ThemeBorderRadius} ${ThemeBorderRadius} ${ThemeBorderRadius} ${ThemeBorderRadius}`; -// Remove old SpaceType types export type BlocksSpaceType = - | `s${number}` - | `s${number} s${number}` - | `s${number} s${number} s${number} s${number}` | ThemeSpacing | `${ThemeSpacing} ${ThemeSpacing}` | `${ThemeSpacing} ${ThemeSpacing} ${ThemeSpacing} ${ThemeSpacing}`; @@ -74,12 +66,6 @@ export type BlocksColors = keyof BlocksColorData; export type ThemeMode = 'light' | 'dark'; -// TODO: Remove ThemeModeColors -export type ThemeModeColors = Record; - -// TODO: Remove the blocks colors border size -export type BorderValue = `${number}px ${string} ${BlocksColors}` | `${number}px ${string} ${ThemeBorderSize}` | 'none'; - -export type ThemeModeBorder = Record; +export type BorderValue = `${ThemeBorderSize} ${string} ${StrokeColors}` | 'none'; export type ModeProp = { mode: ThemeMode }; diff --git a/src/blocks/Blocks.utils.ts b/src/blocks/Blocks.utils.ts index b8a346160d..3f60aa64ca 100644 --- a/src/blocks/Blocks.utils.ts +++ b/src/blocks/Blocks.utils.ts @@ -1,21 +1,16 @@ import { css } from 'styled-components'; import { deviceMediaQ, deviceSizes, breakpointMap } from './theme'; import { - BlocksColors, Breakpoint, CSSPropName, CSSPropValueType, DeviceSizeName, - ThemeModeColors, PixelValue, ResponsiveCSSPropertyData, - ThemeMode, - ThemeModeBorder, BorderValue, BlocksRadiusType, } from './Blocks.types'; -import { ThemeColors } from './theme/Theme.types'; -import { newRadiusRegex, newSpacingRegex, oldRadiusRegex, oldSpacingRegex } from './Blocks.constants'; +import { radiusRegex, spacingRegex } from './Blocks.constants'; /** * @param propName @@ -25,10 +20,7 @@ import { newRadiusRegex, newSpacingRegex, oldRadiusRegex, oldSpacingRegex } from const getCSSValue = (propName: CSSPropName, value: CSSPropValueType | undefined) => { if (propName === 'padding' || propName === 'margin') { if (typeof value === 'string') { - return value.replace( - newSpacingRegex.test(value) ? newSpacingRegex : oldSpacingRegex, - (match) => `var(--${match})` - ); + return value.replace(spacingRegex, (match) => `var(--${match})`); } } else if (propName === 'gap' || propName === 'border-radius') { return `var(--${value})`; @@ -139,39 +131,20 @@ export const getResponsiveCSS = (data: ResponsiveCSSPropertyData[]) => { `; }; -/** - * @deprecated - * @param color - * @returns color as a css variable: var(--primary) - * - * // TODO: Remove this function. We don't need it. - */ -export const getBlocksColor = (mode: ThemeMode, color?: BlocksColors | ThemeModeColors | ThemeColors) => { - // If color is not given return undefined, to avoid any breakages - if (!color) return color; - - // Handle the colors for light and dark mode - if (typeof color === 'object') { - return `var(--${color[mode]})`; - } - - // If passed a design system color then use color as a variable - return `var(--${color})`; -}; - /** * @param border * @returns border */ -export const getBlocksBorder = (mode: ThemeMode, border?: BorderValue | ThemeModeBorder) => { +export const getBlocksBorder = (border?: BorderValue) => { // If border is not given return undefined, to avoid any breakages if (!border) return border; - // Handle the border for light and dark mode + let borderValues; - if (typeof border === 'object') borderValues = border[mode].split(' '); - else borderValues = border.split(' '); - // If passed a design system border then use border as a variable + borderValues = border.split(' '); + + borderValues[0] = `var(--${borderValues[0]})`; + borderValues[2] = `var(--${borderValues[2]})`; return borderValues.join(' '); }; @@ -184,10 +157,7 @@ export const getBlocksBorderRadius = (radius?: BlocksRadiusType) => { // If border-radius is not given return undefined, to avoid any breakages if (!radius) return radius; - const result = radius.replace( - newRadiusRegex.test(radius) ? newRadiusRegex : oldRadiusRegex, - (match) => `var(--${match})` - ); + const result = radius.replace(radiusRegex, (match) => `var(--${match})`); return result; }; diff --git a/src/blocks/box/Box.constants.ts b/src/blocks/box/Box.constants.ts index a487e867af..74f87e6c95 100644 --- a/src/blocks/box/Box.constants.ts +++ b/src/blocks/box/Box.constants.ts @@ -24,5 +24,4 @@ export const boxRestrictedCSSPropKeys: (keyof BoxCSSProps | keyof ModeProp)[] = 'overflow', 'padding', 'width', - 'mode', ]; diff --git a/src/blocks/box/Box.tsx b/src/blocks/box/Box.tsx index 4fb50f1b2b..f06a46097d 100644 --- a/src/blocks/box/Box.tsx +++ b/src/blocks/box/Box.tsx @@ -1,9 +1,8 @@ import { forwardRef } from 'react'; import styled from 'styled-components'; -import { useBlocksTheme } from '../Blocks.hooks'; -import { TransformedHTMLAttributes, ModeProp } from '../Blocks.types'; -import { getBlocksColor, getBlocksBorder, getBlocksBorderRadius } from '../Blocks.utils'; +import { TransformedHTMLAttributes } from '../Blocks.types'; +import { getBlocksBorder, getBlocksBorderRadius } from '../Blocks.utils'; import { BoxCSSProps, BoxComponentProps } from './Box.types'; import { getBoxResponsiveCSS } from './Box.utils'; import { boxRestrictedCSSPropKeys } from './Box.constants'; @@ -14,18 +13,18 @@ export type BoxProps = BoxCSSProps & BoxComponentProps & TransformedHTMLAttribut const StyledBox = styled.div.withConfig({ shouldForwardProp: (prop, defaultValidatorFn) => !boxRestrictedCSSPropKeys.includes(prop as keyof BoxCSSProps) && defaultValidatorFn(prop), -})` +})` /* Responsive props */ ${(props) => getBoxResponsiveCSS(props)} /* Non-responsive props */ - color: ${(props) => getBlocksColor(props.mode, props.color)}; - background-color: ${(props) => getBlocksColor(props.mode, props.backgroundColor)}; + color: ${(props) => (props?.color ? `var(--${props.color})` : ``)}; + background-color: ${(props) => (props?.backgroundColor ? `var(--${props.backgroundColor})` : ``)}; box-shadow: ${(props) => props.boxShadow}; border-radius: ${(props) => getBlocksBorderRadius(props.borderRadius)}; cursor: ${(props) => props.cursor}; overflow: ${(props) => props.overflow}; - border: ${(props) => getBlocksBorder(props.mode, props.border)}; + border: ${(props) => getBlocksBorder(props.border)}; position: ${(props) => props.position}; // push custom scroll @@ -51,18 +50,13 @@ const StyledBox = styled.div.withConfig({ /* Extra CSS prop */ ${(props) => props.css || ''} `; -const Box = forwardRef(({ as = 'div', ...props }, ref) => { - const { mode } = useBlocksTheme(); - // TODO: We need to remove color dependency from BlocksColors | ThemeModeColors to fix this error - return ( - - ); -}); +const Box = forwardRef(({ as = 'div', ...props }, ref) => ( + +)); Box.displayName = 'Box'; diff --git a/src/blocks/box/Box.types.ts b/src/blocks/box/Box.types.ts index 182677ad07..76f27318a8 100644 --- a/src/blocks/box/Box.types.ts +++ b/src/blocks/box/Box.types.ts @@ -1,18 +1,15 @@ import { CSSProperties, ReactNode } from 'react'; import { - BlocksColors, BorderValue, BlocksRadiusType, ResponsiveProp, BlocksSpaceType, - ThemeModeBorder, - ThemeModeColors, ValueOf, BlocksGapType, } from '../Blocks.types'; import { FlattenSimpleInterpolation } from 'styled-components'; -import { ThemeColors } from 'blocks/theme/Theme.types'; +import { SurfaceColors, TextColors } from 'blocks/theme/Theme.types'; export type BoxResponsiveProps = { /* Sets align-items css property */ @@ -22,7 +19,7 @@ export type BoxResponsiveProps = { /* Sets flex-direction css property */ flexDirection?: ResponsiveProp; /* Sets gap between the elements */ - gap?: ResponsiveProp; + gap?: ResponsiveProp; /* Sets display css property */ display?: ResponsiveProp; /* Sets height css property */ @@ -47,13 +44,13 @@ export type BoxResponsiveProps = { export type BoxNonResponsiveProps = { /* Sets border css property */ - border?: BorderValue | ThemeModeBorder; + border?: BorderValue; /* Sets border-radius css property */ borderRadius?: BlocksRadiusType; /* Sets background-color css property */ - backgroundColor?: BlocksColors | ThemeModeColors | ThemeColors; + backgroundColor?: SurfaceColors; /* Sets color css property */ - color?: BlocksColors | ThemeModeColors | ThemeColors; + color?: TextColors; /* Sets cursor css property */ cursor?: CSSProperties['cursor']; /* Sets position css property */ diff --git a/src/blocks/button/Button.tsx b/src/blocks/button/Button.tsx index 1c8d5f2af8..623c096a99 100644 --- a/src/blocks/button/Button.tsx +++ b/src/blocks/button/Button.tsx @@ -1,7 +1,7 @@ import { ReactNode, forwardRef } from 'react'; import styled, { FlattenSimpleInterpolation } from 'styled-components'; -import { useBlocksTheme } from '../Blocks.hooks'; -import type { ModeProp, TransformedHTMLAttributes } from '../Blocks.types'; + +import type { TransformedHTMLAttributes } from '../Blocks.types'; import type { ButtonSize, ButtonVariant } from './Button.types'; import { getButtonSizeStyles, getButtonVariantStyles } from './Button.utils'; @@ -28,7 +28,7 @@ export type ButtonProps = { block?: boolean; } & TransformedHTMLAttributes; -const StyledButton = styled.button` +const StyledButton = styled.button` /* Common Button CSS */ align-items: center; @@ -46,7 +46,7 @@ const StyledButton = styled.button` } /* Button variant CSS styles */ - ${({ mode, variant }) => getButtonVariantStyles(mode, variant || 'primary')} + ${({ variant }) => getButtonVariantStyles(variant || 'primary')} /* Button and font size CSS styles */ ${({ iconOnly, size }) => getButtonSizeStyles({ iconOnly: !!iconOnly, size: size || 'medium' })} @@ -75,28 +75,24 @@ const Button = forwardRef( ...props }, ref - ) => { - const { mode } = useBlocksTheme(); - return ( - - {leadingIcon && {leadingIcon}} - {!iconOnly && children} - {trailingIcon && {trailingIcon}} - {iconOnly && !children && {iconOnly}} - - ); - } + ) => ( + + {leadingIcon && {leadingIcon}} + {!iconOnly && children} + {trailingIcon && {trailingIcon}} + {iconOnly && !children && {iconOnly}} + + ) ); Button.displayName = 'Button'; diff --git a/src/blocks/button/Button.utils.ts b/src/blocks/button/Button.utils.ts index 835d239124..80d5ba91b6 100644 --- a/src/blocks/button/Button.utils.ts +++ b/src/blocks/button/Button.utils.ts @@ -1,161 +1,162 @@ import { FlattenSimpleInterpolation, css } from 'styled-components'; import { ButtonSize, ButtonVariant } from './Button.types'; -import { ThemeMode } from 'blocks/Blocks.types'; -import { getBlocksColor } from 'blocks/Blocks.utils'; -export const getButtonVariantStyles = (mode: ThemeMode, variant: ButtonVariant) => { +export const getButtonVariantStyles = (variant: ButtonVariant) => { switch (variant) { case 'primary': { return ` - background-color: var(--pink-500); - color: var(--white); + background-color: var(--components-button-primary-background-default); + color: var(--components-button-primary-text-default); &:hover { - background-color: var(--pink-400); + background-color: var(--components-button-primary-background-hover) } &:active { - background-color: ${getBlocksColor(mode, { light: 'pink-800', dark: 'pink-600' })}; + background-color: var(--components-button-primary-background-pressed); } &:focus-visible { - background-color: ${getBlocksColor(mode, { light: 'pink-500', dark: 'pink-400' })}; - border: 1px solid ${getBlocksColor(mode, { light: 'pink-700', dark: 'pink-200' })}; + background-color: var(--components-button-primary-background-focus); + border: var(--border-sm) solid var(--components-button-primary-stroke-focus); outline: none; } &:disabled { - background-color: ${getBlocksColor(mode, { light: 'gray-200', dark: 'gray-800' })}; - color: ${getBlocksColor(mode, { light: 'gray-300', dark: 'gray-700' })}; + background-color: var(--components-button-primary-background-disabled); + color: var(--components-button-primary-text-disabled); } `; } case 'secondary': { return ` - background-color: ${getBlocksColor(mode, { light: 'gray-100', dark: 'gray-800' })}; - color: ${getBlocksColor(mode, { light: 'gray-1000', dark: 'white' })}; + background-color: var(--components-button-secondary-background-default); + color: var(--components-button-secondary-text-default); &:hover { - background-color: ${getBlocksColor(mode, { light: 'gray-200', dark: 'gray-700' })}; + background-color: var(--components-button-secondary-background-hover); } &:active { - background-color: ${getBlocksColor(mode, { light: 'gray-300', dark: 'gray-1000' })}; + background-color: var(--components-button-secondary-background-pressed); } &:focus-visible { - background-color: ${getBlocksColor(mode, { light: 'gray-100', dark: 'gray-800' })}; - border: 1px solid ${getBlocksColor(mode, { light: 'pink-300', dark: 'pink-400' })}; + background-color: var(--components-button-secondary-background-focus); + border: var(--border-sm) solid var(--components-button-secondary-stroke-focus); outline: none; } &:disabled { - background-color: ${getBlocksColor(mode, { light: 'gray-200', dark: 'gray-800' })}; - color: ${getBlocksColor(mode, { light: 'gray-300', dark: 'gray-700' })}; + background-color: var(--components-button-secondary-background-disabled); + color: var(--components-button-secondary-text-disabled) } `; } case 'tertiary': { return ` - background-color: ${getBlocksColor(mode, { light: 'gray-1000', dark: 'gray-700' })}; - color: var(--white); + background-color: var(--components-button-tertiary-background-default); + color: var(--components-button-tertiary-text-default); &:hover { - color: ${getBlocksColor(mode, { light: 'white', dark: 'gray-200' })}; - background-color: ${getBlocksColor(mode, { light: 'gray-900', dark: 'gray-300' })}; + color: var(--components-button-tertiary-text-default); + background-color: var(--components-button-tertiary-background-hover); } &:active { - background-color: ${getBlocksColor(mode, { light: 'gray-100', dark: 'gray-1000' })}; - color: ${getBlocksColor(mode, { light: 'gray-1000', dark: 'white' })}; + background-color: var(--components-button-tertiary-background-pressed); + color: var(--components-button-secondary-text-default); } &:focus-visible { - border: 1px solid ${getBlocksColor(mode, { light: 'pink-300', dark: 'pink-400' })}; - background-color: ${getBlocksColor(mode, { light: 'gray-1000', dark: 'gray-700' })}; - color: ${getBlocksColor(mode, { light: 'white', dark: 'gray-200' })}; + border: var(--border-sm) solid var(--components-button-tertiary-stroke-focus); + background-color: var(--components-button-tertiary-background-focus); + color: var(--components-button-tertiary-text-default); outline: none; } &:disabled { - background-color: ${getBlocksColor(mode, { light: 'gray-200', dark: 'gray-800' })}; - color: ${getBlocksColor(mode, { light: 'gray-300', dark: 'gray-700' })}; + background-color: var(--components-button-tertiary-background-disabled); + color: var(--components-button-tertiary-text-disabled); } `; } case 'danger': { return ` - background-color: ${getBlocksColor(mode, { light: 'red-600', dark: 'red-500' })}; - color: var(--white); + background-color: var(--components-button-danger-background-default); + color: var(--components-button-danger-text-default); &:hover { - background-color: ${getBlocksColor(mode, { light: 'red-500', dark: 'red-400' })}; + background-color: var(--components-button-danger-background-hover); } &:active { - background-color: ${getBlocksColor(mode, { light: 'red-800', dark: 'red-700' })}; + background-color: var(--components-button-danger-background-pressed); } &:focus-visible { - background-color: ${getBlocksColor(mode, { light: 'red-500', dark: 'red-400' })}; - border: 1px solid ${getBlocksColor(mode, { light: 'red-800', dark: 'red-600' })}; + background-color: var(--components-button-danger-background-focus); + border: var(--border-sm) solid var(--components-button-danger-stroke-focus); outline: none; } &:disabled { - background-color: ${getBlocksColor(mode, { light: 'gray-200', dark: 'gray-800' })}; - color: ${getBlocksColor(mode, { light: 'gray-300', dark: 'gray-700' })}; + background-color: var(--components-button-danger-background-disabled); + color: var(--components-button-danger-text-disabled); } `; } case 'dangerSecondary': { return ` - background-color: ${getBlocksColor(mode, { light: 'red-200', dark: 'red-800' })}; - color: ${getBlocksColor(mode, { light: 'red-700', dark: 'white' })}; + background-color: var(--components-button-danger-secondary-background-default); + color: var(--components-button-danger-secondary-text-default); &:hover { - background-color: ${getBlocksColor(mode, { light: 'red-100', dark: 'red-700' })}; + background-color: var(--components-button-danger-secondary-background-hover); } &:active { - background-color: ${getBlocksColor(mode, { light: 'red-500', dark: 'red-1000' })}; + background-color: var(--components-button-danger-secondary-background-pressed); } &:focus-visible { - background-color: ${getBlocksColor(mode, { light: 'red-100', dark: 'red-700' })}; - border: 1px solid ${getBlocksColor(mode, { light: 'red-800', dark: 'red-400' })}; + background-color: var(--components-button-danger-secondary-background-focus); + border: var(--border-sm) solid var(--components-button-danger-secondary-stroke-focus); outline: none; } &:disabled { - background-color: ${getBlocksColor(mode, { light: 'gray-200', dark: 'gray-800' })}; - color: ${getBlocksColor(mode, { light: 'gray-300', dark: 'gray-700' })}; + background-color: var(--components-button-danger-secondary-background-disabled); + color:var(--components-button-danger-secondary-text-disabled); } `; } case 'outline': { return ` - background-color: transparent; - border: 1px solid ${getBlocksColor(mode, { light: 'gray-300', dark: 'gray-700' })}; - color: ${getBlocksColor(mode, { light: 'gray-1000', dark: 'gray-100' })}; + background-color: var(--components-button-outline-background-default); + border: var(--border-sm) solid var(--components-button-outline-stroke-default); + color: var(--components-button-outline-text-default); outline: none; &:hover { - border: 1px solid ${getBlocksColor(mode, { light: 'pink-300', dark: 'gray-800' })}; + border: var(--border-sm) solid var(--components-button-outline-stroke-hover); + background-color: var(--components-button-outline-background-hover); } &:active { - border: 1px solid ${getBlocksColor(mode, { light: 'gray-600', dark: 'gray-300' })}; + border: var(--border-sm) solid var(--components-button-outline-stroke-pressed); + background-color: var(--components-button-outline-background-pressed); } &:focus-visible { - border: 1px solid ${getBlocksColor(mode, { light: 'pink-300', dark: 'pink-400' })}; + border: var(--border-sm) solid var(--components-button-outline-stroke-focus); + background-color: var(--components-button-outline-background-focus); } &:disabled { border: none; - background-color: ${getBlocksColor(mode, { light: 'gray-200', dark: 'gray-800' })}; - color: ${getBlocksColor(mode, { light: 'gray-300', dark: 'gray-700' })}; + background-color: var(--components-button-tertiary-background-disabled); + color: var(--components-button-outline-text-disabled); } `; } @@ -175,17 +176,17 @@ export const getButtonSizeStyles = ({ ${iconOnly ? ` - border-radius: 9.6px; - gap: var(--s0); + border-radius: var(--radius-xxs); + gap: var(--spacing-none); height: 32px; width: 32px; - padding: 9.6px 0px; + padding: var(--spacing-none); ` : ` - border-radius: var(--r2); - gap: var(--s1); + border-radius: var(--radius-xxs); + gap: var(--spacing-xxxs); height: 32px; - padding: var(--s3) var(--s4); + padding: var(--spacing-xs) var(--spacing-sm); min-width: 100px; `} @@ -219,17 +220,17 @@ export const getButtonSizeStyles = ({ ${iconOnly ? ` - border-radius: var(--r3); - gap: var(--s0); + border-radius: var(--radius-xs); + gap: var(--spacing-none); height: 40px; width: 40px; - padding: var(--s3); + padding: var(--spacing-none); ` : ` - border-radius: var(--r3); - gap: var(--s1); + border-radius: var(--radius-xs); + gap: var(--spacing-xxxs); height: 40px; - padding: var(--s3) var(--s6); + padding: var(--spacing-xs) var(--spacing-md); min-width: 100px; `} @@ -264,17 +265,17 @@ export const getButtonSizeStyles = ({ ${iconOnly ? ` - border-radius: 14.4px; - gap: var(--s0); + border-radius: var(--spacing-sm); + gap: var(--spacing-none); height: 48px; width: 48px; - padding: 14.4px; + padding: var(--spacing-none); ` : ` - border-radius: var(--r3); - gap: var(--s1); + border-radius: var(--radius-xs); + gap: var(--spacing-xxxs); height: 48px; - padding: var(--s4) var(--s6); + padding: var(--spacing-sm) var(--spacing-md); min-width: 100px; `} @@ -308,17 +309,17 @@ export const getButtonSizeStyles = ({ ${iconOnly ? ` - border-radius: 15.6px; - gap: var(--s0); + border-radius: var(--spacing-sm); + gap: var(--spacing-none); height: 52px; width: 52px; - padding: 15.6px; + padding: var(--spacing-none); ` : ` - border-radius: var(--r3); - gap: var(--s1); + border-radius: var(--radius-xs); + gap: var(--spacing-xxxs); height: 52px; - padding: var(--s4) var(--s8); + padding: var(--spacing-sm) var(--spacing-lg); min-width: 100px; `} diff --git a/src/blocks/hoverableSVG/HoverableSVG.tsx b/src/blocks/hoverableSVG/HoverableSVG.tsx index 6f1e5f74bc..18f596168c 100644 --- a/src/blocks/hoverableSVG/HoverableSVG.tsx +++ b/src/blocks/hoverableSVG/HoverableSVG.tsx @@ -1,59 +1,49 @@ import { FC } from 'react'; import styled from 'styled-components'; -import { useBlocksTheme } from '../Blocks.hooks'; -import { - BlocksColors, - ThemeModeColors, - BlocksSpaceType, - ModeProp, - TransformedHTMLAttributes, - BlocksRadiusType, -} from '../Blocks.types'; -import { getBlocksColor, getBlocksBorderRadius } from '../Blocks.utils'; -import { ThemeColors } from '../theme/Theme.types'; +import { BlocksSpaceType, TransformedHTMLAttributes } from '../Blocks.types'; +import { getBlocksBorderRadius } from '../Blocks.utils'; +import { IconColors, SurfaceColors, ThemeBorderRadius } from '../theme/Theme.types'; export type HoverableSVGProps = { /* Icon component */ icon: React.ReactNode; /* Sets the initial color for SVG */ - defaultColor?: BlocksColors | ThemeModeColors | ThemeColors; + defaultColor?: IconColors; /* Sets button as disabled */ disabled?: boolean; /* Sets the hover color for SVG */ - hoverColor?: BlocksColors | ThemeModeColors | ThemeColors; + hoverColor?: IconColors; /* Sets the initial background color for SVG */ - defaultBackground?: BlocksColors | ThemeModeColors | ThemeColors; + defaultBackground?: SurfaceColors; /* Sets the initial background color for SVG */ - hoverBackground?: BlocksColors | ThemeModeColors | ThemeColors; + hoverBackground?: SurfaceColors; /* Sets the padding for SVG button container */ padding?: BlocksSpaceType; /* Sets the margin for SVG button container */ margin?: BlocksSpaceType; /* Sets the margin for SVG button container */ - borderRadius?: BlocksRadiusType; + borderRadius?: ThemeBorderRadius; } & TransformedHTMLAttributes; -const StyledButton = styled.button.withConfig({ - shouldForwardProp: (prop, defaultValidatorFn) => !['mode'].includes(prop) && defaultValidatorFn(prop), -}) & ModeProp>` +const StyledButton = styled.button>` display: inline-flex; align-items: center; justify-content: center; - padding: var(--${(props) => props.padding || 's0'}); - margin: var(--${(props) => props.margin || 's0'}); + padding: var(--${(props) => props.padding || 'spacing-none'}); + margin: var(--${(props) => props.margin || 'spacing-none'}); border-radius: ${(props) => getBlocksBorderRadius(props.borderRadius)}; - background-color: ${({ defaultBackground, mode }) => getBlocksColor(mode, defaultBackground) || 'transparent'}; - color: ${({ mode, defaultColor }) => getBlocksColor(mode, defaultColor) || 'inherit'}; + background-color: var(--${({ defaultBackground }) => defaultBackground || 'surface-transparent'}); + color: ${({ defaultColor }) => `var(--${defaultColor})` || 'inherit'}; border: none; cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')}; transition: background-color 0.3s, color 0.3s; height: fit-content; &:hover { - background-color: ${({ mode, hoverBackground }) => getBlocksColor(mode, hoverBackground) || 'transparent'}; - color: ${({ mode, hoverColor }) => getBlocksColor(mode, hoverColor) || 'inherit'}; + background-color: var(--${({ hoverBackground }) => hoverBackground || 'surface-transparent'}); + color: ${({ hoverColor }) => `var(--${hoverColor})` || 'inherit'}; } - &:disabled > span { - color: var(--${({ mode }) => (mode === 'dark' ? 'gray-700' : 'gray-300')}); + &:disabled { + color: var(--icon-state-disabled); } `; const HoverableSVG: FC = ({ @@ -68,7 +58,6 @@ const HoverableSVG: FC = ({ borderRadius, ...props }) => { - const { mode } = useBlocksTheme(); return ( = ({ padding={padding} margin={margin} borderRadius={borderRadius} - mode={mode} {...props} > {icon} diff --git a/src/blocks/icons/IconWrapper.tsx b/src/blocks/icons/IconWrapper.tsx index 74891036b2..6857dc74f6 100644 --- a/src/blocks/icons/IconWrapper.tsx +++ b/src/blocks/icons/IconWrapper.tsx @@ -1,7 +1,5 @@ import { FC, ReactNode } from 'react'; import styled, { FlattenSimpleInterpolation } from 'styled-components'; -import { useBlocksTheme } from '../Blocks.hooks'; -import { getBlocksColor } from '../Blocks.utils'; import { IconProps } from './Icons.types'; type IconWrapperProps = Omit & { @@ -44,8 +42,7 @@ const IconWrapper: FC = ({ size: sizeProp, ...restProps }) => { - const { mode } = useBlocksTheme(); - const color = (colorProp ? getBlocksColor(mode, colorProp) : 'currentColor') as string; + const color = colorProp ? `var(--${colorProp})` : 'currentColor'; const size = sizeProp ? `${sizeProp}px` : autoSize ? '1em' : '16px'; return ( ; -const StyledLink = styled(RouterLink).withConfig({ - shouldForwardProp: (prop, defaultValidatorFn) => !['mode'].includes(prop) && defaultValidatorFn(prop), -})` +const StyledLink = styled(RouterLink)` /* Link CSS */ text-decoration: none; &:hover > * { - color: ${({ mode, isText }) => (isText ? getBlocksColor(mode, { light: 'pink-600', dark: 'pink-400' }) : '')}; + color: ${({ isText }) => (isText ? 'var(--text-brand-medium)' : '')}; } /* Extra CSS props */ @@ -29,11 +25,8 @@ const StyledLink = styled(RouterLink).withConfig({ `; const Link: FC = ({ textProps, isText = true, ...props }) => { - const { mode } = useBlocksTheme(); - return ( diff --git a/src/blocks/lozenge/Lozenge.constants.tsx b/src/blocks/lozenge/Lozenge.constants.tsx index a7a5b4640e..5cb4478ca4 100644 --- a/src/blocks/lozenge/Lozenge.constants.tsx +++ b/src/blocks/lozenge/Lozenge.constants.tsx @@ -1,39 +1,19 @@ import { FlattenSimpleInterpolation, css } from 'styled-components'; -//Types +import { textVariants } from '../text'; import { LozengeSize, LozengeVariant } from './Lozenge.types'; -import { ThemeMode } from '../Blocks.types'; -export const getLozengeVariantStyles = ({ - mode, - variant, -}: { - mode?: ThemeMode; - variant: LozengeVariant; -}): FlattenSimpleInterpolation => { - if (mode === 'dark') { - if (variant === 'primary') { - return css` - /* Lozenge tag container variant css */ - background-color: var(--pink-300); - color: var(--pink-800); - .icon { - color: var(--pink-400); - } - `; - } - return css``; - } +export const getLozengeVariantStyles = (variant: LozengeVariant): FlattenSimpleInterpolation => { if (variant === 'primary') { return css` - /* Lozenge tag container variant css */ - background-color: var(--pink-200); - color: var(--pink-600); + background-color: var(--surface-brand-subtle); + color: var(--text-brand-bold); .icon { - color: var(--pink-400); + color: var(--icon-brand-medium); } `; } + return css``; }; @@ -50,25 +30,25 @@ export const getLozengeSizeStyles = ({ max-height: 14px; min-height: 14px; + border-radius: var(--radius-xxxs); ${iconOnly ? ` - border-radius: var(--r1); - gap: var(--s0); - padding: var(--s1); + gap: var(--spacing-none); + padding: var(--spacing-xxxs); ` : ` - border-radius: var(--r1); - gap: var(--s1); - padding: var(--s1) var(--s2); + gap: var(--spacing-xxxs); + padding: var(--spacing-xxxs) var(--spacing-xxs); `} /* Lozenge text size css */ leading-trim: both; text-edge: cap; - font-size: 10px; - font-style: normal; - font-weight: 700; - line-height: 14px; + font-size: ${textVariants['os-bold'].fontSize}; + font-style: ${textVariants['os-bold'].fontStyle}; + font-weight: ${textVariants['os-bold'].fontWeight}; + line-height: ${textVariants['os-bold'].lineHeight}; + text-transform: ${textVariants['os-bold'].textTransform}; .icon > span { height: 8px; @@ -81,17 +61,19 @@ export const getLozengeSizeStyles = ({ /* Lozenge tag container size css note: - add medium small and large sizes */ - ${iconOnly - ? ` - border-radius: 15.6px; - gap: var(--s0); - padding: 15.6px; + var(--spacing-sm); + + ${ + iconOnly + ? ` + border-radius: var(--radius-sm); + gap: var(--spacing-none); ` - : ` - border-radius: var(--r3); - gap: var(--s1); - padding: var(--s4); - `} + : ` + border-radius: var(--radius-xs); + gap: var(--spacing-xxxs); + ` + } /* Lozenge text size css */ leading-trim: both; diff --git a/src/blocks/lozenge/Lozenge.tsx b/src/blocks/lozenge/Lozenge.tsx index 4a77b944a3..0672a5892d 100644 --- a/src/blocks/lozenge/Lozenge.tsx +++ b/src/blocks/lozenge/Lozenge.tsx @@ -2,11 +2,9 @@ import { ReactNode, forwardRef } from 'react'; import styled, { FlattenSimpleInterpolation } from 'styled-components'; -import { useBlocksTheme } from '../Blocks.hooks'; - import { getLozengeSizeStyles, getLozengeVariantStyles } from './Lozenge.constants'; -import { ModeProp, TransformedHTMLAttributes } from '../Blocks.types'; +import { TransformedHTMLAttributes } from '../Blocks.types'; import { LozengeSize, LozengeVariant } from './Lozenge.types'; export type LozengeProps = { @@ -22,11 +20,9 @@ export type LozengeProps = { variant?: LozengeVariant; } & TransformedHTMLAttributes; -type StyledLozengeProps = LozengeProps & ModeProp & { iconOnly: boolean }; +type StyledLozengeProps = LozengeProps & { iconOnly: boolean }; -const StyledLozenge = styled.div.withConfig({ - shouldForwardProp: (prop, defaultValidatorFn) => !['mode'].includes(prop) && defaultValidatorFn(prop), -})` +const StyledLozenge = styled.div` /* Common Lozenge CSS */ align-items: center; @@ -43,7 +39,7 @@ const StyledLozenge = styled.div.withConfig({ } /* Lozenge variant CSS styles */ - ${({ variant, mode }) => getLozengeVariantStyles({ variant: variant || 'primary', mode })} + ${({ variant }) => getLozengeVariantStyles(variant || 'primary')} /* Lozenge and font size CSS styles */ ${({ iconOnly, size }) => getLozengeSizeStyles({ iconOnly, size: size || 'small' })} @@ -54,7 +50,6 @@ const StyledLozenge = styled.div.withConfig({ const Lozenge = forwardRef( ({ variant = 'primary', size = 'small', icon, children, ...props }, ref) => { - const { mode } = useBlocksTheme(); const iconOnly = !children; return ( @@ -62,7 +57,6 @@ const Lozenge = forwardRef( role="div" iconOnly={iconOnly} ref={ref} - mode={mode} size={size} variant={variant} {...props} diff --git a/src/blocks/menu/Menu.tsx b/src/blocks/menu/Menu.tsx index 1dc9bb50d7..e33834017d 100644 --- a/src/blocks/menu/Menu.tsx +++ b/src/blocks/menu/Menu.tsx @@ -2,23 +2,20 @@ import { FC } from 'react'; import styled from 'styled-components'; import type { MenuProps } from './Menu.types'; -import { getBlocksColor } from 'blocks/Blocks.utils'; -import { ModeProp } from 'blocks/Blocks.types'; -import { useBlocksTheme } from 'blocks/Blocks.hooks'; import { menuCSSPropsKeys } from './Menu.constants'; const StyledMenu = styled.div.withConfig({ shouldForwardProp: (prop, defaultValidatorFn) => !menuCSSPropsKeys.includes(prop as keyof MenuProps) && defaultValidatorFn(prop), -})` +})` display: flex; flex-direction: column; - background-color: ${({ mode }) => getBlocksColor(mode, { light: 'white', dark: 'gray-900' })}; - border: 1px solid ${({ mode }) => getBlocksColor(mode, { light: 'gray-200', dark: 'gray-800' })}; - border-radius: var(--r3); - padding: var(--s2); - margin: var(--s0); - gap: var(--s3); + background-color: var(--surface-primary); + border: var(--border-sm) solid var(--stroke-secondary); + border-radius: var(--radius-xs); + padding: var(--spacing-xxs); + margin: var(--spacing-none); + gap: var(--spacing-xs); /* Menu non-responsive styles */ width: ${(props) => props.width}; @@ -32,18 +29,7 @@ const StyledMenu = styled.div.withConfig({ ${(props) => props.css || ''} `; -const Menu: FC = ({ children, ...props }) => { - const { mode } = useBlocksTheme(); - - return ( - - {children} - - ); -}; +const Menu: FC = ({ children, ...props }) => {children}; Menu.displayName = 'Menu'; diff --git a/src/blocks/menu/MenuItem.tsx b/src/blocks/menu/MenuItem.tsx index d5847cf7ac..4d2d329c67 100644 --- a/src/blocks/menu/MenuItem.tsx +++ b/src/blocks/menu/MenuItem.tsx @@ -2,25 +2,19 @@ import { FC } from 'react'; import styled from 'styled-components'; import { MenuItemComponentProps } from './Menu.types'; -import { ModeProp } from 'blocks/Blocks.types'; -import { getBlocksColor } from '../Blocks.utils'; -import { useBlocksTheme } from 'blocks/Blocks.hooks'; -import { Text } from 'blocks/text'; -import { Box } from 'blocks/box'; import * as RadixDropdown from '@radix-ui/react-dropdown-menu'; -import { Link } from 'blocks/link'; +import { Link } from '../link'; +import { textVariants } from '../text'; -const StyledMenuItem = styled(RadixDropdown.Item).withConfig({ - shouldForwardProp: (prop, defaultValidatorFn) => !['mode'].includes(prop) && defaultValidatorFn(prop), -})` +const StyledMenuItem = styled(RadixDropdown.Item)` // Menu default styles - padding: var(--s0) var(--s1); + padding: var(--spacing-none) var(--spacing-xxxs); display: flex; flex-direction: row; flex: 1; align-items: center; - gap: var(--s1); - border-radius: var(--r2); + gap: var(--spacing-xxxs); + border-radius: var(--radius-xxs); [role='img'] { width: 24px; @@ -28,7 +22,7 @@ const StyledMenuItem = styled(RadixDropdown.Item).withConfig({ } &:hover { - background-color: ${({ mode }) => getBlocksColor(mode, { light: 'gray-100', dark: 'gray-1000' })}; + background-color: var(--surface-secondary); outline: none !important; } @@ -39,29 +33,31 @@ const StyledMenuItem = styled(RadixDropdown.Item).withConfig({ ${(props) => props.css || ''}; `; -const MenuItem: FC = ({ icon, label, onClick, destination, newTab, disabled, ...props }) => { - const { mode } = useBlocksTheme(); +const StyledLabel = styled.span` + color: var(--components-dropdown-text-default); + text-align: center; + + font-family: var(--font-family); + font-size: ${textVariants['bs-regular'].fontSize}; + font-style: ${textVariants['bs-regular'].fontStyle}; + font-weight: ${textVariants['bs-regular'].fontWeight}; + line-height: ${textVariants['bs-regular'].lineHeight}; +`; +const MenuItem: FC = ({ icon, label, onClick, destination, newTab, disabled, ...props }) => { const menuContent = ( {icon} - - {label} - + {label} ); return ( - +
{destination ? ( = ({ icon, label, onClick, destinatio ) : ( menuContent )} - +
); }; diff --git a/src/blocks/separator/Separator.constants.ts b/src/blocks/separator/Separator.constants.ts index 12b388ee72..ada8e131fa 100644 --- a/src/blocks/separator/Separator.constants.ts +++ b/src/blocks/separator/Separator.constants.ts @@ -6,5 +6,4 @@ export const separatorRestrictedPropsKeys: (keyof SeparatorProps | keyof ModePro 'margin', 'width', 'orientation', - 'mode', ]; diff --git a/src/blocks/separator/Separator.tsx b/src/blocks/separator/Separator.tsx index ecdcdf9cea..6346ccb1d0 100644 --- a/src/blocks/separator/Separator.tsx +++ b/src/blocks/separator/Separator.tsx @@ -1,9 +1,6 @@ import { FC } from 'react'; import styled from 'styled-components'; -import { useBlocksTheme } from '../Blocks.hooks'; -import { ModeProp } from '../Blocks.types'; -import { getBlocksColor } from '../Blocks.utils'; import { SeparatorProps } from './Separator.types'; import { getSeparatorResponsiveCSS } from './Separator.utils'; import { separatorRestrictedPropsKeys } from './Separator.constants'; @@ -11,7 +8,7 @@ import { separatorRestrictedPropsKeys } from './Separator.constants'; const StyledSeparator = styled.div.withConfig({ shouldForwardProp: (prop, defaultValidatorFn) => !separatorRestrictedPropsKeys.includes(prop as keyof SeparatorProps) && defaultValidatorFn(prop), -})` +})` /* Initial values */ width: ${({ width, orientation }) => width || (orientation === 'horizontal' ? '100%' : '1px')}; height: ${({ height, orientation }) => height || (orientation === 'horizontal' ? '1px' : '100%')}; @@ -20,23 +17,19 @@ const StyledSeparator = styled.div.withConfig({ ${(props) => getSeparatorResponsiveCSS(props)} /* Non-responsive props */ - background-color: ${({ mode }) => getBlocksColor(mode, { light: 'gray-200', dark: 'gray-800' })}; + background-color: var(--surface-tertiary); /* Extra CSS prop */ ${({ css }) => css || ''} `; -const Separator: FC = ({ orientation = 'horizontal', ...rest }) => { - const { mode } = useBlocksTheme(); - return ( - - ); -}; +const Separator: FC = ({ orientation = 'horizontal', ...rest }) => ( + +); Separator.displayName = 'Separator'; diff --git a/src/blocks/skeleton/Skeleton.constants.ts b/src/blocks/skeleton/Skeleton.constants.ts index be99c83282..6039f6618c 100644 --- a/src/blocks/skeleton/Skeleton.constants.ts +++ b/src/blocks/skeleton/Skeleton.constants.ts @@ -1,4 +1,4 @@ import { ModeProp } from '../Blocks.types'; import type { SkeletonProps } from './Skeleton.types'; -export const skeletonCSSPropsKeys: (keyof SkeletonProps | keyof ModeProp)[] = ['height', 'width', 'mode']; +export const skeletonCSSPropsKeys: (keyof SkeletonProps | keyof ModeProp)[] = ['height', 'width']; diff --git a/src/blocks/skeleton/Skeleton.tsx b/src/blocks/skeleton/Skeleton.tsx index 72dbd6d085..a22928bcd6 100644 --- a/src/blocks/skeleton/Skeleton.tsx +++ b/src/blocks/skeleton/Skeleton.tsx @@ -1,17 +1,14 @@ import { type FC } from 'react'; import styled from 'styled-components'; -import { useBlocksTheme } from '../Blocks.hooks'; -import { ModeProp } from '../Blocks.types'; import { SkeletonProps } from './Skeleton.types'; import { getSkeletonPulseAnimation, getSkeletonResponsiveCSS } from './Skeleton.utils'; import { skeletonCSSPropsKeys } from './Skeleton.constants'; -import { getBlocksColor } from 'blocks/Blocks.utils'; const StyledSkeleton = styled.div.withConfig({ shouldForwardProp: (prop, defaultValidatorFn) => !skeletonCSSPropsKeys.includes(prop as keyof SkeletonProps) && defaultValidatorFn(prop), -})` +})` /* Responsive props */ ${(props) => getSkeletonResponsiveCSS(props)} @@ -19,11 +16,10 @@ const StyledSkeleton = styled.div.withConfig({ ${(props) => props.css || ''} /* Animation props */ - animation: ${({ mode }) => - getSkeletonPulseAnimation( - getBlocksColor(mode, { dark: 'gray-600', light: 'gray-200' }), - getBlocksColor(mode, { dark: 'gray-700', light: 'gray-300' }) - )} + animation: ${getSkeletonPulseAnimation( + 'var(--components-skeleton-loader-gradient-light)', + 'var(--components-skeleton-loader-gradient-dark)' + )} 1s infinite alternate-reverse; /* Hide children */ @@ -32,9 +28,7 @@ const StyledSkeleton = styled.div.withConfig({ } `; -const Skeleton: FC = ({ borderRadius = 'r2', children, isLoading, ...rest }) => { - const { mode } = useBlocksTheme(); - +const Skeleton: FC = ({ borderRadius = 'radius-xxs', children, isLoading, ...rest }) => { if (!isLoading) return children; return ( @@ -44,7 +38,6 @@ const Skeleton: FC = ({ borderRadius = 'r2', children, isLoading, /* The component will not be included in the tab order */ tabIndex={-1} borderRadius={borderRadius} - mode={mode} {...rest} > {children} diff --git a/src/blocks/tabs/Tabs.styled.ts b/src/blocks/tabs/Tabs.styled.ts index 039a7482c5..0856119cbf 100644 --- a/src/blocks/tabs/Tabs.styled.ts +++ b/src/blocks/tabs/Tabs.styled.ts @@ -1,41 +1,40 @@ import { Tabs as ReachTabs, TabList, Tab } from '@reach/tabs'; +import { textVariants } from '../text'; import styled from 'styled-components'; -import { ModeProp } from '../Blocks.types'; -import { getBlocksColor } from '../Blocks.utils'; export const StyledFillTabs = styled(ReachTabs)` display: flex; flex-direction: column; - gap: var(--s4); + gap: var(--spacing-sm); `; -export const StyledFillTabList = styled(TabList)` +export const StyledFillTabList = styled(TabList)` display: flex; width: fit-content; - padding: var(--s1); - background-color: ${({ mode }) => getBlocksColor(mode, { light: 'gray-100', dark: 'gray-1000' })}; - border-radius: var(--r4); - gap: var(--s2); + padding: var(--spacing-xxxs); + background-color: var(--surface-secondary); + border-radius: var(--radius-sm); + gap: var(--spacing-xxs); `; -export const StyledFillTab = styled(Tab)` +export const StyledFillTab = styled(Tab)` display: flex; - padding: var(--s0) var(--s4); + padding: var(--spacing-none) var(--spacing-sm); height: 40px; justify-content: center; align-items: center; - gap: var(--s2); + gap: var(--spacing-xxs); align-self: stretch; cursor: pointer; - color: ${({ mode }) => getBlocksColor(mode, { light: 'gray-800', dark: 'gray-300' })}; - background-color: ${getBlocksColor('light', 'transparent')}; - border-radius: var(--r3); + color: var(--text-secondary); + background-color: var(--surface-transparent); + border-radius: var(--radius-xs); transition: background-color 0.3s, color 0.3s; border-bottom: none; &[data-selected] { - background-color: ${({ mode }) => getBlocksColor(mode, { light: 'white', dark: 'gray-800' })}; - color: ${({ mode }) => getBlocksColor(mode, { light: 'gray-1000', dark: 'white' })}; + background-color: var(--components-button-tertiary-background-inverse); + color: var(--text-secondary); } &:focus { @@ -43,21 +42,21 @@ export const StyledFillTab = styled(Tab)` } &:hover { - color: ${({ mode }) => getBlocksColor(mode, { light: 'gray-1000', dark: 'white' })}; + color: var(--components-button-secondary-text-default); } &:focus-visible { - outline: 1px solid ${getBlocksColor('light', 'pink-300')}; + outline: var(--border-sm) solid var(--stroke-state-focused); } &:active { - background-color: ${getBlocksColor('light', 'transparent')}; - color: ${({ mode }) => getBlocksColor(mode, { light: 'gray-1000', dark: 'white' })}; + background-color: var(--surface-transparent); + color: var(--components-button-secondary-text-default); } &[aria-disabled='true'] { cursor: not-allowed; - color: ${({ mode }) => getBlocksColor(mode, { light: 'gray-300', dark: 'gray-700' })}; + color: var(--components-button-secondary-text-disabled); opacity: 1; } `; @@ -65,56 +64,64 @@ export const StyledFillTab = styled(Tab)` export const StyledLineTabs = styled(ReachTabs)` display: flex; flex-direction: column; - gap: var(--s4); + gap: var(--spacing-sm); `; -export const StyledLineTabList = styled(TabList)` +export const StyledLineTabList = styled(TabList)` display: flex; - background-color: ${getBlocksColor('light', 'transparent')}; - gap: var(--s3); + background-color: var(--surface-transparent); + gap: var(--spacing-xs); justify-content: flex-start; - border-bottom: 1px solid ${({ mode }) => getBlocksColor(mode, { light: 'gray-200', dark: 'gray-800' })}; + border-bottom: var(--border-sm) solid var(--stroke-secondary); `; -export const StyledLineTab = styled(Tab)` +export const StyledLineTab = styled(Tab)` display: flex; - padding: var(--s0) var(--s4); + padding: var(--spacing-none) var(--spacing-sm); height: 40px; justify-content: center; align-items: center; - gap: var(--s2); + gap: var(--spacing-xxs); cursor: pointer; margin-bottom: -1px; - background-color: ${getBlocksColor('light', 'transparent')}; - color: ${({ mode }) => getBlocksColor(mode, { light: 'gray-800', dark: 'gray-300' })}; + background-color: var(--surface-transparent); + color: var(--text-secondary); transition: background-color 0.3s, color 0.3s; - border-bottom: 2px solid ${getBlocksColor('light', 'transparent')}; + border-bottom: var(--border-md) solid var(--surface-transparent); &[data-selected] { - border-bottom: 2px solid ${getBlocksColor('light', 'pink-400')}; - color: ${({ mode }) => getBlocksColor(mode, { light: 'gray-1000', dark: 'gray-100' })}; + border-bottom: var(--border-md) solid var(--stroke-brand-medium); + color: var(--text-primary); } &:hover { - color: ${({ mode }) => getBlocksColor(mode, { light: 'gray-1000', dark: 'gray-100' })}; + color: var(--text-primary); } &:focus-visible { - outline: 2px solid ${getBlocksColor('light', 'pink-300')}; - border-bottom: 2px solid ${getBlocksColor('light', 'transparent')}; - border-radius: var(--r3); + outline: var(--border-md) solid var(--stroke-state-focused); + border-bottom: var(--border-md) solid var(--surface-transparent); + border-radius: var(--radius-xs); margin-bottom: -2px; } &:active { - background-color: ${getBlocksColor('light', 'transparent')}; - color: ${getBlocksColor('light', 'gray-1000')}; + background-color: var(--surface-transparent); + color: var(--text-primary); } &[aria-disabled='true'] { cursor: not-allowed; - color: ${({ mode }) => getBlocksColor(mode, { light: 'gray-400', dark: 'gray-700' })}; - border-bottom: 2px solid ${({ mode }) => getBlocksColor(mode, { light: 'gray-300', dark: 'gray-800' })}; + color: var(--text-state-disabled); + border-bottom: var(--border-md) solid var(--stroke-state-disabled); opacity: 1; } `; + +export const StyledTabLabel = styled.span` + font-family: var(--font-family); + font-size: ${textVariants['h5-semibold'].fontSize}; + font-style: ${textVariants['h5-semibold'].fontStyle}; + font-weight: ${textVariants['h5-semibold'].fontWeight}; + line-height: ${textVariants['h5-semibold'].lineHeight}; +`; diff --git a/src/blocks/tabs/Tabs.tsx b/src/blocks/tabs/Tabs.tsx index 06280ada7b..357a50d81e 100644 --- a/src/blocks/tabs/Tabs.tsx +++ b/src/blocks/tabs/Tabs.tsx @@ -1,7 +1,6 @@ import React from 'react'; import { TabPanels, TabPanel, TabsKeyboardActivation } from '@reach/tabs'; import '@reach/tabs/styles.css'; -import { useBlocksTheme } from '../Blocks.hooks'; import { StyledFillTab, StyledFillTabList, @@ -9,8 +8,8 @@ import { StyledLineTab, StyledLineTabList, StyledLineTabs, + StyledTabLabel, } from './Tabs.styled'; -import { Text } from 'blocks/text'; export type TabItem = { key: string; @@ -28,8 +27,6 @@ export type TabsProps = { }; const Tabs: React.FC = ({ items, onChange, variant = 'line', activeKey }) => { - const { mode } = useBlocksTheme(); - const handleChange = (index: number) => { const activeItem = items[index]; if (activeItem && !activeItem.disabled) { @@ -52,20 +49,16 @@ const Tabs: React.FC = ({ items, onChange, variant = 'line', activeKe role="tabpanel" keyboardActivation={TabsKeyboardActivation.Auto} > - + {items.map((item) => ( {item.icon && item.icon} - {item.label} + {item.label} ))} diff --git a/src/blocks/text/Text.tsx b/src/blocks/text/Text.tsx index 7bdd591b82..dbe1ebd2d3 100644 --- a/src/blocks/text/Text.tsx +++ b/src/blocks/text/Text.tsx @@ -1,10 +1,8 @@ import { ReactNode, forwardRef } from 'react'; import styled, { FlattenSimpleInterpolation } from 'styled-components'; -import { useBlocksTheme } from '../Blocks.hooks'; -import { TransformedHTMLAttributes, BlocksColors, ModeProp, ThemeModeColors } from '../Blocks.types'; -import { getBlocksColor } from '../Blocks.utils'; -import { ThemeColors } from '../theme/Theme.types'; +import { TransformedHTMLAttributes } from '../Blocks.types'; +import { TextColors } from '../theme/Theme.types'; import { TextAlign, TextHTMLTags, TextResponsiveProps, TextTransform, TextVariants } from './Text.types'; import { getVariantStyles } from './Text.utils'; import { getTextResponsiveCSS } from './Text.utils'; @@ -15,7 +13,7 @@ export type TextProps = { /* Children pass to the Text component */ children?: ReactNode; /* Sets the css property for text color */ - color?: BlocksColors | ThemeModeColors | ThemeColors; + color?: TextColors; /* Extra css prop from styled components to apply custom css not supported by Text component */ css?: FlattenSimpleInterpolation; /* For truncating the contents with ... when there's container overflow */ @@ -36,13 +34,12 @@ export type TextProps = { TransformedHTMLAttributes; const StyledText = styled.p.withConfig({ - shouldForwardProp: (prop, defaultValidatorFn) => - !['mode', 'color', 'display'].includes(prop) && defaultValidatorFn(prop), -})` + shouldForwardProp: (prop, defaultValidatorFn) => !['color', 'display'].includes(prop) && defaultValidatorFn(prop), +})` /* Variant CSS */ ${({ variant }) => getVariantStyles(variant)} - color: ${({ color, mode }) => getBlocksColor(mode, color)}; + color: ${({ color }) => `var(--${color})`}; font-family: var(--font-family); margin: 0px; text-align: ${({ textAlign }) => textAlign}; @@ -86,18 +83,14 @@ const StyledText = styled.p.withConfig({ ${(props) => props.css || ''} `; -const Text = forwardRef(({ as = 'p', ...props }, ref) => { - const { mode } = useBlocksTheme(); - return ( - // TODO: We need to remove color dependency from BlocksColors | ThemeModeColors to fix this error - - ); -}); +const Text = forwardRef(({ as = 'p', color = 'text-primary', ...props }, ref) => ( + +)); Text.displayName = 'Text'; diff --git a/src/blocks/textInput/TextInput.tsx b/src/blocks/textInput/TextInput.tsx index 12ddd7e16d..3e3f75fd3f 100644 --- a/src/blocks/textInput/TextInput.tsx +++ b/src/blocks/textInput/TextInput.tsx @@ -1,6 +1,5 @@ -import { Box } from 'blocks'; import { Asterisk, CrossFilled } from '../icons'; -import { Text, textVariants } from '../text'; +import { TextVariants, textVariants } from '../text'; import React, { ReactNode, forwardRef } from 'react'; import styled, { FlattenSimpleInterpolation, css } from 'styled-components'; @@ -38,8 +37,7 @@ const StyledTextInput = styled.div<{ success?: boolean; disabled?: boolean; }>` - ${({ theme, success, error, disabled }) => { - const colors = theme?.blocksTheme?.colors; + ${({ success, error, disabled }) => { const defaultState = error ? 'danger' : success ? 'success' : disabled ? 'disabled' : 'default'; const focusState = error ? 'danger' : success ? 'success' : 'focus'; return css` @@ -47,12 +45,8 @@ const StyledTextInput = styled.div<{ justify-content: space-between; align-items: flex-start; border-radius: var(--radius-xs, 12px); - border: 1.5px solid - var(--components-inputs-stroke-${defaultState}, ${colors[`components-inputs-stroke-${defaultState}`]}); - background: var( - --components-inputs-background-${defaultState}, - ${colors[`components-inputs-background-${defaultState}`]} - ); + border: 1.5px solid var(--components-inputs-stroke-${defaultState}); + background: var(--components-inputs-background-${defaultState}); display: flex; @@ -69,14 +63,14 @@ const StyledTextInput = styled.div<{ width: 24px; height: 24px; - color: var(--components-inputs-icon-${defaultState}, ${colors[`components-inputs-icon-${defaultState}`]}); + color: var(--components-inputs-icon-${defaultState}); } & input { - color: var(--components-inputs-text-${defaultState}, ${colors[`components-inputs-text-${defaultState}`]}); + color: var(--components-inputs-text-${defaultState}); width: 100%; ::placeholder { - color: var(--components-inputs-text-placeholder, ${colors['components-inputs-text-placeholder']}); + color: var(--components-inputs-text-placeholder); } border: none; background: transparent; @@ -87,20 +81,19 @@ const StyledTextInput = styled.div<{ } &:hover { - border: 1.5px solid var(--components-inputs-stroke-hover, ${colors['components-inputs-stroke-hover']}); + border: 1.5px solid var(--components-inputs-stroke-hover); } &:focus-within { - border: 1.5px solid - var(--components-inputs-stroke-${focusState}, ${colors[`components-inputs-stroke-${focusState}`]}); + border: 1.5px solid var(--components-inputs-stroke-${focusState}); outline: none; } &:disabled { - border: 1.5px solid var(--components-inputs-stroke-default, ${colors['components-inputs-stroke-default']}); - background: var(--components-inputs-background-disabled, ${colors['components-inputs-background-disabled']}); + border: 1.5px solid var(--components-inputs-stroke-default); + background: var(--components-inputs-background-disabled); cursor: not-allowed; - color: var(--components-inputs-text-disabled, ${colors['components-inputs-text-disabled']}); + color: var(--components-inputs-text-disabled); } `; }} @@ -113,12 +106,30 @@ const LabelContainer = styled.div` width: 100%; `; +const InputText = styled.span<{ color: string; variant: TextVariants }>` + color: var(--${({ color }) => color}); + font-family: var(--font-family); + ${({ variant }) => + ` + font-size: ${textVariants[variant].fontSize}; + font-style: ${textVariants[variant].fontStyle}; + font-weight: ${textVariants[variant].fontWeight}; + line-height: ${textVariants[variant].lineHeight}; + `} +`; + const LabelTextContainer = styled.div` display: flex; align-items: flex-start; gap: var(--spacing-xxxs, 4px); `; +const InputContainer = styled.div` + display: flex; + gap: var(--spacing-xxs); + width: 100%; +`; + export const TextInput = forwardRef( ( { @@ -144,20 +155,22 @@ export const TextInput = forwardRef( {label && ( - {label} {required && } - + {totalCount && ( - {`${value?.length || 0} / ${totalCount}`} + variant="c-regular" + > + {`${value?.length || 0} / ${totalCount}`} + )} )} @@ -168,11 +181,7 @@ export const TextInput = forwardRef( ref={ref} success={success} > - + {icon} ( onChange={onChange} value={value} /> - + {onClear && onClear?.()} />} {description && ( - ( ? 'components-inputs-text-disabled' : 'components-inputs-text-placeholder' } + variant="c-regular" > {description} - + )} {errorMessage && ( - {errorMessage} - + )} ); diff --git a/src/blocks/textarea/TextArea.tsx b/src/blocks/textarea/TextArea.tsx index 0bf1bf6197..2cbedb776c 100644 --- a/src/blocks/textarea/TextArea.tsx +++ b/src/blocks/textarea/TextArea.tsx @@ -1,5 +1,5 @@ import { Asterisk } from 'blocks/icons'; -import { Text } from 'blocks/text/Text'; +import { textVariants } from '../text'; import React, { forwardRef } from 'react'; import styled, { FlattenSimpleInterpolation, css } from 'styled-components'; @@ -36,22 +36,17 @@ const StyledTextArea = styled.textarea<{ success?: boolean; resizable?: boolean; }>` - ${({ theme, resizable, success, error }) => { - const colors = theme?.blocksTheme?.colors; + ${({ resizable, success, error }) => { const defaultState = error ? 'danger' : success ? 'success' : 'default'; const focusState = error ? 'danger' : success ? 'success' : 'focus'; return css` align-self: stretch; align-items: flex-start; border-radius: var(--radius-xs, 12px); - border: 1.5px solid - var(--components-inputs-stroke-${defaultState}, ${colors[`components-inputs-stroke-${defaultState}`]}); - background: var( - --components-inputs-background-${defaultState}, - ${colors[`components-inputs-background-${defaultState}`]} - ); + border: 1.5px solid var(--components-inputs-stroke-${defaultState}); + background: var(--components-inputs-background-${defaultState}); - color: var(--components-inputs-text-${defaultState}, ${colors[`components-inputs-text-${defaultState}`]}); + color: var(--components-inputs-text-${defaultState}); display: flex; @@ -66,7 +61,7 @@ const StyledTextArea = styled.textarea<{ padding: var(--spacing-xs, 12px); ::placeholder { - color: var(--components-inputs-text-placeholder, ${colors['components-inputs-text-placeholder']}); + color: var(--components-inputs-text-placeholder); } resize: ${resizable ? 'vertical' : 'none'}; @@ -76,16 +71,15 @@ const StyledTextArea = styled.textarea<{ } &:focus { - border: 1.5px solid - var(--components-inputs-stroke-${focusState}, ${colors[`components-inputs-stroke-${focusState}`]}); + border: 1.5px solid var(--components-inputs-stroke-${focusState}); outline: none; } &:disabled { - border: 1.5px solid var(--components-inputs-stroke-default, ${colors['components-inputs-stroke-default']}); - background: var(--components-inputs-background-disabled, ${colors['components-inputs-background-disabled']}); + border: 1.5px solid var(--components-inputs-stroke-default); + background: var(--components-inputs-background-disabled); cursor: not-allowed; - color: var(--components-inputs-text-disabled, ${colors['components-inputs-text-disabled']}); + color: var(--components-inputs-text-disabled); } `; }} @@ -98,12 +92,30 @@ const LabelContainer = styled.div` width: 100%; `; +const LabelText = styled.span<{ color: string }>` + color: var(--${({ color }) => color}); + font-family: var(--font-family); + font-size: ${textVariants['h6-semibold'].fontSize}; + font-style: ${textVariants['h6-semibold'].fontStyle}; + font-weight: ${textVariants['h6-semibold'].fontWeight}; + line-height: ${textVariants['h6-semibold'].lineHeight}; +`; + const LabelTextContainer = styled.div` display: flex; align-items: flex-start; gap: var(--spacing-xxxs, 4px); `; +const LabelCount = styled.span<{ color: string }>` + color: var(--${({ color }) => color}); + font-family: var(--font-family); + font-size: ${textVariants['c-regular'].fontSize}; + font-style: ${textVariants['c-regular'].fontStyle}; + font-weight: ${textVariants['c-regular'].fontWeight}; + line-height: ${textVariants['c-regular'].lineHeight}; +`; + export const TextArea = forwardRef( ( { @@ -128,20 +140,16 @@ export const TextArea = forwardRef( {label && ( - + {label} {required && } - + {totalCount && ( - {`${value?.length || 0} / ${totalCount}`} + + {`${value?.length || 0} / ${totalCount}`} + )} )} @@ -158,8 +166,7 @@ export const TextArea = forwardRef( value={value} /> {description && ( - ( } > {description} - - )} - {errorMessage && ( - - {errorMessage} - + )} + {errorMessage && {errorMessage}} ); } diff --git a/src/blocks/theme/Theme.types.ts b/src/blocks/theme/Theme.types.ts index ef1fc512c8..988ce06ce7 100644 --- a/src/blocks/theme/Theme.types.ts +++ b/src/blocks/theme/Theme.types.ts @@ -1,4 +1,4 @@ -import { colorSemantics } from './colors/colors.semantics'; +import { colorSemantics, semanticKeys } from './colors/colors.semantics'; import { blurVariables } from './variables/variables.blur'; import { borderRadiusVariables } from './variables/variables.borderRadius'; import { borderSizeVariables } from './variables/variables.borderSize'; @@ -11,14 +11,14 @@ type ColorSemantics = typeof colorSemantics; type StringKeys = Extract; -type ThemeColorsConfig = { - [K1 in StringKeys as `${K1}-${StringKeys}`]: string; +type ThemeColorsConfig = { + [K1 in StringKeys as `${K1}-${StringKeys}`]: string; }; -export type ThemeColors = keyof ThemeColorsConfig; +export type ThemeColors = keyof ThemeColorsConfig; export type Theme = { - colors: ThemeColorsConfig; + colors: ThemeColorsConfig; blur: typeof blurVariables; borderRadius: typeof borderRadiusVariables; borderSize: typeof borderSizeVariables; @@ -31,3 +31,11 @@ export type ThemeBorderRadius = keyof Theme['borderRadius']; export type ThemeBorderSize = keyof Theme['borderSize']; export type ThemeSpacing = keyof Theme['spacing']; + +export type SurfaceColors = keyof ThemeColorsConfig<{ [semanticKeys.surface]: ColorSemantics['surface'] }>; + +export type TextColors = keyof ThemeColorsConfig<{ [semanticKeys.text]: ColorSemantics['text'] }>; + +export type IconColors = keyof ThemeColorsConfig<{ [semanticKeys.icon]: ColorSemantics['icon'] }>; + +export type StrokeColors = keyof ThemeColorsConfig<{ [semanticKeys.stroke]: ColorSemantics['stroke'] }>; diff --git a/src/blocks/theme/colors/colors.semantics.ts b/src/blocks/theme/colors/colors.semantics.ts index 37fbce3307..747dbaf480 100644 --- a/src/blocks/theme/colors/colors.semantics.ts +++ b/src/blocks/theme/colors/colors.semantics.ts @@ -11,6 +11,7 @@ import { dropdownSemantics } from '../semantics/semantics.dropdown'; import { iconSemantics } from '../semantics/semantics.icon'; import { inputSemantics } from '../semantics/semantics.input'; import { radioSemantics } from '../semantics/semantics.radio'; +import { skeletonSemantics } from '../semantics/semantics.skeleton'; import { strokeSemantics } from '../semantics/semantics.stroke'; import { surfaceSemantics } from '../semantics/semantics.surface'; import { switchSemantics } from '../semantics/semantics.switch'; @@ -19,23 +20,69 @@ import { textAreaSemantics } from '../semantics/semantics.textarea'; import { toastSemantics } from '../semantics/semantics.toast'; import { tooltipSemantics } from '../semantics/semantics.tooltip'; +// TODO: find a better way to do this in future +type SemanticKeys = { + buttonPrimary: 'components-button-primary'; + buttonSecondary: 'components-button-secondary'; + buttonTertiary: 'components-button-tertiary'; + buttonOutline: 'components-button-outline'; + buttonDanger: 'components-button-danger'; + buttonDangerSecondary: 'components-button-danger-secondary'; + checkbox: 'components-checkbox'; + dropdown: 'components-dropdown'; + icon: 'icon'; + input: 'components-inputs'; + radio: 'components-radio-button'; + surface: 'surface'; + stroke: 'stroke'; + skeleton: 'components-skeleton-loader'; + text: 'text'; + textArea: 'components-textarea'; + toast: 'components-toast'; + toggle: 'components-toggle-switch'; + tooltip: 'components-tooltip'; +}; + +export const semanticKeys: SemanticKeys = { + buttonPrimary: 'components-button-primary', + buttonSecondary: 'components-button-secondary', + buttonTertiary: 'components-button-tertiary', + buttonOutline: 'components-button-outline', + buttonDanger: 'components-button-danger', + buttonDangerSecondary: 'components-button-danger-secondary', + checkbox: 'components-checkbox', + dropdown: 'components-dropdown', + icon: 'icon', + input: 'components-inputs', + radio: 'components-radio-button', + surface: 'surface', + stroke: 'stroke', + skeleton: 'components-skeleton-loader', + text: 'text', + textArea: 'components-textarea', + toast: 'components-toast', + toggle: 'components-toggle-switch', + tooltip: 'components-tooltip', +}; + export const colorSemantics = { - 'components-button-primary': primaryButtonSemantics, - 'components-button-secondary': secondaryButtonSemantics, - 'components-button-tertiary': tertiaryButtonSemantics, - 'components-button-outline': outlineButtonSemantics, - 'components-button-danger': dangerButtonSemantics, - 'components-button-danger-secondary': dangerSecondaryButtonSemantics, - 'components-checkbox': checkboxSemantics, - 'components-dropdown': dropdownSemantics, - icon: iconSemantics, - 'components-inputs': inputSemantics, - 'components-radio-button': radioSemantics, - surface: surfaceSemantics, - stroke: strokeSemantics, - text: textSemantics, - 'components-textarea': textAreaSemantics, - 'components-toast': toastSemantics, - 'components-toggle-switch': switchSemantics, - 'components-tooltip': tooltipSemantics, + [semanticKeys.buttonPrimary]: primaryButtonSemantics, + [semanticKeys.buttonSecondary]: secondaryButtonSemantics, + [semanticKeys.buttonTertiary]: tertiaryButtonSemantics, + [semanticKeys.buttonOutline]: outlineButtonSemantics, + [semanticKeys.buttonDanger]: dangerButtonSemantics, + [semanticKeys.buttonDangerSecondary]: dangerSecondaryButtonSemantics, + [semanticKeys.checkbox]: checkboxSemantics, + [semanticKeys.dropdown]: dropdownSemantics, + [semanticKeys.icon]: iconSemantics, + [semanticKeys.input]: inputSemantics, + [semanticKeys.radio]: radioSemantics, + [semanticKeys.surface]: surfaceSemantics, + [semanticKeys.stroke]: strokeSemantics, + [semanticKeys.skeleton]: skeletonSemantics, + [semanticKeys.text]: textSemantics, + [semanticKeys.textArea]: textAreaSemantics, + [semanticKeys.toast]: toastSemantics, + [semanticKeys.toggle]: switchSemantics, + [semanticKeys.tooltip]: tooltipSemantics, }; diff --git a/src/blocks/theme/semantics/semantics.button.ts b/src/blocks/theme/semantics/semantics.button.ts index 7f66fa870b..fd625cc34f 100644 --- a/src/blocks/theme/semantics/semantics.button.ts +++ b/src/blocks/theme/semantics/semantics.button.ts @@ -10,13 +10,16 @@ export const primaryButtonSemantics = { 'background-hover': { light: colorBrands['primary-400'], dark: colorBrands['primary-400'] }, 'background-pressed': { light: colorBrands['primary-800'], dark: colorBrands['primary-600'] }, 'background-focus': { light: colorBrands['primary-500'], dark: colorBrands['primary-400'] }, - 'background-disabled': { light: surfaceSemantics['disabled'].light, dark: surfaceSemantics['disabled'].dark }, + 'background-disabled': { + light: surfaceSemantics['state-disabled'].light, + dark: surfaceSemantics['state-disabled'].dark, + }, 'text-default': { light: colorPrimitives['white-100'], dark: colorPrimitives['white-100'] }, - 'text-disabled': { light: textSemantics['disabled'].light, dark: textSemantics['disabled'].dark }, + 'text-disabled': { light: textSemantics['state-disabled'].light, dark: textSemantics['state-disabled'].dark }, 'icon-default': { light: colorPrimitives['white-100'], dark: colorPrimitives['white-100'] }, - 'icon-disabled': { light: iconSemantics['disabled'].light, dark: iconSemantics['disabled'].dark }, + 'icon-disabled': { light: iconSemantics['state-disabled'].light, dark: iconSemantics['state-disabled'].dark }, 'stroke-focus': { light: colorBrands['primary-700'], dark: colorBrands['primary-200'] }, }; @@ -26,13 +29,16 @@ export const secondaryButtonSemantics = { 'background-hover': { light: colorBrands['neutral-200'], dark: colorBrands['neutral-700'] }, 'background-pressed': { light: colorBrands['neutral-300'], dark: colorBrands['neutral-1000'] }, 'background-focus': { light: colorBrands['neutral-100'], dark: colorBrands['neutral-800'] }, - 'background-disabled': { light: surfaceSemantics['disabled'].light, dark: surfaceSemantics['disabled'].dark }, + 'background-disabled': { + light: surfaceSemantics['state-disabled'].light, + dark: surfaceSemantics['state-disabled'].dark, + }, 'text-default': { light: colorBrands['neutral-1000'], dark: colorPrimitives['white-100'] }, - 'text-disabled': { light: textSemantics['disabled'].light, dark: textSemantics['disabled'].dark }, + 'text-disabled': { light: textSemantics['state-disabled'].light, dark: textSemantics['state-disabled'].dark }, 'icon-default': { light: colorBrands['neutral-800'], dark: colorPrimitives['white-60'] }, - 'icon-disabled': { light: iconSemantics['disabled'].light, dark: iconSemantics['disabled'].dark }, + 'icon-disabled': { light: iconSemantics['state-disabled'].light, dark: iconSemantics['state-disabled'].dark }, 'stroke-focus': { light: colorBrands['primary-300'], dark: colorBrands['primary-400'] }, }; @@ -43,13 +49,16 @@ export const tertiaryButtonSemantics = { 'background-hover': { light: colorBrands['neutral-900'], dark: colorBrands['neutral-300'] }, 'background-pressed': { light: colorBrands['neutral-100'], dark: colorPrimitives['gray-1000'] }, 'background-focus': { light: colorBrands['neutral-1000'], dark: colorBrands['neutral-700'] }, - 'background-disabled': { light: surfaceSemantics['disabled'].light, dark: surfaceSemantics['disabled'].dark }, + 'background-disabled': { + light: surfaceSemantics['state-disabled'].light, + dark: surfaceSemantics['state-disabled'].dark, + }, 'text-default': { light: colorPrimitives['white-100'], dark: colorPrimitives['gray-200'] }, - 'text-disabled': { light: textSemantics['disabled'].light, dark: textSemantics['disabled'].dark }, + 'text-disabled': { light: textSemantics['state-disabled'].light, dark: textSemantics['state-disabled'].dark }, 'icon-default': { light: colorBrands['neutral-300'], dark: colorPrimitives['white-50'] }, - 'icon-disabled': { light: iconSemantics['disabled'].light, dark: iconSemantics['disabled'].dark }, + 'icon-disabled': { light: iconSemantics['state-disabled'].light, dark: iconSemantics['state-disabled'].dark }, 'stroke-focus': { light: colorBrands['primary-400'], dark: colorBrands['primary-400'] }, }; @@ -59,13 +68,16 @@ export const outlineButtonSemantics = { 'background-hover': { light: colorPrimitives['transparent'], dark: colorPrimitives['transparent'] }, 'background-pressed': { light: colorPrimitives['transparent'], dark: colorPrimitives['transparent'] }, 'background-focus': { light: colorPrimitives['transparent'], dark: colorPrimitives['transparent'] }, - 'background-disabled': { light: surfaceSemantics['disabled'].light, dark: surfaceSemantics['disabled'].dark }, + 'background-disabled': { + light: surfaceSemantics['state-disabled'].light, + dark: surfaceSemantics['state-disabled'].dark, + }, 'text-default': { light: textSemantics['primary'].light, dark: textSemantics['primary'].dark }, - 'text-disabled': { light: textSemantics['disabled'].light, dark: textSemantics['disabled'].dark }, + 'text-disabled': { light: textSemantics['state-disabled'].light, dark: textSemantics['state-disabled'].dark }, 'icon-default': { light: iconSemantics['primary'].light, dark: iconSemantics['secondary'].dark }, - 'icon-disabled': { light: iconSemantics['disabled'].light, dark: iconSemantics['disabled'].dark }, + 'icon-disabled': { light: iconSemantics['state-disabled'].light, dark: iconSemantics['state-disabled'].dark }, 'stroke-default': { light: strokeSemantics['tertiary'].light, dark: strokeSemantics['tertiary'].dark }, 'stroke-focus': { light: colorBrands['primary-300'], dark: colorBrands['primary-400'] }, @@ -78,13 +90,16 @@ export const dangerButtonSemantics = { 'background-hover': { light: colorBrands['danger-500'], dark: colorBrands['danger-400'] }, 'background-pressed': { light: colorBrands['danger-800'], dark: colorBrands['danger-700'] }, 'background-focus': { light: colorBrands['danger-500'], dark: colorBrands['danger-400'] }, - 'background-disabled': { light: surfaceSemantics['disabled'].light, dark: surfaceSemantics['disabled'].dark }, + 'background-disabled': { + light: surfaceSemantics['state-disabled'].light, + dark: surfaceSemantics['state-disabled'].dark, + }, 'text-default': { light: colorPrimitives['white-100'], dark: colorPrimitives['white-100'] }, - 'text-disabled': { light: textSemantics['disabled'].light, dark: textSemantics['disabled'].dark }, + 'text-disabled': { light: textSemantics['state-disabled'].light, dark: textSemantics['state-disabled'].dark }, 'icon-default': { light: colorPrimitives['white-70'], dark: colorPrimitives['white-70'] }, - 'icon-disabled': { light: iconSemantics['disabled'].light, dark: iconSemantics['disabled'].dark }, + 'icon-disabled': { light: iconSemantics['state-disabled'].light, dark: iconSemantics['state-disabled'].dark }, 'stroke-focus': { light: colorBrands['danger-800'], dark: colorBrands['danger-600'] }, }; @@ -94,13 +109,16 @@ export const dangerSecondaryButtonSemantics = { 'background-hover': { light: colorBrands['danger-100'], dark: colorBrands['danger-700'] }, 'background-pressed': { light: colorBrands['danger-500'], dark: colorBrands['danger-1000'] }, 'background-focus': { light: colorBrands['danger-100'], dark: colorBrands['danger-700'] }, - 'background-disabled': { light: surfaceSemantics['disabled'].light, dark: surfaceSemantics['disabled'].dark }, + 'background-disabled': { + light: surfaceSemantics['state-disabled'].light, + dark: surfaceSemantics['state-disabled'].dark, + }, 'text-default': { light: colorBrands['danger-700'], dark: colorPrimitives['white-100'] }, - 'text-disabled': { light: textSemantics['disabled'].light, dark: textSemantics['disabled'].dark }, + 'text-disabled': { light: textSemantics['state-disabled'].light, dark: textSemantics['state-disabled'].dark }, 'icon-default': { light: colorBrands['danger-400'], dark: colorPrimitives['white-70'] }, - 'icon-disabled': { light: iconSemantics['disabled'].light, dark: iconSemantics['disabled'].dark }, + 'icon-disabled': { light: iconSemantics['state-disabled'].light, dark: iconSemantics['state-disabled'].dark }, 'stroke-focus': { light: colorBrands['danger-800'], dark: colorBrands['danger-400'] }, }; diff --git a/src/blocks/theme/semantics/semantics.checkbox.ts b/src/blocks/theme/semantics/semantics.checkbox.ts index 28206a3d70..d7bd691611 100644 --- a/src/blocks/theme/semantics/semantics.checkbox.ts +++ b/src/blocks/theme/semantics/semantics.checkbox.ts @@ -5,14 +5,17 @@ import { textSemantics } from './semantics.text'; export const checkboxSemantics = { 'background-default': { light: surfaceSemantics['primary'].light, dark: surfaceSemantics['primary'].dark }, 'background-selected': { light: surfaceSemantics['brand-medium'].light, dark: surfaceSemantics['brand-medium'].dark }, - 'background-disabled': { light: surfaceSemantics['disabled'].light, dark: surfaceSemantics['disabled'].dark }, + 'background-disabled': { + light: surfaceSemantics['state-disabled'].light, + dark: surfaceSemantics['state-disabled'].dark, + }, 'text-default': { light: textSemantics['primary'].light, dark: textSemantics['primary'].dark }, 'text-secondary': { light: textSemantics['secondary'].light, dark: textSemantics['secondary'].dark }, - 'text-disabled': { light: textSemantics['disabled'].light, dark: textSemantics['disabled'].dark }, + 'text-disabled': { light: textSemantics['state-disabled'].light, dark: textSemantics['state-disabled'].dark }, 'stroke-default': { light: textSemantics['brand-medium'].light, dark: textSemantics['brand-medium'].dark }, - 'stroke-disabled': { light: textSemantics['disabled'].light, dark: textSemantics['disabled'].dark }, + 'stroke-disabled': { light: textSemantics['state-disabled'].light, dark: textSemantics['state-disabled'].dark }, 'icon-default': { light: colorPrimitives['white-100'], dark: colorPrimitives['white-100'] }, }; diff --git a/src/blocks/theme/semantics/semantics.dropdown.ts b/src/blocks/theme/semantics/semantics.dropdown.ts index dfc5a63318..932a53be1b 100644 --- a/src/blocks/theme/semantics/semantics.dropdown.ts +++ b/src/blocks/theme/semantics/semantics.dropdown.ts @@ -10,21 +10,30 @@ export const dropdownSemantics = { 'background-hover': { light: colorPrimitives['white-100'], dark: colorBrands['neutral-800'] }, 'background-pressed': { light: colorPrimitives['white-100'], dark: colorBrands['neutral-800'] }, 'background-focus': { light: colorPrimitives['white-100'], dark: colorBrands['neutral-800'] }, - 'background-disabled': { light: surfaceSemantics['disabled'].light, dark: surfaceSemantics['disabled'].dark }, + 'background-disabled': { + light: surfaceSemantics['state-disabled'].light, + dark: surfaceSemantics['state-disabled'].dark, + }, 'background-success': { light: colorBrands['success-100'], dark: colorBrands['success-200'] }, 'background-danger': { light: colorBrands['danger-100'], dark: colorBrands['danger-200'] }, 'text-default': { light: textSemantics['primary'].light, dark: textSemantics['primary'].dark }, 'text-placeholder': { light: colorBrands['neutral-400'], dark: colorBrands['neutral-600'] }, 'text-secondary': { light: colorBrands['neutral-600'], dark: colorBrands['neutral-500'] }, - 'text-disabled': { light: textSemantics['disabled'].light, dark: textSemantics['disabled'].dark }, - 'text-success': { light: textSemantics['success-bold'].light, dark: textSemantics['success-subtle'].dark }, - 'text-danger': { light: textSemantics['danger-bold'].light, dark: textSemantics['danger-subtle'].dark }, + 'text-disabled': { light: textSemantics['state-disabled'].light, dark: textSemantics['state-disabled'].dark }, + 'text-success': { + light: textSemantics['state-success-bold'].light, + dark: textSemantics['state-success-subtle'].dark, + }, + 'text-danger': { light: textSemantics['state-danger-bold'].light, dark: textSemantics['state-danger-subtle'].dark }, 'icon-default': { light: iconSemantics['tertiary'].light, dark: iconSemantics['secondary'].dark }, - 'icon-disabled': { light: iconSemantics['disabled'].light, dark: iconSemantics['disabled'].dark }, - 'icon-success': { light: iconSemantics['success-bold'].light, dark: iconSemantics['success-subtle'].dark }, - 'icon-danger': { light: iconSemantics['danger-bold'].light, dark: iconSemantics['danger-subtle'].dark }, + 'icon-disabled': { light: iconSemantics['state-disabled'].light, dark: iconSemantics['state-disabled'].dark }, + 'icon-success': { + light: iconSemantics['state-success-bold'].light, + dark: iconSemantics['state-success-subtle'].dark, + }, + 'icon-danger': { light: iconSemantics['state-danger-bold'].light, dark: iconSemantics['state-danger-subtle'].dark }, 'stroke-default': { light: strokeSemantics['secondary'].light, dark: strokeSemantics['secondary'].dark }, 'stroke-hover': { light: strokeSemantics['tertiary'].light, dark: strokeSemantics['tertiary'].dark }, diff --git a/src/blocks/theme/semantics/semantics.icon.ts b/src/blocks/theme/semantics/semantics.icon.ts index 971ea38aff..003bd4b95a 100644 --- a/src/blocks/theme/semantics/semantics.icon.ts +++ b/src/blocks/theme/semantics/semantics.icon.ts @@ -13,17 +13,17 @@ export const iconSemantics = { // icon states - 'success-subtle': { light: colorBrands['success-200'], dark: colorBrands['success-600'] }, - 'success-bold': { light: colorBrands['success-600'], dark: colorBrands['success-300'] }, + 'state-success-subtle': { light: colorBrands['success-200'], dark: colorBrands['success-600'] }, + 'state-success-bold': { light: colorBrands['success-600'], dark: colorBrands['success-300'] }, - 'info-subtle': { light: colorBrands['info-200'], dark: colorBrands['info-600'] }, - 'info-bold': { light: colorBrands['info-600'], dark: colorBrands['info-200'] }, + 'state-info-subtle': { light: colorBrands['info-200'], dark: colorBrands['info-600'] }, + 'state-info-bold': { light: colorBrands['info-600'], dark: colorBrands['info-200'] }, - 'warning-subtle': { light: colorBrands['warning-200'], dark: colorBrands['warning-600'] }, - 'warning-bold': { light: colorBrands['warning-600'], dark: colorBrands['warning-200'] }, + 'state-warning-subtle': { light: colorBrands['warning-200'], dark: colorBrands['warning-600'] }, + 'state-warning-bold': { light: colorBrands['warning-600'], dark: colorBrands['warning-200'] }, - 'danger-subtle': { light: colorBrands['danger-200'], dark: colorBrands['danger-600'] }, - 'danger-bold': { light: colorBrands['danger-600'], dark: colorBrands['danger-300'] }, + 'state-danger-subtle': { light: colorBrands['danger-200'], dark: colorBrands['danger-600'] }, + 'state-danger-bold': { light: colorBrands['danger-600'], dark: colorBrands['danger-300'] }, - disabled: { light: colorBrands['neutral-400'], dark: colorBrands['neutral-700'] }, + 'state-disabled': { light: colorBrands['neutral-400'], dark: colorBrands['neutral-700'] }, }; diff --git a/src/blocks/theme/semantics/semantics.input.ts b/src/blocks/theme/semantics/semantics.input.ts index 2c75b96dbf..e1e8221bef 100644 --- a/src/blocks/theme/semantics/semantics.input.ts +++ b/src/blocks/theme/semantics/semantics.input.ts @@ -10,21 +10,30 @@ export const inputSemantics = { 'background-hover': { light: colorPrimitives['white-100'], dark: colorBrands['neutral-800'] }, 'background-pressed': { light: colorPrimitives['white-100'], dark: colorBrands['neutral-800'] }, 'background-focus': { light: colorPrimitives['white-100'], dark: colorBrands['neutral-800'] }, - 'background-disabled': { light: surfaceSemantics['disabled'].light, dark: surfaceSemantics['disabled'].dark }, + 'background-disabled': { + light: surfaceSemantics['state-disabled'].light, + dark: surfaceSemantics['state-disabled'].dark, + }, 'background-success': { light: colorBrands['success-100'], dark: colorBrands['success-200'] }, 'background-danger': { light: colorBrands['danger-100'], dark: colorBrands['danger-200'] }, 'text-default': { light: textSemantics['primary'].light, dark: textSemantics['primary'].dark }, 'text-placeholder': { light: colorBrands['neutral-400'], dark: colorBrands['neutral-600'] }, 'text-secondary': { light: colorBrands['neutral-600'], dark: colorBrands['neutral-500'] }, - 'text-disabled': { light: textSemantics['disabled'].light, dark: textSemantics['disabled'].dark }, - 'text-success': { light: textSemantics['success-bold'].light, dark: textSemantics['success-subtle'].dark }, - 'text-danger': { light: textSemantics['danger-bold'].light, dark: textSemantics['danger-subtle'].dark }, + 'text-disabled': { light: textSemantics['state-disabled'].light, dark: textSemantics['state-disabled'].dark }, + 'text-success': { + light: textSemantics['state-success-bold'].light, + dark: textSemantics['state-success-subtle'].dark, + }, + 'text-danger': { light: textSemantics['state-danger-bold'].light, dark: textSemantics['state-danger-subtle'].dark }, 'icon-default': { light: iconSemantics['tertiary'].light, dark: iconSemantics['secondary'].dark }, - 'icon-disabled': { light: iconSemantics['disabled'].light, dark: iconSemantics['disabled'].dark }, - 'icon-success': { light: iconSemantics['success-bold'].light, dark: iconSemantics['success-subtle'].dark }, - 'icon-danger': { light: iconSemantics['danger-bold'].light, dark: iconSemantics['danger-subtle'].dark }, + 'icon-disabled': { light: iconSemantics['state-disabled'].light, dark: iconSemantics['state-disabled'].dark }, + 'icon-success': { + light: iconSemantics['state-success-bold'].light, + dark: iconSemantics['state-success-subtle'].dark, + }, + 'icon-danger': { light: iconSemantics['state-danger-bold'].light, dark: iconSemantics['state-danger-subtle'].dark }, 'stroke-default': { light: strokeSemantics['secondary'].light, dark: strokeSemantics['secondary'].dark }, 'stroke-hover': { light: strokeSemantics['tertiary'].light, dark: strokeSemantics['tertiary'].dark }, diff --git a/src/blocks/theme/semantics/semantics.radio.ts b/src/blocks/theme/semantics/semantics.radio.ts index 58285e9ca5..7e0093180a 100644 --- a/src/blocks/theme/semantics/semantics.radio.ts +++ b/src/blocks/theme/semantics/semantics.radio.ts @@ -5,12 +5,15 @@ import { textSemantics } from './semantics.text'; export const radioSemantics = { 'background-default': { light: surfaceSemantics['primary'].light, dark: surfaceSemantics['primary'].dark }, 'background-selected': { light: surfaceSemantics['brand-medium'].light, dark: surfaceSemantics['brand-medium'].dark }, - 'background-disabled': { light: surfaceSemantics['disabled'].light, dark: surfaceSemantics['disabled'].dark }, + 'background-disabled': { + light: surfaceSemantics['state-disabled'].light, + dark: surfaceSemantics['state-disabled'].dark, + }, 'text-default': { light: textSemantics['primary'].light, dark: textSemantics['primary'].dark }, 'text-secondary': { light: textSemantics['secondary'].light, dark: textSemantics['secondary'].dark }, - 'text-disabled': { light: textSemantics['disabled'].light, dark: textSemantics['disabled'].dark }, + 'text-disabled': { light: textSemantics['state-disabled'].light, dark: textSemantics['state-disabled'].dark }, 'stroke-default': { light: strokeSemantics['brand-medium'].light, dark: strokeSemantics['brand-medium'].dark }, - 'stroke-disabled': { light: strokeSemantics['disabled'].light, dark: strokeSemantics['disabled'].dark }, + 'stroke-disabled': { light: strokeSemantics['state-disabled'].light, dark: strokeSemantics['state-disabled'].dark }, }; diff --git a/src/blocks/theme/semantics/semantics.skeleton.ts b/src/blocks/theme/semantics/semantics.skeleton.ts new file mode 100644 index 0000000000..30a7095633 --- /dev/null +++ b/src/blocks/theme/semantics/semantics.skeleton.ts @@ -0,0 +1,12 @@ +import { colorBrands } from '../colors/colors.brands'; + +export const skeletonSemantics = { + 'gradient-light': { + light: colorBrands['neutral-200'], + dark: colorBrands['neutral-800'], + }, + 'gradient-dark': { + light: colorBrands['neutral-300'], + dark: colorBrands['neutral-700'], + }, +}; diff --git a/src/blocks/theme/semantics/semantics.stroke.ts b/src/blocks/theme/semantics/semantics.stroke.ts index b5dc678948..67e0282203 100644 --- a/src/blocks/theme/semantics/semantics.stroke.ts +++ b/src/blocks/theme/semantics/semantics.stroke.ts @@ -11,21 +11,21 @@ export const strokeSemantics = { // stroke states - 'success-subtle': { light: colorBrands['success-300'], dark: colorBrands['success-500'] }, - 'success-bold': { light: colorBrands['success-700'], dark: colorBrands['success-300'] }, + 'state-success-subtle': { light: colorBrands['success-300'], dark: colorBrands['success-500'] }, + 'state-success-bold': { light: colorBrands['success-700'], dark: colorBrands['success-300'] }, - 'info-subtle': { light: colorBrands['info-300'], dark: colorBrands['info-500'] }, - 'info-bold': { light: colorBrands['info-700'], dark: colorBrands['info-300'] }, + 'state-info-subtle': { light: colorBrands['info-300'], dark: colorBrands['info-500'] }, + 'state-info-bold': { light: colorBrands['info-700'], dark: colorBrands['info-300'] }, - 'warning-subtle': { light: colorBrands['warning-300'], dark: colorBrands['warning-500'] }, - 'warning-bold': { light: colorBrands['warning-700'], dark: colorBrands['warning-300'] }, + 'state-warning-subtle': { light: colorBrands['warning-300'], dark: colorBrands['warning-500'] }, + 'state-warning-bold': { light: colorBrands['warning-700'], dark: colorBrands['warning-300'] }, - 'danger-subtle': { light: colorBrands['danger-300'], dark: colorBrands['danger-500'] }, - 'danger-bold': { light: colorBrands['danger-500'], dark: colorBrands['danger-300'] }, + 'state-danger-subtle': { light: colorBrands['danger-300'], dark: colorBrands['danger-500'] }, + 'state-danger-bold': { light: colorBrands['danger-500'], dark: colorBrands['danger-300'] }, - hover: { light: colorBrands['success-300'], dark: colorBrands['success-800'] }, - focus: { light: colorBrands['success-300'], dark: colorBrands['success-300'] }, + 'state-hover': { light: colorBrands['success-300'], dark: colorBrands['success-800'] }, + 'state-focus': { light: colorBrands['success-300'], dark: colorBrands['success-300'] }, - pressed: { light: colorBrands['info-800'], dark: colorBrands['info-300'] }, - disabled: { light: colorBrands['info-300'], dark: colorBrands['info-800'] }, + 'state-pressed': { light: colorBrands['info-800'], dark: colorBrands['info-300'] }, + 'state-disabled': { light: colorBrands['info-300'], dark: colorBrands['info-800'] }, }; diff --git a/src/blocks/theme/semantics/semantics.surface.ts b/src/blocks/theme/semantics/semantics.surface.ts index da6792ffbc..2930a9c14c 100644 --- a/src/blocks/theme/semantics/semantics.surface.ts +++ b/src/blocks/theme/semantics/semantics.surface.ts @@ -15,19 +15,21 @@ export const surfaceSemantics = { 'glass-subtle': { light: colorPrimitives['white-80'], dark: colorPrimitives['black-80'] }, 'glass-bold': { light: colorPrimitives['white-50'], dark: colorPrimitives['black-50'] }, + transparent: { light: colorPrimitives['transparent'], dark: colorPrimitives['transparent'] }, + // surface states - 'success-subtle': { light: colorBrands['success-100'], dark: colorBrands['success-500'] }, - 'success-bold': { light: colorBrands['success-500'], dark: colorBrands['success-200'] }, + 'state-success-subtle': { light: colorBrands['success-100'], dark: colorBrands['success-500'] }, + 'state-success-bold': { light: colorBrands['success-500'], dark: colorBrands['success-200'] }, - 'info-subtle': { light: colorBrands['info-100'], dark: colorBrands['info-500'] }, - 'info-bold': { light: colorBrands['info-500'], dark: colorBrands['info-200'] }, + 'state-info-subtle': { light: colorBrands['info-100'], dark: colorBrands['info-500'] }, + 'state-info-bold': { light: colorBrands['info-500'], dark: colorBrands['info-200'] }, - 'warning-subtle': { light: colorBrands['warning-100'], dark: colorBrands['warning-500'] }, - 'warning-bold': { light: colorBrands['warning-500'], dark: colorBrands['warning-200'] }, + 'state-warning-subtle': { light: colorBrands['warning-100'], dark: colorBrands['warning-500'] }, + 'state-warning-bold': { light: colorBrands['warning-500'], dark: colorBrands['warning-200'] }, - 'danger-subtle': { light: colorBrands['danger-100'], dark: colorBrands['danger-800'] }, - 'danger-bold': { light: colorBrands['danger-500'], dark: colorBrands['danger-200'] }, + 'state-danger-subtle': { light: colorBrands['danger-100'], dark: colorBrands['danger-800'] }, + 'state-danger-bold': { light: colorBrands['danger-500'], dark: colorBrands['danger-200'] }, - disabled: { light: colorBrands['neutral-200'], dark: colorBrands['neutral-800'] }, + 'state-disabled': { light: colorBrands['neutral-200'], dark: colorBrands['neutral-800'] }, }; diff --git a/src/blocks/theme/semantics/semantics.switch.ts b/src/blocks/theme/semantics/semantics.switch.ts index 6bf08080c7..10868a8161 100644 --- a/src/blocks/theme/semantics/semantics.switch.ts +++ b/src/blocks/theme/semantics/semantics.switch.ts @@ -9,10 +9,13 @@ export const switchSemantics = { 'background-unselected': { light: colorBrands['neutral-300'], dark: colorBrands['neutral-800'] }, 'background-hover': { light: colorBrands['primary-500'], dark: colorBrands['primary-500'] }, 'background-focus': { light: colorBrands['primary-500'], dark: colorBrands['primary-600'] }, - 'background-disabled': { light: surfaceSemantics['disabled'].light, dark: surfaceSemantics['disabled'].dark }, + 'background-disabled': { + light: surfaceSemantics['state-disabled'].light, + dark: surfaceSemantics['state-disabled'].dark, + }, 'icon-default': { light: colorPrimitives['white-100'], dark: colorPrimitives['white-100'] }, - 'icon-disabled': { light: iconSemantics['disabled'].light, dark: iconSemantics['disabled'].dark }, + 'icon-disabled': { light: iconSemantics['state-disabled'].light, dark: iconSemantics['state-disabled'].dark }, 'stroke-focus': { light: colorBrands['primary-300'], dark: colorBrands['primary-500'] }, 'stroke-default': { light: strokeSemantics['tertiary'].light, dark: strokeSemantics['tertiary'].dark }, diff --git a/src/blocks/theme/semantics/semantics.text.ts b/src/blocks/theme/semantics/semantics.text.ts index 192693fd37..f59a2f9230 100644 --- a/src/blocks/theme/semantics/semantics.text.ts +++ b/src/blocks/theme/semantics/semantics.text.ts @@ -19,17 +19,17 @@ export const textSemantics = { // text states - 'success-subtle': { light: colorBrands['success-100'], dark: colorBrands['success-700'] }, - 'success-bold': { light: colorBrands['success-500'], dark: colorBrands['success-300'] }, + 'state-success-subtle': { light: colorBrands['success-100'], dark: colorBrands['success-700'] }, + 'state-success-bold': { light: colorBrands['success-500'], dark: colorBrands['success-300'] }, - 'info-subtle': { light: colorBrands['info-100'], dark: colorBrands['info-700'] }, - 'info-bold': { light: colorBrands['info-700'], dark: colorBrands['info-100'] }, + 'state-info-subtle': { light: colorBrands['info-100'], dark: colorBrands['info-700'] }, + 'state-info-bold': { light: colorBrands['info-700'], dark: colorBrands['info-100'] }, - 'warning-subtle': { light: colorBrands['warning-100'], dark: colorBrands['warning-700'] }, + 'state-warning-subtle': { light: colorBrands['warning-100'], dark: colorBrands['warning-700'] }, 'warning-bold': { light: colorBrands['warning-700'], dark: colorBrands['warning-100'] }, - 'danger-subtle': { light: colorBrands['danger-100'], dark: colorBrands['danger-700'] }, - 'danger-bold': { light: colorBrands['danger-700'], dark: colorBrands['danger-300'] }, + 'state-danger-subtle': { light: colorBrands['danger-100'], dark: colorBrands['danger-700'] }, + 'state-danger-bold': { light: colorBrands['danger-700'], dark: colorBrands['danger-300'] }, - disabled: { light: colorBrands['neutral-400'], dark: colorBrands['neutral-700'] }, + 'state-disabled': { light: colorBrands['neutral-400'], dark: colorBrands['neutral-700'] }, }; diff --git a/src/blocks/theme/semantics/semantics.textarea.ts b/src/blocks/theme/semantics/semantics.textarea.ts index 9a64015844..8948357c39 100644 --- a/src/blocks/theme/semantics/semantics.textarea.ts +++ b/src/blocks/theme/semantics/semantics.textarea.ts @@ -10,21 +10,30 @@ export const textAreaSemantics = { 'background-hover': { light: colorPrimitives['white-100'], dark: colorBrands['neutral-800'] }, 'background-pressed': { light: colorPrimitives['white-100'], dark: colorBrands['neutral-800'] }, 'background-focus': { light: colorPrimitives['white-100'], dark: colorBrands['neutral-800'] }, - 'background-disabled': { light: surfaceSemantics['disabled'].light, dark: surfaceSemantics['disabled'].dark }, + 'background-disabled': { + light: surfaceSemantics['state-disabled'].light, + dark: surfaceSemantics['state-disabled'].dark, + }, 'background-success': { light: colorBrands['success-100'], dark: colorBrands['success-200'] }, 'background-danger': { light: colorBrands['danger-100'], dark: colorBrands['danger-200'] }, 'text-default': { light: textSemantics['primary'].light, dark: textSemantics['primary'].dark }, 'text-placeholder': { light: colorBrands['neutral-400'], dark: colorBrands['neutral-600'] }, 'text-secondary': { light: colorBrands['neutral-600'], dark: colorBrands['neutral-500'] }, - 'text-disabled': { light: textSemantics['disabled'].light, dark: textSemantics['disabled'].dark }, - 'text-success': { light: textSemantics['success-bold'].light, dark: textSemantics['success-subtle'].dark }, - 'text-danger': { light: textSemantics['danger-bold'].light, dark: textSemantics['danger-subtle'].dark }, + 'text-disabled': { light: textSemantics['state-disabled'].light, dark: textSemantics['state-disabled'].dark }, + 'text-success': { + light: textSemantics['state-success-bold'].light, + dark: textSemantics['state-success-subtle'].dark, + }, + 'text-danger': { light: textSemantics['state-danger-bold'].light, dark: textSemantics['state-danger-subtle'].dark }, 'icon-default': { light: iconSemantics['tertiary'].light, dark: iconSemantics['secondary'].dark }, - 'icon-disabled': { light: iconSemantics['disabled'].light, dark: iconSemantics['disabled'].dark }, - 'icon-success': { light: iconSemantics['success-bold'].light, dark: iconSemantics['success-subtle'].dark }, - 'icon-danger': { light: iconSemantics['danger-bold'].light, dark: iconSemantics['danger-subtle'].dark }, + 'icon-disabled': { light: iconSemantics['state-disabled'].light, dark: iconSemantics['state-disabled'].dark }, + 'icon-success': { + light: iconSemantics['state-success-bold'].light, + dark: iconSemantics['state-success-subtle'].dark, + }, + 'icon-danger': { light: iconSemantics['state-danger-bold'].light, dark: iconSemantics['state-danger-subtle'].dark }, 'stroke-default': { light: strokeSemantics['secondary'].light, dark: strokeSemantics['secondary'].dark }, 'stroke-hover': { light: strokeSemantics['tertiary'].light, dark: strokeSemantics['tertiary'].dark }, diff --git a/src/blocks/theme/semantics/semantics.toast.ts b/src/blocks/theme/semantics/semantics.toast.ts index 2fe99313dc..41cb839d57 100644 --- a/src/blocks/theme/semantics/semantics.toast.ts +++ b/src/blocks/theme/semantics/semantics.toast.ts @@ -7,10 +7,19 @@ import { textSemantics } from './semantics.text'; export const toastSemantics = { 'background-default': { light: surfaceSemantics['primary'].light, dark: surfaceSemantics['primary'].dark }, - 'background-success': { light: colorPrimitives['white-100'], dark: surfaceSemantics['success-bold'].dark }, - 'background-warning': { light: surfaceSemantics['danger-bold'].light, dark: surfaceSemantics['danger-bold'].dark }, - 'background-error': { light: surfaceSemantics['warning-bold'].light, dark: surfaceSemantics['warning-bold'].dark }, - 'background-info': { light: surfaceSemantics['info-bold'].light, dark: surfaceSemantics['info-bold'].dark }, + 'background-success': { light: colorPrimitives['white-100'], dark: surfaceSemantics['state-success-bold'].dark }, + 'background-warning': { + light: surfaceSemantics['state-danger-bold'].light, + dark: surfaceSemantics['state-danger-bold'].dark, + }, + 'background-error': { + light: surfaceSemantics['state-warning-bold'].light, + dark: surfaceSemantics['state-warning-bold'].dark, + }, + 'background-info': { + light: surfaceSemantics['state-info-bold'].light, + dark: surfaceSemantics['state-info-bold'].dark, + }, 'stroke-bg': { light: strokeSemantics['secondary'].light, dark: strokeSemantics['secondary'].dark }, diff --git a/src/blocks/tooltip/Tooltip.tsx b/src/blocks/tooltip/Tooltip.tsx index b3909431ef..6d3e7553d3 100644 --- a/src/blocks/tooltip/Tooltip.tsx +++ b/src/blocks/tooltip/Tooltip.tsx @@ -3,10 +3,9 @@ import styled from 'styled-components'; import * as RadixTooltip from '@radix-ui/react-tooltip'; import type { TooltipProps } from './Tooltip.types'; import { getTooltipPositionalCSS } from './Tooltip.utils'; -import { getBlocksColor } from 'blocks/Blocks.utils'; import { tooltipCSSPropsKeys } from './Tooltip.constants'; import { useIsVisible } from 'common'; -import { Text } from 'blocks/text'; +import { textVariants } from '../text'; const RadixTooltipContent = styled(RadixTooltip.Content).withConfig({ shouldForwardProp: (prop) => !tooltipCSSPropsKeys.includes(prop as keyof TooltipProps), @@ -19,8 +18,8 @@ const RadixTooltipContent = styled(RadixTooltip.Content).withConfig({ border-radius: var(--r3); font-family: var(--font-family); word-wrap: break-word; - color: ${getBlocksColor('light', 'white')}; - background-color: ${getBlocksColor('light', 'black')}; + color: var(--text-primary-inverse); + background-color: var(--surface-primary-inverse); /* Tooltip non-responsive styles */ width: ${({ width }) => width}; @@ -33,6 +32,24 @@ const RadixTooltipContent = styled(RadixTooltip.Content).withConfig({ ${(props) => props.css || ''}; `; +const StyledTitle = styled.span` + color: var(--text-primary-inverse); + font-family: var(--font-family); + font-size: ${textVariants['c-semibold'].fontSize}; + font-style: ${textVariants['c-semibold'].fontStyle}; + font-weight: ${textVariants['c-semibold'].fontWeight}; + line-height: ${textVariants['c-semibold'].lineHeight}; +`; + +const StyledDescription = styled.span` + color: var(--text-primary-inverse); + font-family: var(--font-family); + font-size: ${textVariants['c-regular'].fontSize}; + font-style: ${textVariants['c-regular'].fontStyle}; + font-weight: ${textVariants['c-regular'].fontWeight}; + line-height: ${textVariants['c-regular'].lineHeight}; +`; + const Tooltip: FC = ({ width = 'max-content', maxWidth = '274px', @@ -89,15 +106,8 @@ const Tooltip: FC = ({ overlay ) : ( <> - {title && {title}} - {description && ( - - {description} - - )} + {title && {title}} + {description && {description}} )} diff --git a/src/common/components/ContentLayout.tsx b/src/common/components/ContentLayout.tsx index 30a78d8853..f8e9ba4ba5 100644 --- a/src/common/components/ContentLayout.tsx +++ b/src/common/components/ContentLayout.tsx @@ -20,8 +20,8 @@ const ContentLayout: FC = ({ children }) => { justifyContent="center" alignSelf="center" maxWidth="1200px" - backgroundColor="transparent" - width="calc(100% - (var(--s4) * 2))" + backgroundColor="surface-transparent" + width="calc(100% - (var(--spacing-sm) * 2))" css={css` flex: initial; margin: 0 0 auto 0; diff --git a/src/components/chat/unlockProfile/UnlockProfile.tsx b/src/components/chat/unlockProfile/UnlockProfile.tsx index cbb75ac177..f655eaf043 100644 --- a/src/components/chat/unlockProfile/UnlockProfile.tsx +++ b/src/components/chat/unlockProfile/UnlockProfile.tsx @@ -117,7 +117,7 @@ const UnlockProfile = ({ InnerComponentProps, onClose }: UnlockProfileModalProps icon={ } diff --git a/src/components/dropdowns/UpdateNotifSettingDropdown.tsx b/src/components/dropdowns/UpdateNotifSettingDropdown.tsx index 85403f7690..a6ddd22d03 100644 --- a/src/components/dropdowns/UpdateNotifSettingDropdown.tsx +++ b/src/components/dropdowns/UpdateNotifSettingDropdown.tsx @@ -152,7 +152,6 @@ const UpdateNotifSettingDropdownContainer: FC diff --git a/src/modules/claimGalxe/NFTSuccessModal.tsx b/src/modules/claimGalxe/NFTSuccessModal.tsx index 4aeef47c1a..8808b50f68 100644 --- a/src/modules/claimGalxe/NFTSuccessModal.tsx +++ b/src/modules/claimGalxe/NFTSuccessModal.tsx @@ -19,8 +19,8 @@ const NFTSuccessModal = ({ onClose }: ModalInnerComponentType) => { display="inline-flex" flexDirection="column" alignItems="center" - gap="s6" - padding="s3 s1 s6 s1" + gap="spacing-md" + padding="spacing-xs spacing-xxxs spacing-md spacing-xxxs" > { icon={ } onClick={() => { @@ -49,7 +49,6 @@ const NFTSuccessModal = ({ onClose }: ModalInnerComponentType) => { Join the exclusive Push alpha community for further updates! @@ -58,7 +57,7 @@ const NFTSuccessModal = ({ onClose }: ModalInnerComponentType) => { display="flex" alignItems="center" flexDirection="column" - gap="s3" + gap="spacing-xs" > { display="flex" alignItems="center" flexDirection="column" - gap="s6" + gap="spacing-md" > Push Alpha Community diff --git a/src/modules/dashboard/Dashboard.tsx b/src/modules/dashboard/Dashboard.tsx index 2b9473b746..72c4e5eb99 100644 --- a/src/modules/dashboard/Dashboard.tsx +++ b/src/modules/dashboard/Dashboard.tsx @@ -17,8 +17,8 @@ const Dashboard: FC = () => { @@ -31,7 +31,7 @@ const Dashboard: FC = () => { diff --git a/src/modules/dashboard/components/ChannelListItem.tsx b/src/modules/dashboard/components/ChannelListItem.tsx index d784bec044..b169ac8e55 100644 --- a/src/modules/dashboard/components/ChannelListItem.tsx +++ b/src/modules/dashboard/components/ChannelListItem.tsx @@ -79,16 +79,16 @@ const ChannelListItem: FC = ({ = ({ > {channelDetails?.name} {!!channelDetails?.verified_status && ( - + )} = ({ {formatSubscriberCount(channelDetails?.subscriber_count || 0)} subscribers diff --git a/src/modules/dashboard/components/ChannelTabsSection.tsx b/src/modules/dashboard/components/ChannelTabsSection.tsx index 940e08afc5..24642021ed 100644 --- a/src/modules/dashboard/components/ChannelTabsSection.tsx +++ b/src/modules/dashboard/components/ChannelTabsSection.tsx @@ -1,14 +1,9 @@ -// React and other libraries import { useEffect, useState } from 'react'; +import { css } from 'styled-components'; -//Hooks +import { Box, Text } from 'blocks'; import { useAccount } from 'hooks'; - -// Constants import { ChannelTabs } from '../Dashboard.types'; - -// Components -import { Box, Text } from 'blocks'; import { TrendingChannelsList } from './TrendingChannelsList'; import { SubscribedChannelsList } from './SubscribedChannelsList'; import { dahboardChannelTabs } from '../Dashboard.constants'; @@ -35,18 +30,19 @@ const ChannelTabsSection = () => { display="flex" flexDirection="column" width={{ ml: '100%', initial: '50%' }} - gap="s4" + gap="spacing-sm" > + {/* TODO: Use Tabs component here */} {dahboardChannelTabs?.map((channelTab, index) => { @@ -61,17 +57,21 @@ const ChannelTabsSection = () => { justifyContent="center" width={{ ll: '100%' }} alignItems="center" - padding="s2 s3" - borderRadius="r4" - backgroundColor={ - selectedChannelTab === channelTab.value ? { dark: 'gray-800', light: 'white' } : 'transparent' - } + padding="spacing-xxs spacing-xs" + borderRadius="radius-sm" onClick={() => setSelectedChannelTab(channelTab.value)} + css={css` + background-color: var( + --${selectedChannelTab === channelTab.value ? 'components-button-tertiary-background-inverse' : 'surface-transparent'} + ); + `} > {channelTab?.label} @@ -84,11 +84,11 @@ const ChannelTabsSection = () => { display="flex" flexDirection="column" overflow="hidden auto" - borderRadius="r6" + borderRadius="radius-md" minHeight="285px" maxHeight="285px" - border={{ light: '1px solid gray-200', dark: '1px solid gray-800' }} - padding="s2 s4" + border="border-sm solid stroke-secondary" + padding="spacing-xxs spacing-sm" > {selectedChannelTab === 'trending' && } {selectedChannelTab === 'subscribed' && } diff --git a/src/modules/dashboard/components/ChannelVariantsSection.tsx b/src/modules/dashboard/components/ChannelVariantsSection.tsx index cf07800a6a..0a33e60642 100644 --- a/src/modules/dashboard/components/ChannelVariantsSection.tsx +++ b/src/modules/dashboard/components/ChannelVariantsSection.tsx @@ -12,11 +12,11 @@ export type ChannelVariantsSectionProps = {}; const ChannelVariantsSection: FC = () => { return ( @@ -25,10 +25,10 @@ const ChannelVariantsSection: FC = () => { display="flex" flexDirection="column" width={{ ml: '100%', initial: '50%' }} - gap="s6" + gap="spacing-md" > Recommended Chats diff --git a/src/modules/dashboard/components/DashboardHeader.tsx b/src/modules/dashboard/components/DashboardHeader.tsx index 9b297ca9d9..3d6a3510cc 100644 --- a/src/modules/dashboard/components/DashboardHeader.tsx +++ b/src/modules/dashboard/components/DashboardHeader.tsx @@ -15,17 +15,17 @@ const DashboardHeader: FC = ({ setSubHeaderVisibility, sho flexDirection="row" display="flex" justifyContent="space-between" - margin={showSubHeader ? 's0' : 's0 s0 s4 s0'} + margin={showSubHeader ? 'spacing-none' : 'spacing-none spacing-none spacing-sm spacing-none'} > 👋 GM! Welcome to Push. @@ -41,7 +41,7 @@ const DashboardHeader: FC = ({ setSubHeaderVisibility, sho icon={ } > @@ -50,7 +50,7 @@ const DashboardHeader: FC = ({ setSubHeaderVisibility, sho icon={ } > diff --git a/src/modules/dashboard/components/DashboardSubHeader.tsx b/src/modules/dashboard/components/DashboardSubHeader.tsx index e811ee97fb..01c44b7573 100644 --- a/src/modules/dashboard/components/DashboardSubHeader.tsx +++ b/src/modules/dashboard/components/DashboardSubHeader.tsx @@ -1,4 +1,3 @@ - // React + Web3 Essentials import { FC } from 'react'; @@ -6,9 +5,18 @@ import { FC } from 'react'; import { useBlocksTheme } from 'blocks/Blocks.hooks'; // Components -import { Box, ChatDark, ChatIllustration, Communication, CommunicationDark, Notification, NotificationDark, Text } from 'blocks'; +import { + Box, + ChatDark, + ChatIllustration, + Communication, + CommunicationDark, + Notification, + NotificationDark, + Text, +} from 'blocks'; -export type DashboardSubHeaderProps = {} +export type DashboardSubHeaderProps = {}; const DashboardSubHeader: FC = () => { const { mode } = useBlocksTheme(); @@ -17,20 +25,22 @@ const DashboardSubHeader: FC = () => { - {mode === 'dark' ? : } - + Your communication super app for web3 & blockchain. @@ -38,12 +48,15 @@ const DashboardSubHeader: FC = () => { {mode === 'dark' ? : } - + Subscribe and get notifications from your favorite protocols. @@ -51,16 +64,18 @@ const DashboardSubHeader: FC = () => { {mode === 'dark' ? : } - + Send and receive chats. Join vibrant communities. - ); }; diff --git a/src/modules/dashboard/components/EmptyChannelList.tsx b/src/modules/dashboard/components/EmptyChannelList.tsx index 8449d6443f..1dd8e7fbc6 100644 --- a/src/modules/dashboard/components/EmptyChannelList.tsx +++ b/src/modules/dashboard/components/EmptyChannelList.tsx @@ -13,24 +13,24 @@ const EmptyChannelList: FC = ({ heading, subHeading }) => display="flex" flexDirection="column" alignItems="center" - gap="s4" - margin="s9 s0 s0 s0" + gap="spacing-sm" + margin="spacing-xl spacing-none spacing-none spacing-none" > {heading && ( {heading} @@ -39,7 +39,7 @@ const EmptyChannelList: FC = ({ heading, subHeading }) => {subHeading} diff --git a/src/modules/dashboard/components/FeaturedChannels.tsx b/src/modules/dashboard/components/FeaturedChannels.tsx index ac46034837..4629d4765d 100644 --- a/src/modules/dashboard/components/FeaturedChannels.tsx +++ b/src/modules/dashboard/components/FeaturedChannels.tsx @@ -22,26 +22,19 @@ const FeaturedChannels: FC = () => { return ( - {showMobileAndTabletView ? ( - - + ) : ( - + )} - ); }; diff --git a/src/modules/dashboard/components/FeaturedChannelsList.tsx b/src/modules/dashboard/components/FeaturedChannelsList.tsx index 28e6f27bfa..964215c8a5 100644 --- a/src/modules/dashboard/components/FeaturedChannelsList.tsx +++ b/src/modules/dashboard/components/FeaturedChannelsList.tsx @@ -25,14 +25,13 @@ const FeaturedChannelsList: FC = ({ featuredChannelsL const CarouselOptions: EmblaOptionsType = { slidesToScroll: isTablet || isXsLaptop ? 2 : 3, - align: 'start' + align: 'start', }; const [emblaRef, emblaApi] = useEmblaCarousel(CarouselOptions); - const { prevBtnDisabled, nextBtnDisabled, onPrevButtonClick, onNextButtonClick } = useFeaturedChannelsCarouselButtons( - emblaApi - ); + const { prevBtnDisabled, nextBtnDisabled, onPrevButtonClick, onNextButtonClick } = + useFeaturedChannelsCarouselButtons(emblaApi); return ( <> @@ -40,30 +39,40 @@ const FeaturedChannelsList: FC = ({ featuredChannelsL display="flex" justifyContent="space-between" flexDirection={{ tb: 'column' }} - gap={{ tb: 's3' }} - width='100%' + gap={{ tb: 'spacing-xs' }} + width="100%" > - - + Featured Notification Channels - + View All - + {/* Previous Button */} } > @@ -71,7 +80,7 @@ const FeaturedChannelsList: FC = ({ featuredChannelsL {/* Next button */} } > @@ -87,7 +96,7 @@ const FeaturedChannelsList: FC = ({ featuredChannelsL ref={emblaRef} > = (props) => { = (props) => { = (props) => { = (props) => { > {channelDetails?.name} @@ -161,7 +161,7 @@ const FeaturedChannelsListItem: FC = (props) => { )} @@ -186,7 +186,7 @@ const FeaturedChannelsListItem: FC = (props) => { > {formatSubscriberCount(channelDetails?.subscriber_count)} subscribers @@ -199,7 +199,7 @@ const FeaturedChannelsListItem: FC = (props) => { > {channelDetails?.info} diff --git a/src/modules/dashboard/components/FeaturedChannelsMobileViewList.tsx b/src/modules/dashboard/components/FeaturedChannelsMobileViewList.tsx index 2f7b6bfd88..bd5d0f9b09 100644 --- a/src/modules/dashboard/components/FeaturedChannelsMobileViewList.tsx +++ b/src/modules/dashboard/components/FeaturedChannelsMobileViewList.tsx @@ -39,12 +39,12 @@ const FeaturedChannelsMobileViewList: FC = display="flex" justifyContent="space-between" flexDirection={{ tb: 'column' }} - gap={{ tb: 's3' }} - alignSelf='baseline' + gap={{ tb: 'spacing-xs' }} + alignSelf="baseline" > Featured Notification Channels @@ -53,13 +53,13 @@ const FeaturedChannelsMobileViewList: FC = display="flex" flexDirection="row" alignItems="center" - gap="s4" + gap="spacing-sm" > View All @@ -72,7 +72,7 @@ const FeaturedChannelsMobileViewList: FC = {/* Previous Button */} } > @@ -80,7 +80,7 @@ const FeaturedChannelsMobileViewList: FC = {/* Next button */} } > @@ -97,7 +97,7 @@ const FeaturedChannelsMobileViewList: FC = ref={emblaRef} > = css={css` flex: 0 0 100%; `} - gap="s6" + gap="spacing-md" display="flex" flexDirection="column" > diff --git a/src/modules/dashboard/components/RecommendedChatListItem.tsx b/src/modules/dashboard/components/RecommendedChatListItem.tsx index a98e51c3e1..9c0bac9aa6 100644 --- a/src/modules/dashboard/components/RecommendedChatListItem.tsx +++ b/src/modules/dashboard/components/RecommendedChatListItem.tsx @@ -19,7 +19,7 @@ const RecommendedChatListItem: FC = ({ chat }) => > @@ -30,13 +30,13 @@ const RecommendedChatListItem: FC = ({ chat }) => > {chat?.payload?.chatParticipant} {chat?.payload?.chatMsg?.messageContent} diff --git a/src/modules/dashboard/components/RecommendedChatsList.tsx b/src/modules/dashboard/components/RecommendedChatsList.tsx index 46f277e3c0..f7036bad2d 100644 --- a/src/modules/dashboard/components/RecommendedChatsList.tsx +++ b/src/modules/dashboard/components/RecommendedChatsList.tsx @@ -10,10 +10,10 @@ const RecommendedChatsList = () => { {recommendedChatList.map((item, index) => { return ( diff --git a/src/modules/dashboard/components/RewardsSection.tsx b/src/modules/dashboard/components/RewardsSection.tsx index e8542444f1..5ee4a95b8e 100644 --- a/src/modules/dashboard/components/RewardsSection.tsx +++ b/src/modules/dashboard/components/RewardsSection.tsx @@ -8,9 +8,9 @@ const RewardsSection = () => { return ( { display="flex" flexDirection={{ ml: 'column' }} alignItems="center" - gap="s3" + gap="spacing-xs" > { return ( Verified By: { > { flexDirection="column" alignItems="center" > - Complete Verification + + Complete Verification + Continue to complete the verification process. diff --git a/src/modules/pointsVault/components/PointsVaultApprovedList.tsx b/src/modules/pointsVault/components/PointsVaultApprovedList.tsx index 5fbf2fe284..77828e9522 100644 --- a/src/modules/pointsVault/components/PointsVaultApprovedList.tsx +++ b/src/modules/pointsVault/components/PointsVaultApprovedList.tsx @@ -58,7 +58,7 @@ const PointsVaultApprovedList = ({ query }: PointsVaultApprovedListProps) => { return ( @@ -73,7 +73,7 @@ const PointsVaultApprovedList = ({ query }: PointsVaultApprovedListProps) => { hasMore={hasMoreData} loader={ {status !== 'COMPLETED' && ( diff --git a/src/modules/pointsVault/components/PointsVaultPendingList.tsx b/src/modules/pointsVault/components/PointsVaultPendingList.tsx index 132c0730e9..96b16ae3a7 100644 --- a/src/modules/pointsVault/components/PointsVaultPendingList.tsx +++ b/src/modules/pointsVault/components/PointsVaultPendingList.tsx @@ -66,7 +66,7 @@ const PointsVaultPendingList = ({ query }: PointsVaultPendingListProps) => { return ( @@ -81,7 +81,7 @@ const PointsVaultPendingList = ({ query }: PointsVaultPendingListProps) => { hasMore={hasMoreData} loader={ { return ( @@ -73,7 +73,7 @@ const PointsVaultRejectedList = ({ query }: PointsVaultRejectedListProps) => { hasMore={hasMoreData} loader={ = () => { {heading} {heading} diff --git a/src/modules/rewards/components/DashboardSection.tsx b/src/modules/rewards/components/DashboardSection.tsx index b7a56f36d2..d190b0e84f 100644 --- a/src/modules/rewards/components/DashboardSection.tsx +++ b/src/modules/rewards/components/DashboardSection.tsx @@ -34,11 +34,11 @@ const DashboardSection: FC = ({ onGetStarted }) => { Dashboard @@ -47,7 +47,7 @@ const DashboardSection: FC = ({ onGetStarted }) => { = ({ onGetStarted }) => { return ( = ({ onGetStarted width="-webkit-fill-available" display="flex" flexDirection={{ tb: 'column', initial: 'row' }} - gap={{ tb: 's4' }} + gap={{ tb: 'spacing-sm' }} alignItems={{ tb: 'stretch', initial: 'center' }} justifyContent="space-between" > @@ -44,14 +44,14 @@ const DashboardSectionHeader: FC = ({ onGetStarted > Earn Rewards for Exploring! Push Points are the new way to prove that you belong to the Push community and access to some cool surprises in the future. diff --git a/src/modules/rewards/components/DashboardSectionPoints.tsx b/src/modules/rewards/components/DashboardSectionPoints.tsx index f8879cdbc4..b2ef429254 100644 --- a/src/modules/rewards/components/DashboardSectionPoints.tsx +++ b/src/modules/rewards/components/DashboardSectionPoints.tsx @@ -38,10 +38,10 @@ const DashboardSectionPoints: FC = ({ width="-webkit-fill-available" display="flex" flexDirection="column" - padding="s6" - borderRadius="r6" - gap="s3" - border={{ light: '1px solid gray-200', dark: '1px solid gray-800' }} + padding="spacing-md" + borderRadius="radius-md" + gap="spacing-xs" + border="border-sm solid stroke-secondary" minHeight={{ tb: '115px', initial: '125px' }} justifyContent="space-between" > @@ -54,7 +54,7 @@ const DashboardSectionPoints: FC = ({ {title} @@ -67,16 +67,16 @@ const DashboardSectionPoints: FC = ({ onClick={refetch} > } + defaultBackground="surface-brand-subtle" + hoverBackground="surface-brand-subtle" + padding="spacing-xxxs" + borderRadius="radius-sm" + icon={} > - + {isFetching ? 'Updating...' : 'Update'} @@ -91,7 +91,7 @@ const DashboardSectionPoints: FC = ({ {isWalletConnected && !multiplier && ( {points !== undefined ? points?.toLocaleString() : '0'} @@ -102,7 +102,7 @@ const DashboardSectionPoints: FC = ({ {!isWalletConnected && !multiplier && ( 0 @@ -141,7 +141,7 @@ const DashboardSectionPoints: FC = ({ {points && points > 0 && rank != null ? ( {rank > 0 && `Rank #${rank}`} @@ -153,7 +153,7 @@ const DashboardSectionPoints: FC = ({ {usersInvited && usersInvited > 0 ? ( {usersInvited > 1 ? `${usersInvited} Users Invited` : `${usersInvited} User Invited`} diff --git a/src/modules/rewards/components/LeaderBoardList.tsx b/src/modules/rewards/components/LeaderBoardList.tsx index 0f3446e85c..4d6fb5c546 100644 --- a/src/modules/rewards/components/LeaderBoardList.tsx +++ b/src/modules/rewards/components/LeaderBoardList.tsx @@ -34,7 +34,7 @@ const LeaderBoardList: FC = () => { ) : ( !!leaderboardList.length && ( @@ -50,7 +50,7 @@ const LeaderBoardList: FC = () => { hasMore={hasMoreData} loader={ { > RANK USER TOTAL POINTS diff --git a/src/modules/rewards/components/LeaderBoardListItem.tsx b/src/modules/rewards/components/LeaderBoardListItem.tsx index f2839559d0..b86d35ed21 100644 --- a/src/modules/rewards/components/LeaderBoardListItem.tsx +++ b/src/modules/rewards/components/LeaderBoardListItem.tsx @@ -4,8 +4,6 @@ import { FC, useContext } from 'react'; // Third-party libraries import { css } from 'styled-components'; import BlockiesSvg from 'blockies-react-svg'; -//Hooks -import { useBlocksTheme } from 'blocks/Blocks.hooks'; //Components import { Box, Skeleton, Text } from 'blocks'; @@ -29,7 +27,6 @@ export type LeaderboardListItemProps = { }; const LeaderboardListItem: FC = ({ rank, address, points, isLoading }) => { - const { mode } = useBlocksTheme(); const { web3NameList }: AppContextType = useContext(AppContext)!; useResolveWeb3Name(address); @@ -43,15 +40,14 @@ const LeaderboardListItem: FC = ({ rank, address, poin display="flex" justifyContent="space-between" alignItems="center" - // TODO: Fix ds-blocks css={css` - border-bottom: 1px solid var(--${mode === 'dark' ? 'gray-800' : 'gray-200'}); + border-bottom: var(--border-sm) solid var(--stroke-secondary); `} > = ({ rank, address, poin > {rank > 0 && rank} = ({ rank, address, poin {displayName} {displayName} @@ -112,14 +108,14 @@ const LeaderboardListItem: FC = ({ rank, address, poin {points?.toLocaleString()} {points?.toLocaleString()} diff --git a/src/modules/rewards/components/LeaderBoardSection.tsx b/src/modules/rewards/components/LeaderBoardSection.tsx index 094efcfdb7..68be038e4d 100644 --- a/src/modules/rewards/components/LeaderBoardSection.tsx +++ b/src/modules/rewards/components/LeaderBoardSection.tsx @@ -12,20 +12,20 @@ const LeaderBoardSection: FC = () => { Leaderboard Leaderboard diff --git a/src/modules/rewards/components/LeaderboardNullState.tsx b/src/modules/rewards/components/LeaderboardNullState.tsx index ad08856b24..fdfe62be76 100644 --- a/src/modules/rewards/components/LeaderboardNullState.tsx +++ b/src/modules/rewards/components/LeaderboardNullState.tsx @@ -28,25 +28,25 @@ const LeaderBoardNullState: FC = ({ flexDirection="column" alignItems="center" justifyContent="center" - gap="s4" - padding="s15" + gap="spacing-sm" + padding="spacing-xxxl" height="200px" > {heading && ( {heading} @@ -55,7 +55,7 @@ const LeaderBoardNullState: FC = ({ {subHeading} diff --git a/src/modules/rewards/components/ReferralSection.tsx b/src/modules/rewards/components/ReferralSection.tsx index 0cf9af2818..e2b9d35773 100644 --- a/src/modules/rewards/components/ReferralSection.tsx +++ b/src/modules/rewards/components/ReferralSection.tsx @@ -14,7 +14,7 @@ import { walletToCAIP10 } from 'helpers/w2w'; import { getPreviewBasePath } from '../../../../basePath'; // components -import { Box, Button, Copy, Text, Referral, Skeleton } from 'blocks'; +import { Box, Button, Copy, Text, Referral } from 'blocks'; export type ReferralSectionProps = { handleUnlockProfile: () => void; @@ -43,33 +43,33 @@ const ReferralSection: FC = ({ handleUnlockProfile }) => { Onboard Users on Push.
Earn Points. Earn +12% of any Points your invites earn, and +2% of any Points your invite’s invites earn. @@ -79,25 +79,27 @@ const ReferralSection: FC = ({ handleUnlockProfile }) => { {isWalletConnected && userDetails && ( {baseUrl}/points?ref={userDetails?.userId} diff --git a/src/modules/rewards/components/RewardsActivitiesList.tsx b/src/modules/rewards/components/RewardsActivitiesList.tsx index c83a6df8e1..1ea1e2c13a 100644 --- a/src/modules/rewards/components/RewardsActivitiesList.tsx +++ b/src/modules/rewards/components/RewardsActivitiesList.tsx @@ -57,7 +57,7 @@ const RewardsActivitiesList: FC = () => { hasMore={hasMoreData} loader={ = ({ userId, {isRewardsLocked ? ( = ({ userId, @@ -80,7 +80,7 @@ const RewardsActivitiesListItem: FC = ({ userId, = ({ userId, = ({ userId, {activity.activityDesc} @@ -129,7 +129,7 @@ const RewardsActivitiesListItem: FC = ({ userId, display="flex" minWidth="200px" flexDirection="row" - gap="s2" + gap="spacing-xxs" alignItems="center" > = ({ userId, /> {activity.points?.toLocaleString()} Points @@ -177,21 +177,21 @@ const RewardsActivitiesListItem: FC = ({ userId, {(errorMessage || usersSingleActivity?.status === 'REJECTED') && ( {errorMessage || 'Verification Rejected. Please contact the Push team over discord.'} @@ -200,22 +200,22 @@ const RewardsActivitiesListItem: FC = ({ userId, {usersSingleActivity?.status === 'PENDING' && ( Verification Pending: Expected completion within 24-72 hours. diff --git a/src/modules/rewards/components/RewardsActivitiesSection.tsx b/src/modules/rewards/components/RewardsActivitiesSection.tsx index 86c9648499..79468cc705 100644 --- a/src/modules/rewards/components/RewardsActivitiesSection.tsx +++ b/src/modules/rewards/components/RewardsActivitiesSection.tsx @@ -6,11 +6,11 @@ const RewardsActivitiesSection = () => { Activities diff --git a/src/modules/rewards/components/RewardsActivityTitle.tsx b/src/modules/rewards/components/RewardsActivityTitle.tsx index 7dfcd459e8..a28565e482 100644 --- a/src/modules/rewards/components/RewardsActivityTitle.tsx +++ b/src/modules/rewards/components/RewardsActivityTitle.tsx @@ -16,23 +16,33 @@ const RewardsActivityTitle: FC = ({ activityTitle, is - {preText} + + {preText} + {linkedText} - {postText} + + {' '} + {postText} + ); @@ -41,7 +51,7 @@ const RewardsActivityTitle: FC = ({ activityTitle, is {activityTitle} diff --git a/src/modules/rewards/components/RewardsTabs.tsx b/src/modules/rewards/components/RewardsTabs.tsx index 4f2fd9e544..f4ab8a58a2 100644 --- a/src/modules/rewards/components/RewardsTabs.tsx +++ b/src/modules/rewards/components/RewardsTabs.tsx @@ -4,8 +4,6 @@ import { css } from 'styled-components'; import { rewardsTabsList } from '../Rewards.constants'; -import { useBlocksTheme } from 'blocks/Blocks.hooks'; - import { Box, Text } from 'blocks'; import { RewardsTabs as RewardsTabsType } from '../Rewards.types'; @@ -16,39 +14,41 @@ export type RewardsTabsProps = { }; const RewardsTabs: FC = ({ activeTab, handleSetActiveTab }) => { - const { mode } = useBlocksTheme(); + // TODO: Use tab component return ( {rewardsTabsList.map((tab) => ( handleSetActiveTab(tab.value)} css={css` margin-bottom: -1px; - border-bottom: ${tab.value === activeTab ? '2px solid var(--pink-400)' : '0px'}; + border-bottom: ${tab.value === activeTab ? 'var(--border-md) solid var(--stroke-brand-medium)' : '0px'}; `} > {tab.label} {tab.label} diff --git a/src/modules/rewards/components/RewardsTabsContainer.tsx b/src/modules/rewards/components/RewardsTabsContainer.tsx index b0cc3bcdea..a7bd796a9f 100644 --- a/src/modules/rewards/components/RewardsTabsContainer.tsx +++ b/src/modules/rewards/components/RewardsTabsContainer.tsx @@ -16,17 +16,16 @@ export type RewardsTabsContainerProps = { const RewardsTabsContainer: FC = ({ activeTab, handleSetActiveTab }) => { return ( {userDetails && userDetails?.totalPoints > 0 ? userDetails?.totalPoints?.toLocaleString() : ''} {userDetails && userDetails?.totalPoints > 0 ? userDetails?.totalPoints?.toLocaleString() : ''} @@ -237,7 +237,7 @@ function Header({ isDarkMode, darkModeToggle }) { {headerTag && !error && !isSnapPage && ( From 3e4de9cbb2ad0ec9968ce481f26773de8f9cad31 Mon Sep 17 00:00:00 2001 From: Abhishek <77395788+abhishek-01k@users.noreply.github.com> Date: Fri, 19 Jul 2024 19:30:47 +0530 Subject: [PATCH 23/34] Removed Signing Push User from yield Farming V1 (#1760) --- src/components/yield/YieldPoolCard.tsx | 38 ++++++++++++-------------- 1 file changed, 17 insertions(+), 21 deletions(-) diff --git a/src/components/yield/YieldPoolCard.tsx b/src/components/yield/YieldPoolCard.tsx index d36fae1eea..e8b2df8154 100644 --- a/src/components/yield/YieldPoolCard.tsx +++ b/src/components/yield/YieldPoolCard.tsx @@ -5,7 +5,6 @@ import { ethers } from 'ethers'; // External Packages import styled, { useTheme } from 'styled-components'; import { MdCheckCircle, MdError } from 'react-icons/md'; -import { useSelector } from 'react-redux'; // Internal Compoonents import useToast from 'hooks/useToast'; @@ -26,7 +25,6 @@ import { SkeletonLine, SpanV2, } from 'components/reusables/SharedStylingV2'; -import { AppContext } from 'contexts/AppContext'; // Internal Configs import { abis, addresses } from 'config/index.js'; @@ -41,7 +39,8 @@ const YieldPoolCard = ({ tokenAddress, setActiveTab, }: any) => { - const { account, provider, wallet } = useAccount(); + const { account, provider, wallet, isWalletConnected, connect } = useAccount(); + const [txInProgressWithdraw, setTxInProgressWithdraw] = useState(false); const [txInProgressClaimRewards, setTxInProgressClaimRewards] = useState(false); @@ -52,11 +51,6 @@ const YieldPoolCard = ({ const [unstakeErrorMessage, setUnstakeErrorMessage] = useState(null); const [withdrawErrorMessage, setWithdrawErrorMessage] = useState(null); - const { userPushSDKInstance } = useSelector((state: any) => { - return state.user; - }); - const { handleConnectWalletAndEnableProfile } = useContext(AppContext); - const [filled, setFilled] = useState(0); const yieldFarmToast = useToast(); @@ -64,8 +58,8 @@ const YieldPoolCard = ({ const theme = useTheme(); const massClaimRewardsTokensAll = async () => { - if (!userPushSDKInstance.signer) { - handleConnectWalletAndEnableProfile({ wallet }); + if (!isWalletConnected) { + connect(); return; } @@ -152,11 +146,13 @@ const YieldPoolCard = ({ }; const withdrawTokens = async () => { - if (!userPushSDKInstance.signer) { - handleConnectWalletAndEnableProfile({ wallet }); + + if (!isWalletConnected) { + connect(); return; } + if (txInProgressWithdraw) { return; } @@ -218,7 +214,7 @@ const YieldPoolCard = ({ }).catch((err) => { yieldFarmToast.showMessageToast({ toastTitle: 'Error', - toastMessage: `Transaction Cancelled!`, + toastMessage: `Transaction Cancelled! ${err.message}`, toastType: 'ERROR', getToastIcon: (size) => ( { - if (!userPushSDKInstance.signer) { - handleConnectWalletAndEnableProfile({ wallet }); + if (!isWalletConnected) { + connect(); return; } @@ -456,8 +452,8 @@ const YieldPoolCard = ({ }; const depositLpToken = async (tx, withdrawAmount, totalTxnSteps) => { - if (!userPushSDKInstance.signer) { - handleConnectWalletAndEnableProfile({ wallet }); + if (!isWalletConnected) { + connect(); return; } @@ -509,8 +505,8 @@ const YieldPoolCard = ({ }; const depositPushToken = async (tx, withdrawAmount, totalTxnSteps) => { - if (!userPushSDKInstance.signer) { - handleConnectWalletAndEnableProfile({ wallet }); + if (!isWalletConnected) { + connect(); return; } @@ -613,7 +609,7 @@ const YieldPoolCard = ({ {PoolStats ? ( <> @@ -650,7 +646,7 @@ const YieldPoolCard = ({ {PoolStats ? ( <> From 3db06dfcefa912bfcdc34d9648255b2dc6aa54d0 Mon Sep 17 00:00:00 2001 From: Kolade Date: Tue, 23 Jul 2024 07:06:35 +0100 Subject: [PATCH 24/34] comment out base changes (#1762) --- src/components/Faucets.tsx | 15 ++++----- src/components/VerifyAlias.tsx | 9 +++--- src/config/config-dev.js | 18 ++++++----- src/config/config-prod.js | 18 ++++++----- src/config/config-staging.js | 18 ++++++----- src/connectors/chains.ts | 26 ++++++++-------- src/helpers/CaipHelper.ts | 5 ++- src/helpers/UtilityHelper.ts | 52 +++++++++++++++++--------------- src/hooks/useInactiveListener.ts | 4 +-- 9 files changed, 91 insertions(+), 74 deletions(-) diff --git a/src/components/Faucets.tsx b/src/components/Faucets.tsx index b4670d35dc..af9e49d396 100644 --- a/src/components/Faucets.tsx +++ b/src/components/Faucets.tsx @@ -88,13 +88,14 @@ const Faucets = () => { function: () => {}, link: 'https://cyber-testnet.testnets.rollbridge.app/', }, - { - id: '84532', - value: 'Base Sepolia', - title: 'Base Sepolia Faucet', - function: () => {}, - link: 'https://www.alchemy.com/faucets/base-sepolia', - }, + // comment base + // { + // id: '84532', + // value: 'Base Sepolia', + // title: 'Base Sepolia Faucet', + // function: () => {}, + // link: 'https://www.alchemy.com/faucets/base-sepolia', + // }, ]; // render diff --git a/src/components/VerifyAlias.tsx b/src/components/VerifyAlias.tsx index e4bf974646..852d01a085 100644 --- a/src/components/VerifyAlias.tsx +++ b/src/components/VerifyAlias.tsx @@ -70,10 +70,11 @@ const VerifyAlias = ({ aliasEthAccount, setAliasVerified }) => { label: 'Cyber ETH', url: 'https://cyber-testnet.testnets.rollbridge.app/', }, - 84532: { - label: 'Base Sepolia', - url: 'https://www.alchemy.com/faucets/base-sepolia', - }, + // comment base + // 84532: { + // label: 'Base Sepolia', + // url: 'https://www.alchemy.com/faucets/base-sepolia', + // }, }; const checkAlias = async () => { diff --git a/src/config/config-dev.js b/src/config/config-dev.js index dd655d20c2..bd301d5395 100644 --- a/src/config/config-dev.js +++ b/src/config/config-dev.js @@ -32,7 +32,8 @@ export const config = { 421614, // arbitrum testnet 123, // fuse testnet 111557560, // Cyber testnet - 84532, //base sepolia + // comment base + // 84532, //base sepolia ], /** @@ -183,11 +184,12 @@ export const CHAIN_DETAILS = { rpcUrl: 'https://cyber-testnet.alt.technology/', commAddress: '0x9cb3bd7550B5c92baA056Fc0F08132f49508145F', }, - 84532: { - label: 'Base Sepolia', - name: 'BASE_TESTNET', - chainid: 84532, - rpcUrl: 'https://sepolia.base.org/', - commAddress: '0x9cb3bd7550B5c92baA056Fc0F08132f49508145F', - }, + // comment base + // 84532: { + // label: 'Base Sepolia', + // name: 'BASE_TESTNET', + // chainid: 84532, + // rpcUrl: 'https://sepolia.base.org/', + // commAddress: '0x9cb3bd7550B5c92baA056Fc0F08132f49508145F', + // }, }; diff --git a/src/config/config-prod.js b/src/config/config-prod.js index ef744b5776..3f88ffd085 100644 --- a/src/config/config-prod.js +++ b/src/config/config-prod.js @@ -31,7 +31,8 @@ export const config = { 1101, // polygon zkevm mainnet 122, // fuse mainnet 7560, // Cyber mainnet - 8453, //base mainnet + // comment base + // 8453, //base ma innet ], /** @@ -176,11 +177,12 @@ export const CHAIN_DETAILS = { rpcUrl: 'https://cyber.alt.technology/', commAddress: '0xb3971BCef2D791bc4027BbfedFb47319A4AAaaAa', }, - 8453: { - label: 'Base Mainnet', - name: 'BASE_MAINNET', - chainid: 8453, - rpcUrl: 'https://mainnet.base.org/', - commAddress: '0xb3971BCef2D791bc4027BbfedFb47319A4AAaaAa', - }, + // comment base + // 8453: { + // label: 'Base Mainnet', + // name: 'BASE_MAINNET', + // chainid: 8453, + // rpcUrl: 'https://mainnet.base.org/', + // commAddress: '0xb3971BCef2D791bc4027BbfedFb47319A4AAaaAa', + // }, }; diff --git a/src/config/config-staging.js b/src/config/config-staging.js index 2cc4e92893..8047c3a67e 100644 --- a/src/config/config-staging.js +++ b/src/config/config-staging.js @@ -33,7 +33,8 @@ export const config = { 421614, // arbitrum testnet 123, // fuse testnet 111557560, // Cyber testnet - 84532, //base sepolia + // comment base + // 84532, //base sepolia ], /** @@ -180,11 +181,12 @@ export const CHAIN_DETAILS = { rpcUrl: 'https://cyber-testnet.alt.technology/', commAddress: '0x6e489B7af21cEb969f49A90E481274966ce9D74d', }, - 84532: { - label: 'Base Sepolia', - name: 'BASE_TESTNET', - chainid: 84532, - rpcUrl: 'https://sepolia.base.org/', - commAddress: '0x6e489B7af21cEb969f49A90E481274966ce9D74d', - }, + // comment base + // 84532: { + // label: 'Base Sepolia', + // name: 'BASE_TESTNET', + // chainid: 84532, + // rpcUrl: 'https://sepolia.base.org/', + // commAddress: '0x6e489B7af21cEb969f49A90E481274966ce9D74d', + // }, }; diff --git a/src/connectors/chains.ts b/src/connectors/chains.ts index 7f55ab2b43..fa0b0ba049 100644 --- a/src/connectors/chains.ts +++ b/src/connectors/chains.ts @@ -130,12 +130,13 @@ export const MAINNET_CHAINS: ChainConfig = { nativeCurrency: ETH, blockExplorerUrls: ['https://cyberscan.co/'], }, - 8453: { - name: 'Base Mainnet', - urls: ['https://mainnet.base.org/'], - nativeCurrency: ETH, - blockExplorerUrls: ['https://basescan.org/'], - }, + // comment base + // 8453: { + // name: 'Base Mainnet', + // urls: ['https://mainnet.base.org/'], + // nativeCurrency: ETH, + // blockExplorerUrls: ['https://basescan.org/'], + // }, }; export const TESTNET_CHAINS: ChainConfig = { @@ -198,12 +199,13 @@ export const TESTNET_CHAINS: ChainConfig = { nativeCurrency: ETH, blockExplorerUrls: ['https://testnet.cyberscan.co/'], }, - 84532: { - name: 'Base Sepolia', - urls: ['https://sepolia.base.org/'], - nativeCurrency: ETH, - blockExplorerUrls: ['https://sepolia-explorer.base.org/'], - }, + // comment base + // 84532: { + // name: 'Base Sepolia', + // urls: ['https://sepolia.base.org/'], + // nativeCurrency: ETH, + // blockExplorerUrls: ['https://sepolia-explorer.base.org/'], + // }, }; export const CHAINS: ChainConfig = { diff --git a/src/helpers/CaipHelper.ts b/src/helpers/CaipHelper.ts index 2762d75abf..3bbf5d1f27 100644 --- a/src/helpers/CaipHelper.ts +++ b/src/helpers/CaipHelper.ts @@ -2,9 +2,12 @@ import { appConfig } from '../config/index.js'; export const Eip155EnabledIds: Array = [ - 1, 56, 137, 10, 1101, 42161, 11155111, 97, 80002, 11155420, 2442, 421614, 122, 123, 111557560, 7560, 84532, 8453, + 1, 56, 137, 10, 1101, 42161, 11155111, 97, 80002, 11155420, 2442, 421614, 122, 123, 111557560, 7560, ]; +// comment base +// 84532, 8453, + // Types type CAIPProps = { chainId: number; diff --git a/src/helpers/UtilityHelper.ts b/src/helpers/UtilityHelper.ts index 246356be92..2eed133f32 100644 --- a/src/helpers/UtilityHelper.ts +++ b/src/helpers/UtilityHelper.ts @@ -19,8 +19,7 @@ const UtilityHelper = { chainId === 10 || chainId === 42161 || chainId === 122 || - chainId === 7560 || - chainId === 8453 + chainId === 7560 ) { return true; } @@ -63,8 +62,9 @@ export const MaskedAliasChannels: { 123: {}, 111557560: {}, 7560: {}, - 8453: {}, - 84532: {}, + // comment base + // 8453: {}, + // 84532: {}, }; export const findObject = (data: any, parentArray: any[], property: string): boolean => { @@ -129,8 +129,9 @@ export const networkName = { 123: 'Fuse Testnet', 111557560: 'Cyber Testnet', 7560: 'Cyber Mainnet', - 8453: 'Base Mainnet', - 84532: 'Base Sepolia', + // comment base + // 8453: 'Base Mainnet', + // 84532: 'Base Sepolia', }; export const chainNameBackendStandard = { @@ -156,8 +157,9 @@ export const aliasChainIdToChainName = { 123: 'FUSE', 111557560: 'CYBERCONNECT', 7560: 'CYBERCONNECT', - 8453: 'BASE', - 84532: 'BASE', + // comment base + // 8453: 'BASE', + // 84532: 'BASE', }; export const aliasChainIdsMapping = { @@ -266,20 +268,21 @@ export const NETWORK_DETAILS = { rpcUrls: ['https://cyber.alt.technology/'], blockExplorerUrls: [' https://.cyberscan.co/'], }, - BASE_TESTNET: { - chainId: utils.hexValue(84532), - chainName: 'Base Testnet', - nativeCurrency: { name: 'ETH', symbol: 'ETH', decimals: 18 }, - rpcUrls: ['https://sepolia.base.org/'], - blockExplorerUrls: ['https://sepolia-explorer.base.org/'], - }, - BASE_MAINNET: { - chainId: utils.hexValue(8453), - chainName: 'Base Mainnet', - nativeCurrency: { name: 'ETH', symbol: 'ETH', decimals: 18 }, - rpcUrls: ['https://mainnet.base.org/'], - blockExplorerUrls: ['https://basescan.org/'], - }, + // comment base + // BASE_TESTNET: { + // chainId: utils.hexValue(84532), + // chainName: 'Base Testnet', + // nativeCurrency: { name: 'ETH', symbol: 'ETH', decimals: 18 }, + // rpcUrls: ['https://sepolia.base.org/'], + // blockExplorerUrls: ['https://sepolia-explorer.base.org/'], + // }, + // BASE_MAINNET: { + // chainId: utils.hexValue(8453), + // chainName: 'Base Mainnet', + // nativeCurrency: { name: 'ETH', symbol: 'ETH', decimals: 18 }, + // rpcUrls: ['https://mainnet.base.org/'], + // blockExplorerUrls: ['https://basescan.org/'], + // }, }; export const CORE_CHAIN_ID: number = appConfig.coreContractChain; @@ -304,8 +307,9 @@ export const LOGO_FROM_CHAIN_ID: { 123: 'Fuse.svg', 111557560: 'Cyber.svg', 7560: 'Cyber.svg', - 8453: 'Base.svg', - 84532: 'Base.svg', + // comment base + // 8453: 'Base.svg', + // 84532: 'Base.svg', }; export type getAliasResponseType = { diff --git a/src/hooks/useInactiveListener.ts b/src/hooks/useInactiveListener.ts index d351042ca2..f6f7b110cc 100644 --- a/src/hooks/useInactiveListener.ts +++ b/src/hooks/useInactiveListener.ts @@ -16,9 +16,9 @@ export function useInactiveListener() { if (appConfig.coreContractChain === 42) return 'Unsupported Network, please connect to the Ethereum Kovan network or Polygon Amoy network'; else if (appConfig.coreContractChain === 11155111) - return 'Unsupported Network, please connect to the Ethereum Sepolia, Polygon Amoy, BNB testnet, Optimism Sepolia, Arbitrum Sepolia, Base Sepolia or Polygon zkEVM testnet'; + return 'Unsupported Network, please connect to the Ethereum Sepolia, Polygon Amoy, BNB testnet, Optimism Sepolia, Arbitrum Sepolia or Polygon zkEVM testnet'; else - return 'Unsupported Network, please connect to the Ethereum, Polygon, BNB, Optimism, Arbitrum, Base or Polygon zkEVM Mainnet'; + return 'Unsupported Network, please connect to the Ethereum, Polygon, BNB, Optimism, Arbitrum or Polygon zkEVM Mainnet'; }; useEffect(() => { From 43612a638f6f3b3c1dd2938bc1bc9c90d320c39f Mon Sep 17 00:00:00 2001 From: Kolade Date: Wed, 24 Jul 2024 10:47:27 +0100 Subject: [PATCH 25/34] UserPushSDKInstance returns null randomly on dapp (#1763) * add ref * update useeffect * use usestate --- src/App.tsx | 15 +- yarn.lock | 1068 +++++++++++++++++++++++++++------------------------ 2 files changed, 571 insertions(+), 512 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index 1de8e6ec04..e582479e46 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,5 +1,5 @@ // React + Web3 Essentials -import { FC, useContext, useEffect, useMemo, useState } from 'react'; +import { FC, useContext, useEffect, useMemo, useRef, useState } from 'react'; // External Packages import * as dotenv from 'dotenv'; @@ -196,6 +196,7 @@ export default function App() { const { pgpPvtKey } = useContext(AppContext); const { sidebarCollapsed, setSidebarCollapsed } = useContext(GlobalContext); + const [hasMounted, setHasMounted] = useState(false); const updateOnboardTheme = useUpdateTheme(); const { userPushSDKInstance } = useSelector((state: any) => { @@ -218,14 +219,22 @@ export default function App() { setcurrentTime(now); }, []); - useEffect(() => { - if (!account) return; + const resetState = () => { dispatch(resetSpamSlice()); dispatch(resetNotificationsSlice()); dispatch(resetCanSendSlice()); dispatch(resetChannelCreationSlice()); dispatch(resetAdminSlice()); dispatch(resetUserSlice()); + }; + + useEffect(() => { + if (!hasMounted) { + // do componentDidMount logic + setHasMounted(true); + if (!account) return; + resetState(); + } }, [account]); // Initialize Theme diff --git a/yarn.lock b/yarn.lock index 1f71c8a44b..72e8c92697 100644 --- a/yarn.lock +++ b/yarn.lock @@ -698,22 +698,22 @@ __metadata: languageName: node linkType: hard -"@emotion/babel-plugin@npm:^11.11.0": - version: 11.11.0 - resolution: "@emotion/babel-plugin@npm:11.11.0" +"@emotion/babel-plugin@npm:^11.12.0": + version: 11.12.0 + resolution: "@emotion/babel-plugin@npm:11.12.0" dependencies: "@babel/helper-module-imports": "npm:^7.16.7" "@babel/runtime": "npm:^7.18.3" - "@emotion/hash": "npm:^0.9.1" - "@emotion/memoize": "npm:^0.8.1" - "@emotion/serialize": "npm:^1.1.2" + "@emotion/hash": "npm:^0.9.2" + "@emotion/memoize": "npm:^0.9.0" + "@emotion/serialize": "npm:^1.2.0" babel-plugin-macros: "npm:^3.1.0" convert-source-map: "npm:^1.5.0" escape-string-regexp: "npm:^4.0.0" find-root: "npm:^1.1.0" source-map: "npm:^0.5.7" stylis: "npm:4.2.0" - checksum: 10/8de017666838fc06b1a961d7a49b4e6dc0c83dbb064ea33512bae056594f0811a87e3242ef90fa2aa49fc080fab1cc7af536e7aee9398eaca7a1fc020d2dd527 + checksum: 10/fe6f4522ea2b61ef4214dd0b0f3778aad9c18434b47e50ae5091af226526bf305455c313065826a090682520c9462c151d4df62ec128f14671d3125afc05b148 languageName: node linkType: hard @@ -729,16 +729,16 @@ __metadata: languageName: node linkType: hard -"@emotion/cache@npm:^11.11.0": - version: 11.11.0 - resolution: "@emotion/cache@npm:11.11.0" +"@emotion/cache@npm:^11.11.0, @emotion/cache@npm:^11.13.0": + version: 11.13.0 + resolution: "@emotion/cache@npm:11.13.0" dependencies: - "@emotion/memoize": "npm:^0.8.1" - "@emotion/sheet": "npm:^1.2.2" - "@emotion/utils": "npm:^1.2.1" - "@emotion/weak-memoize": "npm:^0.3.1" + "@emotion/memoize": "npm:^0.9.0" + "@emotion/sheet": "npm:^1.4.0" + "@emotion/utils": "npm:^1.4.0" + "@emotion/weak-memoize": "npm:^0.4.0" stylis: "npm:4.2.0" - checksum: 10/ef29756247dafb87168b4ffb76ee60feb06b8a1016323ecb1d3ba8aed3f4300ca10049bedbfe83aa11e0d81e616c328002a9d50020ebb3af6e4f5337a785c1fe + checksum: 10/20a3207600cceb0ddc490fbf6c449c73af1cfe6bea01fcf452d2a00a73fd5d8ce2e7b04ff869289e94fa5c528571618bce48d1dd39820d56de38f1e8de314c5d languageName: node linkType: hard @@ -776,10 +776,10 @@ __metadata: languageName: node linkType: hard -"@emotion/hash@npm:^0.9.1": - version: 0.9.1 - resolution: "@emotion/hash@npm:0.9.1" - checksum: 10/716e17e48bf9047bf9383982c071de49f2615310fb4e986738931776f5a823bc1f29c84501abe0d3df91a3803c80122d24e28b57351bca9e01356ebb33d89876 +"@emotion/hash@npm:^0.9.2": + version: 0.9.2 + resolution: "@emotion/hash@npm:0.9.2" + checksum: 10/379bde2830ccb0328c2617ec009642321c0e009a46aa383dfbe75b679c6aea977ca698c832d225a893901f29d7b3eef0e38cf341f560f6b2b56f1ff23c172387 languageName: node linkType: hard @@ -792,7 +792,7 @@ __metadata: languageName: node linkType: hard -"@emotion/is-prop-valid@npm:1.2.2, @emotion/is-prop-valid@npm:^1.1.0, @emotion/is-prop-valid@npm:^1.2.2": +"@emotion/is-prop-valid@npm:1.2.2": version: 1.2.2 resolution: "@emotion/is-prop-valid@npm:1.2.2" dependencies: @@ -801,6 +801,15 @@ __metadata: languageName: node linkType: hard +"@emotion/is-prop-valid@npm:^1.1.0, @emotion/is-prop-valid@npm:^1.3.0": + version: 1.3.0 + resolution: "@emotion/is-prop-valid@npm:1.3.0" + dependencies: + "@emotion/memoize": "npm:^0.9.0" + checksum: 10/9b395dd9734fa88e24aa5adeef90ba86564d29c85d07a18cd39fbd06fbe597a5008a335a6147088de9f0533dbb3691786c8e10e6eaab5c7d960634833a054005 + languageName: node + linkType: hard + "@emotion/memoize@npm:0.7.4": version: 0.7.4 resolution: "@emotion/memoize@npm:0.7.4" @@ -822,24 +831,31 @@ __metadata: languageName: node linkType: hard +"@emotion/memoize@npm:^0.9.0": + version: 0.9.0 + resolution: "@emotion/memoize@npm:0.9.0" + checksum: 10/038132359397348e378c593a773b1148cd0cf0a2285ffd067a0f63447b945f5278860d9de718f906a74c7c940ba1783ac2ca18f1c06a307b01cc0e3944e783b1 + languageName: node + linkType: hard + "@emotion/react@npm:^11.8.2": - version: 11.11.4 - resolution: "@emotion/react@npm:11.11.4" + version: 11.13.0 + resolution: "@emotion/react@npm:11.13.0" dependencies: "@babel/runtime": "npm:^7.18.3" - "@emotion/babel-plugin": "npm:^11.11.0" - "@emotion/cache": "npm:^11.11.0" - "@emotion/serialize": "npm:^1.1.3" - "@emotion/use-insertion-effect-with-fallbacks": "npm:^1.0.1" - "@emotion/utils": "npm:^1.2.1" - "@emotion/weak-memoize": "npm:^0.3.1" + "@emotion/babel-plugin": "npm:^11.12.0" + "@emotion/cache": "npm:^11.13.0" + "@emotion/serialize": "npm:^1.3.0" + "@emotion/use-insertion-effect-with-fallbacks": "npm:^1.1.0" + "@emotion/utils": "npm:^1.4.0" + "@emotion/weak-memoize": "npm:^0.4.0" hoist-non-react-statics: "npm:^3.3.1" peerDependencies: react: ">=16.8.0" peerDependenciesMeta: "@types/react": optional: true - checksum: 10/e7da3a1ddc1d72a4179010bdfd17423c13b1a77bf83a8b18271e919fd382d08c62dc2313ed5347acfd1ef85bb1bae8932597647a986e8a1ea1462552716cd495 + checksum: 10/3dd2b3ffac51f0fa67ef3cb85d4064fd7ddc1212b587e3b328a1eade47024690175518d63c4cbabf28afa07e29187136b26d646e395158f6574fa6321a0b68f9 languageName: node linkType: hard @@ -856,16 +872,16 @@ __metadata: languageName: node linkType: hard -"@emotion/serialize@npm:^1.1.2, @emotion/serialize@npm:^1.1.3, @emotion/serialize@npm:^1.1.4": - version: 1.1.4 - resolution: "@emotion/serialize@npm:1.1.4" +"@emotion/serialize@npm:^1.2.0, @emotion/serialize@npm:^1.3.0": + version: 1.3.0 + resolution: "@emotion/serialize@npm:1.3.0" dependencies: - "@emotion/hash": "npm:^0.9.1" - "@emotion/memoize": "npm:^0.8.1" - "@emotion/unitless": "npm:^0.8.1" - "@emotion/utils": "npm:^1.2.1" + "@emotion/hash": "npm:^0.9.2" + "@emotion/memoize": "npm:^0.9.0" + "@emotion/unitless": "npm:^0.9.0" + "@emotion/utils": "npm:^1.4.0" csstype: "npm:^3.0.2" - checksum: 10/11fc4f960226778e9a5f86310b739703986d13b2de3e89a16d788126ce312b2c8c174a2947c9bfc80cb124b331c36feeac44193f81150616d94b1ba19a92d70a + checksum: 10/3ab17aa0dabdc77d5d573ef07df63e91e778c0637f4b7f690fde46ab0007496c8dfbf32d2836d3b22ac2ba2d8c58570da51092ba7ff068d4d790147de2352465 languageName: node linkType: hard @@ -876,10 +892,10 @@ __metadata: languageName: node linkType: hard -"@emotion/sheet@npm:^1.2.2": - version: 1.2.2 - resolution: "@emotion/sheet@npm:1.2.2" - checksum: 10/cc46b20ef7273dc28de889927ae1498f854be2890905745fcc3154fbbacaa54df1e28c3d89ff3339c2022782c78933f51955bb950d105d5a219576db1eadfb7a +"@emotion/sheet@npm:^1.4.0": + version: 1.4.0 + resolution: "@emotion/sheet@npm:1.4.0" + checksum: 10/8ac6e9bf6b373a648f26ae7f1c24041038524f4c72f436f4f8c4761c665e58880c3229d8d89b1f7a4815dd8e5b49634d03e60187cb6f93097d7f7c1859e869d5 languageName: node linkType: hard @@ -912,22 +928,22 @@ __metadata: linkType: hard "@emotion/styled@npm:^11.8.1": - version: 11.11.5 - resolution: "@emotion/styled@npm:11.11.5" + version: 11.13.0 + resolution: "@emotion/styled@npm:11.13.0" dependencies: "@babel/runtime": "npm:^7.18.3" - "@emotion/babel-plugin": "npm:^11.11.0" - "@emotion/is-prop-valid": "npm:^1.2.2" - "@emotion/serialize": "npm:^1.1.4" - "@emotion/use-insertion-effect-with-fallbacks": "npm:^1.0.1" - "@emotion/utils": "npm:^1.2.1" + "@emotion/babel-plugin": "npm:^11.12.0" + "@emotion/is-prop-valid": "npm:^1.3.0" + "@emotion/serialize": "npm:^1.3.0" + "@emotion/use-insertion-effect-with-fallbacks": "npm:^1.1.0" + "@emotion/utils": "npm:^1.4.0" peerDependencies: "@emotion/react": ^11.0.0-rc.0 react: ">=16.8.0" peerDependenciesMeta: "@types/react": optional: true - checksum: 10/a936787ef80d73066840391522d88280424de0abb56bec83d17e14bdc5a515e77e343dd171f7caae1405462e3f71815b5480dcc4e1eff5e8ff4a020f5c39341e + checksum: 10/5463a0f15fc12a9e20340f52df49461e948c3ae7e2dd763db0ff937b0b96dd4e82eed85cd15e24621efb3b097a095b88b01d60f50cf6f38fe3ab7db6e77f9615 languageName: node linkType: hard @@ -945,19 +961,26 @@ __metadata: languageName: node linkType: hard -"@emotion/unitless@npm:0.8.1, @emotion/unitless@npm:^0.8.1": +"@emotion/unitless@npm:0.8.1": version: 0.8.1 resolution: "@emotion/unitless@npm:0.8.1" checksum: 10/918f73c46ac0b7161e3c341cc07d651ce87e31ab1695e74b12adb7da6bb98dfbff8c69cf68a4e40d9eb3d820ca055dc1267aeb3007927ce88f98b885bf729b63 languageName: node linkType: hard -"@emotion/use-insertion-effect-with-fallbacks@npm:^1.0.1": - version: 1.0.1 - resolution: "@emotion/use-insertion-effect-with-fallbacks@npm:1.0.1" +"@emotion/unitless@npm:^0.9.0": + version: 0.9.0 + resolution: "@emotion/unitless@npm:0.9.0" + checksum: 10/242754aa2f7368b5c2a5dbe61bf0a2bb0bfb4de091fe2388282f8c014c0796d0ca166b1639cf4f5f0e57e59258b622e7946a2e976ed5a56e06a5a306ca25adca + languageName: node + linkType: hard + +"@emotion/use-insertion-effect-with-fallbacks@npm:^1.1.0": + version: 1.1.0 + resolution: "@emotion/use-insertion-effect-with-fallbacks@npm:1.1.0" peerDependencies: react: ">=16.8.0" - checksum: 10/7d7ead9ba3f615510f550aea67815281ec5a5487de55aafc250f820317afc1fd419bd9e9e27602a0206ec5c152f13dc6130bccad312c1036706c584c65d66ef7 + checksum: 10/33a10f44a873b3f5ccd2a1a3d13c2f34ed628f5a2be1ccf28540a86535a14d3a930afcbef209d48346a22ec60ff48f43c86ee9c846b9480d23a55a17145da66c languageName: node linkType: hard @@ -968,10 +991,10 @@ __metadata: languageName: node linkType: hard -"@emotion/utils@npm:^1.2.1": - version: 1.2.1 - resolution: "@emotion/utils@npm:1.2.1" - checksum: 10/472fa529c64a13edff80aa11698092e8841c1ffb5001c739d84eb9d0fdd6d8e1cd1848669310578ccfa6383b8601132eca54f8749fca40af85d21fdfc9b776c4 +"@emotion/utils@npm:^1.4.0": + version: 1.4.0 + resolution: "@emotion/utils@npm:1.4.0" + checksum: 10/e4cdb51819db01fec21c3e35a1391900c9e7f3ac1e7ecb419c8e408464830cd7ef6e1a116381cbfe3fb1039406fb7ed35f16a1575d502c92bc9f81bc13a3ee5a languageName: node linkType: hard @@ -982,10 +1005,10 @@ __metadata: languageName: node linkType: hard -"@emotion/weak-memoize@npm:^0.3.1": - version: 0.3.1 - resolution: "@emotion/weak-memoize@npm:0.3.1" - checksum: 10/b2be47caa24a8122622ea18cd2d650dbb4f8ad37b636dc41ed420c2e082f7f1e564ecdea68122b546df7f305b159bf5ab9ffee872abd0f052e687428459af594 +"@emotion/weak-memoize@npm:^0.4.0": + version: 0.4.0 + resolution: "@emotion/weak-memoize@npm:0.4.0" + checksum: 10/db5da0e89bd752c78b6bd65a1e56231f0abebe2f71c0bd8fc47dff96408f7065b02e214080f99924f6a3bfe7ee15afc48dad999d76df86b39b16e513f7a94f52 languageName: node linkType: hard @@ -1884,18 +1907,18 @@ __metadata: languageName: node linkType: hard -"@firebase/analytics-compat@npm:0.2.11": - version: 0.2.11 - resolution: "@firebase/analytics-compat@npm:0.2.11" +"@firebase/analytics-compat@npm:0.2.12": + version: 0.2.12 + resolution: "@firebase/analytics-compat@npm:0.2.12" dependencies: - "@firebase/analytics": "npm:0.10.5" + "@firebase/analytics": "npm:0.10.6" "@firebase/analytics-types": "npm:0.8.2" "@firebase/component": "npm:0.6.8" "@firebase/util": "npm:1.9.7" tslib: "npm:^2.1.0" peerDependencies: "@firebase/app-compat": 0.x - checksum: 10/843b9cef7d724ce72c63d9e8eca267abb3a7286d0c6a8de32cd3b66fcb8563fe8ae60bed7c07761aad7ef37fca425e2c2f7535691177ea7d8c184b6037f0b564 + checksum: 10/a3141dfaf24666cee30033b67f7a659f7e9279ee4144bfec2d258d252a8def0d72d73518b03c0425162a5419689287ef125bb8215c17c1fb4d7ca604e254a535 languageName: node linkType: hard @@ -1906,26 +1929,27 @@ __metadata: languageName: node linkType: hard -"@firebase/analytics@npm:0.10.5": - version: 0.10.5 - resolution: "@firebase/analytics@npm:0.10.5" +"@firebase/analytics@npm:0.10.6": + version: 0.10.6 + resolution: "@firebase/analytics@npm:0.10.6" dependencies: "@firebase/component": "npm:0.6.8" "@firebase/installations": "npm:0.6.8" "@firebase/logger": "npm:0.4.2" "@firebase/util": "npm:1.9.7" + safevalues: "npm:0.6.0" tslib: "npm:^2.1.0" peerDependencies: "@firebase/app": 0.x - checksum: 10/fb17b6b5bd2c8b41bc42409a60806fd7504e8c255f9e518a73b3f60dc9b92fdb5a48171a1699980475ca57626bcada1014d34e7829719585813b4a1edea2eb2d + checksum: 10/07d4778ba0566418955223f0cebb1acf91ecc0792f8749ff92df84c1930c94c330f052a20a352cf64eebe44f57afd81a5f8175d8ffacf1f6adec1f2e230c3bc7 languageName: node linkType: hard -"@firebase/app-check-compat@npm:0.3.12": - version: 0.3.12 - resolution: "@firebase/app-check-compat@npm:0.3.12" +"@firebase/app-check-compat@npm:0.3.13": + version: 0.3.13 + resolution: "@firebase/app-check-compat@npm:0.3.13" dependencies: - "@firebase/app-check": "npm:0.8.5" + "@firebase/app-check": "npm:0.8.6" "@firebase/app-check-types": "npm:0.5.2" "@firebase/component": "npm:0.6.8" "@firebase/logger": "npm:0.4.2" @@ -1933,7 +1957,7 @@ __metadata: tslib: "npm:^2.1.0" peerDependencies: "@firebase/app-compat": 0.x - checksum: 10/b4bd4282ee7e3c1d269d1d9ddc97d41fd84fc8c7e76c1f74c034297cef9a11d89002a88e46d96472d4cc61a4f37df7d5882a86ff120738b87c9732e01d2a9e64 + checksum: 10/2228accc13f78a8ee8a5cefad96b394355976ba2893fc603091234aeb03a522c6e5d7ecb44325574e43f79f44d4a3eb135fbc26bea5ea58643e3673316469294 languageName: node linkType: hard @@ -1951,30 +1975,31 @@ __metadata: languageName: node linkType: hard -"@firebase/app-check@npm:0.8.5": - version: 0.8.5 - resolution: "@firebase/app-check@npm:0.8.5" +"@firebase/app-check@npm:0.8.6": + version: 0.8.6 + resolution: "@firebase/app-check@npm:0.8.6" dependencies: "@firebase/component": "npm:0.6.8" "@firebase/logger": "npm:0.4.2" "@firebase/util": "npm:1.9.7" + safevalues: "npm:0.6.0" tslib: "npm:^2.1.0" peerDependencies: "@firebase/app": 0.x - checksum: 10/3d66e8802dde4b6d0e064afcb4571c0d1d84661e5bf0e5dfdf9f6b544bcf5fee3930a5b94fcf4ea8be5f117bcfb9fb9905d4fbe7f887faa5e5eb25ca7cf37042 + checksum: 10/227bca93b8d7f04564a332501da78f9ffb0fdaaaf2fd766217414d6be900c542718d163392a2e10be41be3863ad73a946b43fe5dadb25b8283a151e389ca9ef6 languageName: node linkType: hard -"@firebase/app-compat@npm:0.2.36": - version: 0.2.36 - resolution: "@firebase/app-compat@npm:0.2.36" +"@firebase/app-compat@npm:0.2.37": + version: 0.2.37 + resolution: "@firebase/app-compat@npm:0.2.37" dependencies: - "@firebase/app": "npm:0.10.6" + "@firebase/app": "npm:0.10.7" "@firebase/component": "npm:0.6.8" "@firebase/logger": "npm:0.4.2" "@firebase/util": "npm:1.9.7" tslib: "npm:^2.1.0" - checksum: 10/340e72056d9b420298db6ac0097e019471ff63e70e1b58b2de862ebf1ec83357f683c3a0c7a0364bc703e1fc24e40767ade0532b8b223dfc9503f865040901ca + checksum: 10/f73a5b3b06c480e17d95ca2685b02d4f44bf4a6a772bce06efbfdbf88ee4d489dc0e7fabf0f12172dd68160deedb5415134aab36d3f620892044142a7ec8084b languageName: node linkType: hard @@ -1985,16 +2010,16 @@ __metadata: languageName: node linkType: hard -"@firebase/app@npm:0.10.6": - version: 0.10.6 - resolution: "@firebase/app@npm:0.10.6" +"@firebase/app@npm:0.10.7": + version: 0.10.7 + resolution: "@firebase/app@npm:0.10.7" dependencies: "@firebase/component": "npm:0.6.8" "@firebase/logger": "npm:0.4.2" "@firebase/util": "npm:1.9.7" idb: "npm:7.1.1" tslib: "npm:^2.1.0" - checksum: 10/ac1d79cd62d7f90a481545b6fc0495c08f5611d54b52314f41cd27c4fe47f578a908073ee97c6f8395b88130cde2b7db0bfdf5d5324e750778c9689e1cd3275e + checksum: 10/34680a2b33dfdd1013ded0185edb959142e08ea32269c144495574dcf7c75f5cf7c0f21f38add03e232d75180d36f0a4ce3bd39b2e83fa47fd8905f9fb9f88b2 languageName: node linkType: hard @@ -2413,11 +2438,11 @@ __metadata: linkType: hard "@floating-ui/core@npm:^1.5.3, @floating-ui/core@npm:^1.6.0": - version: 1.6.4 - resolution: "@floating-ui/core@npm:1.6.4" + version: 1.6.5 + resolution: "@floating-ui/core@npm:1.6.5" dependencies: - "@floating-ui/utils": "npm:^0.2.4" - checksum: 10/589430cbff4bac90b9b891e2c94c57dc113d39ac163552f547d9e4c7d21f09997b9d33e82ec717759caee678c47f845f14a3f28df6f029fcfcf3ad803ba4eb7c + "@floating-ui/utils": "npm:^0.2.5" + checksum: 10/946eccfc16d0eea2bb62bd8cee12211a1d2614968d541966ecd9b6d40f66f097391020ce109c8503676c14ec67f304414e5fecff324ac8950121574010c009e9 languageName: node linkType: hard @@ -2432,12 +2457,12 @@ __metadata: linkType: hard "@floating-ui/dom@npm:^1.0.0": - version: 1.6.7 - resolution: "@floating-ui/dom@npm:1.6.7" + version: 1.6.8 + resolution: "@floating-ui/dom@npm:1.6.8" dependencies: "@floating-ui/core": "npm:^1.6.0" - "@floating-ui/utils": "npm:^0.2.4" - checksum: 10/a6a42bfd243c311f6040043808a6549c1db45fa36138b81cb1e615170d61fd2daf4f37accc1df3e0189405d97e3d71b12de39879c9d58ccf181c982b69cf6cf9 + "@floating-ui/utils": "npm:^0.2.5" + checksum: 10/ebfc92b7a08addc1952d497174a197db80278d3701da7d7dedd3e1533daa80b12b7de02c19408de3f951195a3247f2f5c3cc10807071147e3193bbef469e90a5 languageName: node linkType: hard @@ -2453,10 +2478,10 @@ __metadata: languageName: node linkType: hard -"@floating-ui/utils@npm:^0.2.0, @floating-ui/utils@npm:^0.2.4": - version: 0.2.4 - resolution: "@floating-ui/utils@npm:0.2.4" - checksum: 10/7662d7a4ae39c0287e026f666297a3d28c80e588251c8c59ff66938a0aead47d380bbb9018629bd63a98f399c3919ec689d5448a5c48ffc176d545ddef705df1 +"@floating-ui/utils@npm:^0.2.0, @floating-ui/utils@npm:^0.2.5": + version: 0.2.5 + resolution: "@floating-ui/utils@npm:0.2.5" + checksum: 10/08df715c2a3bfa9d757347df0b38c89a3bfa92b0a32ff67d3d713960c2e72c202e22a2b220aacadbde5451ac2bd4c10411a73a8ed3707ded792f0182592eb01f languageName: node linkType: hard @@ -3338,16 +3363,16 @@ __metadata: languageName: node linkType: hard -"@mui/core-downloads-tracker@npm:^5.16.2": - version: 5.16.2 - resolution: "@mui/core-downloads-tracker@npm:5.16.2" - checksum: 10/da87713a710dcfc1b214a3179beb440b1129042549506c25f6df74c0d16f7cc48af9e18b8b5ce2ac72adc141bd18e0a88eb67000dabdc3b8c05231f7279d5384 +"@mui/core-downloads-tracker@npm:^5.16.4": + version: 5.16.4 + resolution: "@mui/core-downloads-tracker@npm:5.16.4" + checksum: 10/e1be17bfcfc5e50d42eff8ca8660469c0e20f70bd5148183e8a8d66da12c420f86e097b68d09561055c2d6e4f93f6650ba65a30522a997da9cd9a08d09a54bbc languageName: node linkType: hard "@mui/icons-material@npm:^5.8.4": - version: 5.16.2 - resolution: "@mui/icons-material@npm:5.16.2" + version: 5.16.4 + resolution: "@mui/icons-material@npm:5.16.4" dependencies: "@babel/runtime": "npm:^7.23.9" peerDependencies: @@ -3357,19 +3382,20 @@ __metadata: peerDependenciesMeta: "@types/react": optional: true - checksum: 10/b08be67822bdb7c005ed139a51cf3dd54d38bfa5f4f83c9032ffeb35d9d532792a5b4793a55eb9559bcb608f43e8a82c894387552cd5504c280d2f4e621d8626 + checksum: 10/6f163af896ad0c60d3c5c539d8a68b407c6bd1203184129a6b72d4b911ff8bc9a92448cfb6aaf5a23f46a810224e172321dfa37089f07a4d04dded4a87546d8e languageName: node linkType: hard "@mui/material@npm:^5.5.0": - version: 5.16.2 - resolution: "@mui/material@npm:5.16.2" + version: 5.16.4 + resolution: "@mui/material@npm:5.16.4" dependencies: "@babel/runtime": "npm:^7.23.9" - "@mui/core-downloads-tracker": "npm:^5.16.2" - "@mui/system": "npm:^5.16.2" + "@mui/core-downloads-tracker": "npm:^5.16.4" + "@mui/system": "npm:^5.16.4" "@mui/types": "npm:^7.2.15" - "@mui/utils": "npm:^5.16.2" + "@mui/utils": "npm:^5.16.4" + "@popperjs/core": "npm:^2.11.8" "@types/react-transition-group": "npm:^4.4.10" clsx: "npm:^2.1.0" csstype: "npm:^3.1.3" @@ -3389,16 +3415,16 @@ __metadata: optional: true "@types/react": optional: true - checksum: 10/4fe16de6af8368ffe8591a5aa22ea71eec3a29f092c61537b33026da6f852ae9f2e4b44c6f9f5e0c2e8891931bcf3c92512e6b11038db2e698cd57da89f8d5e7 + checksum: 10/a7f4b9a54c89265b63afa52fd017781fc180d26bf79cf6b8091a40954485ce427a089cef79e64ed3acda35666ad09aee8423afed7674d957aa2437ac76a65d67 languageName: node linkType: hard -"@mui/private-theming@npm:^5.16.2": - version: 5.16.2 - resolution: "@mui/private-theming@npm:5.16.2" +"@mui/private-theming@npm:^5.16.4": + version: 5.16.4 + resolution: "@mui/private-theming@npm:5.16.4" dependencies: "@babel/runtime": "npm:^7.23.9" - "@mui/utils": "npm:^5.16.2" + "@mui/utils": "npm:^5.16.4" prop-types: "npm:^15.8.1" peerDependencies: "@types/react": ^17.0.0 || ^18.0.0 @@ -3406,13 +3432,13 @@ __metadata: peerDependenciesMeta: "@types/react": optional: true - checksum: 10/87647371ce594803b49b39eb5ae1cf62bd3dc93a8309811826e3edf362a80207e08fcbc363ce715ad7fca1c561158b852504ebd6b3df0dd381a3cb3fa2a943ce + checksum: 10/dec90e407d1f81803e1dd1c094cec99491b35617d3e83bcfa53cbf05ceef84c88106d6bc8a7cfc71b39f9b9b773124eb4bd229364ccccb9b3c8af3bc9db9c70a languageName: node linkType: hard -"@mui/styled-engine@npm:^5.16.2": - version: 5.16.2 - resolution: "@mui/styled-engine@npm:5.16.2" +"@mui/styled-engine@npm:^5.16.4": + version: 5.16.4 + resolution: "@mui/styled-engine@npm:5.16.4" dependencies: "@babel/runtime": "npm:^7.23.9" "@emotion/cache": "npm:^11.11.0" @@ -3427,19 +3453,19 @@ __metadata: optional: true "@emotion/styled": optional: true - checksum: 10/3e700a20542903c80c870b92b0a03170e6a800887cfae1c31892bd1f9c94291981157e8457e4cd82316c1af590b0d6811d111a551f591586bc7b18c88e1b50fd + checksum: 10/56f4c9a2adb6e6793d37635ec095f2303c9c7d48c607a18899c2fa4d2a186fa5dc87d6ced2c9586009b147ac435a9525514fe7d09b0133a44c2d4ab026f1a841 languageName: node linkType: hard -"@mui/system@npm:^5.16.2": - version: 5.16.2 - resolution: "@mui/system@npm:5.16.2" +"@mui/system@npm:^5.16.4": + version: 5.16.4 + resolution: "@mui/system@npm:5.16.4" dependencies: "@babel/runtime": "npm:^7.23.9" - "@mui/private-theming": "npm:^5.16.2" - "@mui/styled-engine": "npm:^5.16.2" + "@mui/private-theming": "npm:^5.16.4" + "@mui/styled-engine": "npm:^5.16.4" "@mui/types": "npm:^7.2.15" - "@mui/utils": "npm:^5.16.2" + "@mui/utils": "npm:^5.16.4" clsx: "npm:^2.1.0" csstype: "npm:^3.1.3" prop-types: "npm:^15.8.1" @@ -3455,7 +3481,7 @@ __metadata: optional: true "@types/react": optional: true - checksum: 10/51a9fce00ca128b4ecebd9ce2999d450f455a4090f8d7031823603e1eddd8e6bed2e69617bf24a7b3923ad2641503b73db3bec7e4754868154b6ac27bee1508c + checksum: 10/f007467adf4d60d16d1b9c9d4c40f41b8871f21905eb412e306cd49fc7f6a1a9c7b74d850f95dda2a8abebb8a16916816e596897ba55793ea97426ff9dbc77b4 languageName: node linkType: hard @@ -3471,9 +3497,9 @@ __metadata: languageName: node linkType: hard -"@mui/utils@npm:^5.16.2": - version: 5.16.2 - resolution: "@mui/utils@npm:5.16.2" +"@mui/utils@npm:^5.16.4": + version: 5.16.4 + resolution: "@mui/utils@npm:5.16.4" dependencies: "@babel/runtime": "npm:^7.23.9" "@types/prop-types": "npm:^15.7.12" @@ -3486,7 +3512,7 @@ __metadata: peerDependenciesMeta: "@types/react": optional: true - checksum: 10/ef67136dc82bb797448ea1ddef5bcab7f8d2d4ab635b8a8ef0cc74ab81a01a0a98c915c3e1f3ec33f64ba5fe43b86f26740dd949432b90bc607e0cf05cdd72f3 + checksum: 10/d29516544dd3fa95757c658cf1b4cd4e3f16615c208ce5b45080b8ce7f993c7e6974a04a64797897c9220eb9582b0f596a13b976df404b1c34398842f4f06a2d languageName: node linkType: hard @@ -3884,7 +3910,7 @@ __metadata: languageName: node linkType: hard -"@popperjs/core@npm:^2.4.4": +"@popperjs/core@npm:^2.11.8, @popperjs/core@npm:^2.4.4": version: 2.11.8 resolution: "@popperjs/core@npm:2.11.8" checksum: 10/ddd16090cde777aaf102940f05d0274602079a95ad9805bd20bc55dcc7c3a2ba1b99dd5c73e5cc2753c3d31250ca52a67d58059459d7d27debb983a9f552936c @@ -5160,125 +5186,133 @@ __metadata: languageName: node linkType: hard -"@react-spring/animated@npm:~9.7.3": - version: 9.7.3 - resolution: "@react-spring/animated@npm:9.7.3" +"@react-spring/animated@npm:~9.7.4": + version: 9.7.4 + resolution: "@react-spring/animated@npm:9.7.4" dependencies: - "@react-spring/shared": "npm:~9.7.3" - "@react-spring/types": "npm:~9.7.3" + "@react-spring/shared": "npm:~9.7.4" + "@react-spring/types": "npm:~9.7.4" peerDependencies: react: ^16.8.0 || ^17.0.0 || ^18.0.0 - checksum: 10/75c427e810b05ef508ac81695e3410619bcc8b8b87e232eb6fa05a91155bb6a558b324937fcaacb9b2002fdffb557de97ee5f6f6b226c53f5f356f62559f89a1 + checksum: 10/b7f5f598686bd16765c78c1fc3d2b421d1a79cf6fa65b04b8bb0913630634c135e0d617915dcc8834a0874b63d24f3bc640d1a14741e9b1ed2825456978afd2f languageName: node linkType: hard -"@react-spring/core@npm:~9.7.3": - version: 9.7.3 - resolution: "@react-spring/core@npm:9.7.3" +"@react-spring/core@npm:~9.7.4": + version: 9.7.4 + resolution: "@react-spring/core@npm:9.7.4" dependencies: - "@react-spring/animated": "npm:~9.7.3" - "@react-spring/shared": "npm:~9.7.3" - "@react-spring/types": "npm:~9.7.3" + "@react-spring/animated": "npm:~9.7.4" + "@react-spring/shared": "npm:~9.7.4" + "@react-spring/types": "npm:~9.7.4" peerDependencies: react: ^16.8.0 || ^17.0.0 || ^18.0.0 - checksum: 10/91102271531eae8fc146b8847ae6dbc03ebfbab5816529b9bfdd71e6d922ea07361fcbc57b404de57dac2f719246876f94539c04e2f314b3c767ad33d8d4f984 + checksum: 10/1f30907e94a128c01ff38c807c9bbca2fb61562864279efb29ceef6e6b288722555a3050c9d9e1fa31e1d707619e24de19cda7f44de38da40a63c8fdec7e0fa5 languageName: node linkType: hard -"@react-spring/konva@npm:~9.7.3": - version: 9.7.3 - resolution: "@react-spring/konva@npm:9.7.3" +"@react-spring/konva@npm:~9.7.4": + version: 9.7.4 + resolution: "@react-spring/konva@npm:9.7.4" dependencies: - "@react-spring/animated": "npm:~9.7.3" - "@react-spring/core": "npm:~9.7.3" - "@react-spring/shared": "npm:~9.7.3" - "@react-spring/types": "npm:~9.7.3" + "@react-spring/animated": "npm:~9.7.4" + "@react-spring/core": "npm:~9.7.4" + "@react-spring/shared": "npm:~9.7.4" + "@react-spring/types": "npm:~9.7.4" peerDependencies: konva: ">=2.6" react: ^16.8.0 || ^17.0.0 || ^18.0.0 react-konva: ^16.8.0 || ^16.8.7-0 || ^16.9.0-0 || ^16.10.1-0 || ^16.12.0-0 || ^16.13.0-0 || ^17.0.0-0 || ^17.0.1-0 || ^17.0.2-0 || ^18.0.0-0 - checksum: 10/e6cc925fb74abfeea6247bd92232d764f671b51cf2aa0b7dd09eb134bf24230b968bc9f9bb0cf63bedaedf95d85fc5a0eb79b757213fa9e7cabf0d2dee4e82b1 + checksum: 10/92c01dd7287aab01228cc01756ef89024052a35d4c8b310211451f4d1bc8f6d0308b0ea6b9aa5fe89603c98b81f26d60c0e60adf097e355a235fe707e391813f languageName: node linkType: hard -"@react-spring/native@npm:~9.7.3": - version: 9.7.3 - resolution: "@react-spring/native@npm:9.7.3" +"@react-spring/native@npm:~9.7.4": + version: 9.7.4 + resolution: "@react-spring/native@npm:9.7.4" dependencies: - "@react-spring/animated": "npm:~9.7.3" - "@react-spring/core": "npm:~9.7.3" - "@react-spring/shared": "npm:~9.7.3" - "@react-spring/types": "npm:~9.7.3" + "@react-spring/animated": "npm:~9.7.4" + "@react-spring/core": "npm:~9.7.4" + "@react-spring/shared": "npm:~9.7.4" + "@react-spring/types": "npm:~9.7.4" peerDependencies: - react: ^16.8.0 || >=17.0.0 || >=18.0.0 + react: 16.8.0 || >=17.0.0 || >=18.0.0 react-native: ">=0.58" - checksum: 10/df78b2f660aa30166f0fdd860b958df0d53ad4ad229b7f5357d3cd7945351e79b0a722761c9e2a482a15856021bebf458cd0a815860bbe1b8d64e72051c87c23 + checksum: 10/a1bc63a127dc07ace266e03fb6a5acac806c4744a88e8f7a325e5b6f7cbb21bc0a92e5d2e5a11d8fce9a1a28c39c9a1421cdae603b10c2ce6cae6691e7c9d4ee + languageName: node + linkType: hard + +"@react-spring/rafz@npm:~9.7.4": + version: 9.7.4 + resolution: "@react-spring/rafz@npm:9.7.4" + checksum: 10/57a36e6d6bb4743214de70c8a36924e0753bd48a4c320a9cd47d4fb5f7591e88e3ac4ad635e38c9733a449fe97e51aa88fb1acbe39b5b931a06c8c448fa30930 languageName: node linkType: hard -"@react-spring/shared@npm:~9.7.3": - version: 9.7.3 - resolution: "@react-spring/shared@npm:9.7.3" +"@react-spring/shared@npm:~9.7.4": + version: 9.7.4 + resolution: "@react-spring/shared@npm:9.7.4" dependencies: - "@react-spring/types": "npm:~9.7.3" + "@react-spring/rafz": "npm:~9.7.4" + "@react-spring/types": "npm:~9.7.4" peerDependencies: react: ^16.8.0 || ^17.0.0 || ^18.0.0 - checksum: 10/76e44fe8ad63c83861a8453e26d085c69a40f0e5865ca2af7d2fecacb030e59ebe6db5f8e7ef8b1a6b6e193cc3c1c6fd3d5172b10bf216b205844e6d3e90e860 + checksum: 10/c011371e8437905234e27c0811f06064021ed8f59424018835c507dec07ff22c770ab2674302743e30542ad4d8788fa1b81b9b40e094fc3ccd434323e6140907 languageName: node linkType: hard -"@react-spring/three@npm:~9.7.3": - version: 9.7.3 - resolution: "@react-spring/three@npm:9.7.3" +"@react-spring/three@npm:~9.7.4": + version: 9.7.4 + resolution: "@react-spring/three@npm:9.7.4" dependencies: - "@react-spring/animated": "npm:~9.7.3" - "@react-spring/core": "npm:~9.7.3" - "@react-spring/shared": "npm:~9.7.3" - "@react-spring/types": "npm:~9.7.3" + "@react-spring/animated": "npm:~9.7.4" + "@react-spring/core": "npm:~9.7.4" + "@react-spring/shared": "npm:~9.7.4" + "@react-spring/types": "npm:~9.7.4" peerDependencies: "@react-three/fiber": ">=6.0" react: ^16.8.0 || ^17.0.0 || ^18.0.0 three: ">=0.126" - checksum: 10/7fde4d5cea2ad7b4e15089c0464799b857662a5a97537fc85f82ee7777f187945f32cf70c4609111a4557e46dbe475d1328325841a8825c0f5ded21ea49d7599 + checksum: 10/56b7ecf70ea799b8e069df2bea86b809b2f8e613f4f4aa35c2f02f0da8aba5f62332573d71cac5e63a4ca57a643237aa12dabd2af54df2c27cbd0a82bfea538f languageName: node linkType: hard -"@react-spring/types@npm:~9.7.3": - version: 9.7.3 - resolution: "@react-spring/types@npm:9.7.3" - checksum: 10/fcaf5fe02ae3e56a07f340dd5a0a17e9c283ff7deab8b6549ff513ef2f5ad57e0218d448b5331e422cfa739b40f0de3511e7b3f3e73ae8690496cda5bb984854 +"@react-spring/types@npm:~9.7.4": + version: 9.7.4 + resolution: "@react-spring/types@npm:9.7.4" + checksum: 10/25a9a6816a3e0ab4e06f2ac66b68bfd9e2bf844c6ea30133711be85c11693a4e2b74f0ce3c60356848d9096530a748cbe84e556fa342b92ce320f4d8a21e208c languageName: node linkType: hard -"@react-spring/web@npm:~9.7.3": - version: 9.7.3 - resolution: "@react-spring/web@npm:9.7.3" +"@react-spring/web@npm:~9.7.4": + version: 9.7.4 + resolution: "@react-spring/web@npm:9.7.4" dependencies: - "@react-spring/animated": "npm:~9.7.3" - "@react-spring/core": "npm:~9.7.3" - "@react-spring/shared": "npm:~9.7.3" - "@react-spring/types": "npm:~9.7.3" + "@react-spring/animated": "npm:~9.7.4" + "@react-spring/core": "npm:~9.7.4" + "@react-spring/shared": "npm:~9.7.4" + "@react-spring/types": "npm:~9.7.4" peerDependencies: react: ^16.8.0 || ^17.0.0 || ^18.0.0 react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 - checksum: 10/65c71e28ef1197d2afdc053d776b6bd1db6b5558d50849d78c7fc665c3ed1bbd08850fabfceba2223f8660915301aaea18588ebee2429e7b6de99a2640335bbe + checksum: 10/1813c87d92b8d8500cf5e302d2b051aaaa79f25438f79ba4cd8d2ddb17c1667566c88fbff05a5d589f16d0ba74660de1b684de4c6402fdd2f679edace6c7050c languageName: node linkType: hard -"@react-spring/zdog@npm:~9.7.3": - version: 9.7.3 - resolution: "@react-spring/zdog@npm:9.7.3" +"@react-spring/zdog@npm:~9.7.4": + version: 9.7.4 + resolution: "@react-spring/zdog@npm:9.7.4" dependencies: - "@react-spring/animated": "npm:~9.7.3" - "@react-spring/core": "npm:~9.7.3" - "@react-spring/shared": "npm:~9.7.3" - "@react-spring/types": "npm:~9.7.3" + "@react-spring/animated": "npm:~9.7.4" + "@react-spring/core": "npm:~9.7.4" + "@react-spring/shared": "npm:~9.7.4" + "@react-spring/types": "npm:~9.7.4" peerDependencies: react: ^16.8.0 || ^17.0.0 || ^18.0.0 react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 react-zdog: ">=1.0" zdog: ">=1.0" - checksum: 10/26f2f61f7829f2bd394b5688c9a6bf110430c4f6ade45ae52dcc53f95451c4d99a6c6c6c649366a66edbde710777121c97926904c1952224c8d445ab8a3a9f7d + checksum: 10/99397263f1b5cf7fba0a5da25e344c2b115f2fe17afb4874af42ee22b8c1a6d6d64ae8c4fa5152378916c01c16df40252c317c71b157ac8aa84f6b9694644e53 languageName: node linkType: hard @@ -5302,10 +5336,10 @@ __metadata: languageName: node linkType: hard -"@remix-run/router@npm:1.17.1": - version: 1.17.1 - resolution: "@remix-run/router@npm:1.17.1" - checksum: 10/5efc598626cd81688ac26e0abd08204b980831ead8cd2c4b8a27e0c169ee4777fc609fa289c093b93efc3a1e335304698c6961276c2309348444ec7209836c83 +"@remix-run/router@npm:1.18.0": + version: 1.18.0 + resolution: "@remix-run/router@npm:1.18.0" + checksum: 10/f878cf246b94368f431a51363f1d33dc35ad11cb910d930476d988825b024a152de87a7f74f0891c3e7182228f892c7f64f94409aae27084c320338dee82caa1 languageName: node linkType: hard @@ -5353,114 +5387,114 @@ __metadata: languageName: node linkType: hard -"@rollup/rollup-android-arm-eabi@npm:4.18.1": - version: 4.18.1 - resolution: "@rollup/rollup-android-arm-eabi@npm:4.18.1" +"@rollup/rollup-android-arm-eabi@npm:4.19.0": + version: 4.19.0 + resolution: "@rollup/rollup-android-arm-eabi@npm:4.19.0" conditions: os=android & cpu=arm languageName: node linkType: hard -"@rollup/rollup-android-arm64@npm:4.18.1": - version: 4.18.1 - resolution: "@rollup/rollup-android-arm64@npm:4.18.1" +"@rollup/rollup-android-arm64@npm:4.19.0": + version: 4.19.0 + resolution: "@rollup/rollup-android-arm64@npm:4.19.0" conditions: os=android & cpu=arm64 languageName: node linkType: hard -"@rollup/rollup-darwin-arm64@npm:4.18.1": - version: 4.18.1 - resolution: "@rollup/rollup-darwin-arm64@npm:4.18.1" +"@rollup/rollup-darwin-arm64@npm:4.19.0": + version: 4.19.0 + resolution: "@rollup/rollup-darwin-arm64@npm:4.19.0" conditions: os=darwin & cpu=arm64 languageName: node linkType: hard -"@rollup/rollup-darwin-x64@npm:4.18.1": - version: 4.18.1 - resolution: "@rollup/rollup-darwin-x64@npm:4.18.1" +"@rollup/rollup-darwin-x64@npm:4.19.0": + version: 4.19.0 + resolution: "@rollup/rollup-darwin-x64@npm:4.19.0" conditions: os=darwin & cpu=x64 languageName: node linkType: hard -"@rollup/rollup-linux-arm-gnueabihf@npm:4.18.1": - version: 4.18.1 - resolution: "@rollup/rollup-linux-arm-gnueabihf@npm:4.18.1" +"@rollup/rollup-linux-arm-gnueabihf@npm:4.19.0": + version: 4.19.0 + resolution: "@rollup/rollup-linux-arm-gnueabihf@npm:4.19.0" conditions: os=linux & cpu=arm & libc=glibc languageName: node linkType: hard -"@rollup/rollup-linux-arm-musleabihf@npm:4.18.1": - version: 4.18.1 - resolution: "@rollup/rollup-linux-arm-musleabihf@npm:4.18.1" +"@rollup/rollup-linux-arm-musleabihf@npm:4.19.0": + version: 4.19.0 + resolution: "@rollup/rollup-linux-arm-musleabihf@npm:4.19.0" conditions: os=linux & cpu=arm & libc=musl languageName: node linkType: hard -"@rollup/rollup-linux-arm64-gnu@npm:4.18.1": - version: 4.18.1 - resolution: "@rollup/rollup-linux-arm64-gnu@npm:4.18.1" +"@rollup/rollup-linux-arm64-gnu@npm:4.19.0": + version: 4.19.0 + resolution: "@rollup/rollup-linux-arm64-gnu@npm:4.19.0" conditions: os=linux & cpu=arm64 & libc=glibc languageName: node linkType: hard -"@rollup/rollup-linux-arm64-musl@npm:4.18.1": - version: 4.18.1 - resolution: "@rollup/rollup-linux-arm64-musl@npm:4.18.1" +"@rollup/rollup-linux-arm64-musl@npm:4.19.0": + version: 4.19.0 + resolution: "@rollup/rollup-linux-arm64-musl@npm:4.19.0" conditions: os=linux & cpu=arm64 & libc=musl languageName: node linkType: hard -"@rollup/rollup-linux-powerpc64le-gnu@npm:4.18.1": - version: 4.18.1 - resolution: "@rollup/rollup-linux-powerpc64le-gnu@npm:4.18.1" +"@rollup/rollup-linux-powerpc64le-gnu@npm:4.19.0": + version: 4.19.0 + resolution: "@rollup/rollup-linux-powerpc64le-gnu@npm:4.19.0" conditions: os=linux & cpu=ppc64 & libc=glibc languageName: node linkType: hard -"@rollup/rollup-linux-riscv64-gnu@npm:4.18.1": - version: 4.18.1 - resolution: "@rollup/rollup-linux-riscv64-gnu@npm:4.18.1" +"@rollup/rollup-linux-riscv64-gnu@npm:4.19.0": + version: 4.19.0 + resolution: "@rollup/rollup-linux-riscv64-gnu@npm:4.19.0" conditions: os=linux & cpu=riscv64 & libc=glibc languageName: node linkType: hard -"@rollup/rollup-linux-s390x-gnu@npm:4.18.1": - version: 4.18.1 - resolution: "@rollup/rollup-linux-s390x-gnu@npm:4.18.1" +"@rollup/rollup-linux-s390x-gnu@npm:4.19.0": + version: 4.19.0 + resolution: "@rollup/rollup-linux-s390x-gnu@npm:4.19.0" conditions: os=linux & cpu=s390x & libc=glibc languageName: node linkType: hard -"@rollup/rollup-linux-x64-gnu@npm:4.18.1": - version: 4.18.1 - resolution: "@rollup/rollup-linux-x64-gnu@npm:4.18.1" +"@rollup/rollup-linux-x64-gnu@npm:4.19.0": + version: 4.19.0 + resolution: "@rollup/rollup-linux-x64-gnu@npm:4.19.0" conditions: os=linux & cpu=x64 & libc=glibc languageName: node linkType: hard -"@rollup/rollup-linux-x64-musl@npm:4.18.1": - version: 4.18.1 - resolution: "@rollup/rollup-linux-x64-musl@npm:4.18.1" +"@rollup/rollup-linux-x64-musl@npm:4.19.0": + version: 4.19.0 + resolution: "@rollup/rollup-linux-x64-musl@npm:4.19.0" conditions: os=linux & cpu=x64 & libc=musl languageName: node linkType: hard -"@rollup/rollup-win32-arm64-msvc@npm:4.18.1": - version: 4.18.1 - resolution: "@rollup/rollup-win32-arm64-msvc@npm:4.18.1" +"@rollup/rollup-win32-arm64-msvc@npm:4.19.0": + version: 4.19.0 + resolution: "@rollup/rollup-win32-arm64-msvc@npm:4.19.0" conditions: os=win32 & cpu=arm64 languageName: node linkType: hard -"@rollup/rollup-win32-ia32-msvc@npm:4.18.1": - version: 4.18.1 - resolution: "@rollup/rollup-win32-ia32-msvc@npm:4.18.1" +"@rollup/rollup-win32-ia32-msvc@npm:4.19.0": + version: 4.19.0 + resolution: "@rollup/rollup-win32-ia32-msvc@npm:4.19.0" conditions: os=win32 & cpu=ia32 languageName: node linkType: hard -"@rollup/rollup-win32-x64-msvc@npm:4.18.1": - version: 4.18.1 - resolution: "@rollup/rollup-win32-x64-msvc@npm:4.18.1" +"@rollup/rollup-win32-x64-msvc@npm:4.19.0": + version: 4.19.0 + resolution: "@rollup/rollup-win32-x64-msvc@npm:4.19.0" conditions: os=win32 & cpu=x64 languageName: node linkType: hard @@ -6032,90 +6066,90 @@ __metadata: languageName: node linkType: hard -"@swc/core-darwin-arm64@npm:1.6.13": - version: 1.6.13 - resolution: "@swc/core-darwin-arm64@npm:1.6.13" +"@swc/core-darwin-arm64@npm:1.7.0": + version: 1.7.0 + resolution: "@swc/core-darwin-arm64@npm:1.7.0" conditions: os=darwin & cpu=arm64 languageName: node linkType: hard -"@swc/core-darwin-x64@npm:1.6.13": - version: 1.6.13 - resolution: "@swc/core-darwin-x64@npm:1.6.13" +"@swc/core-darwin-x64@npm:1.7.0": + version: 1.7.0 + resolution: "@swc/core-darwin-x64@npm:1.7.0" conditions: os=darwin & cpu=x64 languageName: node linkType: hard -"@swc/core-linux-arm-gnueabihf@npm:1.6.13": - version: 1.6.13 - resolution: "@swc/core-linux-arm-gnueabihf@npm:1.6.13" +"@swc/core-linux-arm-gnueabihf@npm:1.7.0": + version: 1.7.0 + resolution: "@swc/core-linux-arm-gnueabihf@npm:1.7.0" conditions: os=linux & cpu=arm languageName: node linkType: hard -"@swc/core-linux-arm64-gnu@npm:1.6.13": - version: 1.6.13 - resolution: "@swc/core-linux-arm64-gnu@npm:1.6.13" +"@swc/core-linux-arm64-gnu@npm:1.7.0": + version: 1.7.0 + resolution: "@swc/core-linux-arm64-gnu@npm:1.7.0" conditions: os=linux & cpu=arm64 & libc=glibc languageName: node linkType: hard -"@swc/core-linux-arm64-musl@npm:1.6.13": - version: 1.6.13 - resolution: "@swc/core-linux-arm64-musl@npm:1.6.13" +"@swc/core-linux-arm64-musl@npm:1.7.0": + version: 1.7.0 + resolution: "@swc/core-linux-arm64-musl@npm:1.7.0" conditions: os=linux & cpu=arm64 & libc=musl languageName: node linkType: hard -"@swc/core-linux-x64-gnu@npm:1.6.13": - version: 1.6.13 - resolution: "@swc/core-linux-x64-gnu@npm:1.6.13" +"@swc/core-linux-x64-gnu@npm:1.7.0": + version: 1.7.0 + resolution: "@swc/core-linux-x64-gnu@npm:1.7.0" conditions: os=linux & cpu=x64 & libc=glibc languageName: node linkType: hard -"@swc/core-linux-x64-musl@npm:1.6.13": - version: 1.6.13 - resolution: "@swc/core-linux-x64-musl@npm:1.6.13" +"@swc/core-linux-x64-musl@npm:1.7.0": + version: 1.7.0 + resolution: "@swc/core-linux-x64-musl@npm:1.7.0" conditions: os=linux & cpu=x64 & libc=musl languageName: node linkType: hard -"@swc/core-win32-arm64-msvc@npm:1.6.13": - version: 1.6.13 - resolution: "@swc/core-win32-arm64-msvc@npm:1.6.13" +"@swc/core-win32-arm64-msvc@npm:1.7.0": + version: 1.7.0 + resolution: "@swc/core-win32-arm64-msvc@npm:1.7.0" conditions: os=win32 & cpu=arm64 languageName: node linkType: hard -"@swc/core-win32-ia32-msvc@npm:1.6.13": - version: 1.6.13 - resolution: "@swc/core-win32-ia32-msvc@npm:1.6.13" +"@swc/core-win32-ia32-msvc@npm:1.7.0": + version: 1.7.0 + resolution: "@swc/core-win32-ia32-msvc@npm:1.7.0" conditions: os=win32 & cpu=ia32 languageName: node linkType: hard -"@swc/core-win32-x64-msvc@npm:1.6.13": - version: 1.6.13 - resolution: "@swc/core-win32-x64-msvc@npm:1.6.13" +"@swc/core-win32-x64-msvc@npm:1.7.0": + version: 1.7.0 + resolution: "@swc/core-win32-x64-msvc@npm:1.7.0" conditions: os=win32 & cpu=x64 languageName: node linkType: hard -"@swc/core@npm:^1.3.100": - version: 1.6.13 - resolution: "@swc/core@npm:1.6.13" - dependencies: - "@swc/core-darwin-arm64": "npm:1.6.13" - "@swc/core-darwin-x64": "npm:1.6.13" - "@swc/core-linux-arm-gnueabihf": "npm:1.6.13" - "@swc/core-linux-arm64-gnu": "npm:1.6.13" - "@swc/core-linux-arm64-musl": "npm:1.6.13" - "@swc/core-linux-x64-gnu": "npm:1.6.13" - "@swc/core-linux-x64-musl": "npm:1.6.13" - "@swc/core-win32-arm64-msvc": "npm:1.6.13" - "@swc/core-win32-ia32-msvc": "npm:1.6.13" - "@swc/core-win32-x64-msvc": "npm:1.6.13" +"@swc/core@npm:^1.7.0": + version: 1.7.0 + resolution: "@swc/core@npm:1.7.0" + dependencies: + "@swc/core-darwin-arm64": "npm:1.7.0" + "@swc/core-darwin-x64": "npm:1.7.0" + "@swc/core-linux-arm-gnueabihf": "npm:1.7.0" + "@swc/core-linux-arm64-gnu": "npm:1.7.0" + "@swc/core-linux-arm64-musl": "npm:1.7.0" + "@swc/core-linux-x64-gnu": "npm:1.7.0" + "@swc/core-linux-x64-musl": "npm:1.7.0" + "@swc/core-win32-arm64-msvc": "npm:1.7.0" + "@swc/core-win32-ia32-msvc": "npm:1.7.0" + "@swc/core-win32-x64-msvc": "npm:1.7.0" "@swc/counter": "npm:^0.1.3" "@swc/types": "npm:^0.1.9" peerDependencies: @@ -6144,7 +6178,7 @@ __metadata: peerDependenciesMeta: "@swc/helpers": optional: true - checksum: 10/ccb9c11d5f2e8371f17fca33f7d702433684013fce685d0db06f0b3a6064db476b1c4378bb8f1e9d12841338fc745a6aed056137443cb370d4238b6f4fc5405c + checksum: 10/01a64b708c066e0fdc7f1dedebde25c273da51758bdb29ecdec1a7e57456f58d6216dfff43a05c7fa917a88d939327f9ae248bc3480ab18bcf4bad8e0bedba42 languageName: node linkType: hard @@ -6156,11 +6190,11 @@ __metadata: linkType: hard "@swc/types@npm:^0.1.9": - version: 0.1.9 - resolution: "@swc/types@npm:0.1.9" + version: 0.1.12 + resolution: "@swc/types@npm:0.1.12" dependencies: "@swc/counter": "npm:^0.1.3" - checksum: 10/c67ee0480b7d71c20764c5d99addebc1aacd4aed218f56143fa946132a93ff3e11bdea913c628ad992acf78c4d1fe69e65bb4fd2b81d8006a2edf94661d2fbce + checksum: 10/92dbbc70cd068ea30fb6fbdc1ae8599d6c058a5d09b2923d6e4e24fab5ad7c86a19dd01f349a8e03e300a9321e06911a24df18303b40e307fbd4109372cef2ef languageName: node linkType: hard @@ -6198,17 +6232,17 @@ __metadata: languageName: node linkType: hard -"@tanstack/query-core@npm:5.51.1": - version: 5.51.1 - resolution: "@tanstack/query-core@npm:5.51.1" - checksum: 10/6f37cc960218d2e49ea392f36e6586ade632e4306a8a1ca4f80940b4b73022e82f8bdd0aa3f9ff6e10a9106bc1d608cbba432fd32eb73295942ed6e20771d48b +"@tanstack/query-core@npm:5.51.9": + version: 5.51.9 + resolution: "@tanstack/query-core@npm:5.51.9" + checksum: 10/263f64a2e9448cc412fa9f29b0b77af1a5eeb66ecba6965548d4be97b7e99cca0dd194992b686426745030240764846d9d7e39e43d3ed64b97afb47f3a9661d7 languageName: node linkType: hard -"@tanstack/query-devtools@npm:5.51.1": - version: 5.51.1 - resolution: "@tanstack/query-devtools@npm:5.51.1" - checksum: 10/660d7ed8072c296d281548db5ff06745750a28c7e1c3153d936733725cd1e8174255f923518e0267b72ce3712895315b11f93b92bede652992e0cc665078e2ef +"@tanstack/query-devtools@npm:5.51.9": + version: 5.51.9 + resolution: "@tanstack/query-devtools@npm:5.51.9" + checksum: 10/ffc19f1a9b16edbb99dc8ef4fb00f6cbc6ac39d0fbdb7976d5b849005d8f1eb80081449bfe379fd1eb8a0aa1a0357b014b822a8f32a9d57644fbb14fb039d8fd languageName: node linkType: hard @@ -6222,14 +6256,14 @@ __metadata: linkType: hard "@tanstack/react-query-devtools@npm:^5.44.0": - version: 5.51.1 - resolution: "@tanstack/react-query-devtools@npm:5.51.1" + version: 5.51.11 + resolution: "@tanstack/react-query-devtools@npm:5.51.11" dependencies: - "@tanstack/query-devtools": "npm:5.51.1" + "@tanstack/query-devtools": "npm:5.51.9" peerDependencies: - "@tanstack/react-query": ^5.51.1 + "@tanstack/react-query": ^5.51.11 react: ^18 || ^19 - checksum: 10/d04383c72e4faa8945ded06e25fb9c9bcef4468a7fc1e76289bccc41ddd5d548a33b1ff264b2470ebc0c4e2c3c753dec2274b227f0207c5300ff7b6ff4bb096d + checksum: 10/2a868370db70ef37ce9185c8d1d01f837ffb15bb3c304ef3eab9261e7de07c67e8a5b09264ffbbd2c650bd33a790f80c3d0be67d528d66cab31718d31081b2d7 languageName: node linkType: hard @@ -6264,13 +6298,13 @@ __metadata: linkType: hard "@tanstack/react-query@npm:^5.44.0": - version: 5.51.1 - resolution: "@tanstack/react-query@npm:5.51.1" + version: 5.51.11 + resolution: "@tanstack/react-query@npm:5.51.11" dependencies: - "@tanstack/query-core": "npm:5.51.1" + "@tanstack/query-core": "npm:5.51.9" peerDependencies: react: ^18.0.0 - checksum: 10/0f97d0b55c4a7017f741da1c451e3d3ff99a9a4de8bb7d76d987c243d5cc1e6fdd649afe9bc9d3c4b4ec2df212c9c77dec8d82b8ad823772637972e98798857e + checksum: 10/e840eb5f90fb6ec1693f98be651c5fa55a2885930015a2bf1f8699def596293eac79df8b3335e31b87af0a189d40597d35986379c930faf3496fc5061861d988 languageName: node linkType: hard @@ -6616,11 +6650,11 @@ __metadata: linkType: hard "@types/node@npm:*, @types/node@npm:>=12.12.47, @types/node@npm:>=13.7.0": - version: 20.14.10 - resolution: "@types/node@npm:20.14.10" + version: 20.14.11 + resolution: "@types/node@npm:20.14.11" dependencies: undici-types: "npm:~5.26.4" - checksum: 10/672892cf94d0d95cf052f11271990686a0fd204cd1e5fe7a4ef240e5315e06711765dc47b9ec98627d3adac18b8c92bb7e2d8db21d18faa20bc3e3203a143e79 + checksum: 10/344e1ce1ed16c86ed1c4209ab4d1de67db83dd6b694a6fabe295c47144dde2c58dabddae9f39a0a2bdd246e95f8d141ccfe848e464884b48b8918df4f7788025 languageName: node linkType: hard @@ -7466,66 +7500,66 @@ __metadata: languageName: node linkType: hard -"@vue/compiler-core@npm:3.4.31": - version: 3.4.31 - resolution: "@vue/compiler-core@npm:3.4.31" +"@vue/compiler-core@npm:3.4.33": + version: 3.4.33 + resolution: "@vue/compiler-core@npm:3.4.33" dependencies: "@babel/parser": "npm:^7.24.7" - "@vue/shared": "npm:3.4.31" + "@vue/shared": "npm:3.4.33" entities: "npm:^4.5.0" estree-walker: "npm:^2.0.2" source-map-js: "npm:^1.2.0" - checksum: 10/1d83dd8c995984a0e7d80faaaa68956bbaadf01bb7cc07f29c5ebcf6aa5eeb2fa88db9d1a4aeb47f8b0b78eda7cc49688108b7fb5ac581eb5584ab59115dc99c + checksum: 10/91580713a537687244891f56671a1db356517088a715d745a68a4021799d4a0ff69de7b265f4f4f4ab82d24f5a08b62a2c0844d8cb557d6936b5fef154d791f1 languageName: node linkType: hard -"@vue/compiler-dom@npm:3.4.31": - version: 3.4.31 - resolution: "@vue/compiler-dom@npm:3.4.31" +"@vue/compiler-dom@npm:3.4.33": + version: 3.4.33 + resolution: "@vue/compiler-dom@npm:3.4.33" dependencies: - "@vue/compiler-core": "npm:3.4.31" - "@vue/shared": "npm:3.4.31" - checksum: 10/5f58557222a8fd9c043e7bf3e00a273691c6e070ac5c87874a628387ece0dec5ed950070d538852264cdb2ecc4d7fb9e7d79d37bf2db05e0474c44e2083c2fbe + "@vue/compiler-core": "npm:3.4.33" + "@vue/shared": "npm:3.4.33" + checksum: 10/3003393487f800c4f2978cc248c285efc9e1f984a7e8f1ff36146bc26a5914c6978e1e8305cf0ee1103c7bae1202259c02a51a0bf069772af5f125724c055cdf languageName: node linkType: hard "@vue/compiler-sfc@npm:^3.4.27": - version: 3.4.31 - resolution: "@vue/compiler-sfc@npm:3.4.31" + version: 3.4.33 + resolution: "@vue/compiler-sfc@npm:3.4.33" dependencies: "@babel/parser": "npm:^7.24.7" - "@vue/compiler-core": "npm:3.4.31" - "@vue/compiler-dom": "npm:3.4.31" - "@vue/compiler-ssr": "npm:3.4.31" - "@vue/shared": "npm:3.4.31" + "@vue/compiler-core": "npm:3.4.33" + "@vue/compiler-dom": "npm:3.4.33" + "@vue/compiler-ssr": "npm:3.4.33" + "@vue/shared": "npm:3.4.33" estree-walker: "npm:^2.0.2" magic-string: "npm:^0.30.10" - postcss: "npm:^8.4.38" + postcss: "npm:^8.4.39" source-map-js: "npm:^1.2.0" - checksum: 10/87dcddecfcfedb01603c08ee66286c7703a0ec76e89e5ba06b18c5309480ff7ffa7ff062585213de00527dd96995720a57f8fec8b6ea9b5851db1c72afa7baee + checksum: 10/af59aca33af931f5f1af4e92cd04c1b87cd722368f617b62bcdd7e8f132db1253f22e003c64e089b8caafd756c190a54d0bf42a2218dc9369b00985302de3914 languageName: node linkType: hard -"@vue/compiler-ssr@npm:3.4.31": - version: 3.4.31 - resolution: "@vue/compiler-ssr@npm:3.4.31" +"@vue/compiler-ssr@npm:3.4.33": + version: 3.4.33 + resolution: "@vue/compiler-ssr@npm:3.4.33" dependencies: - "@vue/compiler-dom": "npm:3.4.31" - "@vue/shared": "npm:3.4.31" - checksum: 10/88470b9cc4b19a541f2c65946db5d60883507ba438dea4538906e7845abba4562ed7f1d277664cdbb5507d6c62fc138c17fd65e9dcfd7a68ce081c6e762df515 + "@vue/compiler-dom": "npm:3.4.33" + "@vue/shared": "npm:3.4.33" + checksum: 10/347a5faac078018dfead2cc04e88ec37d82850815607b6a758a5d497b96f906d8cae69c055feced79b56f7d1615888b5e311a1dace306bdef2cf1a516c3a7e86 languageName: node linkType: hard -"@vue/shared@npm:3.4.31": - version: 3.4.31 - resolution: "@vue/shared@npm:3.4.31" - checksum: 10/ec11ba892b6f6f078fd620e5a2c16d57935f69e7a3dbae20c18e79c70e1bc89fa6d463d5fcbb220f54e9e4122dbc0bb04024059afecd6acf6b182d3c071e3c3a +"@vue/shared@npm:3.4.33": + version: 3.4.33 + resolution: "@vue/shared@npm:3.4.33" + checksum: 10/0cb9f1c4841f3da14ee9bab0a0fb169ddf1a1979b1aa70a4c7b6279e7fc7e5296c7c63f56bbdb1f43e4264aab3d7daa3e2355905caf727cf5f9088f99dd1a8c4 languageName: node linkType: hard -"@walletconnect/core@npm:2.13.3": - version: 2.13.3 - resolution: "@walletconnect/core@npm:2.13.3" +"@walletconnect/core@npm:2.14.0": + version: 2.14.0 + resolution: "@walletconnect/core@npm:2.14.0" dependencies: "@walletconnect/heartbeat": "npm:1.2.2" "@walletconnect/jsonrpc-provider": "npm:1.0.14" @@ -7538,13 +7572,13 @@ __metadata: "@walletconnect/relay-auth": "npm:1.0.4" "@walletconnect/safe-json": "npm:1.0.2" "@walletconnect/time": "npm:1.0.2" - "@walletconnect/types": "npm:2.13.3" - "@walletconnect/utils": "npm:2.13.3" + "@walletconnect/types": "npm:2.14.0" + "@walletconnect/utils": "npm:2.14.0" events: "npm:3.3.0" isomorphic-unfetch: "npm:3.1.0" lodash.isequal: "npm:4.5.0" uint8arrays: "npm:3.1.0" - checksum: 10/176ca2f4e3d66e71e1e4a73fbc9361cd2332e067c0428697def02ed5599ea5be595aa9e26294b56d0668f2976b127440788f83b2698f41f599ba8447b18de07e + checksum: 10/1612c0da3a2f843f0bf65f903e627026cbcfaf4c517a3f2eed1d90ba42d4ab4d97216b1e2ba817417558a095e645f90961326356be9b4be5ad53c524ae2be26f languageName: node linkType: hard @@ -7558,20 +7592,20 @@ __metadata: linkType: hard "@walletconnect/ethereum-provider@npm:^2.10.1, @walletconnect/ethereum-provider@npm:^2.13.0": - version: 2.13.3 - resolution: "@walletconnect/ethereum-provider@npm:2.13.3" + version: 2.14.0 + resolution: "@walletconnect/ethereum-provider@npm:2.14.0" dependencies: "@walletconnect/jsonrpc-http-connection": "npm:1.0.8" "@walletconnect/jsonrpc-provider": "npm:1.0.14" "@walletconnect/jsonrpc-types": "npm:1.0.4" "@walletconnect/jsonrpc-utils": "npm:1.0.8" "@walletconnect/modal": "npm:2.6.2" - "@walletconnect/sign-client": "npm:2.13.3" - "@walletconnect/types": "npm:2.13.3" - "@walletconnect/universal-provider": "npm:2.13.3" - "@walletconnect/utils": "npm:2.13.3" + "@walletconnect/sign-client": "npm:2.14.0" + "@walletconnect/types": "npm:2.14.0" + "@walletconnect/universal-provider": "npm:2.14.0" + "@walletconnect/utils": "npm:2.14.0" events: "npm:3.3.0" - checksum: 10/18b96e572db46957d4f0372ac8608b60e09032b2fc41fffdb8bd0f250b0062e2cb8b0fa349076ffb1e3f6ef9af582ac233f0f7b932d4985439538f042fd57929 + checksum: 10/d2db655603ce2c9bb83000eafd0d77dd8de6879997afcd1a5a70539c05c4863ed08ae637dcb90c208176b19b620545ca365e9f11899cfadc9dbce7ed1fc4d093 languageName: node linkType: hard @@ -7741,20 +7775,20 @@ __metadata: languageName: node linkType: hard -"@walletconnect/sign-client@npm:2.13.3": - version: 2.13.3 - resolution: "@walletconnect/sign-client@npm:2.13.3" +"@walletconnect/sign-client@npm:2.14.0": + version: 2.14.0 + resolution: "@walletconnect/sign-client@npm:2.14.0" dependencies: - "@walletconnect/core": "npm:2.13.3" + "@walletconnect/core": "npm:2.14.0" "@walletconnect/events": "npm:1.0.1" "@walletconnect/heartbeat": "npm:1.2.2" "@walletconnect/jsonrpc-utils": "npm:1.0.8" "@walletconnect/logger": "npm:2.1.2" "@walletconnect/time": "npm:1.0.2" - "@walletconnect/types": "npm:2.13.3" - "@walletconnect/utils": "npm:2.13.3" + "@walletconnect/types": "npm:2.14.0" + "@walletconnect/utils": "npm:2.14.0" events: "npm:3.3.0" - checksum: 10/a48c4ad8457f61746500e23703ef402851bad8ba3277d05ed316c7a6d6ae16277f5c1845ecfd7d4fc9673b311d60cdeaefb2d1f58aa6c13ba04283ffba6e717e + checksum: 10/2e95feae093cace1d8230296f802b62fc267d360850b8c5d5558bdc5b53087ed758f0e3935353a7e10d4b4f3e04bcfb4bf2b3cdbf212d05903ceb4e76f6a67cb languageName: node linkType: hard @@ -7767,9 +7801,9 @@ __metadata: languageName: node linkType: hard -"@walletconnect/types@npm:2.13.3": - version: 2.13.3 - resolution: "@walletconnect/types@npm:2.13.3" +"@walletconnect/types@npm:2.14.0": + version: 2.14.0 + resolution: "@walletconnect/types@npm:2.14.0" dependencies: "@walletconnect/events": "npm:1.0.1" "@walletconnect/heartbeat": "npm:1.2.2" @@ -7777,30 +7811,30 @@ __metadata: "@walletconnect/keyvaluestorage": "npm:1.1.1" "@walletconnect/logger": "npm:2.1.2" events: "npm:3.3.0" - checksum: 10/8fffcbde3f142208cc28868c2eaa2dc03a6f9c5396c0d1af089fc5173e7005b3d8dd6bf1a86e9e2fd721008cc612a7ea31df24d421b3a0eb10ee33bcdd42b6cd + checksum: 10/02ffe6b97eeb7af35cb5234241f170751463ca60852dbff494a9b0bf942a224b4b58500f3ff3cd5074fda2d6bc32a9113ee99fd639bc5d66b7e0b223951e150c languageName: node linkType: hard -"@walletconnect/universal-provider@npm:2.13.3": - version: 2.13.3 - resolution: "@walletconnect/universal-provider@npm:2.13.3" +"@walletconnect/universal-provider@npm:2.14.0": + version: 2.14.0 + resolution: "@walletconnect/universal-provider@npm:2.14.0" dependencies: "@walletconnect/jsonrpc-http-connection": "npm:1.0.8" "@walletconnect/jsonrpc-provider": "npm:1.0.14" "@walletconnect/jsonrpc-types": "npm:1.0.4" "@walletconnect/jsonrpc-utils": "npm:1.0.8" "@walletconnect/logger": "npm:2.1.2" - "@walletconnect/sign-client": "npm:2.13.3" - "@walletconnect/types": "npm:2.13.3" - "@walletconnect/utils": "npm:2.13.3" + "@walletconnect/sign-client": "npm:2.14.0" + "@walletconnect/types": "npm:2.14.0" + "@walletconnect/utils": "npm:2.14.0" events: "npm:3.3.0" - checksum: 10/fa4dd53bb304fd3694db3b9e42def1fb06327d62d0d4e3ab7cd2123e4411caedf490ee38bd75cc66a1e91f5cb10855bc87f89a2016fb3325d41c0d7259e29869 + checksum: 10/f72702acc797e7fe7bef1fbe31004050e149536c8b5b1071390edd247e1324334cf002ad82815febf8586393008cf84b341f2d6ff3d137af4bad2f2c82ba0fe8 languageName: node linkType: hard -"@walletconnect/utils@npm:2.13.3": - version: 2.13.3 - resolution: "@walletconnect/utils@npm:2.13.3" +"@walletconnect/utils@npm:2.14.0": + version: 2.14.0 + resolution: "@walletconnect/utils@npm:2.14.0" dependencies: "@stablelib/chacha20poly1305": "npm:1.0.1" "@stablelib/hkdf": "npm:1.0.1" @@ -7810,13 +7844,13 @@ __metadata: "@walletconnect/relay-api": "npm:1.0.10" "@walletconnect/safe-json": "npm:1.0.2" "@walletconnect/time": "npm:1.0.2" - "@walletconnect/types": "npm:2.13.3" + "@walletconnect/types": "npm:2.14.0" "@walletconnect/window-getters": "npm:1.0.1" "@walletconnect/window-metadata": "npm:1.0.1" detect-browser: "npm:5.3.0" query-string: "npm:7.1.3" uint8arrays: "npm:3.1.0" - checksum: 10/9e8e5ab5819e4ae4abe3d504c58631eae20e52abc96c2f763f1a05f8cfac23a327e498a76c44b37c0c1c83714e953322f67c59c67e94f8a3e785e7aed1127175 + checksum: 10/a0e63763e5ac6391fd458a466c0f1b25247633fe3b7866fed7efc39b6399406f68ad353c49c091cdf718a8ce1be9d7eeaee8146c9ea2c32470bb716d3c73c0b6 languageName: node linkType: hard @@ -9592,9 +9626,9 @@ __metadata: linkType: hard "caniuse-lite@npm:^1.0.30001154, caniuse-lite@npm:^1.0.30001640": - version: 1.0.30001642 - resolution: "caniuse-lite@npm:1.0.30001642" - checksum: 10/8d80ea82be453ae0fdfea8766d82740a4945c1b99189650f29bfc458d4e235d7e99027a8f8bc5a4228d8c4457ba896315284b0703f300353ad5f09d8e693de10 + version: 1.0.30001643 + resolution: "caniuse-lite@npm:1.0.30001643" + checksum: 10/dddbda29fa24fbc435873309c71070461cbfc915d9bce3216180524c20c5637b2bee1a14b45972e9ac19e1fdf63fba3f63608b9e7d68de32f5ee1953c8c69e05 languageName: node linkType: hard @@ -10099,9 +10133,9 @@ __metadata: linkType: hard "cookie-es@npm:^1.1.0": - version: 1.1.0 - resolution: "cookie-es@npm:1.1.0" - checksum: 10/cb7124904629118656326e4af9ef2e88f451454ae008c22569f1df2ca93325edc6bac2f92b432d189c54184d5a90a3b2c8cdbd0a8ee7f32f0eb2f8e2d145feb2 + version: 1.2.1 + resolution: "cookie-es@npm:1.2.1" + checksum: 10/805cf5f6c6205f9e3cfaa1d62227f7b7a8ec146e10c5c06378b5c918798911eaa83e8e219a79c4a57374f1a2ee8491ea399a19d26cbfe856e2b350b628350b4f languageName: node linkType: hard @@ -10711,7 +10745,7 @@ __metadata: languageName: node linkType: hard -"defu@npm:^6.1.3, defu@npm:^6.1.4": +"defu@npm:^6.1.4": version: 6.1.4 resolution: "defu@npm:6.1.4" checksum: 10/aeffdb47300f45b4fdef1c5bd3880ac18ea7a1fd5b8a8faf8df29350ff03bf16dd34f9800205cab513d476e4c0a3783aa0cff0a433aff0ac84a67ddc4c8a2d64 @@ -11191,9 +11225,9 @@ __metadata: linkType: hard "electron-to-chromium@npm:^1.3.585, electron-to-chromium@npm:^1.4.820": - version: 1.4.828 - resolution: "electron-to-chromium@npm:1.4.828" - checksum: 10/5962877ab1239f93683729b07403ffa89559aad358b863d11f40edbc073a79414238296a628bc602a07eedcf41e9fa01b4a84d6813237dfeb4183b0e387b6136 + version: 1.4.832 + resolution: "electron-to-chromium@npm:1.4.832" + checksum: 10/795eaae1a445283dea93ffd6e2482a794405191bcf30710b0350808e79befdd1f14fc7aed13359cf68d90e24cad93bd7c0965d011293ae183326b54915dd0319 languageName: node linkType: hard @@ -11243,8 +11277,8 @@ __metadata: linkType: hard "elliptic@npm:^6.4.0, elliptic@npm:^6.4.1, elliptic@npm:^6.5.2, elliptic@npm:^6.5.3, elliptic@npm:^6.5.4, elliptic@npm:^6.5.5": - version: 6.5.5 - resolution: "elliptic@npm:6.5.5" + version: 6.5.6 + resolution: "elliptic@npm:6.5.6" dependencies: bn.js: "npm:^4.11.9" brorand: "npm:^1.1.0" @@ -11253,7 +11287,7 @@ __metadata: inherits: "npm:^2.0.4" minimalistic-assert: "npm:^1.0.1" minimalistic-crypto-utils: "npm:^1.0.1" - checksum: 10/5444b4f18e0c0fdfa14de26f69f7dbc44c78a211e91825823d698dcc91071ef1a3954d87730f364183fc83b0a86d8affed864e347da2e549bdcead3b46de126f + checksum: 10/09377ec924fdb37775d63e5d7e5ebb2845842e6f08880b68265b1108863e968970c4a4e1c43df622078c8262417deec9a04aeb9d34e8d09a9693e19b5454e1df languageName: node linkType: hard @@ -11265,30 +11299,30 @@ __metadata: linkType: hard "embla-carousel-react@npm:^8.1.6": - version: 8.1.6 - resolution: "embla-carousel-react@npm:8.1.6" + version: 8.1.7 + resolution: "embla-carousel-react@npm:8.1.7" dependencies: - embla-carousel: "npm:8.1.6" - embla-carousel-reactive-utils: "npm:8.1.6" + embla-carousel: "npm:8.1.7" + embla-carousel-reactive-utils: "npm:8.1.7" peerDependencies: react: ^16.8.0 || ^17.0.1 || ^18.0.0 - checksum: 10/a8c724c396f8f26d190943c778fd1a29706bd597a0f85b4d8133c5e25e6e651fb30dbc3be0a71b3d58b9698904ae1043052cbea0c4aa23f9a63f3d1205e4a128 + checksum: 10/623a903e04d4707dabb8e7ce18b326be610b0394eb9237a78c738477c945f32fee4b5a3681289227080ace467a037ea5fabdae2f36cc8c02a9e5afc0e421308a languageName: node linkType: hard -"embla-carousel-reactive-utils@npm:8.1.6": - version: 8.1.6 - resolution: "embla-carousel-reactive-utils@npm:8.1.6" +"embla-carousel-reactive-utils@npm:8.1.7": + version: 8.1.7 + resolution: "embla-carousel-reactive-utils@npm:8.1.7" peerDependencies: - embla-carousel: 8.1.6 - checksum: 10/1524006c5adb3115b7ad5b70c3a857a4a5110c283eb1baaf92db16873736b1543737901b54e7210014f9cfb6d85a9a6771fc702c90192f13781effed7071bc26 + embla-carousel: 8.1.7 + checksum: 10/ad6b24dca37e7918dae32cc490e2fdcfa2ccbbc9f3059c7c76fd3b0ce8e5e2d6e9aa5fcd5338a20cf6908ae7dffeeec7547c798acda8bb7011ddfbb148a6f965 languageName: node linkType: hard -"embla-carousel@npm:8.1.6": - version: 8.1.6 - resolution: "embla-carousel@npm:8.1.6" - checksum: 10/739a112c45b218755d747487b07e182ab137b9e2f262600cf6f0296e4a83a67b442da8fc0b9672219086ff3a0671aa3cdf0a171ebb0d620f2c9264ceaf5752d7 +"embla-carousel@npm:8.1.7": + version: 8.1.7 + resolution: "embla-carousel@npm:8.1.7" + checksum: 10/9721d494c35a576254eb69d3d6cc6dea320a335ffd45dd1c71be54af29e5d2db616777d3808affad209cc4c5a1e488a0f2fc641ef8df83ea0f28c9720bf2c464 languageName: node linkType: hard @@ -11814,11 +11848,11 @@ __metadata: linkType: hard "eslint-plugin-react-refresh@npm:^0.4.6": - version: 0.4.8 - resolution: "eslint-plugin-react-refresh@npm:0.4.8" + version: 0.4.9 + resolution: "eslint-plugin-react-refresh@npm:0.4.9" peerDependencies: eslint: ">=7" - checksum: 10/f502cd803a43dac83db43a924defe543a3ed57b545a4b5a9fc74c578c05903ffcb4f2988848b8d02672cf9443e390ef831ba5a1577f64617b68b3746229172b4 + checksum: 10/4a8fad22270ff2bba86bc34973228334194739b3b64dab0a13e35f1a55f8e0a66ab8861520c86f3acc3ecb3701c5bb68eca9f1f8f8a6144c17ef511ab07e02bc languageName: node linkType: hard @@ -12637,15 +12671,15 @@ __metadata: linkType: hard "firebase@npm:^10.12.2": - version: 10.12.3 - resolution: "firebase@npm:10.12.3" - dependencies: - "@firebase/analytics": "npm:0.10.5" - "@firebase/analytics-compat": "npm:0.2.11" - "@firebase/app": "npm:0.10.6" - "@firebase/app-check": "npm:0.8.5" - "@firebase/app-check-compat": "npm:0.3.12" - "@firebase/app-compat": "npm:0.2.36" + version: 10.12.4 + resolution: "firebase@npm:10.12.4" + dependencies: + "@firebase/analytics": "npm:0.10.6" + "@firebase/analytics-compat": "npm:0.2.12" + "@firebase/app": "npm:0.10.7" + "@firebase/app-check": "npm:0.8.6" + "@firebase/app-check-compat": "npm:0.3.13" + "@firebase/app-compat": "npm:0.2.37" "@firebase/app-types": "npm:0.9.2" "@firebase/auth": "npm:1.7.5" "@firebase/auth-compat": "npm:0.5.10" @@ -12667,7 +12701,7 @@ __metadata: "@firebase/storage-compat": "npm:0.3.9" "@firebase/util": "npm:1.9.7" "@firebase/vertexai-preview": "npm:0.0.3" - checksum: 10/9fd3d72b9c9c0dc9b4fbce1902b06457c847afb426931c3432e9d10fafcdc80c172d86307e5a75864608fbb6e4af13f727b2222a4b9fcb0244fe5b054f1e907d + checksum: 10/4a8b380b858ef6d546547c3c2764af070aa2262231a55951c71c307c9d2c70569e4f3d1e0cb3f0212f08b805989f0eb32b5cb70516b281583a59e19b3e7976aa languageName: node linkType: hard @@ -13804,7 +13838,7 @@ __metadata: languageName: node linkType: hard -"inline-style-prefixer@npm:^7.0.0": +"inline-style-prefixer@npm:^7.0.1": version: 7.0.1 resolution: "inline-style-prefixer@npm:7.0.1" dependencies: @@ -14240,11 +14274,11 @@ __metadata: linkType: hard "is-core-module@npm:^2.13.0": - version: 2.14.0 - resolution: "is-core-module@npm:2.14.0" + version: 2.15.0 + resolution: "is-core-module@npm:2.15.0" dependencies: hasown: "npm:^2.0.2" - checksum: 10/1e0d1a16cb3a94746f6a28db09ccab4562860c94c74bacedb3a6729736d61cfb97001d2052f9622637aa7ea8e0643a3f0f4f16965c70ba6ce30a8ccfe8074af8 + checksum: 10/70e962543e5d3a97c07cb29144a86792d545a21f28e67da5401d85878a0193d46fbab8d97bc3ca680e2778705dca66e7b6ca840c493497a27ca0e8c5f3ac3d1d languageName: node linkType: hard @@ -16568,9 +16602,9 @@ __metadata: linkType: hard "multiformats@npm:^13.0.0, multiformats@npm:^13.1.0": - version: 13.1.3 - resolution: "multiformats@npm:13.1.3" - checksum: 10/5568213caf73a9cd189afae61b0d8ca4d3175507ee50fa64a8931b7617f4ea9bf076da6fdbe78131151e5d9d48207dcd4ce56863a93d39b3f56d158e2d856daa + version: 13.2.0 + resolution: "multiformats@npm:13.2.0" + checksum: 10/59cd64eddeabf04c9f10ac209f43a55af355e0c38276523c9e23c86ba6f5626248ee2c7a1b0bf55d89e026dbce4d72cb21b260a3b4e95041b4536d5a023c7beb languageName: node linkType: hard @@ -16688,22 +16722,22 @@ __metadata: languageName: node linkType: hard -"nano-css@npm:^5.6.1": - version: 5.6.1 - resolution: "nano-css@npm:5.6.1" +"nano-css@npm:^5.6.2": + version: 5.6.2 + resolution: "nano-css@npm:5.6.2" dependencies: "@jridgewell/sourcemap-codec": "npm:^1.4.15" css-tree: "npm:^1.1.2" csstype: "npm:^3.1.2" fastest-stable-stringify: "npm:^2.0.2" - inline-style-prefixer: "npm:^7.0.0" + inline-style-prefixer: "npm:^7.0.1" rtl-css-js: "npm:^1.16.1" stacktrace-js: "npm:^2.0.2" stylis: "npm:^4.3.0" peerDependencies: react: "*" react-dom: "*" - checksum: 10/d4e5e3c9fdfc09f494852c75ae5320373dfa84e24f82b7d6ff45928205763ec7780446e3e10af98398409bd4bf1acebc1f987570592b2bc68b9c0997ad089f73 + checksum: 10/6ed9f36957b19fc2dcf1644a853030cce70775bec3fed596cab9156063d522d5cb52cb1479117e4390acbe45b69321c9eb33915d96414aabaf09bff40497bb4a languageName: node linkType: hard @@ -16888,7 +16922,7 @@ __metadata: languageName: node linkType: hard -"node-fetch-native@npm:^1.6.1, node-fetch-native@npm:^1.6.2, node-fetch-native@npm:^1.6.3": +"node-fetch-native@npm:^1.6.2, node-fetch-native@npm:^1.6.3, node-fetch-native@npm:^1.6.4": version: 1.6.4 resolution: "node-fetch-native@npm:1.6.4" checksum: 10/39c4c6d0c2a4bed1444943e1647ad0d79eb6638cf159bc37dffeafd22cffcf6a998e006aa1f3dd1d9d2258db7d78dee96b44bee4ba0bbaf0440ed348794f2543 @@ -16973,9 +17007,9 @@ __metadata: linkType: hard "node-releases@npm:^2.0.14": - version: 2.0.14 - resolution: "node-releases@npm:2.0.14" - checksum: 10/0f7607ec7db5ef1dc616899a5f24ae90c869b6a54c2d4f36ff6d84a282ab9343c7ff3ca3670fe4669171bb1e8a9b3e286e1ef1c131f09a83d70554f855d54f24 + version: 2.0.18 + resolution: "node-releases@npm:2.0.18" + checksum: 10/241e5fa9556f1c12bafb83c6c3e94f8cf3d8f2f8f904906ecef6e10bcaa1d59aa61212d4651bec70052015fc54bd3fdcdbe7fc0f638a17e6685aa586c076ec4e languageName: node linkType: hard @@ -17837,7 +17871,7 @@ __metadata: languageName: node linkType: hard -"postcss@npm:^8.4.38, postcss@npm:^8.4.39": +"postcss@npm:^8.4.39": version: 8.4.39 resolution: "postcss@npm:8.4.39" dependencies: @@ -18917,26 +18951,26 @@ __metadata: linkType: hard "react-router-dom@npm:^6.9.0": - version: 6.24.1 - resolution: "react-router-dom@npm:6.24.1" + version: 6.25.1 + resolution: "react-router-dom@npm:6.25.1" dependencies: - "@remix-run/router": "npm:1.17.1" - react-router: "npm:6.24.1" + "@remix-run/router": "npm:1.18.0" + react-router: "npm:6.25.1" peerDependencies: react: ">=16.8" react-dom: ">=16.8" - checksum: 10/98eeeec3d36695b3d6d8000d8373ba3cefa9afc49ee44f646f3b721e8b47a80f5ce3737ad1f752cccf19caf01e370918750a4bc86a06a99e491731b454d5ec55 + checksum: 10/583a0907156f8f0687817e2cd6fa2678284729fc9cf883acb0bc0a4ade1f76fc68dd771258f6b30a2fdc378a5608b973f7ecb1f7fc752295ad4eba8b2f156a82 languageName: node linkType: hard -"react-router@npm:6.24.1": - version: 6.24.1 - resolution: "react-router@npm:6.24.1" +"react-router@npm:6.25.1": + version: 6.25.1 + resolution: "react-router@npm:6.25.1" dependencies: - "@remix-run/router": "npm:1.17.1" + "@remix-run/router": "npm:1.18.0" peerDependencies: react: ">=16.8" - checksum: 10/18ac968171dee286a2f067dc8568faf73c759f833e88e09f1b34ff6e9376d1fd5eade8697a86be83093225956b256b398d935ce2f681c1bf711fb3c058c19839 + checksum: 10/3bfb9754cff279cabcb247f13e66315d02333dae7e251fa8975d0e5cf68ee61793ad040594d2d490a5c995efc542739e7ef80462a69bd3209f64c69086fc7786 languageName: node linkType: hard @@ -18953,19 +18987,19 @@ __metadata: linkType: hard "react-spring@npm:^9.0.0-rc.3": - version: 9.7.3 - resolution: "react-spring@npm:9.7.3" + version: 9.7.4 + resolution: "react-spring@npm:9.7.4" dependencies: - "@react-spring/core": "npm:~9.7.3" - "@react-spring/konva": "npm:~9.7.3" - "@react-spring/native": "npm:~9.7.3" - "@react-spring/three": "npm:~9.7.3" - "@react-spring/web": "npm:~9.7.3" - "@react-spring/zdog": "npm:~9.7.3" + "@react-spring/core": "npm:~9.7.4" + "@react-spring/konva": "npm:~9.7.4" + "@react-spring/native": "npm:~9.7.4" + "@react-spring/three": "npm:~9.7.4" + "@react-spring/web": "npm:~9.7.4" + "@react-spring/zdog": "npm:~9.7.4" peerDependencies: react: ^16.8.0 || ^17.0.0 || ^18.0.0 react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 - checksum: 10/f763fb64b16b59b7b98816b88898d1697906aebd0d9067bdb2af61d2522b3a313d1117e139e75e39f0cd438e1d110956cfb3573bdefb5516ffba3e7aa618d87e + checksum: 10/d37f10a14fb186b69d7e0a171d64584e89cef25b0b99044f209fa77eb3544300814071023401a3d3e6fee59a55a6db1713deee4db8091a55af8d33508e20b882 languageName: node linkType: hard @@ -19109,8 +19143,8 @@ __metadata: linkType: hard "react-use@npm:^17.3.2": - version: 17.5.0 - resolution: "react-use@npm:17.5.0" + version: 17.5.1 + resolution: "react-use@npm:17.5.1" dependencies: "@types/js-cookie": "npm:^2.2.6" "@xobotyi/scrollbar-width": "npm:^1.9.5" @@ -19118,7 +19152,7 @@ __metadata: fast-deep-equal: "npm:^3.1.3" fast-shallow-equal: "npm:^1.0.0" js-cookie: "npm:^2.2.1" - nano-css: "npm:^5.6.1" + nano-css: "npm:^5.6.2" react-universal-interface: "npm:^0.6.2" resize-observer-polyfill: "npm:^1.5.1" screenfull: "npm:^5.1.0" @@ -19129,7 +19163,7 @@ __metadata: peerDependencies: react: "*" react-dom: "*" - checksum: 10/5d81fe0902303d3ed7810cdd56c6cae12b08124a3d4fcbfa3924327105b81447b039ea9d6aff20aac3c13999f949000870a7a2fa29fe20ed844ac26606462fa0 + checksum: 10/2da403a9949dbd964b9b8e20dcd354db66b7f7d5ca1f42572fbcdb06bd49ee828c295be4912cb87abc163d1b54820bb8c5fa85314a16c4579d9e30bf9cbd5759 languageName: node linkType: hard @@ -19562,25 +19596,25 @@ __metadata: linkType: hard "rollup@npm:^4.13.0": - version: 4.18.1 - resolution: "rollup@npm:4.18.1" - dependencies: - "@rollup/rollup-android-arm-eabi": "npm:4.18.1" - "@rollup/rollup-android-arm64": "npm:4.18.1" - "@rollup/rollup-darwin-arm64": "npm:4.18.1" - "@rollup/rollup-darwin-x64": "npm:4.18.1" - "@rollup/rollup-linux-arm-gnueabihf": "npm:4.18.1" - "@rollup/rollup-linux-arm-musleabihf": "npm:4.18.1" - "@rollup/rollup-linux-arm64-gnu": "npm:4.18.1" - "@rollup/rollup-linux-arm64-musl": "npm:4.18.1" - "@rollup/rollup-linux-powerpc64le-gnu": "npm:4.18.1" - "@rollup/rollup-linux-riscv64-gnu": "npm:4.18.1" - "@rollup/rollup-linux-s390x-gnu": "npm:4.18.1" - "@rollup/rollup-linux-x64-gnu": "npm:4.18.1" - "@rollup/rollup-linux-x64-musl": "npm:4.18.1" - "@rollup/rollup-win32-arm64-msvc": "npm:4.18.1" - "@rollup/rollup-win32-ia32-msvc": "npm:4.18.1" - "@rollup/rollup-win32-x64-msvc": "npm:4.18.1" + version: 4.19.0 + resolution: "rollup@npm:4.19.0" + dependencies: + "@rollup/rollup-android-arm-eabi": "npm:4.19.0" + "@rollup/rollup-android-arm64": "npm:4.19.0" + "@rollup/rollup-darwin-arm64": "npm:4.19.0" + "@rollup/rollup-darwin-x64": "npm:4.19.0" + "@rollup/rollup-linux-arm-gnueabihf": "npm:4.19.0" + "@rollup/rollup-linux-arm-musleabihf": "npm:4.19.0" + "@rollup/rollup-linux-arm64-gnu": "npm:4.19.0" + "@rollup/rollup-linux-arm64-musl": "npm:4.19.0" + "@rollup/rollup-linux-powerpc64le-gnu": "npm:4.19.0" + "@rollup/rollup-linux-riscv64-gnu": "npm:4.19.0" + "@rollup/rollup-linux-s390x-gnu": "npm:4.19.0" + "@rollup/rollup-linux-x64-gnu": "npm:4.19.0" + "@rollup/rollup-linux-x64-musl": "npm:4.19.0" + "@rollup/rollup-win32-arm64-msvc": "npm:4.19.0" + "@rollup/rollup-win32-ia32-msvc": "npm:4.19.0" + "@rollup/rollup-win32-x64-msvc": "npm:4.19.0" "@types/estree": "npm:1.0.5" fsevents: "npm:~2.3.2" dependenciesMeta: @@ -19620,7 +19654,7 @@ __metadata: optional: true bin: rollup: dist/bin/rollup - checksum: 10/7a5f110d216e8599dc3cb11cf570316d989abae00785d99c2bcb6027287fe60d2eaed70e457d88a036622e7fc67e8db6e730d3c784aa90a258bd4c020676ad44 + checksum: 10/a5f56e60d160e727f372fb0b0adbab03c1e5b858df7af62e626459687e6510d5b9685e4badef50bb6ffd916eaf53c1684a8e12ae959dacb8e6930c77a00a0f19 languageName: node linkType: hard @@ -19733,6 +19767,13 @@ __metadata: languageName: node linkType: hard +"safevalues@npm:0.6.0": + version: 0.6.0 + resolution: "safevalues@npm:0.6.0" + checksum: 10/b0ad6307e08047c4e2f9c3feb3158c5d75dbc5a54fac1719e6bd10e2a78af33f32b1b43187aff8ad7d4472075bdc3f2a60595bf40260e80883c9c1b77af7fe52 + languageName: node + linkType: hard + "sax@npm:>=0.6.0": version: 1.4.1 resolution: "sax@npm:1.4.1" @@ -19904,11 +19945,11 @@ __metadata: linkType: hard "semver@npm:^7.3.5, semver@npm:^7.6.0": - version: 7.6.2 - resolution: "semver@npm:7.6.2" + version: 7.6.3 + resolution: "semver@npm:7.6.3" bin: semver: bin/semver.js - checksum: 10/296b17d027f57a87ef645e9c725bff4865a38dfc9caf29b26aa084b85820972fbe7372caea1ba6857162fa990702c6d9c1d82297cecb72d56c78ab29070d2ca2 + checksum: 10/36b1fbe1a2b6f873559cd57b238f1094a053dbfd997ceeb8757d79d1d2089c56d1321b9f1069ce263dc64cfa922fa1d2ad566b39426fe1ac6c723c1487589e10 languageName: node linkType: hard @@ -20606,8 +20647,8 @@ __metadata: linkType: hard "styled-components@npm:>=5, styled-components@npm:^6.1.0": - version: 6.1.11 - resolution: "styled-components@npm:6.1.11" + version: 6.1.12 + resolution: "styled-components@npm:6.1.12" dependencies: "@emotion/is-prop-valid": "npm:1.2.2" "@emotion/unitless": "npm:0.8.1" @@ -20621,7 +20662,7 @@ __metadata: peerDependencies: react: ">= 16.8.0" react-dom: ">= 16.8.0" - checksum: 10/6813bba73ad706998a903793da2c903a6a64e487b2167d26cc3d55a850637a31becab1ce43fa072f9aba4f6074ec5a914dd4696e9ba2548e6c4873436f4ca632 + checksum: 10/b0bcba70921f99b6d30a63ba4311b09a04da4c9c9213bc711a436bff8607387c61e588e9953897d3c99399e85dc5f1d7ab78482920bc6a610a1f883d8eb9bce8 languageName: node linkType: hard @@ -20845,8 +20886,8 @@ __metadata: linkType: hard "terser@npm:^5.26.0": - version: 5.31.2 - resolution: "terser@npm:5.31.2" + version: 5.31.3 + resolution: "terser@npm:5.31.3" dependencies: "@jridgewell/source-map": "npm:^0.3.3" acorn: "npm:^8.8.2" @@ -20854,7 +20895,7 @@ __metadata: source-map-support: "npm:~0.5.20" bin: terser: bin/terser - checksum: 10/dab8d0a7e2845f14535433795aa8dcf1b80a33e75749f5dbd67ee97aa66c1dec37191afa46dd88dad8472c9ff0bf16a812dd4388cb30d8675a6a95a7ead0421b + checksum: 10/7f66d93a1157f66f5eda16515ed45e6eb485d3c4acbc46e78a5e62922f5b4643d9212abc586f791021fafc71563a93475a986c52f4270a5e0b3ee50a70507d9e languageName: node linkType: hard @@ -21233,9 +21274,9 @@ __metadata: linkType: hard "type-fest@npm:^4.18.2": - version: 4.21.0 - resolution: "type-fest@npm:4.21.0" - checksum: 10/a4dc074b25239fff4062495c58554dcec15845622d753092d2bf24fc3b1c49f85805ed74f151976d666056ff122b3a5a988e85226575b7fbbc8e92d2db210137 + version: 4.22.1 + resolution: "type-fest@npm:4.22.1" + checksum: 10/f0cef35c98c34577d94dd36b4baa6544cd6977bdee47d95fad1d970ca3b61c1bb0ab8aac66bab6e1e387b1f2821727675743282f1a8680da54adc1a5625f3d66 languageName: node linkType: hard @@ -21316,9 +21357,9 @@ __metadata: linkType: hard "ufo@npm:^1.4.0, ufo@npm:^1.5.3": - version: 1.5.3 - resolution: "ufo@npm:1.5.3" - checksum: 10/2b30dddd873c643efecdb58cfe457183cd4d95937ccdacca6942c697b87a2c578232c25a5149fda85436696bf0fdbc213bf2b220874712bc3e58c0fb00a2c950 + version: 1.5.4 + resolution: "ufo@npm:1.5.4" + checksum: 10/a885ed421e656aea6ca64e9727b8118a9488715460b6f1a0f0427118adfe2f2830fe7c1d5bd9c5c754a332e6807516551cd663ea67ce9ed6a4e3edc739916335 languageName: node linkType: hard @@ -21427,15 +21468,15 @@ __metadata: linkType: hard "unenv@npm:^1.9.0": - version: 1.9.0 - resolution: "unenv@npm:1.9.0" + version: 1.10.0 + resolution: "unenv@npm:1.10.0" dependencies: consola: "npm:^3.2.3" - defu: "npm:^6.1.3" + defu: "npm:^6.1.4" mime: "npm:^3.0.0" - node-fetch-native: "npm:^1.6.1" - pathe: "npm:^1.1.1" - checksum: 10/7b5e0f139f69ebb9d2822abc84903eccb5655bacc00a26cc3be260f25b3d84b5e19418503e038c7bf4bcc67c4f8ebcab7d55736f7eddf7a3948a311176b1d000 + node-fetch-native: "npm:^1.6.4" + pathe: "npm:^1.1.2" + checksum: 10/23198e150fd3b4db4d7abe444b75ee05a0d36768bd6d94a6aaf5dca830db82e707ccc0f6cca22671327b62c5cd85ada08d4665bf7652afec9de0bdc7a4546249 languageName: node linkType: hard @@ -21784,6 +21825,15 @@ __metadata: languageName: node linkType: hard +"uuid@npm:^10.0.0": + version: 10.0.0 + resolution: "uuid@npm:10.0.0" + bin: + uuid: dist/bin/uuid + checksum: 10/35aa60614811a201ff90f8ca5e9ecb7076a75c3821e17f0f5ff72d44e36c2d35fcbc2ceee9c4ac7317f4cc41895da30e74f3885e30313bee48fda6338f250538 + languageName: node + linkType: hard + "uuid@npm:^3.3.2": version: 3.4.0 resolution: "uuid@npm:3.4.0" @@ -21944,15 +21994,15 @@ __metadata: linkType: hard "vite-plugin-top-level-await@npm:^1.4.1": - version: 1.4.1 - resolution: "vite-plugin-top-level-await@npm:1.4.1" + version: 1.4.2 + resolution: "vite-plugin-top-level-await@npm:1.4.2" dependencies: "@rollup/plugin-virtual": "npm:^3.0.2" - "@swc/core": "npm:^1.3.100" - uuid: "npm:^9.0.1" + "@swc/core": "npm:^1.7.0" + uuid: "npm:^10.0.0" peerDependencies: vite: ">=2.8" - checksum: 10/68c82f5fa2e860ebe0867337ced237042127a03ec367cfeadb890dc20f623811263bac59a1afeac8b9ac7c11501752ded03cd035ac75c35d20531a7e42f096a7 + checksum: 10/40a0ebb9a7e4e5bdb95b796f2fa14a3d76eb6e7e098d1d16a9d0ad87e74b8379b52515888fb90e2688d351e89732f6fe6c12bafaed22495b1cc0735812748991 languageName: node linkType: hard From 48649b4be70bd4bb4923c5f8c55457d41d24cb99 Mon Sep 17 00:00:00 2001 From: Kalash Shah <81062983+kalashshah@users.noreply.github.com> Date: Thu, 25 Jul 2024 15:15:01 +0530 Subject: [PATCH 26/34] Improve mobile navbar view (#1737) * chore: improve mobile navbar view * chore: fix css at 1024px * chore: fix sidebar media queries --- src/App.tsx | 4 +- src/components/ChainIndicator.tsx | 8 +-- src/structure/Header.tsx | 108 ++++++++++++++++-------------- 3 files changed, 62 insertions(+), 58 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index e582479e46..0e2ed2946f 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -472,7 +472,7 @@ const LeftBarContainer = styled.div` position: fixed; // position: absolute; - @media (max-width: 992px) { + @media (max-width: 1024px) { display: none; } `; @@ -484,7 +484,7 @@ const ContentContainer = styled.div` width: calc(100% - ${(props) => props.leftBarWidth}px); margin: 0px 0px 0px ${(props) => props.leftBarWidth}px; - @media (max-width: 992px) { + @media (max-width: 1024px) { margin: 0px; } `; diff --git a/src/components/ChainIndicator.tsx b/src/components/ChainIndicator.tsx index c55fc865c5..c3d773df5f 100644 --- a/src/components/ChainIndicator.tsx +++ b/src/components/ChainIndicator.tsx @@ -126,7 +126,7 @@ const Container = styled.button` flex-direction: row; align-items: center; display: flex; - @media (max-width: 992px) { + @media (max-width: 1024px) { width: 100%; margin-right: 20px; } @@ -160,7 +160,7 @@ const CurrentChain = styled(SpanV2)` pointer: hand; } - @media (max-width: 992px) { + @media (max-width: 1024px) { width: 100%; justify-content: space-between; border: none; @@ -186,7 +186,7 @@ const ChainName = styled(H3)` letter-spacing: normal; cursor: pointer; - @media (max-width: 992px) { + @media (max-width: 1024px) { display: flex; } `; @@ -223,7 +223,7 @@ const DropdownItem = styled(Item)` right: 0rem; z-index: 10; - @media (max-width: 992px) { + @media (max-width: 1024px) { right: 0.9rem; top: 3.5rem; } diff --git a/src/structure/Header.tsx b/src/structure/Header.tsx index e70431ceec..d884ee9884 100644 --- a/src/structure/Header.tsx +++ b/src/structure/Header.tsx @@ -9,14 +9,14 @@ import { DarkModeSwitch } from 'react-toggle-dark-mode'; import styled, { useTheme } from 'styled-components'; // Internal Components -import { Box, Link, Text, Star, Lozenge, RewardsBell, Button } from 'blocks'; +import { Box, Link, Text, Star, Lozenge, RewardsBell } from 'blocks'; import { LOADER_SPINNER_TYPE } from 'components/reusables/loaders/LoaderSpinner'; import Spinner from 'components/reusables/spinners/SpinnerUnit'; import { ErrorContext } from 'contexts/ErrorContext'; import { NavigationContext } from 'contexts/NavigationContext'; import Profile from 'primaries/Profile'; -import { Button as IButton, Item, ItemH, Section, Span } from 'primaries/SharedStyling'; +import { Item, ItemH, Section, Span } from 'primaries/SharedStyling'; import PushLogoDark from '../assets/pushDark.svg'; import PushLogoLight from '../assets/pushLight.svg'; @@ -216,7 +216,21 @@ function Header({ isDarkMode, darkModeToggle }) { */} - + + + + )} - + + } > - + - - - - + + {isActive && !showLoginControls && !error && ( + + )} - {isActive && !showLoginControls && !error && ( - - )} {isActive && !error && ( - - - setShowNavBar((prev) => !prev)} - size={30} - color={theme.headerIconsBg} - /> - - + + setShowNavBar((prev) => !prev)} + size={30} + color={theme.headerIconsBg} + /> + )} Date: Thu, 25 Jul 2024 15:22:35 +0530 Subject: [PATCH 27/34] DApp-1727 blocks/modal (#1765) * update changes * add props type * update version and remove on dash * modal in progress * modal implemented * reverted dashboard component * removed curropted file --------- Co-authored-by: corlard3y --- package.json | 1 + src/blocks/Blocks.utils.ts | 14 ++ src/blocks/index.ts | 1 + src/blocks/modal/AlertModal.tsx | 108 ++++++++++++ src/blocks/modal/Modal.constants.ts | 23 +++ src/blocks/modal/Modal.tsx | 154 ++++++++++++++++++ src/blocks/modal/Modal.types.ts | 7 + src/blocks/modal/index.ts | 2 + src/blocks/theme/colors/colors.semantics.ts | 4 + src/blocks/theme/semantics/semantics.modal.ts | 25 +++ src/modules/dashboard/Dashboard.tsx | 2 +- .../dashboard/components/DashboardHeader.tsx | 2 +- yarn.lock | 3 +- 13 files changed, 343 insertions(+), 3 deletions(-) create mode 100644 src/blocks/modal/AlertModal.tsx create mode 100644 src/blocks/modal/Modal.constants.ts create mode 100644 src/blocks/modal/Modal.tsx create mode 100644 src/blocks/modal/Modal.types.ts create mode 100644 src/blocks/modal/index.ts create mode 100644 src/blocks/theme/semantics/semantics.modal.ts diff --git a/package.json b/package.json index b3d0375438..1e2d39d5ef 100644 --- a/package.json +++ b/package.json @@ -37,6 +37,7 @@ "@pushprotocol/restapi": "1.7.23", "@pushprotocol/socket": "0.5.3", "@pushprotocol/uiweb": "1.4.2", + "@radix-ui/react-dialog": "^1.1.1", "@radix-ui/react-dropdown-menu": "^2.1.1", "@radix-ui/react-switch": "^1.1.0", "@radix-ui/react-tooltip": "^1.1.1", diff --git a/src/blocks/Blocks.utils.ts b/src/blocks/Blocks.utils.ts index 3f60aa64ca..1b86463e34 100644 --- a/src/blocks/Blocks.utils.ts +++ b/src/blocks/Blocks.utils.ts @@ -11,6 +11,8 @@ import { BlocksRadiusType, } from './Blocks.types'; import { radiusRegex, spacingRegex } from './Blocks.constants'; +import { textVariants, TextVariants } from './text'; +import { ThemeColors } from './theme/Theme.types'; /** * @param propName @@ -161,3 +163,15 @@ export const getBlocksBorderRadius = (radius?: BlocksRadiusType) => { return result; }; + +export const getTextVariantStyles = (variant: TextVariants, color: ThemeColors) => css` + color: var(--${color}); + font-family: var(--font-family); + font-size: ${textVariants[variant].fontSize}; + font-style: ${textVariants[variant].fontStyle}; + font-weight: ${textVariants[variant].fontWeight}; + line-height: ${textVariants[variant].lineHeight}; + letter-spacing: ${textVariants[variant].letterSpacing}; + text-transform: ${textVariants[variant].textTransform}; + margin: var(--spacing-none); +`; diff --git a/src/blocks/index.ts b/src/blocks/index.ts index ecb30db71f..31b014d08c 100644 --- a/src/blocks/index.ts +++ b/src/blocks/index.ts @@ -5,6 +5,7 @@ export { HoverableSVG, type HoverableSVGProps } from './hoverableSVG'; export { Link, type LinkProps } from './link'; export { Lozenge, type LozengeProps } from './lozenge'; export { Menu, type MenuProps, MenuItem, type MenuItemComponentProps } from './menu'; +export { Modal, type ModalProps, modal } from './modal'; export { Separator, type SeparatorProps } from './separator'; export { Skeleton, type SkeletonProps } from './skeleton'; export { Tabs, type TabsProps, type TabItem } from './tabs'; diff --git a/src/blocks/modal/AlertModal.tsx b/src/blocks/modal/AlertModal.tsx new file mode 100644 index 0000000000..b71465f255 --- /dev/null +++ b/src/blocks/modal/AlertModal.tsx @@ -0,0 +1,108 @@ +import { FC } from 'react'; +import ReactDOM from 'react-dom/client'; +import styled from 'styled-components'; +import { getTextVariantStyles } from '../Blocks.utils'; +import { ThemeColors } from '../theme/Theme.types'; +import { Modal, ModalProps } from './Modal'; +import { AlertModalTypes, ModalSize, ShowAlertModalConfig } from './Modal.types'; +import { alertModalIcon } from './Modal.constants'; + +export type AlertModalProps = { + description: string; + title: string; + type: AlertModalTypes; +} & Omit; + +const Container = styled.div<{ iconColor: ThemeColors; size: ModalSize }>` + display: flex; + padding: var(--spacing-none); + align-items: flex-start; + gap: var(--spacing-xxxs); + margin-top: ${({ size }) => (size === 'small' ? '-24px' : '-28px')}; + + [role='img'] { + color: var(--${({ iconColor }) => iconColor}); + } +`; + +const TextContainer = styled.div` + display: flex; + flex-direction: column; + align-items: flex-start; + gap: var(--spacing-xxxs); + flex: 1 0 0; +`; + +const Title = styled.p<{ size: ModalSize }>` + ${({ size }) => { + const variant = size === 'small' ? 'h5-semibold' : size === 'medium' ? 'h4-semibold' : 'h3-semibold'; + return getTextVariantStyles(variant, 'components-modal-text-default'); + }} +`; + +const Description = styled.div<{ size: ModalSize }>` + ${({ size }) => { + const variant = size === 'small' ? 'bes-regular' : size === 'medium' ? 'bs-regular' : 'bm-regular'; + return getTextVariantStyles(variant, 'components-modal-text-secondary'); + }} +`; + +const AlertModal: FC = ({ description, title, type, size = 'small', ...restProps }) => { + const Icon = alertModalIcon[type].icon; + return ( + + + + + {title} + {description} + + + + ); +}; + +const renderModal = (props: AlertModalProps) => { + const div = document.createElement('div'); + document.body.appendChild(div); + + const root = ReactDOM.createRoot(div); + + const handleClose = () => { + root.unmount(); + document.body.removeChild(div); + if (props.onClose) props.onClose(); + }; + + root.render( + + ); +}; + +const showModal = (type: AlertModalTypes, config: ShowAlertModalConfig) => { + renderModal({ + ...config, + isOpen: true, + type, + onClose: () => {}, + }); +}; + +const modal = { + info: (config: ShowAlertModalConfig) => showModal('info', config), + success: (config: ShowAlertModalConfig) => showModal('success', config), + error: (config: ShowAlertModalConfig) => showModal('error', config), + warning: (config: ShowAlertModalConfig) => showModal('warning', config), +}; + +export { modal }; diff --git a/src/blocks/modal/Modal.constants.ts b/src/blocks/modal/Modal.constants.ts new file mode 100644 index 0000000000..6f4c9425e8 --- /dev/null +++ b/src/blocks/modal/Modal.constants.ts @@ -0,0 +1,23 @@ +import { FC } from 'react'; +import { IconProps, InfoFilled, TickCircleFilled, WarningCircleFilled } from '../icons'; +import { AlertModalTypes } from './Modal.types'; +import { ThemeColors } from 'blocks/theme/Theme.types'; + +export const alertModalIcon: Record; color: ThemeColors }> = { + error: { + icon: InfoFilled, + color: 'components-modal-icon-error', + }, + info: { + icon: InfoFilled, + color: 'components-modal-icon-info', + }, + success: { + icon: TickCircleFilled, + color: 'components-modal-icon-success', + }, + warning: { + icon: WarningCircleFilled, + color: 'components-modal-icon-warning', + }, +}; diff --git a/src/blocks/modal/Modal.tsx b/src/blocks/modal/Modal.tsx new file mode 100644 index 0000000000..71ddb3af6b --- /dev/null +++ b/src/blocks/modal/Modal.tsx @@ -0,0 +1,154 @@ +import { FC, ReactNode } from 'react'; +import * as Dialog from '@radix-ui/react-dialog'; +import styled from 'styled-components'; +import { Button, ButtonProps } from '../button'; +import { Back, Cross } from '../icons'; +import { ModalSize } from './Modal.types'; + +type ButtonAlignment = 'end' | 'center'; + +export type ModalProps = { + acceptButtonProps?: ButtonProps; + buttonAlignment?: ButtonAlignment; + cancelButtonProps?: ButtonProps | null; + children: ReactNode; + closeOnOverlayClick?: boolean; + isOpen: boolean; + onBack?: () => void; + onClose: () => void; + size?: ModalSize; +}; + +const Overlay = styled(Dialog.Overlay)` + background: var(--surface-glass-bold); + backdrop-filter: blur(calc(var(--blur-lg) / 2)); + position: fixed; + inset: 0; + z-index: 1000; +`; + +const ContentContainer = styled(Dialog.Content)<{ size: ModalSize }>` + display: flex; + border-radius: var(--radius-sm); + border: var(--border-sm) solid var(--stroke-secondary); + background: var(--components-modal-background-default); + padding: var(--spacing-${({ size }) => (size === 'small' ? 'xs' : 'sm')}); + flex-direction: column; + align-items: flex-start; + position: fixed; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + min-width: 300px; + width: ${({ size }) => (size === 'small' ? '360px' : size === 'medium' ? '500px' : '700px')}; + gap: var(--spacing-sm); + z-index: 1100; +`; + +const ContentChildren = styled.div<{ size: ModalSize }>` + display: flex; + flex-direction: column; + align-items: flex-start; + flex: 1 0 0; + padding-top: var(--spacing-${({ size }) => (size === 'small' ? 'xxs' : 'xs')}); +`; + +const HeaderContainer = styled.div` + position: relative; + width: 100%; +`; + +const BackButton = styled.div` + cursor: pointer; + color: var(--components-modal-icon-default); + padding: var(--spacing-none); + position: absolute; + left: 0; + top: 0; +`; + +const CloseButton = styled.div` + background-color: var(--surface-transparent); + cursor: pointer; + color: var(--components-modal-icon-default); + padding: var(--spacing-none); + position: absolute; + right: 0; + top: 0; +`; + +const ButtonsContainer = styled.div<{ buttonAlignment: ButtonAlignment }>` + display: flex; + padding: var(--spacing-xxs); + justify-content: center; + align-items: center; + gap: var(--spacing-xs); + align-self: ${({ buttonAlignment }) => (buttonAlignment === 'end' ? 'flex-end' : 'center')}; +`; + +const Modal: FC = ({ + acceptButtonProps, + closeOnOverlayClick = false, + buttonAlignment = 'center', + cancelButtonProps = { children: 'Cancel', onClick: () => onClose() }, + children, + isOpen, + onBack, + onClose, + size = 'medium', +}) => { + const handleOverlayClick = () => { + if (closeOnOverlayClick) { + onClose(); + } + }; + + const iconSize = size === 'small' ? 16 : 24; + return ( + + + + e.preventDefault()} + > + + {onBack && ( + + + + )} + + + + + {children} + + {cancelButtonProps && ( + + )} + + + + + + ); +}; + +export { Modal }; diff --git a/src/blocks/modal/Modal.types.ts b/src/blocks/modal/Modal.types.ts new file mode 100644 index 0000000000..a37b86079f --- /dev/null +++ b/src/blocks/modal/Modal.types.ts @@ -0,0 +1,7 @@ +import { AlertModalProps } from './AlertModal'; + +export type AlertModalTypes = 'error' | 'info' | 'success' | 'warning'; + +export type ShowAlertModalConfig = Omit; + +export type ModalSize = 'small' | 'medium' | 'large'; diff --git a/src/blocks/modal/index.ts b/src/blocks/modal/index.ts new file mode 100644 index 0000000000..403c495f26 --- /dev/null +++ b/src/blocks/modal/index.ts @@ -0,0 +1,2 @@ +export * from './Modal'; +export * from './AlertModal'; diff --git a/src/blocks/theme/colors/colors.semantics.ts b/src/blocks/theme/colors/colors.semantics.ts index 747dbaf480..09d3f2c7f8 100644 --- a/src/blocks/theme/colors/colors.semantics.ts +++ b/src/blocks/theme/colors/colors.semantics.ts @@ -10,6 +10,7 @@ import { checkboxSemantics } from '../semantics/semantics.checkbox'; import { dropdownSemantics } from '../semantics/semantics.dropdown'; import { iconSemantics } from '../semantics/semantics.icon'; import { inputSemantics } from '../semantics/semantics.input'; +import { modalSemantics } from '../semantics/semantics.modal'; import { radioSemantics } from '../semantics/semantics.radio'; import { skeletonSemantics } from '../semantics/semantics.skeleton'; import { strokeSemantics } from '../semantics/semantics.stroke'; @@ -32,6 +33,7 @@ type SemanticKeys = { dropdown: 'components-dropdown'; icon: 'icon'; input: 'components-inputs'; + modal: 'components-modal'; radio: 'components-radio-button'; surface: 'surface'; stroke: 'stroke'; @@ -54,6 +56,7 @@ export const semanticKeys: SemanticKeys = { dropdown: 'components-dropdown', icon: 'icon', input: 'components-inputs', + modal: 'components-modal', radio: 'components-radio-button', surface: 'surface', stroke: 'stroke', @@ -76,6 +79,7 @@ export const colorSemantics = { [semanticKeys.dropdown]: dropdownSemantics, [semanticKeys.icon]: iconSemantics, [semanticKeys.input]: inputSemantics, + [semanticKeys.modal]: modalSemantics, [semanticKeys.radio]: radioSemantics, [semanticKeys.surface]: surfaceSemantics, [semanticKeys.stroke]: strokeSemantics, diff --git a/src/blocks/theme/semantics/semantics.modal.ts b/src/blocks/theme/semantics/semantics.modal.ts new file mode 100644 index 0000000000..e29fe2c0f5 --- /dev/null +++ b/src/blocks/theme/semantics/semantics.modal.ts @@ -0,0 +1,25 @@ +import { colorPrimitives } from '../colors/colors.primitives'; +import { iconSemantics } from './semantics.icon'; +import { strokeSemantics } from './semantics.stroke'; +import { surfaceSemantics } from './semantics.surface'; +import { textSemantics } from './semantics.text'; + +export const modalSemantics = { + 'background-default': { light: surfaceSemantics['primary'].light, dark: surfaceSemantics['primary'].dark }, + + 'stroke-bg': { light: strokeSemantics['secondary'].light, dark: strokeSemantics['secondary'].dark }, + + 'text-default': { + light: textSemantics['primary'].light, + dark: textSemantics['primary'].dark, + }, + 'text-secondary': { light: textSemantics['tertiary'].light, dark: textSemantics['tertiary'].dark }, + 'text-link': { light: colorPrimitives['pink-700'], dark: colorPrimitives['pink-400'] }, + + 'icon-success': { light: colorPrimitives['green-400'], dark: colorPrimitives['green-300'] }, + 'icon-error': { light: colorPrimitives['red-700'], dark: colorPrimitives['red-600'] }, + 'icon-warning': { light: colorPrimitives['yellow-400'], dark: colorPrimitives['yellow-300'] }, + 'icon-info': { light: colorPrimitives['blue-600'], dark: colorPrimitives['blue-500'] }, + 'icon-default': { light: iconSemantics['primary'].light, dark: iconSemantics['primary'].dark }, + 'icon-secondary': { light: iconSemantics['secondary'].light, dark: iconSemantics['secondary'].dark }, +}; diff --git a/src/modules/dashboard/Dashboard.tsx b/src/modules/dashboard/Dashboard.tsx index 72c4e5eb99..02c8424864 100644 --- a/src/modules/dashboard/Dashboard.tsx +++ b/src/modules/dashboard/Dashboard.tsx @@ -6,7 +6,7 @@ import { Box } from 'blocks'; import { DashboardSubHeader } from './components/DashboardSubHeader'; import { FeaturedChannels } from './components/FeaturedChannels'; import { ChannelVariantsSection } from './components/ChannelVariantsSection'; -import DashboardHeader from './components/DashboardHeader'; +import { DashboardHeader } from './components/DashboardHeader'; export type DashboardProps = {}; diff --git a/src/modules/dashboard/components/DashboardHeader.tsx b/src/modules/dashboard/components/DashboardHeader.tsx index 3d6a3510cc..aea0a34808 100644 --- a/src/modules/dashboard/components/DashboardHeader.tsx +++ b/src/modules/dashboard/components/DashboardHeader.tsx @@ -60,4 +60,4 @@ const DashboardHeader: FC = ({ setSubHeaderVisibility, sho ); }; -export default DashboardHeader; +export { DashboardHeader }; diff --git a/yarn.lock b/yarn.lock index 72e8c92697..227062d438 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4244,7 +4244,7 @@ __metadata: languageName: node linkType: hard -"@radix-ui/react-dialog@npm:^1.0.4": +"@radix-ui/react-dialog@npm:^1.0.4, @radix-ui/react-dialog@npm:^1.1.1": version: 1.1.1 resolution: "@radix-ui/react-dialog@npm:1.1.1" dependencies: @@ -18204,6 +18204,7 @@ __metadata: "@pushprotocol/restapi": "npm:1.7.23" "@pushprotocol/socket": "npm:0.5.3" "@pushprotocol/uiweb": "npm:1.4.2" + "@radix-ui/react-dialog": "npm:^1.1.1" "@radix-ui/react-dropdown-menu": "npm:^2.1.1" "@radix-ui/react-switch": "npm:^1.1.0" "@radix-ui/react-tooltip": "npm:^1.1.1" From c8eb40c56aa62fb9707b9ddd303cbf4fccb1ab9e Mon Sep 17 00:00:00 2001 From: Monalisha Mishra <42746736+mishramonalisha76@users.noreply.github.com> Date: Fri, 26 Jul 2024 12:29:51 +0530 Subject: [PATCH 28/34] fixed the text in dashboard (#1766) --- src/modules/dashboard/components/EmptyChannelList.tsx | 2 +- src/modules/dashboard/components/RewardsSection.tsx | 2 ++ 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/src/modules/dashboard/components/EmptyChannelList.tsx b/src/modules/dashboard/components/EmptyChannelList.tsx index 1dd8e7fbc6..ff7a3729a4 100644 --- a/src/modules/dashboard/components/EmptyChannelList.tsx +++ b/src/modules/dashboard/components/EmptyChannelList.tsx @@ -39,7 +39,7 @@ const EmptyChannelList: FC = ({ heading, subHeading }) => {subHeading} diff --git a/src/modules/dashboard/components/RewardsSection.tsx b/src/modules/dashboard/components/RewardsSection.tsx index 5ee4a95b8e..caf85dfd38 100644 --- a/src/modules/dashboard/components/RewardsSection.tsx +++ b/src/modules/dashboard/components/RewardsSection.tsx @@ -28,6 +28,7 @@ const RewardsSection = () => { Complete Tasks on Push. Earn Push Points and Unlock Rewards. @@ -35,6 +36,7 @@ const RewardsSection = () => { variant="h5-semibold" display={{ ml: 'block', dp: 'none' }} textAlign="center" + color="text-on-light-bg" > Complete Tasks on Push. Earn Push Points and Unlock Rewards. From e25865b549f79e56e4e8592a1aaf198b831da278 Mon Sep 17 00:00:00 2001 From: rohitmalhotra1420 Date: Fri, 26 Jul 2024 12:35:58 +0530 Subject: [PATCH 29/34] removed duplicate display --- src/structure/Header.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/structure/Header.tsx b/src/structure/Header.tsx index d884ee9884..daa73cb099 100644 --- a/src/structure/Header.tsx +++ b/src/structure/Header.tsx @@ -305,7 +305,7 @@ function Header({ isDarkMode, darkModeToggle }) { {isActive && !error && ( From 265611226fdc0a34d7edb2570eaca72ff057912e Mon Sep 17 00:00:00 2001 From: rohitmalhotra1420 Date: Fri, 26 Jul 2024 12:36:35 +0530 Subject: [PATCH 30/34] removed curropted file --- src/blocks/dropdown/Dropdown.utils.tsx | 35 -------------------------- 1 file changed, 35 deletions(-) delete mode 100644 src/blocks/dropdown/Dropdown.utils.tsx diff --git a/src/blocks/dropdown/Dropdown.utils.tsx b/src/blocks/dropdown/Dropdown.utils.tsx deleted file mode 100644 index e726e923f2..0000000000 --- a/src/blocks/dropdown/Dropdown.utils.tsx +++ /dev/null @@ -1,35 +0,0 @@ -import { DropdownPosition } from './Dropdown.types'; -import { DropdownMenuContentProps } from '@radix-ui/react-dropdown-menu'; - -export const getDropdownPositionalCSS = (dropdownPosition: DropdownPosition) => { - let style: { - align: DropdownMenuContentProps['align']; - side: DropdownMenuContentProps['side']; - } = { - align: 'center', - side: 'bottom', - }; - - switch (dropdownPosition) { - case 'top': - style = { - align: 'center', - side: 'top', - }; - break; - case 'left': - style = { - align: 'center', - side: 'left', - }; - break; - case 'right': - style = { - align: 'center', - side: 'right', - }; - break; - } - - return style; -}; From 4e61b8aca2a58deef50ce4d2eb718c3aed3644fe Mon Sep 17 00:00:00 2001 From: corlard3y Date: Thu, 18 Jul 2024 13:53:09 +0100 Subject: [PATCH 31/34] add bonus section --- .../rewards/components/BonusActivities.tsx | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) create mode 100644 src/modules/rewards/components/BonusActivities.tsx diff --git a/src/modules/rewards/components/BonusActivities.tsx b/src/modules/rewards/components/BonusActivities.tsx new file mode 100644 index 0000000000..d7a7115dd8 --- /dev/null +++ b/src/modules/rewards/components/BonusActivities.tsx @@ -0,0 +1,17 @@ +// components +import { Box, Text } from 'blocks'; + +const BonusActivities = () => { + return ( + + + Bonus Activities + + + ); +}; + +export { BonusActivities }; From c9b39dd956f7bc525af75fde91acebc8338da461 Mon Sep 17 00:00:00 2001 From: corlard3y Date: Fri, 19 Jul 2024 13:13:10 +0100 Subject: [PATCH 32/34] update rewards stake activities --- .../rewards/components/BonusActivities.tsx | 17 ----------------- .../RewardsActivitiesBottomSection.tsx | 3 ++- 2 files changed, 2 insertions(+), 18 deletions(-) delete mode 100644 src/modules/rewards/components/BonusActivities.tsx diff --git a/src/modules/rewards/components/BonusActivities.tsx b/src/modules/rewards/components/BonusActivities.tsx deleted file mode 100644 index d7a7115dd8..0000000000 --- a/src/modules/rewards/components/BonusActivities.tsx +++ /dev/null @@ -1,17 +0,0 @@ -// components -import { Box, Text } from 'blocks'; - -const BonusActivities = () => { - return ( - - - Bonus Activities - - - ); -}; - -export { BonusActivities }; diff --git a/src/modules/rewards/components/RewardsActivitiesBottomSection.tsx b/src/modules/rewards/components/RewardsActivitiesBottomSection.tsx index 1fc58d2060..89e9cab44c 100644 --- a/src/modules/rewards/components/RewardsActivitiesBottomSection.tsx +++ b/src/modules/rewards/components/RewardsActivitiesBottomSection.tsx @@ -9,6 +9,7 @@ import { RewardsActivitiesSection } from './RewardsActivitiesSection'; import { Box } from 'blocks'; import { BonusActivities } from './BonusActivitiesSection'; import { StakePushSection } from './StakePushSection'; +import { stakePush, stakePushMultiplier } from '../utils/stakePushArray'; export type RewardsActivitiesBottomSectionProps = {}; @@ -62,7 +63,7 @@ const RewardsActivitiesBottomSection: FC = subtitle="Visit app.push.org/yieldv2 and stake tokens in the Fee Pool or LP Pool to activate multipliers." /> - + ); }; From eb986e3229442fdfc60de82178a925f08497ba34 Mon Sep 17 00:00:00 2001 From: corlard3y Date: Wed, 24 Jul 2024 14:04:14 +0100 Subject: [PATCH 33/34] update bonus and other rewards --- src/App.tsx | 2 +- .../rewards/components/RewardsActivitiesBottomSection.tsx | 1 - 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index 0e2ed2946f..640361aba3 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -350,7 +350,7 @@ export default function App() { Date: Sat, 27 Jul 2024 13:38:55 +0100 Subject: [PATCH 34/34] unlock profile --- src/App.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/App.tsx b/src/App.tsx index 640361aba3..0e2ed2946f 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -350,7 +350,7 @@ export default function App() {