Merge pull request #160 from Staketab/dev

added timeline modal and validate input

ui/components/atoms/alertMessage/index.module.css

@@ -0,0 +1,120 @@
+.alertMessage {
+	display: flex;
+	align-items: flex-start;
+	justify-content: flex-start;
+	padding: 10px 16px;
+	flex-direction: column;
+	border-radius: 7px;
+	line-height: 22px;
+	background-color: #EDEFF5;
+	position: relative;
+}
+
+.alertMessage .messageWrapper {
+	width: 100%;
+	display: flex;
+	align-items: center;
+}
+
+@media (max-width: 768px) {
+	.alertMessage .messageWrapper {
+		flex-direction: column;
+		align-items: start;
+	}
+}
+
+.alertMessage .messageWrapper .messageInfo {
+	max-width: 100%;
+	width: 100%;
+	display: flex;
+	align-items: flex-start;
+}
+
+.alertMessage .messageWrapper .messageInfo .icon {
+	min-width: 16px;
+	min-height: 16px;
+	margin-right: 6px;
+	margin-top: 3px;
+	display: flex;
+	align-items: center;
+}
+
+.alertMessage .messageWrapper .readmoreBtn {
+	margin-left: 6px;
+	display: flex;
+	align-items: center;
+	padding-right: 5px;
+	user-select: none;
+}
+
+.alertMessage .messageWrapper .readmoreBtn:hover {
+	cursor: pointer;
+}
+
+@media (max-width: 768px) {
+	.alertMessage .messageWrapper .readmoreBtn {
+		margin-left: 22px;
+	}
+}
+
+.alertMessage .messageWrapper .readmoreBtn .buttonTextUnderlined {
+	text-decoration: underline;
+	margin-left: 6px;
+	width: max-content;
+}
+
+.alertMessage .closeIcon {
+	fill: #7f7f7f;
+	width: 24px;
+	height: 24px;
+	cursor: pointer;
+	transition: all ease 100ms;
+	position: absolute;
+	top: 21px;
+	transform: translate(0, -50%);
+	right: 12px;
+}
+
+.alertMessage .closeIcon:hover {
+	fill: #464646;
+}
+
+.alertMessage .text {
+	word-break: break-word;
+}
+
+.alertMessage .breakAllText {
+	word-break: break-all;
+}
+
+.success {
+	background: #F3FAF7;
+	color: #68734B;
+}
+
+.warning {
+	background: #FAF6F3;
+	color: #73604B;
+}
+
+.error {
+	background: #FAF3F3;
+	color: #7C5B56;
+}
+
+.info {
+	background: #F9FAF3;
+	color: #73714B;
+}
+
+.normal {
+	background: #F7F8FA;
+	color: rgba(0, 0, 0, 0.8);
+}
+
+.scam {
+	background: rgba(250, 242, 242, 1);
+	color: rgba(124, 91, 86, 1);
+}
+
+

ui/components/atoms/alertMessage/index.tsx

@@ -0,0 +1,75 @@
+import React, { useState, ReactNode } from "react";
+import classNames from "classnames";
+
+import InfoIcon from "./img/InfoIcon.svg";
+import ErrorIcon from "./img/error.svg";
+import WarningIcon from "./img/warning.svg";
+import SucccessIcon from "./img/success.svg";
+import CloseIcon from "./img/CloseIcon.svg";
+import ScamAlert from "./img/ScamAlert.svg";
+
+import styles from "./index.module.css";
+import Image from "next/image";
+
+interface AlertMessageProps {
+  text?: string | ReactNode;
+  type: "info" | "success" | "error";
+  className?: string;
+  classNameWrapper?: string;
+  closeHandler?: () => void;
+  needCloseBtn?: boolean;
+  noIcon?: boolean;
+}
+
+const AlertMessage = ({
+  text,
+  type,
+  className,
+  needCloseBtn,
+  noIcon = false,
+  classNameWrapper,
+  closeHandler = () => {},
+}: AlertMessageProps) => {
+  const [show, setShow] = useState(true);
+  const infoIcon = {
+    success: <Image src={SucccessIcon} alt="" />,
+    warning: <Image src={WarningIcon} alt="" />,
+    info: <Image src={InfoIcon} alt="" />,
+    error: <Image src={ErrorIcon} alt="" />,
+    normal: <Image src={InfoIcon} alt="" />,
+    scam: <Image src={ScamAlert} alt="" />,
+  };
+
+  const handleCloseClick = () => {
+    closeHandler();
+    setShow(false);
+  };
+
+  return show ? (
+    <div className={classNames(styles.alertMessage, className, [styles[type]])}>
+      <div className={classNames(styles.messageWrapper, classNameWrapper)}>
+        <div className={styles.messageInfo}>
+          {!noIcon && infoIcon[type] && (
+            <div className={styles.icon}>{infoIcon[type]}</div>
+          )}
+          <span
+            className={styles.text}
+            style={{
+              width:
+                !noIcon && infoIcon[type]
+                  ? `calc(100% - 22px${needCloseBtn ? " - 26px" : ""})`
+                  : "100%",
+            }}
+          >
+            {text}
+          </span>
+        </div>
+        {needCloseBtn && (
+          <CloseIcon className={styles.closeIcon} onClick={handleCloseClick} />
+        )}
+      </div>
+    </div>
+  ) : null;
+};
+
+export default AlertMessage;

ui/components/atoms/copyIcon/copyIcon.module.css

@@ -11,12 +11,16 @@
 }
 
 .wrapper .copyIcon {
-  fill: #a9b5ff;
+  fill: #949499;
   position: absolute;
   left: calc(50% - 6px);
   margin: 0;
 }
 
+.wrapper .activeIcon {
+  fill: #a9b5ff;
+}
+
 .wrapper .pressed {
   position: absolute;
   left: calc(50% - 8px);

ui/components/atoms/copyIcon/iconElement.tsx

@@ -0,0 +1,29 @@
+import classNames from "classnames";
+import style from "./copyIcon.module.css";
+
+const CopyIconSVG = ({
+  isActive,
+  className,
+}: {
+  isActive?: boolean;
+  className?: string;
+}) => {
+  return (
+    <>
+      <svg
+        className={classNames(className, {
+          [style.activeIcon]: isActive,
+        })}
+        width="16"
+        height="16"
+        viewBox="0 0 16 16"
+        xmlns="http://www.w3.org/2000/svg"
+        fill="#949499"
+      >
+        <path d="M5.1822 3.10631C5.1822 2.02148 5.73465 1.45898 6.80943 1.45898H11.5806C12.6554 1.45898 13.2129 2.02148 13.2129 3.10631V9.91657C13.2129 10.9964 12.6554 11.5639 11.5806 11.5639H10.8273V12.498C10.8273 13.5829 10.2648 14.1454 9.19503 14.1454H4.42383C3.35407 14.1454 2.79157 13.5829 2.79157 12.498V5.64258C2.79157 4.55776 3.34905 3.99526 4.42383 3.99526H5.1822V3.10631ZM11.5003 10.5795C11.9874 10.5795 12.2285 10.3184 12.2285 9.85631V3.16657C12.2285 2.6995 11.9874 2.44336 11.5003 2.44336H6.89481C6.40764 2.44336 6.16657 2.6995 6.16657 3.16657V3.99526H9.19503C10.2698 3.99526 10.8273 4.55776 10.8273 5.64258V10.5795H11.5003ZM3.77595 5.70285V12.4378C3.77595 12.8998 4.02204 13.161 4.50921 13.161H9.10965C9.59682 13.161 9.84291 12.8998 9.84291 12.4378V5.70285C9.84291 5.23577 9.59682 4.97963 9.10965 4.97963H4.50921C4.02204 4.97963 3.77595 5.23577 3.77595 5.70285Z" />
+      </svg>
+    </>
+  );
+};
+
+export default CopyIconSVG;

ui/components/atoms/copyIcon/index.tsx

@@ -5,20 +5,27 @@ import iconPressed from "./img/CopyPressed.svg";
 import styles from "./copyIcon.module.css";
 import classNames from "classnames";
 import Image from "next/image";
+import CopyIconSVG from "./iconElement";
 type CopyIconProps = {
   onClick?: () => void;
   className?: string;
-  value: string
+  value: string;
+  isActive?: boolean;
 };
 
-const CopyIcon = ({ onClick, className, value }: CopyIconProps): JSX.Element => {
+const CopyIcon = ({
+  onClick,
+  className,
+  value,
+  isActive,
+}: CopyIconProps): JSX.Element => {
   const [pressed, setPressed] = useState(false);
   const [showPressed, setShowPressed] = useState(false);
 
   const copyHandler = (e) => {
     e.stopPropagation();
     onClick?.();
-      navigator.clipboard.writeText(value);
+    navigator.clipboard.writeText(value);
     if (!pressed) {
       setPressed(true);
       setTimeout(() => {
@@ -55,13 +62,13 @@ const CopyIcon = ({ onClick, className, value }: CopyIconProps): JSX.Element =>
         className={classNames(styles.wrapper, className)}
         onClick={copyHandler}
       >
-        <Image
-          src={icon}
-          alt=""
+        <CopyIconSVG
           className={classNames(styles.copyIcon, {
             [styles.animationSlide]: pressed,
           })}
+          isActive={isActive}
         />
+
         {showPressed && (
           <Image
             src={iconPressed}

ui/components/atoms/loader/loader.tsx

@@ -14,6 +14,7 @@ type LoaderProps = {
   gap?: number;
   duration?: number;
   variant?: LoaderVariant;
+  className?: string;
   circleSize?: {
     width: number;
     height: number;
@@ -30,6 +31,7 @@ const Loader = ({
   duration = 2000,
   variant = LoaderVariant.DOTS,
   circleSize,
+  className,
 }: LoaderProps): JSX.Element => {
   const r = radius;
   const g = gap;
@@ -81,6 +83,7 @@ const Loader = ({
         height={circleSize?.height ? circleSize?.height + "px" : "20px"}
         viewBox="0 0 100 100"
         preserveAspectRatio="xMidYMid"
+        className={className}
       >
         <circle
           cx="50"
@@ -106,6 +109,7 @@ const Loader = ({
 
   return (
     <svg
+      className={className}
       height={r * 2}
       width={width}
       viewBox={`0 0 ${width} ${r * 2}`}