@rango-dev/ui 0.37.1-next.4 → 0.38.1-next.0

package/src/icons/CustomTokensZeroStateDark.tsx

@@ -0,0 +1,415 @@
+import type { SvgIconPropsWithChildren } from '../components/SvgIcon';
+
+import React, { createElement } from 'react';
+
+import { SvgIcon } from '../components/SvgIcon';
+
+function SvgCustomTokensZeroStateDark(props: SvgIconPropsWithChildren) {
+  return createElement(
+    SvgIcon,
+    props,
+    <svg viewBox="0 0 200 173" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <g id="Custom Tokens">
+        <path
+          id="Vector 10"
+          d="M44.167 61.5761C5.14181 56.15 5.22992 102.127 11.9196 116.708C24.8586 144.933 74.7156 165.443 81.0951 141.673C90.5545 106.426 144.01 138.776 166.315 136.919C188.62 135.061 190.565 105.059 172.814 90.5792C155.062 76.099 166.849 58.0255 164.253 41.585C161.658 25.1445 139.764 12.4813 115.857 27.4918C93.2754 41.6699 98.3432 69.1088 44.167 61.5761Z"
+          fill="#111112"
+        />
+        <g id="Group 1000007805">
+          <path
+            id="Vector 5"
+            d="M33.3549 82.5155C30.8013 80.4597 27.5271 80.6121 23.2312 81.7805"
+            stroke="#D1D1D1"
+            strokeWidth={0.876984}
+            strokeLinecap="round"
+          />
+          <path
+            id="Vector 6"
+            d="M37.9128 74.8615C35.292 71.5671 34.7292 69.5732 34.2246 65.261"
+            stroke="#D1D1D1"
+            strokeWidth={0.876984}
+            strokeLinecap="round"
+          />
+          <path
+            id="Vector 7"
+            d="M34.4533 77.5497C31.2532 74.6003 27.0895 71.9673 23.1592 69.833"
+            stroke="#D1D1D1"
+            strokeWidth={0.876984}
+            strokeLinecap="round"
+          />
+        </g>
+        <g id="Group 1000007806">
+          <path
+            id="Vector 2"
+            d="M138.142 102.767C138.49 99.7086 138.723 96.5943 139.635 93.6495C140.416 91.126 141.655 88.9323 143.402 86.9893C144.858 85.3701 146.598 83.9147 148.625 83.1229C150.596 82.3531 152.779 82.1166 154.881 82.1214C157.399 82.1272 160.052 82.4497 162.373 83.5426C164.176 84.3912 165.662 86.1799 166.677 87.8937C168.435 90.8633 167.923 94.5274 165.757 97.113C164.993 98.0243 164.003 98.885 162.895 99.3162C161.33 99.9252 159.86 99.3294 158.765 98.0726C156.289 95.2291 157.146 90.6821 158.443 87.5208C159.967 83.8057 162.721 80.5889 165.978 78.3715C168.338 76.7645 171.005 75.6328 173.657 74.6358C176.276 73.6511 178.939 72.9793 181.628 72.2427"
+            stroke="#D1D1D1"
+            strokeWidth={0.876984}
+            strokeDasharray="3.51 2.63"
+          />
+          <circle
+            id="Ellipse 1940"
+            cx={182.957}
+            cy={72.2431}
+            r={2.74629}
+            fill="#D1D1D1"
+          />
+        </g>
+        <g id="Group 1000007807">
+          <g id="Group 1000007810" filter="url(#filter0_f_19281_419835)">
+            <g id="Group 1000007748">
+              <g id="Rectangle 6610">
+                <rect
+                  x={43.6162}
+                  y={113.849}
+                  width={100.216}
+                  height={28.8071}
+                  rx={4.60784}
+                  fill="#444444"
+                  fillOpacity={0.5}
+                />
+                <rect
+                  x={43.8197}
+                  y={114.053}
+                  width={99.8093}
+                  height={28.4001}
+                  rx={4.40431}
+                  stroke="#787878"
+                  strokeOpacity={0.25}
+                  strokeWidth={0.407059}
+                />
+              </g>
+              <rect
+                id="Rectangle 6611"
+                x={67.5557}
+                y={121.557}
+                width={71.0035}
+                height={4.46308}
+                rx={2.23154}
+                fill="#343434"
+              />
+              <rect
+                id="Rectangle 6612"
+                x={67.5557}
+                y={131.298}
+                width={71.0035}
+                height={4.46308}
+                rx={2.23154}
+                fill="#343434"
+              />
+            </g>
+            <g id="Ellipse 1952">
+              <ellipse
+                cx={56.1948}
+                cy={128.461}
+                rx={8.11468}
+                ry={8.11468}
+                fill="#3F3F3F"
+              />
+              <path
+                d="M64.2094 128.461C64.2094 132.887 60.6211 136.475 56.1948 136.475C51.7684 136.475 48.1801 132.887 48.1801 128.461C48.1801 124.034 51.7684 120.446 56.1948 120.446C60.6211 120.446 64.2094 124.034 64.2094 128.461Z"
+                stroke="#787878"
+                strokeOpacity={0.25}
+                strokeWidth={0.2}
+              />
+            </g>
+          </g>
+          <g id="Group 1000007822" filter="url(#filter1_f_19281_419835)">
+            <g id="Group 1000007748_2">
+              <g id="Rectangle 6610_2">
+                <rect
+                  x={43.6162}
+                  y={46.2336}
+                  width={100.216}
+                  height={28.8071}
+                  rx={4.60784}
+                  fill="#444444"
+                  fillOpacity={0.5}
+                />
+                <rect
+                  x={43.8197}
+                  y={46.4372}
+                  width={99.8093}
+                  height={28.4001}
+                  rx={4.40431}
+                  stroke="#787878"
+                  strokeOpacity={0.25}
+                  strokeWidth={0.407059}
+                />
+              </g>
+              <rect
+                id="Rectangle 6611_2"
+                x={67.5557}
+                y={53.9412}
+                width={71.0035}
+                height={4.46308}
+                rx={2.23154}
+                fill="#343434"
+              />
+              <rect
+                id="Rectangle 6612_2"
+                x={67.5557}
+                y={63.6826}
+                width={71.0035}
+                height={4.46308}
+                rx={2.23154}
+                fill="#343434"
+              />
+            </g>
+            <g id="Ellipse 1952_2">
+              <ellipse
+                cx={56.1948}
+                cy={60.8449}
+                rx={8.11468}
+                ry={8.11468}
+                fill="#3F3F3F"
+              />
+              <path
+                d="M64.2094 60.8449C64.2094 65.2713 60.6211 68.8596 56.1948 68.8596C51.7684 68.8596 48.1801 65.2713 48.1801 60.8449C48.1801 56.4185 51.7684 52.8302 56.1948 52.8302C60.6211 52.8302 64.2094 56.4185 64.2094 60.8449Z"
+                stroke="#787878"
+                strokeOpacity={0.25}
+                strokeWidth={0.2}
+              />
+            </g>
+          </g>
+          <g id="Group 1000007811">
+            <g id="Rectangle 6610_3" filter="url(#filter2_d_19281_419835)">
+              <rect
+                x={35.3213}
+                y={78.5015}
+                width={106.238}
+                height={30.538}
+                rx={4.88471}
+                fill="#414141"
+              />
+              <rect
+                x={35.5248}
+                y={78.705}
+                width={105.831}
+                height={30.131}
+                rx={4.68118}
+                stroke="#313134"
+                strokeWidth={0.407059}
+              />
+            </g>
+            <g id="Group 1000007823">
+              <g id="Group 1000007726">
+                <g id="Ellipse 1938" filter="url(#filter3_bd_19281_419835)">
+                  <circle
+                    cx={52.4858}
+                    cy={93.5847}
+                    r={9.88228}
+                    fill="#363636"
+                  />
+                  <circle
+                    cx={52.4858}
+                    cy={93.5847}
+                    r={9.78911}
+                    stroke="#787878"
+                    strokeWidth={0.186346}
+                  />
+                </g>
+                <g id="Group 1000007725">
+                  <path
+                    id="Line 351"
+                    d="M51.2324 92.3315L53.7389 94.838"
+                    stroke="white"
+                    strokeWidth={0.745383}
+                    strokeLinecap="round"
+                  />
+                  <path
+                    id="Line 352"
+                    d="M51.2324 94.8362L53.7389 92.3297"
+                    stroke="white"
+                    strokeWidth={0.745383}
+                    strokeLinecap="round"
+                  />
+                </g>
+                <circle
+                  id="Ellipse 1939"
+                  cx={52.4894}
+                  cy={93.5833}
+                  r={4.10556}
+                  fill="#B6B6B6"
+                  fillOpacity={0.38}
+                  stroke="#B8B8B8"
+                  strokeWidth={0.745383}
+                />
+              </g>
+              <g id="Group 1000007808">
+                <g id="Group 1000007740">
+                  <g id="Ellipse 1941" filter="url(#filter4_b_19281_419835)">
+                    <circle
+                      cx={51.3139}
+                      cy={94.4919}
+                      r={9.74949}
+                      stroke="#A5A5A5"
+                      strokeWidth={0.446247}
+                      strokeDasharray="1.78 1.34"
+                    />
+                  </g>
+                </g>
+              </g>
+            </g>
+            <rect
+              id="Rectangle 6611_3"
+              x={66.5283}
+              y={86.8232}
+              width={69.6961}
+              height={4.16096}
+              rx={2.08048}
+              fill="#5A5A5A"
+            />
+            <rect
+              id="Rectangle 6612_3"
+              x={66.5283}
+              y={97.2258}
+              width={69.6961}
+              height={4.16096}
+              rx={2.08048}
+              fill="#5A5A5A"
+            />
+          </g>
+        </g>
+      </g>
+      <defs>
+        <filter
+          id="filter0_f_19281_419835"
+          x={43.2322}
+          y={113.465}
+          width={100.985}
+          height={29.5751}
+          filterUnits="userSpaceOnUse"
+          colorInterpolationFilters="sRGB">
+          <feFlood floodOpacity={0} result="BackgroundImageFix" />
+          <feBlend
+            mode="normal"
+            in="SourceGraphic"
+            in2="BackgroundImageFix"
+            result="shape"
+          />
+          <feGaussianBlur
+            stdDeviation={0.191993}
+            result="effect1_foregroundBlur_19281_419835"
+          />
+        </filter>
+        <filter
+          id="filter1_f_19281_419835"
+          x={43.2322}
+          y={45.8497}
+          width={100.985}
+          height={29.5751}
+          filterUnits="userSpaceOnUse"
+          colorInterpolationFilters="sRGB">
+          <feFlood floodOpacity={0} result="BackgroundImageFix" />
+          <feBlend
+            mode="normal"
+            in="SourceGraphic"
+            in2="BackgroundImageFix"
+            result="shape"
+          />
+          <feGaussianBlur
+            stdDeviation={0.191993}
+            result="effect1_foregroundBlur_19281_419835"
+          />
+        </filter>
+        <filter
+          id="filter2_d_19281_419835"
+          x={22.044}
+          y={70.5351}
+          width={132.793}
+          height={57.0927}
+          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={5.31093} />
+          <feGaussianBlur stdDeviation={6.63866} />
+          <feComposite in2="hardAlpha" operator="out" />
+          <feColorMatrix
+            type="matrix"
+            values="0 0 0 0 0.0352941 0 0 0 0 0.0352941 0 0 0 0 0.0352941 0 0 0 1 0"
+          />
+          <feBlend
+            mode="normal"
+            in2="BackgroundImageFix"
+            result="effect1_dropShadow_19281_419835"
+          />
+          <feBlend
+            mode="normal"
+            in="SourceGraphic"
+            in2="effect1_dropShadow_19281_419835"
+            result="shape"
+          />
+        </filter>
+        <filter
+          id="filter3_bd_19281_419835"
+          x={38.8766}
+          y={81.4662}
+          width={27.2185}
+          height={27.2185}
+          filterUnits="userSpaceOnUse"
+          colorInterpolationFilters="sRGB">
+          <feFlood floodOpacity={0} result="BackgroundImageFix" />
+          <feGaussianBlur in="BackgroundImageFix" stdDeviation={0.372692} />
+          <feComposite
+            in2="SourceAlpha"
+            operator="in"
+            result="effect1_backgroundBlur_19281_419835"
+          />
+          <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={1.49077} />
+          <feGaussianBlur stdDeviation={1.86346} />
+          <feComposite in2="hardAlpha" operator="out" />
+          <feColorMatrix
+            type="matrix"
+            values="0 0 0 0 0.0352941 0 0 0 0 0.0352941 0 0 0 0 0.0352941 0 0 0 1 0"
+          />
+          <feBlend
+            mode="normal"
+            in2="effect1_backgroundBlur_19281_419835"
+            result="effect2_dropShadow_19281_419835"
+          />
+          <feBlend
+            mode="normal"
+            in="SourceGraphic"
+            in2="effect2_dropShadow_19281_419835"
+            result="shape"
+          />
+        </filter>
+        <filter
+          id="filter4_b_19281_419835"
+          x={40.4493}
+          y={83.6268}
+          width={21.7293}
+          height={21.7303}
+          filterUnits="userSpaceOnUse"
+          colorInterpolationFilters="sRGB">
+          <feFlood floodOpacity={0} result="BackgroundImageFix" />
+          <feGaussianBlur in="BackgroundImageFix" stdDeviation={0.446247} />
+          <feComposite
+            in2="SourceAlpha"
+            operator="in"
+            result="effect1_backgroundBlur_19281_419835"
+          />
+          <feBlend
+            mode="normal"
+            in="SourceGraphic"
+            in2="effect1_backgroundBlur_19281_419835"
+            result="shape"
+          />
+        </filter>
+      </defs>
+    </svg>
+  );
+}
+export default SvgCustomTokensZeroStateDark;

package/src/icons/Target.tsx

@@ -0,0 +1,24 @@
+import type { SvgIconPropsWithChildren } from '../components/SvgIcon';
+
+import React, { createElement } from 'react';
+
+import { SvgIcon } from '../components/SvgIcon';
+
+function SvgTarget(props: SvgIconPropsWithChildren) {
+  return createElement(
+    SvgIcon,
+    props,
+    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+      <g id="Custom token">
+        <path
+          id="Icon (Stroke)"
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M12.0004 0.174805C12.456 0.174805 12.8254 0.544173 12.8254 0.999811V2.40968C17.483 2.80507 21.1952 6.51725 21.5906 11.1749H23.0005C23.4561 11.1749 23.8255 11.5443 23.8255 11.9999C23.8255 12.4555 23.4561 12.8249 23.0005 12.8249H21.5906C21.1952 17.4825 17.483 21.1947 12.8254 21.5901V23C12.8254 23.4556 12.456 23.825 12.0004 23.825C11.5447 23.825 11.1754 23.4556 11.1754 23V21.5901C6.51773 21.1947 2.80556 17.4825 2.41017 12.8249H1.0003C0.544661 12.8249 0.175293 12.4555 0.175293 11.9999C0.175293 11.5443 0.544661 11.1749 1.0003 11.1749H2.41017C2.80556 6.51725 6.51773 2.80507 11.1754 2.40968V0.999811C11.1754 0.544173 11.5447 0.174805 12.0004 0.174805ZM11.1754 4.06699C7.42972 4.45195 4.45243 7.42923 4.06748 11.1749H5.40033C5.85597 11.1749 6.22534 11.5443 6.22534 11.9999C6.22534 12.4555 5.85597 12.8249 5.40033 12.8249H4.06748C4.45243 16.5706 7.42972 19.5478 11.1754 19.9328V18.5999C11.1754 18.1443 11.5447 17.7749 12.0004 17.7749C12.456 17.7749 12.8254 18.1443 12.8254 18.5999V19.9328C16.571 19.5478 19.5483 16.5706 19.9333 12.8249H18.6004C18.1448 12.8249 17.7754 12.4555 17.7754 11.9999C17.7754 11.5443 18.1448 11.1749 18.6004 11.1749H19.9333C19.5483 7.42923 16.571 4.45195 12.8254 4.06699V5.39984C12.8254 5.85548 12.456 6.22485 12.0004 6.22485C11.5447 6.22485 11.1754 5.85548 11.1754 5.39984V4.06699ZM12.0004 8.97487C12.456 8.97487 12.8254 9.34424 12.8254 9.79988V11.1749H14.2004C14.656 11.1749 15.0254 11.5443 15.0254 11.9999C15.0254 12.4555 14.656 12.8249 14.2004 12.8249H12.8254V14.1999C12.8254 14.6555 12.456 15.0249 12.0004 15.0249C11.5447 15.0249 11.1754 14.6555 11.1754 14.1999V12.8249H9.80037C9.34473 12.8249 8.97536 12.4555 8.97536 11.9999C8.97536 11.5443 9.34473 11.1749 9.80037 11.1749H11.1754V9.79988C11.1754 9.34424 11.5447 8.97487 12.0004 8.97487Z"
+          fill="currentColor"
+        />
+      </g>
+    </svg>
+  );
+}
+export default SvgTarget;

package/src/icons/index.ts

@@ -14,6 +14,8 @@ export { default as CopyIcon } from './Copy.js';
 export { default as CosmosCategoryIcon } from './CosmosCategory.js';
 export { default as CreditCardIcon } from './CreditCard.js';
 export { default as CustomColorsIcon } from './CustomColors.js';
+export { default as CustomTokensZeroStateIcon } from './CustomTokensZeroState.js';
+export { default as CustomTokensZeroStateDarkIcon } from './CustomTokensZeroStateDark.js';
 export { default as DarkModeIcon } from './DarkMode.js';
 export { default as DeleteIcon } from './Delete.js';
 export { default as DesktopIcon } from './Desktop.js';
@@ -66,6 +68,7 @@ export { default as SlippageIcon } from './Slippage.js';
 export { default as StatsIcon } from './Stats.js';
 export { default as SupportIcon } from './Support.js';
 export { default as SwapIcon } from './Swap.js';
+export { default as TargetIcon } from './Target.js';
 export { default as TimeIcon } from './Time.js';
 export { default as TransactionIcon } from './Transaction.js';
 export { default as TuneIcon } from './Tune.js';

package/src/theme.ts

@@ -88,6 +88,7 @@ export const theme = {
     24: '24px',
     28: '28px',
     32: '32px',
+    36: '36px',
   },
 
   radii: {