MEP 02/10/23

.eslintrc.json

@@ -14,6 +14,13 @@
       "rules": {
         "no-undef": "off"
       }
+    },
+    {
+      "files": ["components/lands/*.tsx"],
+      "rules": {
+        "react/prop-types": "off",
+        "react/no-unknown-property": "off"
+      }
     }
   ],
   "root": true

.github/workflows/main.yml

@@ -15,5 +15,5 @@ jobs:
       - uses: actions/checkout@v1
       - name: Run Tests
         run: |
-          npm install 
+          npm install --legacy-peer-deps
           npm test

.gitignore

@@ -4,6 +4,7 @@
 /node_modules
 /.pnp
 .pnp.js
+bun.lockb
 
 # testing
 /coverage

components/UI/actions/clickable/clickableGithubIcon.tsx

@@ -39,7 +39,7 @@ const ClickableGithubIcon: FunctionComponent<ClickableGithubIconProps> = ({
         <div className={styles.verifiedIcon}>
           <VerifiedIcon width={"18"} color={theme.palette.primary.main} />
         </div>
-        <GithubIcon width={width} color="white" />
+        <GithubIcon width={width} color="#101012" />
       </div>
     </Tooltip>
   ) : null;

components/UI/actions/socialmediaActions.tsx

@@ -35,21 +35,21 @@ const SocialMediaActions: FunctionComponent<SocialMediaActionsProps> = ({
   }, [identity]);
 
   return (
-    <div className="flex flex-row gap-1">
+    <div className="flex flex-row gap-3 w-full justify-evenly">
       <ClickableTwitterIcon
-        width="25"
+        width="16"
         domain={identity?.domain}
-        twitterId={apiIdentity?.old_twitter}
+        twitterId={apiIdentity?.twitter ?? apiIdentity?.old_twitter}
       />
       <ClickableDiscordIcon
-        width="25"
+        width="16"
         domain={identity?.domain}
-        discordId={apiIdentity?.old_discord}
+        discordId={apiIdentity?.discord ?? apiIdentity?.old_discord}
       />
       <ClickableGithubIcon
-        width="25"
+        width="16"
         domain={identity?.domain}
-        githubId={apiIdentity?.old_github}
+        githubId={apiIdentity?.github ?? apiIdentity?.old_github}
       />
     </div>
   );

components/UI/backButton.tsx

@@ -0,0 +1,26 @@
+import React, { FunctionComponent } from "react";
+import styles from "../../styles/components/backButton.module.css";
+
+type BackButtonProps = {
+  onClick: () => void;
+};
+
+const BackButton: FunctionComponent<BackButtonProps> = ({ onClick }) => (
+  <button onClick={onClick} className={styles.backButton}>
+    <svg
+      fill="none"
+      viewBox="0 0 24 24"
+      strokeWidth={1.5}
+      stroke="currentColor"
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M15.75 19.5L8.25 12l7.5-7.5"
+      />
+    </svg>
+    Back
+  </button>
+);
+
+export default BackButton;

components/UI/footer.tsx

@@ -1,11 +1,39 @@
 import React, { FunctionComponent } from "react";
-import styles from "../styles/components/footer.module.css";
+import styles from "../../styles/components/footer.module.css";
+import Link from "next/link";
+import TwitterIcon from "./iconsComponents/icons/twitterIcon";
+import DiscordIcon from "./iconsComponents/icons/discordIcon";
+import { useRouter } from "next/router";
 
 const Footer: FunctionComponent = () => {
+  const route = useRouter().route;
+  if (route.includes("addressOrDomain")) return null;
   return (
-    <div className="relative">
+    <div className="footer">
       <footer className={styles.footer}>
-        Powered by&nbsp;<strong>Starknet</strong>
+        <div className={styles.content}>
+          <Link href="/partnership">Partnership</Link>
+        </div>
+        <div className={styles.socials}>
+          <div
+            className={styles.social}
+            onClick={() => window.open("https://twitter.com/starknet_quest")}
+          >
+            <span>
+              <TwitterIcon width="16" color="#101012" />
+            </span>
+            Twitter
+          </div>
+          <div
+            className={styles.social}
+            onClick={() => window.open("http://discord.gg/Td4a5wS5")}
+          >
+            <span>
+              <DiscordIcon width="17" color="#101012" />
+            </span>
+            Discord
+          </div>
+        </div>
       </footer>
     </div>
   );

components/UI/iconsComponents/icons/arrowRightIcon.tsx

@@ -0,0 +1,23 @@
+import React, { FunctionComponent } from "react";
+
+const ArrowRightIcon: FunctionComponent<IconProps> = ({
+  width = 24,
+  color,
+}) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={width}
+      height={width}
+      viewBox="0 0 8 14"
+      fill="none"
+    >
+      <path
+        d="M7.4781 8.21816L2.95646 12.7398C2.40575 13.2905 1.77561 13.4134 1.06606 13.1085C0.356514 12.8036 0.00115935 12.2604 -7.83539e-08 11.479L-4.69848e-07 2.52263C-5.04056e-07 1.74003 0.355354 1.19628 1.06606 0.891356C1.77677 0.586435 2.4069 0.70991 2.95646 1.26178L7.4781 5.78343C7.65201 5.95734 7.78244 6.14574 7.8694 6.34863C7.95635 6.55153 7.99983 6.76891 7.99983 7.00079C7.99983 7.23267 7.95635 7.45006 7.8694 7.65295C7.78244 7.85585 7.65201 8.04425 7.4781 8.21816Z"
+        fill={color}
+      />
+    </svg>
+  );
+};
+
+export default ArrowRightIcon;

components/UI/iconsComponents/icons/closeIcon.tsx

@@ -1,8 +1,8 @@
 import React, { FunctionComponent } from "react";
 
-const CloseIcon: FunctionComponent = () => {
+const CloseIcon: FunctionComponent<IconProps> = ({ width }) => {
   return (
-    <svg viewBox="0 0 24 24">
+    <svg viewBox="0 0 24 24" width={width} height={width}>
       <path
         strokeLinecap="round"
         strokeLinejoin="round"

components/UI/iconsComponents/icons/copyIcon.tsx

@@ -0,0 +1,24 @@
+import React, { FunctionComponent } from "react";
+
+const CopyIcon: FunctionComponent<IconProps> = ({ width, color }) => {
+  return (
+    <svg
+      width={width}
+      height={width}
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M16 12.9V17.1C16 20.6 14.6 22 11.1 22H6.9C3.4 22 2 20.6 2 17.1V12.9C2 9.4 3.4 8 6.9 8H11.1C14.6 8 16 9.4 16 12.9Z"
+        fill={color}
+      />
+      <path
+        d="M17.0998 2H12.8998C9.81668 2 8.37074 3.09409 8.06951 5.73901C8.00649 6.29235 8.46476 6.75 9.02167 6.75H11.0998C15.2998 6.75 17.2498 8.7 17.2498 12.9V14.9781C17.2498 15.535 17.7074 15.9933 18.2608 15.9303C20.9057 15.629 21.9998 14.1831 21.9998 11.1V6.9C21.9998 3.4 20.5998 2 17.0998 2Z"
+        fill={color}
+      />
+    </svg>
+  );
+};
+
+export default CopyIcon;

components/UI/iconsComponents/icons/profilFilledIcon.tsx

@@ -0,0 +1,21 @@
+import React, { FunctionComponent } from "react";
+
+const ProfilFilledIcon: FunctionComponent<IconProps> = ({ color, width }) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 16 17"
+      width={width}
+      height={width}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M8 16.5C12.4183 16.5 16 12.9183 16 8.5C16 4.08172 12.4183 0.5 8 0.5C3.58172 0.5 0 4.08172 0 8.5C0 12.9183 3.58172 16.5 8 16.5ZM7.99921 3.5C7.36246 3.5 6.08895 4.17422 6.08895 5.45008C6.08895 6.80914 6.74171 7.91715 7.9701 7.95732H8.0225H8.06325H8.07489C8.63596 7.95732 9.90365 6.81249 9.90947 5.45342C9.90947 4.06758 8.63596 3.5 7.99921 3.5ZM12.4571 11.6104C12.4571 13.2213 10.7993 13.0602 9.25222 12.9099C8.81224 12.8672 8.38122 12.8253 7.99983 12.8253C7.61845 12.8253 7.18742 12.8672 6.74744 12.9099C5.20037 13.0602 3.54256 13.2213 3.54256 11.6104C3.54256 10.915 4.12766 10.2518 4.7522 9.75213C6.54694 8.33111 9.46587 8.33111 11.2475 9.75213C11.8786 10.2518 12.4571 10.8157 12.4571 11.6104Z"
+        fill={color}
+      />
+    </svg>
+  );
+};
+
+export default ProfilFilledIcon;

components/UI/iconsComponents/icons/trophyIcon.tsx

@@ -0,0 +1,20 @@
+import React, { FunctionComponent } from "react";
+
+const TrophyIcon: FunctionComponent<IconProps> = ({ width, color }) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={width}
+      height={width}
+      viewBox="0 0 18 18"
+      fill="none"
+    >
+      <path
+        d="M5.05246 15.4284V13.9999H7.9096V11.7856C7.32627 11.6546 6.80531 11.4075 6.34674 11.0441C5.88817 10.6808 5.55198 10.2256 5.33817 9.67843C4.44531 9.57129 3.69817 9.18153 3.09674 8.50915C2.49531 7.83676 2.19484 7.04796 2.19531 6.14272V5.42843C2.19531 5.03557 2.33531 4.69915 2.61531 4.41915C2.89531 4.13915 3.2315 3.99938 3.62388 3.99986H5.05246V2.57129H12.1953V3.99986H13.6239C14.0167 3.99986 14.3532 4.13986 14.6332 4.41986C14.9132 4.69986 15.0529 5.03605 15.0525 5.42843V6.14272C15.0525 7.04748 14.7517 7.83629 14.1503 8.50915C13.5489 9.182 12.802 9.57176 11.9096 9.67843C11.6953 10.2261 11.3589 10.6815 10.9003 11.0449C10.4417 11.4082 9.92103 11.6551 9.33817 11.7856V13.9999H12.1953V15.4284H5.05246ZM5.05246 8.14272V5.42843H3.62388V6.14272C3.62388 6.5951 3.75484 7.00296 4.01674 7.36629C4.27865 7.72962 4.62388 7.98843 5.05246 8.14272ZM12.1953 8.14272C12.6239 7.98796 12.9691 7.72891 13.231 7.36557C13.4929 7.00224 13.6239 6.59462 13.6239 6.14272V5.42843H12.1953V8.14272Z"
+        fill={color}
+      />
+    </svg>
+  );
+};
+
+export default TrophyIcon;

components/UI/menus/popup.tsx

@@ -0,0 +1,46 @@
+import React, { FunctionComponent } from "react";
+import styles from "../../../styles/components/popup.module.css";
+import Button from "../button";
+import CloseIcon from "../iconsComponents/icons/closeIcon";
+
+type PopupProps = {
+  title: string;
+  banner: string;
+  description: string;
+  buttonName: string;
+  onClick: () => void;
+  onClose?: () => void;
+};
+
+const Popup: FunctionComponent<PopupProps> = ({
+  title,
+  banner,
+  description,
+  buttonName,
+  onClick,
+  onClose,
+}) => {
+  return (
+    <div className={styles.popupContainer}>
+      <div className={styles.popup}>
+        <div className={styles.titleSide}>
+          <h1 className={styles.title}>{title}</h1>
+          <img className={styles.banner} src={banner} alt="banner" />
+        </div>
+        <div className={styles.contentSide}>
+          <p className={styles.description}>{description}</p>
+          <div className={styles.button}>
+            <Button onClick={onClick}>{buttonName}</Button>
+          </div>
+        </div>
+        {onClose && (
+          <button onClick={onClose} className={styles.close}>
+            <CloseIcon width="16" />
+          </button>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default Popup;

components/UI/modalWallet.tsx

@@ -74,7 +74,7 @@ const ModalWallet: FunctionComponent<ModalWalletProps> = ({
     >
       <div className={styles.menu}>
         <button className={styles.menu_close} onClick={closeModal}>
-          <CloseIcon />
+          <CloseIcon width="24" />
         </button>
         <div className={styles.menu_title}>
           <div className={styles.menu_title}>