do not merge: Nambrot/crossstableswap demo

.gitignore

@@ -37,3 +37,4 @@ npm-debug.log*
 *.tsbuildinfo
 
 .idea
+/public/fonts

package.json

@@ -21,8 +21,8 @@
     "@emotion/styled": "^11.13.0",
     "@headlessui/react": "^2.2.0",
     "@hyperlane-xyz/registry": "23.10.0",
-    "@hyperlane-xyz/sdk": "20.1.0",
-    "@hyperlane-xyz/utils": "20.1.0",
+    "@hyperlane-xyz/sdk": "20.2.0-stableswap.2a0d563060e1037fa228687c3c9a3ecea60dce9f",
+    "@hyperlane-xyz/utils": "20.2.0-stableswap.2a0d563060e1037fa228687c3c9a3ecea60dce9f",
     "@hyperlane-xyz/widgets": "20.1.0",
     "@interchain-ui/react": "^1.23.28",
     "@metamask/post-message-stream": "6.1.2",

src/components/banner/FormWarningBanner.tsx

@@ -10,7 +10,7 @@ export function FormWarningBanner({
   return (
     <div>
       <WarningBanner
-        className={clsx('absolute left-0 right-0 top-0 z-10', className)}
+        className={clsx('absolute -top-4 left-0 right-0 z-10', className)}
         isVisible={isVisible}
         {...props}
       />

src/components/banner/WarningBanner.tsx

@@ -15,7 +15,7 @@ export function WarningBanner({
 }>) {
   return (
     <div
-      className={`flex items-center justify-between gap-2 bg-amber-400 px-4 text-sm ${
+      className={`flex items-center justify-between gap-2 rounded bg-amber-400 px-4 text-sm ${
         isVisible ? 'max-h-28 py-2' : 'max-h-0'
       } overflow-hidden transition-all duration-500 ${className}`}
     >

src/components/buttons/ConnectAwareSubmitButton.tsx

@@ -58,7 +58,7 @@ export function ConnectAwareSubmitButton<FormValues = any>({
 
   return (
     <SolidButton
-      disabled={disabled}
+      disabled={disabled && isAccountReady}
       type={type}
       color={color}
       onClick={onClick}

src/components/buttons/SolidButton.tsx

@@ -25,28 +25,29 @@ export function SolidButton(
   const color = _color ?? 'primary';
 
   const base =
-    'flex items-center justify-center rounded-lg transition-all duration-500 active:scale-95';
+    'flex items-center justify-center rounded transition-all duration-500 active:scale-95';
   let baseColors, onHover;
   if (color === 'primary') {
     baseColors = 'bg-primary-500 text-white';
     onHover = 'hover:bg-primary-600';
   } else if (color === 'accent') {
-    baseColors = 'bg-accent-500 text-white';
-    onHover = 'hover:bg-accent-600';
+    baseColors = 'bg-accent-gradient shadow-accent-glow';
+    onHover = 'hover:opacity-90';
   } else if (color === 'green') {
     baseColors = 'bg-green-500 text-white';
     onHover = 'hover:bg-green-600';
   } else if (color === 'red') {
-    baseColors = 'bg-red-600 text-white';
-    onHover = 'hover:bg-red-500';
+    baseColors = 'bg-error-gradient shadow-error-glow';
+    onHover = 'hover:opacity-90';
   } else if (color === 'white') {
     baseColors = 'bg-white text-black';
     onHover = 'hover:bg-primary-100';
   } else if (color === 'gray') {
     baseColors = 'bg-gray-100 text-primary-500';
     onHover = 'hover:bg-gray-200';
   }
-  const onDisabled = 'disabled:bg-gray-300 disabled:text-gray-500';
+  const onDisabled =
+    'disabled:bg-gray-300 disabled:text-gray-500 disabled:shadow-none disabled:bg-none';
   const weight = bold ? 'font-semibold' : '';
   const allClasses = `${base} ${baseColors} ${onHover} ${onDisabled} ${weight} ${className}`;
 

src/components/icons/BookIcon.tsx

@@ -0,0 +1,16 @@
+import { DefaultIconProps } from '@hyperlane-xyz/widgets';
+import { memo } from 'react';
+import { Color } from '../../styles/Color';
+
+function _BookIcon({ color, ...props }: DefaultIconProps) {
+  return (
+    <svg viewBox="0 0 23 16" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path
+        d="M21.688 6.90571C20.9608 6.90571 20.3759 7.53466 20.3759 8.3166C20.3759 8.38459 20.4076 8.45259 20.4076 8.52059L11.2708 13.5692C11.0337 13.3312 10.7175 13.1612 10.3698 13.1612C9.99038 13.1612 9.65842 13.3312 9.42131 13.6202L1.86529 9.96547L1.61237 9.84648C1.13814 9.6085 0.837801 9.13254 0.837801 8.57158C0.837801 8.07862 1.02749 7.65365 1.39107 7.38167C1.4543 7.33068 1.51753 7.29668 1.58076 7.26268L1.69141 7.21169L2.00756 7.36468L10.2117 11.3424C10.2117 11.3424 10.3223 11.3764 10.3856 11.3764C10.4488 11.3764 10.512 11.3764 10.5753 11.3254L21.8935 5.06985C22.0357 4.98486 22.1306 4.83187 22.1148 4.66189C22.1148 4.4919 22.0199 4.33891 21.8619 4.25392L13.1835 0.038247C13.0729 -0.012749 12.9306 -0.012749 12.8199 0.038247L1.50172 6.31076L1.37526 6.36175L1.20137 6.44675C0.442612 6.85471 0 7.67065 0 8.58858C0 9.48951 0.505842 10.2884 1.2646 10.6794L9.08935 14.4701C9.08935 14.4701 9.05773 14.5551 9.05773 14.5891C9.05773 15.371 9.64261 16 10.3698 16C11.0969 16 11.6818 15.371 11.6818 14.5891C11.6818 14.5211 11.6502 14.4531 11.6502 14.3851L20.7869 9.33652C21.0241 9.5745 21.3402 9.72749 21.688 9.72749C22.4151 9.72749 23 9.09854 23 8.3166C23 7.53466 22.4151 6.90571 21.688 6.90571ZM10.3698 15.0821C10.2275 15.0821 10.101 15.0141 10.022 14.8951C9.95876 14.8101 9.91134 14.6911 9.91134 14.5721C9.91134 14.3001 10.1168 14.0792 10.3698 14.0622C10.6227 14.0622 10.844 14.2831 10.844 14.5721C10.844 14.6911 10.7966 14.7931 10.7333 14.8781C10.6543 14.9971 10.5278 15.0821 10.3698 15.0821ZM21.7196 8.82656C21.7196 8.82656 21.7196 8.82656 21.7038 8.82656C21.4509 8.82656 21.2296 8.60558 21.2296 8.3166C21.2296 8.19761 21.277 8.09562 21.3402 8.01062C21.4192 7.89163 21.5615 7.80664 21.7038 7.80664C21.9567 7.80664 22.178 8.02762 22.178 8.3166C22.178 8.60558 21.9725 8.80956 21.7354 8.80956L21.7196 8.82656Z"
+        fill={color || Color.primary[500]}
+      />
+    </svg>
+  );
+}
+
+export const BookIcon = memo(_BookIcon);

src/components/icons/ChevronLargeIcon.tsx

@@ -0,0 +1,16 @@
+import { DefaultIconProps } from '@hyperlane-xyz/widgets';
+import { memo } from 'react';
+import { Color } from '../../styles/Color';
+
+function _ChevronLargeIcon({ color, ...props }: DefaultIconProps) {
+  return (
+    <svg viewBox="0 0 16 20" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path
+        d="M16 11.2601L2.31817e-07 20L1.95149e-07 16.8365L11.2573 10.992C11.8306 10.6702 12.2997 10.563 12.9251 10.563H14.5928V9.49062H12.9251C12.2997 9.49062 11.8306 9.38338 11.2573 9.06166L3.6048e-08 3.10992L0 0L16 8.68633V11.2601Z"
+        fill={color || Color.gray[900]}
+      />
+    </svg>
+  );
+}
+
+export const ChevronLargeIcon = memo(_ChevronLargeIcon);

src/components/icons/HamburgerIcon.tsx

@@ -0,0 +1,18 @@
+import { DefaultIconProps } from '@hyperlane-xyz/widgets';
+import { memo } from 'react';
+
+function _HamburgerIcon({ color, ...props }: DefaultIconProps) {
+  return (
+    <svg viewBox="0 0 20 19" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path
+        d="M10 18H1M19 9.5H1M19 1H1"
+        stroke={color || 'currentColor'}
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export const HamburgerIcon = memo(_HamburgerIcon);

src/components/icons/HyperlaneGradientLogo.tsx

@@ -0,0 +1,30 @@
+import { DefaultIconProps } from '@hyperlane-xyz/widgets';
+import { memo } from 'react';
+
+function _HyperlaneGradientLogo({ ...props }: DefaultIconProps) {
+  return (
+    <svg viewBox="0 0 219 18" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path
+        d="M18.6184 1.34497L21.4768 8.5871C21.5798 8.84574 21.5798 9.13026 21.4768 9.3889L18.6184 16.631C18.3094 17.4328 17.5111 17.976 16.6613 17.976H9.9401V17.1742H11.3049C12.5668 17.1742 13.6741 16.3983 14.1376 15.2343L16.4552 9.3889H11.5367L8.67828 16.631C8.36926 17.4328 7.57096 17.976 6.72116 17.976H0V17.1742H1.36483C2.62666 17.1742 3.73398 16.3983 4.1975 15.2343L6.51515 9.3889C6.61815 9.13026 6.61815 8.84574 6.51515 8.5871L4.1975 2.74166C3.73398 1.57775 2.60091 0.801807 1.36483 0.801807H0V0H6.72116C7.59671 0 8.36926 0.54316 8.67828 1.34497L11.5367 8.5871H16.4552L14.1376 2.74166C13.6741 1.57775 12.541 0.801807 11.3049 0.801807H9.9401V0H16.6613C17.5368 0 18.3094 0.54316 18.6184 1.34497ZM34.4298 14.1222C35.0994 14.1222 35.6659 13.9928 36.1552 13.7342C36.6445 13.4755 37.005 13.0876 37.2883 12.5703C37.5458 12.053 37.7003 11.3805 37.7003 10.5787H36.5157C36.5157 11.4839 36.3612 12.1047 36.0264 12.4668C35.6917 12.8289 35.1766 13.01 34.4556 13.01H34.4041C33.683 13.01 33.168 12.8289 32.8332 12.4668C32.4985 12.1047 32.344 11.4581 32.344 10.5787V7.52664C32.344 6.64724 32.4985 6.02649 32.8332 5.63852C33.168 5.27641 33.683 5.09536 34.4041 5.09536H34.4556C35.1766 5.09536 35.6917 5.27641 36.0264 5.63852C36.3612 6.00062 36.5157 6.62138 36.5157 7.52664H37.7003C37.7003 6.72484 37.5715 6.07822 37.2883 5.53506C37.0307 5.01776 36.6445 4.62979 36.1552 4.37114C35.6659 4.1125 35.0994 3.98317 34.4298 3.98317H34.3783C33.7088 3.98317 33.1423 4.1125 32.653 4.37114C32.1637 4.62979 31.8032 5.01776 31.5199 5.53506C31.2624 6.05235 31.1079 6.72484 31.1079 7.52664V10.5787C31.1079 11.3805 31.2366 12.053 31.5199 12.5703C31.7774 13.0876 32.1637 13.5014 32.653 13.7342C33.1423 13.9928 33.7088 14.1222 34.3783 14.1222H34.4298ZM43.0566 14.1222C43.7262 14.1222 44.2927 13.9928 44.782 13.7342C45.2712 13.4755 45.6318 13.0876 45.915 12.5703C46.1726 12.053 46.3271 11.3805 46.3271 10.5787V7.52664C46.3271 6.72484 46.1983 6.07822 45.915 5.53506C45.6575 5.01776 45.2712 4.62979 44.782 4.37114C44.2927 4.1125 43.7262 3.98317 43.0566 3.98317H43.0051C42.3356 3.98317 41.769 4.1125 41.2798 4.37114C40.7905 4.62979 40.43 5.01776 40.1467 5.53506C39.8892 6.05235 39.7347 6.72484 39.7347 7.52664V10.5787C39.7347 11.3805 39.8634 12.053 40.1467 12.5703C40.4042 13.0876 40.7905 13.5014 41.2798 13.7342C41.769 13.9928 42.3356 14.1222 43.0051 14.1222H43.0566ZM43.0051 13.0358C42.2841 13.0358 41.769 12.8548 41.4343 12.4927C41.0995 12.1306 40.945 11.4839 40.945 10.6045V7.55251C40.945 6.67311 41.0995 6.05235 41.4343 5.66438C41.769 5.30227 42.2841 5.12122 43.0051 5.12122H43.0566C43.7777 5.12122 44.2927 5.30227 44.6275 5.66438C44.9622 6.02649 45.1167 6.64724 45.1167 7.55251V10.6045C45.1167 11.5098 44.9622 12.1306 44.6275 12.4927C44.2927 12.8548 43.7777 13.0358 43.0566 13.0358H43.0051ZM49.752 13.9928V5.92303H49.8808L52.9452 13.9928H54.6963V4.13836H53.5375V12.2082H53.4087L50.3443 4.13836H48.5932V13.9928H49.752ZM58.3788 13.9928V5.92303H58.5076L61.572 13.9928H63.3231V4.13836H62.1643V12.2082H62.0355L58.9711 4.13836H57.22V13.9928H58.3788ZM72.1301 13.9928V12.8806H66.8253L67.2888 13.3203V9.23372L66.8253 9.62169H71.0228V8.5095H66.8253L67.2888 8.89747V4.83671L66.8253 5.27641H72.1301V4.16422H66.1043V14.0187H72.1301V13.9928ZM77.538 14.1222C78.2075 14.1222 78.774 13.9928 79.2633 13.7342C79.7526 13.4755 80.1131 13.0876 80.3964 12.5703C80.6539 12.053 80.8084 11.3805 80.8084 10.5787H79.6238C79.6238 11.4839 79.4693 12.1047 79.1346 12.4668C78.7998 12.8289 78.2848 13.01 77.5637 13.01H77.5122C76.7912 13.01 76.2761 12.8289 75.9414 12.4668C75.6066 12.1047 75.4521 11.4581 75.4521 10.5787V7.52664C75.4521 6.64724 75.6066 6.02649 75.9414 5.63852C76.2761 5.27641 76.7912 5.09536 77.5122 5.09536H77.5637C78.2848 5.09536 78.7998 5.27641 79.1346 5.63852C79.4693 6.00062 79.6238 6.62138 79.6238 7.52664H80.8084C80.8084 6.72484 80.6797 6.07822 80.3964 5.53506C80.1389 5.01776 79.7526 4.62979 79.2633 4.37114C78.774 4.1125 78.2075 3.98317 77.538 3.98317H77.4865C76.8169 3.98317 76.2504 4.1125 75.7611 4.37114C75.2718 4.62979 74.9113 5.01776 74.628 5.53506C74.3705 6.05235 74.216 6.72484 74.216 7.52664V10.5787C74.216 11.3805 74.3448 12.053 74.628 12.5703C74.8855 13.0876 75.2718 13.5014 75.7611 13.7342C76.2504 13.9928 76.8169 14.1222 77.4865 14.1222H77.538ZM86.7313 13.9928V4.83671L86.2677 5.27641H89.6927V4.16422H82.5853V5.27641H86.0102L85.5467 4.83671V13.9928H86.7313ZM98.0105 13.9928V12.8806H92.7056L93.1692 13.3203V9.23372L92.7056 9.62169H96.9031V8.5095H92.7056L93.1692 8.89747V4.83671L92.7056 5.27641H98.0105V4.16422H91.9846V14.0187H98.0105V13.9928ZM103.393 13.9928C104.062 13.9928 104.629 13.8635 105.118 13.6049C105.607 13.3462 105.968 12.9582 106.251 12.4409C106.508 11.9236 106.663 11.2512 106.663 10.4494V7.68183C106.663 6.88002 106.534 6.2334 106.251 5.71611C105.993 5.19881 105.607 4.78498 105.118 4.5522C104.629 4.29355 104.062 4.16422 103.393 4.16422H100.225V14.0187H103.393V13.9928ZM101.435 4.75911L100.946 5.25054H103.393C103.856 5.25054 104.242 5.32814 104.551 5.48333C104.86 5.63852 105.066 5.89716 105.221 6.25927C105.375 6.62138 105.453 7.08694 105.453 7.68183V10.4494C105.453 11.0442 105.375 11.5357 105.221 11.8978C105.066 12.2599 104.835 12.4927 104.551 12.6737C104.242 12.8289 103.856 12.9065 103.393 12.9065H100.946L101.435 13.3979V4.75911ZM121.213 13.9928C122.14 13.9928 122.835 13.76 123.324 13.2945C123.814 12.8289 124.045 12.1823 124.045 11.3288V11.2253C124.045 10.6045 123.891 10.1131 123.608 9.75101C123.324 9.3889 122.886 9.13026 122.32 8.97507V8.81988C123.221 8.5095 123.659 7.83702 123.659 6.80243V6.64724C123.659 5.84543 123.427 5.25054 122.938 4.81084C122.449 4.37114 121.753 4.13836 120.826 4.13836H117.685V13.9928H121.213ZM118.895 4.83671L118.431 5.25054H120.852C121.444 5.25054 121.882 5.37987 122.14 5.61265C122.397 5.84543 122.526 6.2334 122.526 6.7507V6.85416C122.526 7.39732 122.397 7.81115 122.14 8.04394C121.882 8.30258 121.444 8.43191 120.852 8.43191H118.431L118.895 8.84574V4.83671ZM118.895 9.13026L118.431 9.54409H121.213C121.805 9.54409 122.217 9.67342 122.474 9.93206C122.732 10.1907 122.861 10.5787 122.861 11.1477V11.2253C122.861 11.7943 122.732 12.234 122.474 12.4927C122.217 12.7513 121.779 12.8806 121.187 12.8806H118.406L118.869 13.2686V9.13026H118.895ZM129.839 13.9928V9.93206L133.007 4.16422H131.719L129.299 8.69056H129.144L126.749 4.16422H125.462L128.629 9.93206V14.0187H129.814L129.839 13.9928ZM144.544 13.9928V9.31131L144.054 9.67342H148.921L148.432 9.31131V13.9928H149.617V4.13836H148.432V8.89747L148.921 8.53537H144.054L144.544 8.89747V4.13836H143.359V13.9928H144.544ZM155.694 13.9928V9.93206L158.861 4.16422H157.574L155.153 8.69056H154.999L152.604 4.16422H151.316L154.484 9.93206V14.0187H155.668L155.694 13.9928ZM161.977 13.9928V9.72515L161.514 10.1648H164.269C165.248 10.1648 165.969 9.93206 166.484 9.44063C166.999 8.9492 167.256 8.19913 167.256 7.1904V7.13867C167.256 6.12995 166.999 5.37987 166.484 4.88844C165.969 4.39701 165.222 4.16422 164.269 4.16422H160.793V14.0187H161.977V13.9928ZM161.977 4.81084L161.514 5.25054H164.269C164.707 5.25054 165.068 5.30227 165.325 5.4316C165.583 5.53506 165.789 5.74197 165.917 6.00062C166.046 6.25927 166.098 6.64724 166.098 7.13867V7.1904C166.098 7.68183 166.046 8.04394 165.917 8.32845C165.789 8.5871 165.608 8.79402 165.351 8.89747C165.093 9.00093 164.733 9.07853 164.295 9.07853H161.54L162.003 9.51823V4.86257L161.977 4.81084ZM175.6 13.9928V12.8806H170.295L170.759 13.3203V9.23372L170.295 9.62169H174.493V8.5095H170.295L170.759 8.89747V4.83671L170.295 5.27641H175.6V4.16422H169.574V14.0187H175.6V13.9928ZM179.282 13.9928V9.72515L178.793 10.1648H181.343C182.321 10.1648 183.042 9.93206 183.557 9.44063C184.072 8.9492 184.33 8.19913 184.33 7.1904V7.13867C184.33 6.12995 184.072 5.37987 183.557 4.88844C183.042 4.39701 182.295 4.16422 181.343 4.16422H178.072V14.0187H179.257L179.282 13.9928ZM179.282 4.81084L178.793 5.25054H181.343C181.78 5.25054 182.141 5.30227 182.424 5.4316C182.682 5.53506 182.888 5.74197 182.991 6.00062C183.119 6.25927 183.171 6.64724 183.171 7.13867V7.1904C183.171 7.68183 183.119 8.04394 182.991 8.32845C182.862 8.5871 182.682 8.79402 182.424 8.89747C182.167 9.00093 181.806 9.07853 181.343 9.07853H178.793L179.282 9.51823V4.81084ZM184.252 13.9928L181.935 10.2166V9.3889L180.158 9.4665L182.913 13.967H184.252V13.9928ZM192.853 13.9928V12.8806H187.703L188.167 13.3203V4.16422H186.982V14.0187H192.828L192.853 13.9928ZM194.527 13.9928H195.815L198.184 5.27641H198.313L200.682 13.9928H201.944L199.188 4.13836H197.36L194.553 13.9928H194.527ZM200.321 10.9925L200.038 9.88033H196.407L196.124 10.9925H200.321ZM204.931 13.9928V5.92303H205.06L208.124 13.9928H209.875V4.13836H208.716V12.2082H208.588L205.523 4.13836H203.772V13.9928H204.931ZM218.708 13.9928V12.8806H213.403L213.867 13.3203V9.23372L213.403 9.62169H217.601V8.5095H213.403L213.867 8.89747V4.83671L213.403 5.27641H218.708V4.16422H212.682V14.0187H218.708V13.9928Z"
+        fill="url(#paint0_linear_279_1224)"
+      />
+      <defs>
+        <linearGradient
+          id="paint0_linear_279_1224"
+          x1="0"
+          y1="8.988"
+          x2="218.708"
+          y2="8.988"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#4C52FF" />
+          <stop offset="0.3" stopColor="#9A0DFF" />
+          <stop offset="0.6" stopColor="#9A0DFF" />
+          <stop offset="1" stopColor="#FF4FE9" />
+        </linearGradient>
+      </defs>
+    </svg>
+  );
+}
+
+export const HyperlaneFooterLogo = memo(_HyperlaneGradientLogo);

src/components/icons/HyperlaneTransparentLogo.tsx

@@ -0,0 +1,20 @@
+import { memo } from 'react';
+
+function _HyperlaneTransparentLogo() {
+  return (
+    <svg
+      width="146"
+      height="127"
+      viewBox="0 0 146 127"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M111.997 0.5C118.021 0.500205 123.353 4.29477 125.572 10.0957L125.784 10.3896L125.822 10.4424L125.846 10.5029L144.975 60.709L144.978 60.7158C145.675 62.6255 145.675 64.7173 144.978 66.627L144.975 66.6338L125.846 116.837L125.847 116.838C123.643 122.677 118.291 126.5 112.243 126.5H66.999V119.931H76.6943C84.8493 119.931 92.1424 114.758 95.1924 106.801L110.287 66.9561H78.5166L59.5107 116.754L59.5098 116.753C57.3054 122.591 51.9546 126.414 45.9072 126.414H0.582031V119.846H10.1953C18.35 119.846 25.6424 114.673 28.6924 106.716L44.124 66.1133C44.7404 64.4248 44.7404 62.5752 44.124 60.8867V60.8857L28.6924 20.2832L28.6914 20.2803C25.7242 12.3299 18.3532 7.15444 10.1953 7.1543H0.5V0.585938H45.7432C51.7903 0.585938 57.1411 4.40815 59.3457 10.2461H59.3467L78.3525 60.0439H110.122L94.9453 20.1982V20.1973C91.895 12.2411 84.6027 7.06939 76.4482 7.06934H66.7529V0.5H111.997Z"
+        stroke="white"
+      />
+    </svg>
+  );
+}
+
+export const HyperlaneTransparentLogo = memo(_HyperlaneTransparentLogo);

src/components/icons/StakeIcon.tsx

@@ -0,0 +1,17 @@
+import { DefaultIconProps } from '@hyperlane-xyz/widgets';
+import { memo } from 'react';
+
+function _StakeIcon({ ...props }: DefaultIconProps) {
+  return (
+    <svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <circle cx="10" cy="10" r="10" fill="#9A0DFF" />
+      <path
+        d="M6.91687 9.90641L4.87399 4.56765C4.80806 4.39535 4.93528 4.21045 5.11977 4.21045H7.65818C7.7658 4.21045 7.86258 4.27598 7.90253 4.37591L9.65836 8.76722H12.5701L10.8771 4.57209C10.8073 4.39913 10.9346 4.21045 11.1211 4.21045H13.7572C13.8633 4.21045 13.959 4.27415 14 4.37201L16.3163 9.90641L14.0157 15.6245C13.9756 15.7241 13.879 15.7894 13.7716 15.7894H11.2942C11.1116 15.7894 10.9845 15.6079 11.0469 15.4363L12.5701 11.2496H9.65836L7.90265 15.6243C7.86262 15.724 7.76593 15.7894 7.65843 15.7894H5.11544C4.93214 15.7894 4.80499 15.6067 4.86867 15.4348L6.91687 9.90641Z"
+        fill="#EBD3FF"
+      />
+      <path d="M0 10H20" stroke="#EBD3FF" strokeWidth="1.25" />
+    </svg>
+  );
+}
+
+export const StakeIcon = memo(_StakeIcon);

src/components/icons/SwapIcon.tsx

@@ -0,0 +1,20 @@
+import { DefaultIconProps } from '@hyperlane-xyz/widgets';
+import { memo } from 'react';
+import { Color } from '../../styles/Color';
+
+function _SwapIcon({ color, ...props }: DefaultIconProps) {
+  return (
+    <svg viewBox="0 0 15 20" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path
+        d="M5.58675 18.0072H6.09464V9.5H7.92744V18.0072H8.43533V17.7906C8.43533 16.8159 8.70032 16.1227 9.40694 15.4296L14.0221 10.9025V13.1336L7.02208 20L0 13.1336V10.9025L4.61514 15.4296C5.32177 16.1227 5.58675 16.7942 5.58675 17.7906V18.0072Z"
+        fill={color || Color.gray[400]}
+      />
+      <path
+        d="M5.58675 8.50722H6.09464V0H7.92744V8.50722H8.43533V8.29062C8.43533 7.31589 8.70032 6.62274 9.40694 5.9296L14.0221 1.40253V3.63357L7.02208 10.5L0 3.63357V1.40253L4.61514 5.9296C5.32177 6.62274 5.58675 7.29423 5.58675 8.29062V8.50722Z"
+        fill={color || Color.gray[400]}
+      />
+    </svg>
+  );
+}
+
+export const SwapIcon = memo(_SwapIcon);