added preview

src/common/components/ChannelDetailsCard.tsx

@@ -11,7 +11,6 @@ import {
  Box,
  Button,
  CaretDown,
- Ethereum,
  NotificationMobile,
  ResponsiveProp,
  Skeleton,
@@ -22,6 +21,7 @@ import {
 import { SubscribeChannelDropdown } from 'common/components/SubscribeChannelDropdown';
 import { UnsubscribeChannelDropdown } from 'common/components/UnsubscribeChannelDropdown';
 import { UserSetting } from 'helpers/channel/types';
+import { appConfig } from 'config';
 
 export type ChannelDetailsCardProps = {
  channelDetails: ChannelDetails | undefined;
@@ -42,10 +42,12 @@ const ChannelDetailsCard: FC<ChannelDetailsCardProps> = ({
  userSettings,
  width,
 }) => {
- const AliasChain = channelDetails?.alias_blockchain_id && LOGO_ALIAS_CHAIN[+channelDetails.alias_blockchain_id];
-
- const hasAliasAddress =
- channelDetails && channelDetails?.alias_address != null && channelDetails?.alias_address != 'NULL';
+ let verifiedAliasChainIds = [
+ appConfig.coreContractChain,
+ ...(channelDetails?.aliases
+ ?.filter((item) => item.is_alias_verified)
+ .map((item) => parseInt(item.alias_blockchain_id)) || []),
+ ];
  return (
  <Box
  display="flex"
@@ -169,16 +171,30 @@ const ChannelDetailsCard: FC<ChannelDetailsCardProps> = ({
  </Tooltip>
  )}
 
- <Ethereum
- width={16}
- height={16}
- />
-
- {hasAliasAddress && AliasChain && (
- <AliasChain
- width={16}
- height={16}
- />
+ {verifiedAliasChainIds.length > 0 && (
+ <Box
+ display="flex"
+ alignItems="center"
+ margin="spacing-none spacing-none spacing-none spacing-xxxs"
+ >
+ {verifiedAliasChainIds.map((aliasChainId: number) => {
+ const LogoComponent = LOGO_ALIAS_CHAIN[aliasChainId];
+ return LogoComponent ? (
+ <Box
+ display="flex"
+ css={css`
+ margin-left: -5px;
+ `}
+ >
+ <LogoComponent
+ key={aliasChainId}
+ width={16}
+ height={16}
+ />
+ </Box>
+ ) : null;
+ })}
+ </Box>
  )}
  </Box>
  </Skeleton>

src/common/components/CopyButton.tsx

@@ -0,0 +1,30 @@
+import { Copy, Tooltip, Text, Box } from 'blocks';
+import { copyToClipboard } from 'helpers/UtilityHelper';
+import { FC, useState } from 'react';
+
+type CopyButtonProps = {
+ tooltipTitle: string;
+ content: string;
+};
+
+const CopyButton: FC<CopyButtonProps> = ({ tooltipTitle, content }) => {
+ const [hover, setHover] = useState(false);
+ return (
+ <Tooltip title={tooltipTitle}>
+ <Box
+ cursor="pointer"
+ display="flex"
+ onClick={() => copyToClipboard(content)}
+ onMouseEnter={() => setHover(true)}
+ onMouseLeave={() => setHover(false)}
+ >
+ <Copy
+ color={hover ? 'icon-primary' : 'icon-tertiary'}
+ size={12}
+ />
+ </Box>
+ </Tooltip>
+ );
+};
+
+export { CopyButton };

src/common/components/index.ts

@@ -6,4 +6,5 @@ export * from './UnsubscribeChannelDropdown';
 export * from './ModalHeader';
 export * from './StakingVariant';
 export * from './TokenFaucet';
+export * from './CopyButton';
 export * from './VerifiedChannelTooltipContent';

src/modules/channelDashboard/components/ChannelDashboardHeader.tsx

@@ -10,7 +10,7 @@ import {
  KebabMenuHorizontal,
  Menu,
  MenuItem,
- Skeleton
+ Skeleton,
 } from 'blocks';
 
 import { Alias, ChannelDetails } from 'queries';
@@ -32,7 +32,7 @@ const ChannelDashboardHeader: FC<ChannelDashboardHeaderProps> = ({
  channelDetails,
  setActiveState,
  onActiveNetwork,
- currentAliasDetails
+ currentAliasDetails,
 }) => {
  const { chainId } = useAccount();
  const isAliasVerified = currentAliasDetails && currentAliasDetails?.is_alias_verified === 0;
@@ -54,7 +54,12 @@ const ChannelDashboardHeader: FC<ChannelDashboardHeaderProps> = ({
 
  {/* Edit Channel and Dropdown only visible on Core network */}
  {onCoreNetwork && (
- <Box display="flex" height="fit-content" gap="spacing-xxs" justifyContent="center">
+ <Box
+ display="flex"
+ height="fit-content"
+ gap="spacing-xxs"
+ justifyContent="center"
+ >
  <Skeleton isLoading={!channelDetails?.name}>
  <Button
  variant="outline"
@@ -68,7 +73,7 @@ const ChannelDashboardHeader: FC<ChannelDashboardHeaderProps> = ({
 
  <Skeleton isLoading={!channelDetails?.name}>
  <Dropdown
- trigger="click"
+ trigger="hover"
  overlay={
  <Menu>
  <MenuItem
@@ -104,7 +109,10 @@ const ChannelDashboardHeader: FC<ChannelDashboardHeaderProps> = ({
  cursor="pointer"
  alignItems="center"
  >
- <KebabMenuHorizontal size={24} color="icon-primary" />
+ <KebabMenuHorizontal
+ size={24}
+ color="icon-primary"
+ />
  </Box>
  </Dropdown>
  </Skeleton>

src/modules/channelDetails/ChannelDetails.tsx

@@ -34,7 +34,6 @@ const ChannelDetails: FC = () => {
  //delete old channel page
  return (
  <Box
- height="90vh"
  width="-webkit-fill-available"
  padding="spacing-md spacing-sm"
  display="flex"
@@ -50,6 +49,7 @@ const ChannelDetails: FC = () => {
  hasMoreData={hasMoreData}
  isLoading={isLoading}
  setSelectedChannelId={setSelectedChannelId}
+ isFetchingNextPage={isFetchingNextPage}
  />
  <ChannelDetail
  channel={selectedChannel}

src/modules/channelDetails/ChannelDetails.utils.ts

@@ -0,0 +1,5 @@
+import channelTuts from 'config/channelTuts';
+
+export const getChannelTutorialDetails = (address: string) => {
+ return Object.values(channelTuts).find((tutorial) => tutorial.maintainer === address) || null;
+};