User Email/Telegram Integration

src/blocks/button/Button.tsx

@@ -29,6 +29,8 @@ export type ButtonProps = {
   block?: boolean;
   /* Button loading state */
   loading?: boolean;
+  /* indicate button type ina a form or similar usecases */
+  type?: 'button' | 'submit';
 } & TransformedHTMLAttributes<HTMLButtonElement>;
 
 const StyledButton = styled.button<ButtonProps>`
@@ -81,6 +83,7 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>(
       iconOnly,
       circular = false,
       children,
+      type,
       ...props
     },
     ref
@@ -94,6 +97,7 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>(
       role="button"
       ref={ref}
       size={size}
+      type={type}
       variant={variant}
       {...props}
     >

src/blocks/illustrations/components/DiscordProfile.tsx

@@ -0,0 +1,30 @@
+import { FC } from 'react';
+import { IllustrationWrapper } from '../IllustrationWrapper';
+import { IllustrationProps } from '../Illustrations.types';
+
+const DiscordProfile: FC<IllustrationProps> = (allProps) => {
+  const { svgProps: props, ...restProps } = allProps;
+  return (
+    <IllustrationWrapper
+      componentName="DiscordProfile"
+      illustration={
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width={restProps?.width ?? '28'}
+          height={restProps?.height ?? '22'}
+          viewBox="0 0 28 22"
+          fill="none"
+          {...props}
+        >
+          <path
+            d="M23.176 2.24798C21.4552 1.45838 19.6098 0.876619 17.6803 0.54339C17.6452 0.536957 17.61 0.553041 17.5919 0.585156C17.3546 1.00729 17.0917 1.55795 16.9076 1.99079C14.8324 1.68008 12.7677 1.68008 10.735 1.99079C10.5508 1.54835 10.2784 1.00729 10.04 0.585156C10.0219 0.554095 9.9868 0.538011 9.95168 0.54339C8.02329 0.875511 6.1779 1.45728 4.45591 2.24798C4.44099 2.25441 4.42823 2.26511 4.41974 2.27904C0.91944 7.50844 -0.0394818 12.6093 0.430909 17.6469C0.433018 17.6716 0.446887 17.6951 0.46603 17.7102C2.77543 19.4062 5.01252 20.4357 7.20801 21.1182C7.24314 21.1289 7.28037 21.1161 7.30273 21.0872C7.82205 20.378 8.28501 19.6301 8.68194 18.8437C8.70535 18.7977 8.68299 18.743 8.63511 18.7248C7.90079 18.4462 7.20158 18.1066 6.52895 17.7209C6.47575 17.6899 6.47147 17.6138 6.52046 17.5773C6.662 17.4713 6.8036 17.3609 6.93875 17.2495C6.96322 17.2291 6.99729 17.2249 7.02603 17.2377C11.4447 19.2551 16.2285 19.2551 20.5951 17.2377C20.6239 17.2237 20.6579 17.2281 20.6834 17.2484C20.8187 17.3598 20.9602 17.4712 21.1028 17.5773C21.1517 17.6137 21.1485 17.6898 21.0954 17.7209C20.4227 18.1141 19.7235 18.4462 18.9881 18.7237C18.9403 18.7419 18.919 18.7976 18.9424 18.8436C19.3479 19.629 19.8108 20.3768 20.3206 21.0861C20.3419 21.1161 20.3802 21.1289 20.4153 21.1182C22.6214 20.4357 24.8585 19.4061 27.1679 17.7101C27.1882 17.6951 27.2009 17.6726 27.203 17.648C27.766 11.824 26.2601 6.76489 23.2111 2.28009C23.2037 2.26512 23.1909 2.25441 23.176 2.24798ZM9.34191 14.5795C8.01158 14.5795 6.91539 13.3582 6.91539 11.8582C6.91539 10.3583 7.99028 9.13693 9.34191 9.13693C10.7041 9.13693 11.7897 10.369 11.7684 11.8582C11.7684 13.3582 10.6934 14.5795 9.34191 14.5795ZM18.3135 14.5795C16.9832 14.5795 15.887 13.3582 15.887 11.8582C15.887 10.3583 16.9619 9.13693 18.3135 9.13693C19.6757 9.13693 20.7612 10.369 20.74 11.8582C20.74 13.3582 19.6757 14.5795 18.3135 14.5795Z"
+            fill="#5865F2"
+          />
+        </svg>
+      }
+      {...restProps}
+    />
+  );
+};
+
+export default DiscordProfile;

src/blocks/illustrations/components/EmailProfile.tsx

@@ -0,0 +1,30 @@
+import { FC } from 'react';
+import { IllustrationWrapper } from '../IllustrationWrapper';
+import { IllustrationProps } from '../Illustrations.types';
+
+const EmailProfile: FC<IllustrationProps> = (allProps) => {
+  const { svgProps: props, ...restProps } = allProps;
+  return (
+    <IllustrationWrapper
+      componentName="EmailProfile"
+      illustration={
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width={restProps?.width ?? '23'}
+          height={restProps?.height ?? '17'}
+          viewBox="0 0 23 17"
+          fill="none"
+          {...props}
+        >
+          <path
+            d="M19.8248 0.854492H3.81389C2.16087 0.856473 0.821316 2.19602 0.819336 3.84905V13.8149C0.821316 15.468 2.16087 16.8075 3.81389 16.8095H19.8248C21.4778 16.8075 22.8174 15.468 22.8193 13.8149V3.84905C22.8174 2.19602 21.4778 0.856473 19.8248 0.854492ZM20.3039 5.35431L12.1348 10.453C11.9423 10.5755 11.6964 10.5755 11.5039 10.453L3.33476 5.35431C3.05361 5.179 2.9678 4.80897 3.14311 4.52781C3.31842 4.24666 3.68845 4.16085 3.96961 4.33616L11.8193 9.23925L19.6691 4.33616C19.9502 4.16085 20.3203 4.24666 20.4956 4.52781C20.6709 4.80897 20.5851 5.179 20.3039 5.35431Z"
+            fill="#EF9CFF"
+          />
+        </svg>
+      }
+      {...restProps}
+    />
+  );
+};
+
+export default EmailProfile;

src/blocks/illustrations/components/Telegram.tsx

@@ -0,0 +1,36 @@
+import { FC } from 'react';
+import { IllustrationWrapper } from '../IllustrationWrapper';
+import { IllustrationProps } from '../Illustrations.types';
+
+const Telegram: FC<IllustrationProps> = (allProps) => {
+  const { svgProps: props, ...restProps } = allProps;
+  return (
+    <IllustrationWrapper
+      componentName="Telegram"
+      illustration={
+        <svg
+          width={restProps?.width ?? '48'}
+          height={restProps?.height ?? '48'}
+          viewBox="0 0 48 48"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+          {...props}
+        >
+          <path
+            d="M0 24C0 10.7452 10.7452 0 24 0C37.2548 0 48 10.7452 48 24C48 37.2548 37.2548 48 24 48C10.7452 48 0 37.2548 0 24Z"
+            fill="#25A2E0"
+          />
+          <path
+            fill-rule="evenodd"
+            clip-rule="evenodd"
+            d="M9.13931 23.5154C16.9132 20.1285 22.097 17.8956 24.6907 16.8168C32.0963 13.7366 33.6352 13.2015 34.6381 13.1838C34.8587 13.1799 35.3519 13.2346 35.6714 13.4939C36.1454 13.8785 36.1481 14.7133 36.0955 15.2658C35.6941 19.4824 33.9577 29.715 33.0742 34.4377C32.7004 36.4361 31.9643 37.1062 31.2518 37.1717C29.7033 37.3142 28.5273 36.1483 27.0274 35.1651C24.6805 33.6266 23.3545 32.6689 21.0763 31.1676C18.4435 29.4326 20.1503 28.4791 21.6507 26.9207C22.0434 26.5128 28.8664 20.3067 28.9985 19.7437C29.0151 19.6733 29.0304 19.4108 28.8744 19.2722C28.7185 19.1337 28.4884 19.181 28.3223 19.2187C28.0869 19.2721 24.3375 21.7503 17.0742 26.6533C16.0099 27.3841 15.046 27.7401 14.1823 27.7215C13.2301 27.701 11.3987 27.1832 10.0371 26.7406C8.36713 26.1977 7.03983 25.9107 7.15546 24.9888C7.21567 24.5085 7.87692 24.0174 9.13931 23.5154Z"
+            fill="white"
+          />
+        </svg>
+      }
+      {...restProps}
+    />
+  );
+};
+
+export default Telegram;

src/blocks/illustrations/components/TelegramProfile.tsx

@@ -0,0 +1,32 @@
+import { FC } from 'react';
+import { IllustrationWrapper } from '../IllustrationWrapper';
+import { IllustrationProps } from '../Illustrations.types';
+
+const TelegramProfile: FC<IllustrationProps> = (allProps) => {
+  const { svgProps: props, ...restProps } = allProps;
+  return (
+    <IllustrationWrapper
+      componentName="TelegramProfile"
+      illustration={
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width={restProps?.width ?? '25'}
+          height={restProps?.height ?? '21'}
+          viewBox="0 0 25 21"
+          fill="none"
+          {...props}
+        >
+          <path
+            fill-rule="evenodd"
+            clip-rule="evenodd"
+            d="M2.40809 9.44191C8.8863 6.61943 13.2062 4.75866 15.3676 3.8597C21.5389 1.29286 22.8213 0.846943 23.657 0.832186C23.8409 0.828974 24.2519 0.874547 24.5182 1.09061C24.9131 1.41109 24.9154 2.10675 24.8715 2.56717C24.5371 6.08106 23.09 14.6082 22.3538 18.5438C22.0423 20.2091 21.4289 20.7675 20.8352 20.8221C19.5447 20.9409 18.5648 19.9693 17.3149 19.15C15.359 17.8679 14.2541 17.0698 12.3556 15.8187C10.1616 14.3729 11.5839 13.5783 12.8342 12.2796C13.1615 11.9397 18.8473 6.76795 18.9574 6.29877C18.9712 6.24009 18.984 6.02134 18.854 5.90588C18.7241 5.79043 18.5323 5.82984 18.3939 5.86127C18.1978 5.9058 15.0733 7.97099 9.0205 12.0568C8.13361 12.6658 7.33031 12.9625 6.6106 12.9469C5.81711 12.9298 4.2909 12.4983 3.15626 12.1295C1.7646 11.6772 0.65852 11.4379 0.754875 10.6697C0.805048 10.2694 1.35609 9.86023 2.40809 9.44191Z"
+            fill="#29A9EB"
+          />
+        </svg>
+      }
+      {...restProps}
+    />
+  );
+};
+
+export default TelegramProfile;

src/blocks/illustrations/index.ts

@@ -7,6 +7,8 @@ export { default as AlphaAccessNFT } from './components/AlphaAccessNFT';
 
 export { default as Arbitrum } from './components/Arbitrum';
 
+export { default as Avatar } from './components/Avatar';
+
 export { default as Base } from './components/Base';
 
 export { default as BlueBonusActivitySubscribers } from './components/BlueBonusActivitySubscribers';
@@ -29,8 +31,12 @@ export { default as CyberLogoRewards } from './components/CyberLogoRewards';
 
 export { default as Discord } from './components/Discord';
 
+export { default as DiscordProfile } from './components/DiscordProfile';
+
 export { default as EarnOnPush } from './components/EarnOnPush';
 
+export { default as EmailProfile } from './components/EmailProfile';
+
 export { default as Ethereum } from './components/Ethereum';
 
 export { default as FiveSubscribedDefiChannel } from './components/FiveSubscribedDefiChannel';
@@ -99,6 +105,10 @@ export { default as StakePushYellowMultiplier } from './components/StakePushYell
 
 export { default as SubscribePoints } from './components/SubscribePoints';
 
+export { default as Telegram } from './components/Telegram';
+
+export { default as TelegramProfile } from './components/TelegramProfile';
+
 export { default as TripleRewardsCoin } from './components/TripleRewardsCoin';
 
 export { default as Twitter } from './components/Twitter';

src/blocks/tooltip/Tooltip.tsx

@@ -20,6 +20,7 @@ const RadixTooltipContent = styled(RadixTooltip.Content).withConfig({
   word-wrap: break-word;
   color: var(--text-primary-inverse);
   background-color: var(--surface-primary-inverse);
+  z-index: 9999999999;
 
   /* Tooltip non-responsive styles */
   width: ${({ width }) => width};
@@ -96,21 +97,23 @@ const Tooltip: FC<TooltipProps> = ({
           {children}
         </RadixTooltip.Trigger>
         <RadixTooltip.Portal>
-          <RadixTooltipContent
-            sideOffset={8}
-            {...{ style, width, maxWidth }}
-            {...cssProps}
-            {...props}
-          >
-            {overlay ? (
-              overlay
-            ) : (
-              <>
-                {title && <StyledTitle>{title}</StyledTitle>}
-                {description && <StyledDescription>{description}</StyledDescription>}
-              </>
-            )}
-          </RadixTooltipContent>
+          {(title || overlay || description) && (
+            <RadixTooltipContent
+              sideOffset={8}
+              {...{ style, width, maxWidth }}
+              {...cssProps}
+              {...props}
+            >
+              {overlay ? (
+                overlay
+              ) : (
+                <>
+                  {title && <StyledTitle>{title}</StyledTitle>}
+                  {description && <StyledDescription>{description}</StyledDescription>}
+                </>
+              )}
+            </RadixTooltipContent>
+          )}
         </RadixTooltip.Portal>
       </RadixTooltip.Root>
     </RadixTooltip.Provider>

src/common/components/CopyButton.tsx

@@ -5,22 +5,31 @@ import { FC, useState } from 'react';
 type CopyButtonProps = {
   tooltipTitle: string;
   content: string;
+  size?: number;
 };
 
-const CopyButton: FC<CopyButtonProps> = ({ tooltipTitle, content }) => {
+const CopyButton: FC<CopyButtonProps> = ({ tooltipTitle, content, size }) => {
   const [hover, setHover] = useState(false);
+  const [copied, setCopied] = useState(false);
+
+  const handleCopy = () => {
+    copyToClipboard(content);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
+  };
+
   return (
-    <Tooltip title={tooltipTitle}>
+    <Tooltip title={hover ? (copied ? 'Copied!' : tooltipTitle) : undefined}>
       <Box
         cursor="pointer"
         display="flex"
-        onClick={() => copyToClipboard(content)}
+        onClick={handleCopy}
         onMouseEnter={() => setHover(true)}
         onMouseLeave={() => setHover(false)}
       >
         <Copy
           color={hover ? 'icon-primary' : 'icon-tertiary'}
-          size={12}
+          size={size || 12}
         />
       </Box>
     </Tooltip>