Skip to content

Commit

Permalink
Fixed the tag color and the sidebar send notification disappearing issur
Browse files Browse the repository at this point in the history
  • Loading branch information
@abhishek-01k
abhishek-01k committed Aug 19, 2024
1 parent e42b41a commit 865e802
Show file tree
Hide file tree
Showing 2 changed files with 109 additions and 78 deletions.
159 changes: 97 additions & 62 deletions src/modules/channelDashboard/components/ChannelDashboardInfo.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { FC, useState } from 'react';
import { css } from 'styled-components';
import { useNavigate } from 'react-router-dom';

import { Box, CircleFilled, Copy, Ethereum, PlusCircle, Skeleton, Text, TickCircleFilled, Tooltip } from 'blocks';
import { Box, Copy, Ethereum, PlusCircle, Skeleton, Tag, Text, TickCircleFilled, Tooltip } from 'blocks';

import { LOGO_ALIAS_CHAIN } from 'common';

Expand Down Expand Up @@ -42,7 +42,11 @@ const ChannelDashboardInfo: FC<ChannelDashboardInfoProps> = ({
};

return (
<Box display="flex" gap="spacing-sm" alignItems="center">
<Box
display="flex"
gap="spacing-sm"
alignItems="center"
>
<Skeleton isLoading={!channelDetails?.name || isAliasVerified}>
<Box
width="90px"
Expand All @@ -55,30 +59,56 @@ const ChannelDashboardInfo: FC<ChannelDashboardInfoProps> = ({
}
`}
>
<img width="100%" height="100%" src={channelDetails?.iconV2} />
<img
width="100%"
height="100%"
src={channelDetails?.iconV2}
/>
</Box>
</Skeleton>

<Box display="flex" flexDirection="column" gap="spacing-xxxs">
<Skeleton isLoading={!channelDetails?.name || isAliasVerified} width="200px" height="30px">
<Box
display="flex"
flexDirection="column"
gap="spacing-xxxs"
>
<Skeleton
isLoading={!channelDetails?.name || isAliasVerified}
width="200px"
height="30px"
>
<Box
display="flex"
alignItems={{ initial: 'center', ml: 'baseline' }}
flexDirection={{ ml: 'column', initial: 'row' }}
>
<Text variant="h4-semibold" color="text-primary">
<Text
variant="h4-semibold"
color="text-primary"
>
{channelDetails?.name}
</Text>

<Box display="flex" alignItems="center">
<Box
display="flex"
alignItems="center"
>
<Box
display="flex"
alignItems="center"
margin={{ initial: 'spacing-none spacing-none spacing-none spacing-xxxs', ml: 'spacing-none' }}
>
{!!channelDetails?.is_alias_verified && <TickCircleFilled size={22} color="icon-tertiary" />}
{!!channelDetails?.verified_status && (
<TickCircleFilled
size={22}
color="icon-tertiary"
/>
)}

<Ethereum width={18} height={18} />
<Ethereum
width={18}
height={18}
/>
{verifiedAliasChainIds.length > 0 &&
verifiedAliasChainIds.map((aliasChainId: number) => {
const LogoComponent = LOGO_ALIAS_CHAIN[aliasChainId];
Expand All @@ -89,93 +119,98 @@ const ChannelDashboardInfo: FC<ChannelDashboardInfoProps> = ({
margin-left: -4px;
`}
>
<LogoComponent key={aliasChainId} width={18} height={18} />
<LogoComponent
key={aliasChainId}
width={18}
height={18}
/>
</Box>
) : null;
})}
</Box>

{showAddNewChain && (
<Box display="flex" cursor="pointer" onClick={() => navigate(APP_PATHS.AddNewChain)}>
<PlusCircle size={24} color="icon-primary" />
<Box
display="flex"
cursor="pointer"
onClick={() => navigate(APP_PATHS.AddNewChain)}
>
<PlusCircle
size={24}
color="icon-primary"
/>
</Box>
)}
</Box>
</Box>
</Skeleton>

<Box display="flex" flexDirection="column" gap="spacing-xs">
<Skeleton isLoading={!channelDetails?.name || isAliasVerified} width="100%">
<Box display="flex" gap="spacing-xxxs">
<Text color="text-tertiary" variant="c-regular">
<Box
display="flex"
flexDirection="column"
gap="spacing-xs"
>
<Skeleton
isLoading={!channelDetails?.name || isAliasVerified}
width="100%"
>
<Box
display="flex"
gap="spacing-xxxs"
>
<Text
color="text-tertiary"
variant="c-regular"
>
{shortenText(channelDetails ? channelDetails?.channel : '', 5)}
</Text>

<Tooltip title={tooltipText}>
<Box cursor="pointer">
<Copy onClick={copyWalletAddress} size={14} color="icon-tertiary" />
<Copy
onClick={copyWalletAddress}
size={14}
color="icon-tertiary"
/>
</Box>
</Tooltip>
</Box>
</Skeleton>

<Box display="flex" gap="spacing-xs">
<Box
display="flex"
gap="spacing-xs"
>
<Skeleton isLoading={!channelDetails?.name || isAliasVerified}>
<Text color="text-tertiary" variant="c-regular">
<Text
color="text-tertiary"
variant="c-regular"
>
{channelDetails?.subscriber_count} subscribers
</Text>
</Skeleton>

{!onActiveNetwork ? <Box
display="flex"
alignItems="center"
gap="spacing-xxxs"
padding="spacing-none spacing-xxxs"
backgroundColor="surface-state-warning-subtle"
borderRadius="radius-xs"
>
<CircleFilled size={8} color='icon-state-warning-bold' />
<Text color='text-warning-bold' variant="bes-semibold">
{' '}
Setup Pending
</Text>
</Box> : (
{!onActiveNetwork ? (
<Tag
label="Setup Pending"
variant="warning"
/>
) : (
<>
{channelDetails?.activation_status === 0 && (
<Box
display="flex"
alignItems="center"
gap="spacing-xxxs"
padding="spacing-none spacing-xxxs"
backgroundColor="surface-state-danger-subtle"
borderRadius="radius-xs"
>
<CircleFilled size={8} color="icon-state-danger-bold" />
<Text color="text-state-danger-bold" variant="bes-semibold">
{' '}
Deactivated
</Text>
</Box>
<Tag
label="Deactivated"
variant="danger"
/>
)}
{channelDetails?.activation_status === 1 && (
<Box
display="flex"
alignItems="center"
gap="spacing-xxxs"
padding="spacing-none spacing-xxxs"
backgroundColor="surface-state-success-subtle"
borderRadius="radius-xs"
>
<CircleFilled size={8} color="icon-state-success-bold" />
<Text color="text-state-success-bold" variant="bes-semibold">
{' '}
Active
</Text>
</Box>
<Tag
label="Active"
variant="success"
/>
)}
</>
)}

</Box>
</Box>
</Box>
Expand Down
28 changes: 12 additions & 16 deletions src/structure/Navigation.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -187,24 +187,20 @@ function Navigation() {
}, [canSend, channelDetails, navigationSetup, processingState, account]);

useEffect(() => {
if (processingState !== 0) {
dispatch(setCanSend(SEND_NOTIFICATION_STATES.LOADING));
} else {
/**
* If its a delegate
* If the channel Details is present on the core network
*/
if (delegatees && delegatees.length > 0) {
dispatch(setCanSend(SEND_NOTIFICATION_STATES.SEND));
}
/**
* If its a delegate
* If the channel Details is present on the core network
*/
if (delegatees && delegatees.length > 0) {
dispatch(setCanSend(SEND_NOTIFICATION_STATES.SEND));
}

if (onActiveNetwork && channelDetails && channelDetails?.name !== null) {
dispatch(setCanSend(SEND_NOTIFICATION_STATES.SEND));
} else {
dispatch(setCanSend(SEND_NOTIFICATION_STATES.HIDE));
}
if (onActiveNetwork && channelDetails && channelDetails?.name !== null) {
dispatch(setCanSend(SEND_NOTIFICATION_STATES.SEND));
} else {
dispatch(setCanSend(SEND_NOTIFICATION_STATES.HIDE));
}
}, [channelDetails, delegatees, canSend, processingState, account, onActiveNetwork]);
}, [channelDetails, delegatees, canSend, account, onActiveNetwork]);

// Similar to componentDidMount and componentDidUpdate:
useEffect(() => {
Expand Down

0 comments on commit 865e802

Please sign in to comment.