Feat: mira changes (#28)

* feat: replace ETH Faucet by Faucet * feat: replace Soon badge by Coming soon badge * feat: add Careers link to the footer * feat: change Lock step description * feat: remove testnet label border * feat: add new link to Points programm * feat: replace points by rewards * fix: replace rewards by points * chore: uninstall fuelname-ts --------- Co-authored-by: Voiislav Mitrovich <[email protected]>
mira-amm · Sep 24, 2024 · 64e5e4f · 64e5e4f
1 parent 5abcae7
commit 64e5e4f
Show file tree

Hide file tree

Showing 10 changed files with 332 additions and 290 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/components/common/Footer/Footer.tsx b/src/components/common/Footer/Footer.tsx
@@ -1,5 +1,10 @@
 import Logo from "@/src/components/common/Logo/Logo";
-import { BlogLink, DiscordLink, TestnetUrl, XLink } from "@/src/utils/constants";
+import {
+  BlogLink,
+  DiscordLink,
+  TestnetUrl,
+  XLink,
+} from "@/src/utils/constants";
 
 import styles from "./Footer.module.css";
 import GithubIcon from "../../icons/Github/GithubIcon";
@@ -9,9 +14,9 @@ import clsx from "clsx";
 
 type Props = {
   isHomePage?: boolean;
-}
+};
 
-const Footer = ({isHomePage}: Props) => {
+const Footer = ({ isHomePage }: Props) => {
   const currentYear = new Date().getFullYear();
 
   return (
@@ -22,7 +27,8 @@ const Footer = ({isHomePage}: Props) => {
           <div className={styles.fuelWrapper}>
             {isHomePage && (
               <p className={styles.fuelText}>
-                &#8432;MIRA launched as a basic AMM and will transition to ve(3,3) soon
+                &#8432;MIRA launched as a basic AMM and will transition to
+                ve(3,3) soon
               </p>
             )}
           </div>
@@ -39,6 +45,12 @@ const Footer = ({isHomePage}: Props) => {
             <a href={BlogLink} target="_blank">
               Blog
             </a>
+            <a
+              href="https://docs.mira.ly/resources/careers"
+              target="_blank"
+            >
+              Careers
+            </a>
             <a href="mailto:[email protected]" target="_blank">
               Contact us
             </a>
@@ -67,24 +79,46 @@ const Footer = ({isHomePage}: Props) => {
             <a className={styles.link} href={DiscordLink}>
               Support
             </a>
-            <a className={styles.link} href="https://docs.mira.ly/resources/media-kit" target="_blank">
+            <a
+              className={styles.link}
+              href="https://docs.mira.ly/resources/media-kit"
+              target="_blank"
+            >
               Media Kit
             </a>
-            <a className={styles.link} href="https://docs.mira.ly/developer-guides/security-audit" target="_blank">
-            Security Audit 
-            </a>
-            <a className={styles.link} href="https://docs.mira.ly" target="_blank">
+            <a
+              className={styles.link}
+              href="https://docs.mira.ly/developer-guides/security-audit"
+              target="_blank"
+            >
+              Security Audit
+            </a>
+            <a
+              className={styles.link}
+              href="https://docs.mira.ly"
+              target="_blank"
+            >
               Docs
             </a>
             <a className={styles.link} href={BlogLink} target="_blank">
               Blog
             </a>
+            <a className={styles.link}
+              href="https://docs.mira.ly/resources/careers"
+              target="_blank"
+            >
+              Careers
+            </a>
             <a className={styles.link} href="mailto:[email protected]" target="_blank">
               Contact us
             </a>
           </div>
           <div className={styles.socialLinks}>
-            <a className={styles.socialLink} href="https://github.com/mira-amm" target="_blank">
+            <a
+              className={styles.socialLink}
+              href="https://github.com/mira-amm"
+              target="_blank"
+            >
               <GithubIcon />
             </a>
             <a className={styles.socialLink} href={DiscordLink} target="_blank">
@@ -99,7 +133,8 @@ const Footer = ({isHomePage}: Props) => {
           <div className={styles.fuelWrapper}>
             {isHomePage && (
               <p className={styles.fuelText}>
-                &#8432;MIRA launched as a basic AMM and will transition to ve(3,3) soon
+                &#8432;MIRA launched as a basic AMM and will transition to
+                ve(3,3) soon
               </p>
             )}
           </div>

diff --git a/src/components/common/Header/Header.module.css b/src/components/common/Header/Header.module.css
@@ -49,6 +49,12 @@
   cursor: pointer;
 }
 
+.rewardsLink {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
 @media (min-width: 1024px) {
   .header {
     font-size: 18px;

diff --git a/src/components/common/Header/Header.tsx b/src/components/common/Header/Header.tsx
@@ -13,6 +13,7 @@ import DisconnectMobile from "@/src/components/common/ConnectButton/DisconnectMo
 import { useIsConnected } from "@fuels/react";
 import useFaucetLink from "@/src/hooks/useFaucetLink";
 import { BlogLink, TestnetUrl } from "@/src/utils/constants";
+import { RewardsIcon } from "../../icons/Rewards/RewardsIcon";
 
 type Props = {
   isHomePage?: boolean;
@@ -56,18 +57,30 @@ const Header = ({ isHomePage }: Props) => {
               Liquidity
             </Link>
             <a href={faucetLink} className={styles.link} target="_blank">
-              ETH Faucet
+              Faucet
+            </a>
+            <a
+              href="https://fuel.mirror.xyz/UfX-NnWGvYy56K8lq5gPfGLPI58DGD3KOHBJupHIibk"
+              className={styles.link}
+              target="_blank"
+            >
+              <div className={styles.rewardsLink}>
+                <RewardsIcon />
+                Points
+              </div>
             </a>
-            <div className={styles.pointsText}>
-              Points
-              <SoonLabel className={styles.hiddenLabel} />
-            </div>
           </div>
         </div>
         <div className={clsx("mobileOnly", styles.links)}>
-          <a className={styles.points}>
-            <span className={styles.pointsText}>Points</span>
-            <SoonLabel />
+          <a
+            href="https://fuel.mirror.xyz/UfX-NnWGvYy56K8lq5gPfGLPI58DGD3KOHBJupHIibk"
+            className={styles.link}
+            target="_blank"
+          >
+            <div className={styles.rewardsLink}>
+              <RewardsIcon />
+              Points
+            </div>
           </a>
           <DisconnectMobile className={styles.disconnectMobile} />
           <MobileMenu />

diff --git a/...ts/common/Header/components/MobileMenu/components/MobileMenuContent/MobileMenuContent.tsx b/...ts/common/Header/components/MobileMenu/components/MobileMenuContent/MobileMenuContent.tsx
@@ -36,7 +36,7 @@ const MobileMenuContent = ({ expanded, toggleExpandedState }: Props) => {
       <nav className={styles.links}>
         <Link href="/swap">Swap</Link>
         <Link href="/liquidity">Liquidity</Link>
-        <a href={faucetLink} target="_blank">ETH Faucet</a>
+        <a href={faucetLink} target="_blank">Faucet</a>
         {/*<a href="#">Github</a>*/}
         <a href={DiscordLink} target="_blank">Discord</a>
         <a href={XLink} target="_blank">X</a>

diff --git a/src/components/common/RoadMapIcons/RoadMapIcon.module.css b/src/components/common/RoadMapIcons/RoadMapIcon.module.css
@@ -1,12 +1,14 @@
 .background {
-    width: 112px;
+    min-width: 112px;
     height: 40px;
     background: linear-gradient(132.04deg, #262F5F 11.87%, #C41CFF 176.88%);
     border-radius: 40px;
     color: var(--content-primary);
     display: flex;
     justify-content: center;
     align-items: center;
+    padding: 8px 25.5px;
+    box-sizing: border-box;
 }
 
 .text {

diff --git a/src/components/common/TestnetLabel/TestnetLabel.module.css b/src/components/common/TestnetLabel/TestnetLabel.module.css
@@ -4,7 +4,6 @@
   gap: 8px;
   padding: 7px 14px;
   border-radius: 20px;
-  border: 1px solid var(--content-primary);
   cursor: default;
   font-weight: 400 !important;
 }
diff --git a/src/components/icons/Rewards/RewardsIcon.tsx b/src/components/icons/Rewards/RewardsIcon.tsx
@@ -0,0 +1,25 @@
+export const RewardsIcon = () => {
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <rect width="24" height="24" rx="12" fill="#00F58C" />
+      <path
+        d="M7.8615 6.87964H16.1774L10.6676 12.3883C10.5308 12.525 10.3453 12.6017 10.152 12.6017C10.0139 12.6017 9.87857 12.5625 9.76186 12.4887C9.64515 12.4148 9.55181 12.3093 9.4927 12.1845L7.3581 7.67237C7.31797 7.58763 7.29996 7.49411 7.30575 7.40052C7.31153 7.30693 7.34093 7.21634 7.39119 7.13719C7.44145 7.05803 7.51094 6.9929 7.59319 6.94786C7.67542 6.90283 7.76774 6.87936 7.8615 6.87964Z"
+        fill="black"
+      />
+      <path
+        d="M7.29492 19.4618V14.1026C7.29498 13.9653 7.34957 13.8336 7.44667 13.7366C7.54378 13.6395 7.67545 13.585 7.81275 13.585H13.1738L7.29492 19.4618Z"
+        fill="black"
+      />
+      <path
+        d="M14.5407 12.2191C14.2955 12.4641 13.963 12.6017 13.6164 12.6017H11.8418L17.1824 7.26224C17.4276 7.01727 17.76 6.87966 18.1066 6.87964H19.8812L14.5407 12.2191Z"
+        fill="black"
+      />
+    </svg>
+  );
+};
diff --git a/src/components/pages/landing-page/LandingPageLayout.tsx b/src/components/pages/landing-page/LandingPageLayout.tsx
@@ -58,7 +58,7 @@ const LandingPageLayout = () => {
         </section>
         <section className={styles.mainInfo}>
           <div className={styles.mainInfoBadge}>
-            <RoadMapIcon text="Soon" />
+            <RoadMapIcon text="Coming Soon" />
           </div>
           <MainInfo
             title="Meet the First ve(3,3) DEX on Fuel*"
@@ -68,7 +68,7 @@ const LandingPageLayout = () => {
               <StepsBlock
                 logo={<StepsIcon icon={<LockIcon />} />}
                 title="Lock"
-                description="your MIRA and get in return vote-escrowed MIRA (veMIRA)"
+                description="Mira can be locked in return for escrowed Mira (veMIRA)"
               />
               <StepsBlock
                 logo={<StepsIcon icon={<VoteIcon />} />}
@@ -169,7 +169,7 @@ const LandingPageLayout = () => {
         </section>
         <section className={styles.mainInfo}>
           <div className={styles.mainInfoBadge}>
-            <RoadMapIcon text="Soon" />
+            <RoadMapIcon text="Coming Soon" />
           </div>
           <MainInfo
             title="Meet the First ve(3,3) DEX on Fuel*"
@@ -179,7 +179,7 @@ const LandingPageLayout = () => {
               <StepsBlock
                 logo={<StepsIcon icon={<LockIcon />} />}
                 title="Lock"
-                description="your MIRA and get in return vote-escrowed MIRA (veMIRA)"
+                description="Mira can be locked in return for escrowed Mira (veMIRA)"
               />
               <StepsBlock
                 logo={<StepsIcon icon={<VoteIcon />} />}

diff --git a/src/components/pages/liquidity-page/LiquidityPageLayout.tsx b/src/components/pages/liquidity-page/LiquidityPageLayout.tsx
@@ -27,7 +27,7 @@ const LiquidityPageLayout = () => {
           />
           <PromoBlock icon={<CupIcon />}
                       title="Fuel Points Program"
-                      link="https://app.fuel.network/earn-points"
+                      link="https://fuel.mirror.xyz/UfX-NnWGvYy56K8lq5gPfGLPI58DGD3KOHBJupHIibk"
                       linkText="Join the Fuel Points program. Learn more"
           />
         </div>