chore: Icons for new tooltips

src/components/Svg/Icons/Audit.tsx

@@ -0,0 +1,26 @@
+/** @jsxImportSource theme-ui */
+import React from "react";
+import { rotation, SvgProps } from "./types";
+
+const Audit: React.FC<SvgProps> = ({ direction = "down", color = "text", width, getStyles }) => {
+  const deg: rotation = {
+    left: 90,
+    up: 180,
+    right: 270,
+    down: 0,
+  };
+  const style = getStyles({
+    degree: deg[direction as keyof rotation],
+    color,
+  });
+  return (
+    <svg width={width || "14"} height="17" viewBox="0 0 14 17" sx={style}>
+      <path
+        d="M6.66667 10.2917C7.18056 10.2917 7.61806 10.1147 7.97917 9.7605C8.34028 9.40633 8.52083 8.96536 8.52083 8.43758C8.52083 7.92369 8.34028 7.48619 7.97917 7.12508C7.61806 6.76397 7.18056 6.58341 6.66667 6.58341C6.15278 6.58341 5.71528 6.76397 5.35417 7.12508C4.99306 7.48619 4.8125 7.92369 4.8125 8.43758C4.8125 8.96536 4.99306 9.40633 5.35417 9.7605C5.71528 10.1147 6.15278 10.2917 6.66667 10.2917ZM6.66667 15.5417C7.31944 15.3195 7.98611 14.9688 8.66667 14.4897C9.34722 14.0105 9.89583 13.4654 10.3125 12.8542L8.39583 11.0209C8.13194 11.1737 7.85417 11.2987 7.5625 11.3959C7.27083 11.4931 6.97222 11.5417 6.66667 11.5417C5.80556 11.5417 5.07292 11.2431 4.46875 10.6459C3.86458 10.0487 3.5625 9.31258 3.5625 8.43758C3.5625 7.57647 3.86458 6.84383 4.46875 6.23966C5.07292 5.6355 5.80556 5.33341 6.66667 5.33341C7.52778 5.33341 8.26042 5.6355 8.86458 6.23966C9.46875 6.84383 9.77083 7.58341 9.77083 8.45841C9.77083 8.75008 9.72917 9.04175 9.64583 9.33341C9.5625 9.62508 9.43056 9.88897 9.25 10.1251L11 11.7917C11.3333 11.1945 11.5972 10.5383 11.7917 9.823C11.9861 9.10772 12.0833 8.37508 12.0833 7.62508V3.50008L6.66667 1.52091L1.25 3.50008V7.62508C1.25 9.44453 1.75347 11.0869 2.76042 12.5522C3.76736 14.0174 5.06944 15.014 6.66667 15.5417ZM6.66667 16.8334C4.72222 16.3473 3.125 15.2188 1.875 13.448C0.625 11.6772 0 9.73619 0 7.62508V2.66675L6.66667 0.166748L13.3333 2.66675V7.62508C13.3333 9.73619 12.7083 11.6772 11.4583 13.448C10.2083 15.2188 8.61111 16.3473 6.66667 16.8334Z"
+        fill="#4D4040"
+      />
+    </svg>
+  );
+};
+
+export default Audit;

src/components/Svg/Icons/Bubble.tsx

@@ -0,0 +1,47 @@
+/** @jsxImportSource theme-ui */
+import React from "react";
+import { rotation, SvgProps } from "./types";
+
+const Bubble: React.FC<SvgProps> = ({ direction = "down", color = "text", width, getStyles }) => {
+  const deg: rotation = {
+    left: 90,
+    up: 180,
+    right: 270,
+    down: 0,
+  };
+  const style = getStyles({
+    degree: deg[direction as keyof rotation],
+    color,
+  });
+  return (
+    <svg width={width || "13"} height="19" viewBox="0 0 19 13" sx={style}>
+      <g clipPath="url(#clip0_241_4869)">
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M0.223615 11.8591C0.223615 11.8591 -0.502465 9.34304 0.649961 8.18498C1.54141 7.28917 2.98866 7.28943 3.87985 8.18498C4.77105 9.08053 4.7713 10.5349 3.87985 11.4307C2.72743 12.5887 0.223615 11.8591 0.223615 11.8591Z"
+          fill="#4D4040"
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M3.79913 4.50158C2.98474 3.08414 4.33367 0.842317 4.33367 0.842317C4.33367 0.842317 6.94048 0.7891 7.75487 2.20653L11.4688 8.67068C12.0995 9.76837 11.7245 11.1726 10.6328 11.806C9.54116 12.4394 8.14378 12.0634 7.51311 10.9657L3.79913 4.50158Z"
+          fill="#4D4040"
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M11.0234 4.50158C10.209 3.08414 11.558 0.842317 11.558 0.842317C11.558 0.842317 14.1648 0.7891 14.9792 2.20653L18.6931 8.67068C19.3238 9.76837 18.9488 11.1726 17.8572 11.806C16.7655 12.4394 15.3681 12.0634 14.7374 10.9657L11.0234 4.50158Z"
+          fill="#4D4040"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_241_4869">
+          <rect width="19" height="11.3095" fill="white" transform="translate(0 0.845215)" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+};
+
+export default Bubble;

src/components/Svg/Icons/URL.tsx

@@ -0,0 +1,23 @@
+/** @jsxImportSource theme-ui */
+import React from "react";
+import { rotation, SvgProps } from "./types";
+
+const URL: React.FC<SvgProps> = ({ direction = "down", color = "text", width, getStyles }) => {
+  const deg: rotation = {
+    left: 90,
+    up: 180,
+    right: 270,
+    down: 0,
+  };
+  const style = getStyles({
+    degree: deg[direction as keyof rotation],
+    color,
+  });
+  return (
+    <svg width={width || "11"} height="24" viewBox="0 0 24 24" sx={style}>
+      <path d="M11.99 2C6.47 2 2 6.48 2 12C2 17.52 6.47 22 11.99 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 11.99 2ZM18.92 8H15.97C15.65 6.75 15.19 5.55 14.59 4.44C16.43 5.07 17.96 6.35 18.92 8ZM12 4.04C12.83 5.24 13.48 6.57 13.91 8H10.09C10.52 6.57 11.17 5.24 12 4.04ZM4.26 14C4.1 13.36 4 12.69 4 12C4 11.31 4.1 10.64 4.26 10H7.64C7.56 10.66 7.5 11.32 7.5 12C7.5 12.68 7.56 13.34 7.64 14H4.26ZM5.08 16H8.03C8.35 17.25 8.81 18.45 9.41 19.56C7.57 18.93 6.04 17.66 5.08 16ZM8.03 8H5.08C6.04 6.34 7.57 5.07 9.41 4.44C8.81 5.55 8.35 6.75 8.03 8ZM12 19.96C11.17 18.76 10.52 17.43 10.09 16H13.91C13.48 17.43 12.83 18.76 12 19.96ZM14.34 14H9.66C9.57 13.34 9.5 12.68 9.5 12C9.5 11.32 9.57 10.65 9.66 10H14.34C14.43 10.65 14.5 11.32 14.5 12C14.5 12.68 14.43 13.34 14.34 14ZM14.59 19.56C15.19 18.45 15.65 17.25 15.97 16H18.92C17.96 17.65 16.43 18.93 14.59 19.56ZM16.36 14C16.44 13.34 16.5 12.68 16.5 12C16.5 11.32 16.44 10.66 16.36 10H19.74C19.9 10.64 20 11.31 20 12C20 12.69 19.9 13.36 19.74 14H16.36Z" />
+    </svg>
+  );
+};
+
+export default URL;

src/components/Svg/Icons/index.ts

@@ -47,3 +47,6 @@ export { default as Message } from "./Message";
 export { default as Positions } from "./Positions";
 export { default as MenuSettings } from "./MenuSettings";
 export { default as Fav } from "./Fav";
+export { default as URL } from "./URL";
+export { default as Bubble } from "./Bubble";
+export { default as Audit } from "./Audit";

src/components/Svg/Svg.tsx

@@ -51,7 +51,10 @@ import {
   Message,
   Positions,
   MenuSettings,
-  Fav
+  Fav,
+  URL,
+  Bubble,
+  Audit,
 } from "./Icons";
 import { BSC, BANANA, BNB, ETH, GNANA, POLYGON, TLOS } from "./tokens";
 import { IconStyles } from "./Icons/types";
@@ -231,6 +234,15 @@ const Svg: React.FC<SvgProps> = ({ icon, ...props }: any) => {
   if (icon === icons.FAV) {
     return <Fav {...props} getStyles={getStyles} />;
   }
+  if (icon === icons.URL) {
+    return <URL {...props} getStyles={getStyles} />;
+  }
+  if (icon === icons.BUBBLE) {
+    return <Bubble {...props} getStyles={getStyles} />;
+  }
+  if (icon === icons.AUDIT) {
+    return <Audit {...props} getStyles={getStyles} />;
+  }
   return null;
 };
 

src/components/Svg/types.ts

@@ -61,6 +61,9 @@ export enum icons {
   POSITIONS = "Positions",
   MENU_SETTINGS = "MenuSettings",
   FAV = "Fav",
+  URL = "URL",
+  BUBBLE = "bubble",
+  AUDIT = "audit",
 }
 
 export enum directions {