Merge pull request #112 from ApeSwapFinance/feat/tlos

feat: Telos chain
ApeSwapFinance · Oct 20, 2022 · f59c048 · f59c048
2 parents 5246a95 + a9a8a5d
commit f59c048
Show file tree

Hide file tree

Showing 19 changed files with 192 additions and 57 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ape.swap/uikit",
-  "version": "1.3.33",
+  "version": "1.3.35",
   "description": "Set of UI components for apeswap projects",
   "main": "dist/index.cjs.js",
   "resolutions": {

diff --git a/src/__tests__/components/input.test.tsx b/src/__tests__/components/input.test.tsx
@@ -9,7 +9,7 @@ it("renders correctly", () => {
   expect(asFragment()).toMatchInlineSnapshot(`
     <DocumentFragment>
       <div
-        class="css-1u137ur"
+        class="css-r8xm40"
       >
         <input
           class="css-1spk4n4"

diff --git a/src/__tests__/widgets/menu.test.tsx b/src/__tests__/widgets/menu.test.tsx
@@ -426,7 +426,7 @@ it("renders correctly", () => {
                   </a>
                   <a
                     class="sc-kLgnNl iobZJR"
-                    href="https://t.me/ape_swap"
+                    href="https://discord.gg/apeswap"
                     rel="noopener noreferrer"
                     target="_blank"
                   >
@@ -642,7 +642,7 @@ it("renders correctly", () => {
                       />
                     </svg>
                     <div
-                      class="css-1u137ur"
+                      class="css-r8xm40"
                     >
                       <input
                         class="input css-y01sy6-NewsletterForm"
@@ -653,7 +653,7 @@ it("renders correctly", () => {
                     </div>
                   </div>
                   <button
-                    class="input-btn css-1jj7t0h-NewsletterForm"
+                    class="input-btn css-ya9p4b-NewsletterForm"
                     type="submit"
                   >
                     <svg
@@ -959,7 +959,7 @@ it("renders correctly", () => {
                 </a>
                 <a
                   class="sc-dmlqKv hsLGOY"
-                  href="https://discord.com/invite/ApeSwap"
+                  href="https://discord.gg/apeswap"
                   rel="noopener noreferrer"
                   target="_blank"
                 >

diff --git a/src/components/Dropdown/Dropdown.tsx b/src/components/Dropdown/Dropdown.tsx
@@ -48,7 +48,7 @@ const Dropdown: React.FC<DropdownProps> = ({ component, children, size = sizes.M
               borderBottomRightRadius: "10px",
               borderBottomLeftRadius: "10px",
               overflow: "hidden",
-              paddingTop: "5px",
+              marginTop: "5px",
               top: "85%",
             }}
           >

diff --git a/src/components/Footer/Footer.tsx b/src/components/Footer/Footer.tsx
@@ -66,7 +66,7 @@ const Footer: React.FC<FooterProps> = ({
             <FullLogo width="240px" mb="20px" />
             <Text color="primaryBright" size="16px">
               {t(
-                `ApeSwap is a DeFi Hub on BNB Chain, Polygon and Ethereum focused on offering an accessible, transparent and secure experience for everyone.`
+                `ApeSwap is a multichain DeFi Hub offering an accessible, transparent, and secure experience for everyone.`
               )}
             </Text>
             <ButtonFlex>
@@ -82,13 +82,11 @@ const Footer: React.FC<FooterProps> = ({
                   onClick={() => trackClick(track, event, position, chainId, "twitter", "https://twitter.com/ape_swap")}
                 />
               </StyledLink>
-              <StyledLink href="https://discord.com/invite/ApeSwap" target="_blank" rel="noopener noreferrer">
+              <StyledLink href="https://discord.gg/apeswap" target="_blank" rel="noopener noreferrer">
                 <DiscordIcon
                   color="white3"
                   fill={iconFillColor}
-                  onClick={() =>
-                    trackClick(track, event, position, chainId, "discord", "https://discord.com/invite/ApeSwap")
-                  }
+                  onClick={() => trackClick(track, event, position, chainId, "discord", "https://discord.gg/apeswap")}
                 />
               </StyledLink>
               <StyledLink href="https://t.me/ape_swap" target="_blank" rel="noopener noreferrer">

diff --git a/src/components/Footer/config.tsx b/src/components/Footer/config.tsx
@@ -5,7 +5,7 @@ export const supportLinks = [
   },
   {
     label: "Discord",
-    href: "https://discord.com/invite/ApeSwap",
+    href: "https://discord.gg/apeswap",
   },
   {
     label: "Tokenomics",

diff --git a/src/components/Input/Input.tsx b/src/components/Input/Input.tsx
@@ -7,7 +7,6 @@ const Input: React.FC<InputProps> = ({ size = sizes.MD, icon, width, ...props })
   return (
     <Box
       sx={{
-        position: "relative",
         width: "fit-content",
       }}
     >

diff --git a/src/components/Svg/Svg.tsx b/src/components/Svg/Svg.tsx
@@ -51,7 +51,7 @@ import {
   Message,
   Positions,
 } from "./Icons";
-import { BSC, BANANA, BNB, ETH, GNANA, POLYGON } from "./tokens";
+import { BSC, BANANA, BNB, ETH, GNANA, POLYGON, TLOS } from "./tokens";
 import { IconStyles } from "./Icons/types";
 
 const Svg: React.FC<SvgProps> = ({ icon, ...props }: any) => {
@@ -190,6 +190,9 @@ const Svg: React.FC<SvgProps> = ({ icon, ...props }: any) => {
   if (icon === icons.POLYGON_TOKEN) {
     return <POLYGON {...props} getStyles={getStyles} />;
   }
+  if (icon === icons.TLOS_TOKEN) {
+    return <TLOS {...props} getStyles={getStyles} />;
+  }
   if (icon === icons.BSC_TOKEN) {
     return <BSC {...props} getStyles={getStyles} />;
   }

diff --git a/src/components/Svg/tokens/TLOS.tsx b/src/components/Svg/tokens/TLOS.tsx
@@ -0,0 +1,95 @@
+import React from "react";
+import { SvgProps } from "../types";
+
+const TLOS: React.FC<SvgProps> = ({ width }) => {
+  return (
+    <svg width={width || "25"} viewBox="0 0 114 114" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <circle cx="57" cy="57" r="57" fill="url(#paint0_linear)" />
+      <g filter="url(#filter0_i)">
+        <circle cx="57" cy="57" r="57" fill="url(#paint1_linear)" />
+      </g>
+      <circle cx="57" cy="57" r="56.4062" stroke="url(#paint2_linear)" strokeOpacity="0.12" strokeWidth="1.1875" />
+      <g filter="url(#filter1_di)">
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M78.1902 29.5337C78.432 28.9047 77.9953 28.2215 77.323 28.1769L65.9858 27.425C65.6353 27.4018 65.2984 27.5641 65.0981 27.8526L62.0942 32.1799C61.9062 32.4508 61.5966 32.6116 61.2669 32.6097L41.3099 32.4919C40.3307 32.4861 39.3835 32.8397 38.6476 33.4856L33.1104 38.3457C31.8784 39.427 31.4309 41.1507 31.9812 42.6948L34.6187 50.0948C34.6322 50.133 34.6258 50.1754 34.6014 50.2077V50.2077C33.1195 52.1776 32.258 54.5443 32.1266 57.0059L32.0819 57.8444C31.8028 63.0749 32.4187 68.3138 33.9037 73.337C35.1274 77.4764 36.5298 82.2203 37.3894 85.128C37.8429 86.6621 39.4098 87.5672 40.9653 87.1936C44.3144 86.3893 50.0664 85.0074 54.5963 83.9167C58.5798 82.9575 62.3674 81.3222 65.8017 79.0873L67.9506 77.6889C70.0167 76.3444 71.6355 74.4149 72.6006 72.1465V72.1465C72.6164 72.1093 72.6499 72.0825 72.6897 72.0752L80.4171 70.6592C82.0295 70.3638 83.2984 69.1144 83.6189 67.5068L85.0593 60.2814C85.2508 59.3211 85.0833 58.324 84.5887 57.4789L75.2139 41.4603C74.5997 40.4109 74.4962 39.139 74.9327 38.0041L78.1902 29.5337Z"
+          stroke="white"
+          strokeWidth="5.5"
+        />
+      </g>
+      <defs>
+        <filter
+          id="filter0_i"
+          x="-9.5"
+          y="0"
+          width="123.5"
+          height="114"
+          filterUnits="userSpaceOnUse"
+          colorInterpolationFilters="sRGB"
+        >
+          <feFlood floodOpacity="0" result="BackgroundImageFix" />
+          <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
+          <feColorMatrix
+            in="SourceAlpha"
+            type="matrix"
+            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+            result="hardAlpha"
+          />
+          <feOffset dx="-14.25" />
+          <feGaussianBlur stdDeviation="4.75" />
+          <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
+          <feColorMatrix type="matrix" values="0 0 0 0 0.682353 0 0 0 0 0.45098 0 0 0 0 0.980392 0 0 0 0.56 0" />
+          <feBlend mode="normal" in2="shape" result="effect1_innerShadow" />
+        </filter>
+        <filter
+          id="filter1_di"
+          x="28.0378"
+          y="24.1923"
+          width="60.8097"
+          height="67.2773"
+          filterUnits="userSpaceOnUse"
+          colorInterpolationFilters="sRGB"
+        >
+          <feFlood floodOpacity="0" result="BackgroundImageFix" />
+          <feColorMatrix
+            in="SourceAlpha"
+            type="matrix"
+            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+            result="hardAlpha"
+          />
+          <feOffset dy="0.480491" />
+          <feGaussianBlur stdDeviation="0.480491" />
+          <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.12 0" />
+          <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow" />
+          <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape" />
+          <feColorMatrix
+            in="SourceAlpha"
+            type="matrix"
+            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+            result="hardAlpha"
+          />
+          <feOffset dy="0.480491" />
+          <feGaussianBlur stdDeviation="0.480491" />
+          <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
+          <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.12 0" />
+          <feBlend mode="normal" in2="shape" result="effect2_innerShadow" />
+        </filter>
+        <linearGradient id="paint0_linear" x1="57" y1="0" x2="57" y2="114" gradientUnits="userSpaceOnUse">
+          <stop stopColor="#130C3F" />
+          <stop offset="1" stopColor="#15197B" />
+        </linearGradient>
+        <linearGradient id="paint1_linear" x1="0" y1="57" x2="114" y2="57" gradientUnits="userSpaceOnUse">
+          <stop stopColor="#AE73FA" />
+          <stop offset="1" stopColor="#AE73FA" stopOpacity="0" />
+        </linearGradient>
+        <linearGradient id="paint2_linear" x1="114" y1="57" x2="-1.66555e-06" y2="57" gradientUnits="userSpaceOnUse">
+          <stop stopColor="#AE73FA" />
+          <stop offset="1" stopColor="#AE73FA" stopOpacity="0" />
+        </linearGradient>
+      </defs>
+    </svg>
+  );
+};
+
+export default TLOS;
diff --git a/src/components/Svg/tokens/index.ts b/src/components/Svg/tokens/index.ts
@@ -4,3 +4,4 @@ export { default as BSC } from "./BSC";
 export { default as ETH } from "./ETH";
 export { default as GNANA } from "./GNANA";
 export { default as POLYGON } from "./POLYGON";
+export { default as TLOS } from "./TLOS";
diff --git a/src/components/Svg/types.ts b/src/components/Svg/types.ts
@@ -40,6 +40,7 @@ export enum icons {
   ETH_TOKEN = "eth_token",
   GNANA_TOKEN = "gnana_token",
   POLYGON_TOKEN = "polygon_token",
+  TLOS_TOKEN = "tlos_token",
   BSC_TOKEN = "bsc_token",
   DISCORD = "discord",
   REDDIT = "reddit",

diff --git a/src/widgets/Navbar/MobileNavMenu.tsx b/src/widgets/Navbar/MobileNavMenu.tsx
@@ -218,13 +218,11 @@ const MobileNavMenu: React.FC<MobileNavMenuProps> = ({
                 onClick={() => trackClick(track, event, position, chainId, "telegram", "https://t.me/ape_swap")}
               />
             </StyledLink>
-            <StyledLink href="https://t.me/ape_swap" target="_blank" rel="noopener noreferrer">
+            <StyledLink href="https://discord.gg/apeswap" target="_blank" rel="noopener noreferrer">
               <DiscordIcon
                 color="white3"
                 fill={iconFillColor}
-                onClick={() =>
-                  trackClick(track, event, position, chainId, "discord", "https://discord.com/invite/ApeSwap")
-                }
+                onClick={() => trackClick(track, event, position, chainId, "discord", "https://discord.gg/apeswap")}
               />
             </StyledLink>
           </div>

diff --git a/src/widgets/Navbar/SubNavbar.tsx b/src/widgets/Navbar/SubNavbar.tsx
@@ -151,13 +151,11 @@ const SubNavbar: React.FC<SubNavbarProps> = ({
                 onClick={() => trackClick(track, event, position, chainId, "telegram", "https://t.me/ape_swap")}
               />
             </StyledLink>
-            <StyledLink href="https://discord.com/invite/ApeSwap" target="_blank" rel="noopener noreferrer">
+            <StyledLink href="https://discord.gg/apeswap" target="_blank" rel="noopener noreferrer">
               <DiscordIcon
                 color="white3"
                 fill={iconFillColor}
-                onClick={() =>
-                  trackClick(track, event, position, chainId, "discord", "https://discord.com/invite/ApeSwap")
-                }
+                onClick={() => trackClick(track, event, position, chainId, "discord", "https://discord.gg/apeswap")}
               />
             </StyledLink>
           </Flex>

diff --git a/src/widgets/Navbar/index.stories.tsx b/src/widgets/Navbar/index.stories.tsx
@@ -17,17 +17,17 @@ export default {
   argTypes: {
     colorMode: {
       options: ["light", "dark"],
-      control: { type: "inline-radio" }
-    }
-  }
+      control: { type: "inline-radio" },
+    },
+  },
 };
 
 const langs: Language[] = [...Array(20)].map((_, i) => ({ code: `en${i}`, language: `English${i}`, locale: `e${i}` }));
 const translate: (key: string) => string = (key) => key;
 const track: TrackHandler =
   // eslint-disable-next-line no-empty-pattern
-  ({}: TrackProps) =>
-  () => ({});
+    ({}: TrackProps) =>
+    () => ({});
 const mcLink = "";
 
 export const Connected: React.FC = (args: any) => {
@@ -39,12 +39,12 @@ export const Connected: React.FC = (args: any) => {
       settings: [
         { id: 1, label: "Raise", settings: [{ id: 1, tag: "LIVE", navItem: "Official IAO" }] },
         { id: 2, label: "Collect", settings: [{ id: 2, tag: "LIVE", navItem: "NFA Auction" }] },
-        { id: 3, label: "Explore", settings: [{ id: 1, tag: "LIVE", navItem: "ApeStats" }] }
+        { id: 3, label: "Explore", settings: [{ id: 1, tag: "LIVE", navItem: "ApeStats" }] },
       ],
       published_at: "2022-04-11T18:15:41.981Z",
       created_at: "2022-04-11T18:15:39.418Z",
-      updated_at: "2022-04-12T14:20:12.100Z"
-    }
+      updated_at: "2022-04-12T14:20:12.100Z",
+    },
   ][0].settings;
 
   return (
@@ -66,7 +66,7 @@ export const Connected: React.FC = (args: any) => {
           profile={{
             profileLink: "https://ipfs.io/ipfs/QmYhuJnr3GGUnDGtg6rmSXTgo7FzaWgrriqikfgn5SkXhZ/7142.png",
             noProfileLink: "",
-            image: "https://ipfs.io/ipfs/QmYhuJnr3GGUnDGtg6rmSXTgo7FzaWgrriqikfgn5SkXhZ/7142.png"
+            image: "https://ipfs.io/ipfs/QmYhuJnr3GGUnDGtg6rmSXTgo7FzaWgrriqikfgn5SkXhZ/7142.png",
           }}
           chainId={137}
           switchNetwork={noop}
@@ -105,12 +105,12 @@ export const NotConnected: React.FC = () => {
       id: 1,
       settings: [
         { id: 1, label: "Raise", settings: [{ id: 1, tag: "NOT", navItem: "Official IAO" }] },
-        { id: 2, label: "Collect", settings: [{ id: 2, tag: "LIVE", navItem: "NFA Auction" }] }
+        { id: 2, label: "Collect", settings: [{ id: 2, tag: "LIVE", navItem: "NFA Auction" }] },
       ],
       published_at: "2022-04-11T18:15:41.981Z",
       created_at: "2022-04-11T18:15:39.418Z",
-      updated_at: "2022-04-12T14:20:12.100Z"
-    }
+      updated_at: "2022-04-12T14:20:12.100Z",
+    },
   ][0].settings;
   return (
     <BrowserRouter>
@@ -198,12 +198,12 @@ export const WithNoProfile: React.FC = () => {
       id: 1,
       settings: [
         { id: 1, label: "Raise", settings: [{ id: 1, tag: "NOT", navItem: "Official IAO" }] },
-        { id: 2, label: "Collect", settings: [{ id: 2, tag: "LIVE", navItem: "NFA Auction" }] }
+        { id: 2, label: "Collect", settings: [{ id: 2, tag: "LIVE", navItem: "NFA Auction" }] },
       ],
       published_at: "2022-04-11T18:15:41.981Z",
       created_at: "2022-04-11T18:15:39.418Z",
-      updated_at: "2022-04-12T14:20:12.100Z"
-    }
+      updated_at: "2022-04-12T14:20:12.100Z",
+    },
   ][0].settings;
   return (
     <BrowserRouter>
@@ -224,7 +224,7 @@ export const WithNoProfile: React.FC = () => {
         switchNetwork={noop}
         profile={{
           profileLink: "/profile",
-          noProfileLink: "/no-profile"
+          noProfileLink: "/no-profile",
         }}
         liveResult={navbarApiResult}
         track={track}
@@ -261,12 +261,12 @@ export const WithProfile: React.FC = () => {
       id: 1,
       settings: [
         { id: 1, label: "Raise", settings: [{ id: 1, tag: "NOT", navItem: "Official IAO" }] },
-        { id: 2, label: "Collect", settings: [{ id: 2, tag: "LIVE", navItem: "NFA Auction" }] }
+        { id: 2, label: "Collect", settings: [{ id: 2, tag: "LIVE", navItem: "NFA Auction" }] },
       ],
       published_at: "2022-04-11T18:15:41.981Z",
       created_at: "2022-04-11T18:15:39.418Z",
-      updated_at: "2022-04-12T14:20:12.100Z"
-    }
+      updated_at: "2022-04-12T14:20:12.100Z",
+    },
   ][0].settings;
   return (
     <BrowserRouter>
@@ -289,7 +289,7 @@ export const WithProfile: React.FC = () => {
           name: "apeswap",
           image: "https://raw.githubusercontent.com/ApeSwapFinance/non-fungible-apes/main/images/4.png",
           profileLink: "/profile",
-          noProfileLink: "/no-profile"
+          noProfileLink: "/no-profile",
         }}
         liveResult={navbarApiResult}
         track={track}

diff --git a/src/widgets/NetworkModal/NetworkCard.tsx b/src/widgets/NetworkModal/NetworkCard.tsx
@@ -30,8 +30,7 @@ const NetworkCard: React.FC<Props> = ({ networkConfig, chainId, switchNetwork })
       sx={networkBtn}
       size="sm"
       fullWidth
-      disabled={chainId === networkConfig.chainId}
-      variant={chainId === networkConfig.chainId ? "tertiary" : "secondary"}
+      variant={chainId === networkConfig.chainId ? "secondary" : "tertiary"}
       onClick={() => {
         switchNetwork(networkConfig.chainId);
         handleClose();