@rango-dev/ui 0.0.0-experimental-936229e8-20251208

package/src/icons/Wallet.tsx

@@ -0,0 +1,33 @@
+import type { SvgIconPropsWithChildren } from '../components/SvgIcon/index.js';
+
+import React, { createElement } from 'react';
+
+import { SvgIcon } from '../components/SvgIcon/index.js';
+
+function SvgWallet(props: SvgIconPropsWithChildren) {
+  return createElement(
+    SvgIcon,
+    props,
+    <svg viewBox="0 0 25 24" xmlns="http://www.w3.org/2000/svg">
+      <g clipPath="url(#clip0_3736_40081)">
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M12.8584 0.862959L15.3058 1.41525C16.9489 1.78602 18.2271 2.07447 19.2188 2.40426C20.2261 2.73925 21.004 3.13692 21.6096 3.76475C21.7414 3.9014 21.8498 4.01602 21.9385 4.11203C21.9394 4.11303 21.9403 4.11403 21.9413 4.11504C22.5067 4.5409 22.9972 5.05945 23.3914 5.64946C23.95 6.48545 24.2066 7.45716 24.3315 8.68458C24.4546 9.89445 24.4546 11.419 24.4546 13.3875V13.4584C24.4546 15.4268 24.4546 16.9514 24.3315 18.1613C24.2066 19.3887 23.95 20.3604 23.3914 21.1964C22.9312 21.8852 22.3398 22.4766 21.651 22.9369C20.815 23.4954 19.8433 23.7521 18.6159 23.8769C17.406 24 15.8814 24 13.9129 24H10.9962C9.02776 24 7.50318 24 6.29331 23.8769C5.06589 23.7521 4.09417 23.4954 3.25818 22.9369C2.56938 22.4766 1.97797 21.8852 1.51773 21.1964C0.959139 20.3604 0.702521 19.3887 0.577659 18.1613C0.504912 17.4462 0.475165 16.6211 0.463001 15.6594C0.457469 15.6262 0.45459 15.5921 0.45459 15.5573V13.5198C0.45459 13.4993 0.45459 13.4789 0.45459 13.4584V13.3875C0.45459 13.367 0.45459 13.3465 0.45459 13.3261V11.2885C0.45459 11.2538 0.457469 11.2197 0.463001 11.1865C0.475164 10.2248 0.504912 9.3997 0.577659 8.68458C0.702521 7.45716 0.959139 6.48545 1.51773 5.64946C1.85461 5.14527 2.26177 4.69328 2.72596 4.3067C3.11565 3.02447 3.55365 2.07925 4.32097 1.37775C4.84839 0.895558 5.46731 0.520025 6.14202 0.271815C6.96557 -0.0311507 7.84132 -0.0555731 8.89761 0.0751007C9.93706 0.203692 11.2152 0.492136 12.8584 0.862959ZM4.39684 3.35079C4.95892 3.15746 5.58334 3.04115 6.29331 2.96893C7.50318 2.84585 9.02777 2.84586 10.9962 2.84586H13.9129C14.7013 2.84586 15.4185 2.84586 16.0727 2.85376C15.7378 2.77698 15.3811 2.69646 15.0007 2.61061L12.6204 2.07346C10.9367 1.6935 9.7179 1.41918 8.7462 1.29897C7.7843 1.17997 7.13094 1.22202 6.56779 1.42918C6.04187 1.62266 5.56127 1.91472 5.15307 2.28791C4.85984 2.55599 4.61826 2.89086 4.39684 3.35079ZM1.68779 13.4229C1.68779 12.8782 1.68785 12.3738 1.69023 11.9051H4.6285C5.46675 11.9051 6.14629 12.5847 6.14629 13.4229C6.14629 14.2612 5.46675 14.9407 4.6285 14.9407H1.69023C1.68785 14.4721 1.68779 13.9676 1.68779 13.4229ZM1.70507 16.1739H4.6285C6.14783 16.1739 7.37949 14.9423 7.37949 13.4229C7.37949 11.9036 6.14783 10.6719 4.6285 10.6719H1.70507C1.72046 9.96264 1.74955 9.34986 1.80453 8.80939C1.91947 7.67947 2.14247 6.93418 2.5431 6.33459C2.91337 5.78044 3.38916 5.30464 3.94331 4.93437C4.5429 4.53374 5.2882 4.31074 6.41812 4.1958C7.55834 4.07981 9.02038 4.07906 11.0317 4.07906H13.8775C15.8888 4.07906 17.3508 4.07981 18.491 4.1958C19.621 4.31074 20.3663 4.53374 20.9658 4.93437C21.52 5.30464 21.9958 5.78044 22.3661 6.33459C22.7667 6.93418 22.9897 7.67947 23.1046 8.80939C23.2206 9.94961 23.2214 11.4117 23.2214 13.4229C23.2214 15.4342 23.2206 16.8963 23.1046 18.0365C22.9897 19.1664 22.7667 19.9117 22.3661 20.5113C21.9958 21.0654 21.52 21.5412 20.9658 21.9115C20.3663 22.3121 19.621 22.5351 18.491 22.6501C17.3508 22.7661 15.8888 22.7668 13.8775 22.7668H11.0317C9.02038 22.7668 7.55834 22.7661 6.41812 22.6501C5.2882 22.5351 4.5429 22.3121 3.94331 21.9115C3.38916 21.5412 2.91337 21.0654 2.5431 20.5113C2.14247 19.9117 1.91947 19.1664 1.80453 18.0365C1.74955 17.496 1.72046 16.8832 1.70507 16.1739ZM17.5297 19.1146C17.5297 18.7741 17.8058 18.498 18.1463 18.498H19.5693C19.9098 18.498 20.1859 18.7741 20.1859 19.1146C20.1859 19.4552 19.9098 19.7312 19.5693 19.7312H18.1463C17.8058 19.7312 17.5297 19.4552 17.5297 19.1146Z"
+          fill="currentColor"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_3736_40081">
+          <rect
+            width={24}
+            height={24}
+            fill="white"
+            transform="translate(0.45459)"
+          />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+}
+export default SvgWallet;

package/src/icons/Warning.tsx

@@ -0,0 +1,19 @@
+import type { SvgIconPropsWithChildren } from '../components/SvgIcon/index.js';
+
+import React, { createElement } from 'react';
+
+import { SvgIcon } from '../components/SvgIcon/index.js';
+
+function SvgWarning(props: SvgIconPropsWithChildren) {
+  return createElement(
+    SvgIcon,
+    props,
+    <svg viewBox="0 0 25 24" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M22.7245 22.4863H1.73091C1.38524 22.4863 1.05369 22.3491 0.809081 22.1049C0.56447 21.8606 0.426788 21.5293 0.42627 21.1836C0.426608 20.9568 0.485203 20.7339 0.59644 20.5362L11.0923 2.15775C11.1771 2.00885 11.2905 1.87815 11.4259 1.77315C11.5614 1.66815 11.7162 1.5909 11.8816 1.54584C12.0469 1.50078 12.2195 1.48878 12.3895 1.51055C12.5595 1.53231 12.7235 1.5874 12.8722 1.67267C13.075 1.78726 13.2427 1.95497 13.3573 2.15775L23.8531 20.544C23.9681 20.7424 24.0287 20.9677 24.0288 21.197C24.0288 21.4263 23.9683 21.6516 23.8534 21.85C23.7385 22.0485 23.5733 22.2131 23.3743 22.3272C23.1754 22.4414 22.9499 22.501 22.7206 22.5L22.7245 22.4863ZM11.0394 17.7724V20.1196H13.4121V17.7724H11.0394ZM10.9201 8.14893L11.5754 16.5166H12.8644L13.5314 8.16067L10.9201 8.14893Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
+export default SvgWarning;

package/src/icons/Widget.tsx

@@ -0,0 +1,24 @@
+import type { SvgIconPropsWithChildren } from '../components/SvgIcon/index.js';
+
+import React, { createElement } from 'react';
+
+import { SvgIcon } from '../components/SvgIcon/index.js';
+
+function SvgWidget(props: SvgIconPropsWithChildren) {
+  return createElement(
+    SvgIcon,
+    props,
+    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+      <g id="Icons">
+        <path
+          id="Widget"
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M3 7.76471C3 5.13323 5.13323 3 7.76471 3L16.2353 3C18.8668 3 21 5.13323 21 7.76471V16.2353C21 18.8668 18.8668 21 16.2353 21H7.76471C5.13323 21 3 18.8668 3 16.2353L3 7.76471ZM19.9412 11.4706V7.76471C19.9412 5.718 18.282 4.05882 16.2353 4.05882L10.4118 4.05882V11.4706L19.9412 11.4706ZM19.9412 12.5294V16.2353C19.9412 18.282 18.282 19.9412 16.2353 19.9412H7.76471C5.718 19.9412 4.05882 18.282 4.05882 16.2353L4.05882 12.5294L9.88235 12.5294H19.9412ZM9.35294 11.4706V4.05882L7.76471 4.05882C5.718 4.05882 4.05882 5.718 4.05882 7.76471L4.05882 11.4706L9.35294 11.4706Z"
+          fill="#727272"
+        />
+      </g>
+    </svg>
+  );
+}
+export default SvgWidget;

package/src/icons/Width.tsx

@@ -0,0 +1,29 @@
+import type { SvgIconPropsWithChildren } from '../components/SvgIcon/index.js';
+
+import React, { createElement } from 'react';
+
+import { SvgIcon } from '../components/SvgIcon/index.js';
+
+function SvgWidth(props: SvgIconPropsWithChildren) {
+  return createElement(
+    SvgIcon,
+    props,
+    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+      <g id="Width" clipPath="url(#clip0_5933_20072)">
+        <path
+          id="Width_2"
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M0.206748 12.0355C-0.0689161 11.8403 -0.0689161 11.5237 0.206748 11.3284L4.69896 8.14645C4.97462 7.95118 5.42156 7.95118 5.69722 8.14645C5.97289 8.34171 5.97289 8.65829 5.69722 8.85355L2.41003 11.182H21.59L18.3028 8.85355C18.0271 8.65829 18.0271 8.34171 18.3028 8.14645C18.5784 7.95118 19.0254 7.95118 19.301 8.14645L23.7933 11.3284C24.0689 11.5237 24.0689 11.8403 23.7933 12.0355L19.301 15.2175C19.0254 15.4128 18.5784 15.4128 18.3028 15.2175C18.0271 15.0223 18.0271 14.7057 18.3028 14.5104L21.59 12.182H2.41003L5.69722 14.5104C5.97289 14.7057 5.97289 15.0223 5.69722 15.2175C5.42156 15.4128 4.97462 15.4128 4.69896 15.2175L0.206748 12.0355Z"
+          fill="currentColor"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_5933_20072">
+          <rect width={24} height={24} fill="white" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+}
+export default SvgWidth;

package/src/icons/X.tsx

@@ -0,0 +1,20 @@
+import type { SvgIconPropsWithChildren } from '../components/SvgIcon/index.js';
+
+import React, { createElement } from 'react';
+
+import { SvgIcon } from '../components/SvgIcon/index.js';
+
+function SvgX(props: SvgIconPropsWithChildren) {
+  return createElement(
+    SvgIcon,
+    props,
+    <svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+      <path
+        fillRule="evenodd"
+        d="M18.0955 14.3165L26.2864 5H24.3456L17.2303 13.0877L11.5514 5H5L13.5895 17.2311L5 27H6.94072L14.4501 18.4571L20.4486 27H27L18.0955 14.3165ZM15.4365 17.3385L14.5649 16.1198L7.64059 6.43161H10.6219L16.2117 14.2532L17.0797 15.4719L24.3447 25.6381H21.3634L15.4365 17.3385Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
+export default SvgX;

package/src/icons/index.ts

@@ -0,0 +1,111 @@
+export { default as AddIcon } from './Add.js';
+export { default as AffiliateIcon } from './Affiliate.js';
+export { default as AutoThemeIcon } from './AutoTheme.js';
+export { default as AutorenewIcon } from './Autorenew.js';
+export { default as BorderRadiusIcon } from './BorderRadius.js';
+export { default as BridgesIcon } from './Bridges.js';
+export { default as BugReportIcon } from './BugReport.js';
+export { default as BullhornIcon } from './Bullhorn.js';
+export { default as CalendarIcon } from './Calendar.js';
+export { default as ChainsIcon } from './Chains.js';
+export { default as ChartIcon } from './Chart.js';
+export { default as ChevronDownIcon } from './ChevronDown.js';
+export { default as ChevronLeftIcon } from './ChevronLeft.js';
+export { default as ChevronRightIcon } from './ChevronRight.js';
+export { default as ChevronUpIcon } from './ChevronUp.js';
+export { default as CloseIcon } from './Close.js';
+export { default as ColorsIcon } from './Colors.js';
+export { default as CompleteIcon } from './Complete.js';
+export { default as ContactUsIcon } from './ContactUs.js';
+export { default as CookieIcon } from './Cookie.js';
+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 CustomerSupportIcon } from './CustomerSupport.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';
+export { default as DisconnectIcon } from './Disconnect.js';
+export { default as DiscordIcon } from './Discord.js';
+export { default as DocumentIcon } from './Document.js';
+export { default as DocumentationIcon } from './Documentation.js';
+export { default as DoneIcon } from './Done.js';
+export { default as ErrorIcon } from './Error.js';
+export { default as EvmCategoryIcon } from './EvmCategory.js';
+export { default as ExchangeIcon } from './Exchange.js';
+export { default as ExitIcon } from './Exit.js';
+export { default as ExplorerIcon } from './Explorer.js';
+export { default as ExternalLinkIcon } from './ExternalLink.js';
+export { default as FeatureListIcon } from './FeatureList.js';
+export { default as FilterIcon } from './Filter.js';
+export { default as FirstIcon } from './First.js';
+export { default as FontIcon } from './Font.js';
+export { default as GasIcon } from './Gas.js';
+export { default as GasStationIcon } from './GasStation.js';
+export { default as HeightIcon } from './Height.js';
+export { default as HideIcon } from './Hide.js';
+export { default as InfinityIcon } from './Infinity.js';
+export { default as InfoErrorIcon } from './InfoError.js';
+export { default as InfoIcon } from './Info.js';
+export { default as InProgressIcon } from './InProgress.js';
+export { default as KeyIcon } from './Key.js';
+export { default as LanguageIcon } from './Language.js';
+export { default as LastIcon } from './Last.js';
+export { default as LegacyIcon } from './Legacy.js';
+export { default as LightModeIcon } from './LightMode.js';
+export { default as LinkIcon } from './Link.js';
+export { default as LoadingIcon } from './Loading.js';
+export { default as LoginIcon } from './Login.js';
+export { default as LogoutIcon } from './Logout.js';
+export { default as LogoWithTextIcon } from './LogoWithText.js';
+export { default as MediumIcon } from './Medium.js';
+export { default as MenuIcon } from './Menu.js';
+export { default as MoneyBagIcon } from './MoneyBag.js';
+export { default as MoreIcon } from './More.js';
+export { default as NextIcon } from './Next.js';
+export { default as NoRouteIcon } from './NoRoute.js';
+export { default as NoNotificationIcon } from './NoNotification.js';
+export { default as NotificationNumberIcon } from './NotificationNumber.js';
+export { default as NotificationsIcon } from './Notifications.js';
+export { default as NumberIcon } from './Number.js';
+export { default as NumberBlocksIcon } from './NumberBlocks.js';
+export { default as OtherCategoryIcon } from './OtherCategory.js';
+export { default as PasteIcon } from './Paste.js';
+export { default as PencilIcon } from './Pencil.js';
+export { default as PinIcon } from './Pin.js';
+export { default as ProfileIcon } from './Profile.js';
+export { default as RangoExplorerIcon } from './RangoExplorer.js';
+export { default as RankIcon } from './Rank.js';
+export { default as RefreshIcon } from './Refresh.js';
+export { default as ReportIcon } from './Report.js';
+export { default as RequestIcon } from './Request.js';
+export { default as ReverseIcon } from './Reverse.js';
+export { default as ReverseHorizontalIcon } from './ReverseHorizontal.js';
+export { default as RouteIcon } from './Route.js';
+export { default as ScannerIcon } from './Scanner.js';
+export { default as ScoreIcon } from './Score.js';
+export { default as SearchIcon } from './Search.js';
+export { default as SettingsIcon } from './Settings.js';
+export { default as ShareIcon } from './Share.js';
+export { default as ShowIcon } from './Show.js';
+export { default as SlippageIcon } from './Slippage.js';
+export { default as StatsIcon } from './Stats.js';
+export { default as StyleIcon } from './Style.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 TelegramIcon } from './Telegram.js';
+export { default as TimeIcon } from './Time.js';
+export { default as TransactionIcon } from './Transaction.js';
+export { default as TrophyIcon } from './Trophy.js';
+export { default as TuneIcon } from './Tune.js';
+export { default as UtxoCategoryIcon } from './UtxoCategory.js';
+export { default as VolumeIcon } from './Volume.js';
+export { default as WalletIcon } from './Wallet.js';
+export { default as WarningIcon } from './Warning.js';
+export { default as WidgetIcon } from './Widget.js';
+export { default as WidthIcon } from './Width.js';
+export { default as XIcon } from './X.js';

package/src/index.ts

@@ -0,0 +1,7 @@
+export * from './components/index.js';
+export * from './containers/index.js';
+export * from './theme.js';
+export * from './types/index.js';
+export * from './hooks/index.js';
+export * from './icons/index.js';
+export * from './constants/index.js';

package/src/theme.ts

@@ -0,0 +1,242 @@
+import type {
+  DefaultThemeMap,
+  PropertyValue,
+  CSS as StitchesCSS,
+} from '@stitches/react';
+
+import { createStitches } from '@stitches/react';
+
+/* ----------------------- Values ----------------------- */
+
+export const theme = {
+  colors: {
+    primary: '#1C3CF1',
+    primary500: '#1C3CF1',
+    primary550: '#0B27C4',
+
+    secondary: '#469BF5',
+    secondary100: '#E9F3FF',
+    secondary150: '#D6EAFF',
+    secondary200: '#C8E2FF',
+    secondary250: '#B5D9FF',
+    secondary500: '#469BF5',
+    secondary550: '#2284ED',
+
+    neutral: '#E6E6E6',
+    neutral100: '#F9F9F9',
+    neutral200: '#F6F6F6',
+    neutral300: '#F2F2F2',
+    neutral400: '#EEEEEE',
+    neutral500: '#E6E6E6',
+    neutral600: '#A2A2A2',
+    neutral700: '#727272',
+    neutral800: '#1B1B1B',
+    neutral900: '#121212',
+
+    error100: '#FDF3F3',
+    error300: '#FFD7D7',
+    error500: '#FF3B3B',
+    error600: '#432F2F',
+    error700: '#191212',
+
+    warning100: '#FFF1D4',
+    warning300: '#FFD8B4',
+    warning500: '#F17606',
+    warning600: '#38271F',
+    warning700: '#1A1412',
+
+    info: '#5BABFF',
+    info100: '#E9F3FF',
+    info300: '#C8E2FF',
+    info500: '#5BABFF',
+    info600: '#2E2E41',
+    info700: '#121521',
+
+    success100: '#CEFAE6',
+    success300: '#BDECD7',
+    success500: '#06C270',
+    success600: '#1F2825',
+    success700: '#0F1412',
+
+    background: '#FDFDFD',
+    foreground: '#010101',
+  },
+  space: {
+    0: '0rem',
+    5: '0.313rem',
+    10: '0.625rem',
+    15: '0.938rem',
+    20: '1.25rem',
+    25: '1.563rem',
+    30: '1.875rem',
+    40: '2.5rem',
+    46: '2.875rem',
+    50: '3.125rem',
+    60: '3.75rem',
+    70: '4.375rem',
+    80: '5rem',
+    90: '5.625rem',
+    100: '6.25rem',
+
+    //These should be removed
+    2: '2px',
+    4: '4px',
+    6: '6px',
+    8: '8px',
+    12: '12px',
+    16: '16px',
+    24: '24px',
+    28: '28px',
+    32: '32px',
+    36: '36px',
+  },
+
+  radii: {
+    xs: '5px',
+    sm: '10px',
+    xm: '15px',
+    md: '25px',
+    xl: '35px',
+    lg: '40px',
+    primary: '20px',
+    secondary: `$md`,
+  },
+
+  fontSizes: {
+    10: '0.625rem',
+    12: '0.75rem',
+    14: '0.875rem',
+    16: '1rem',
+    18: '1.125rem',
+    20: '1.25rem',
+    22: '1.375rem',
+    24: '1.5rem',
+    28: '1.75rem',
+    32: '2rem',
+    36: '2.25rem',
+    40: '2.5rem',
+    48: '3rem',
+  },
+  fonts: {
+    primary: 'Roboto',
+    widget: '$primary',
+  },
+  fontWeights: {
+    regular: 400,
+    medium: 500,
+    semiBold: 600,
+    bold: 700,
+  },
+  lineHeights: {
+    12: '0.75rem',
+    16: '1rem',
+    20: '1.25rem',
+    24: '1.5rem',
+    26: '1.625rem',
+    28: '1.75rem',
+    30: '1.875rem',
+    36: '2.25rem',
+    40: '2.5rem',
+    44: '2.75rem',
+    52: '3.25rem',
+    64: '4rem',
+  },
+  letterSpacings: {},
+  sizes: {
+    4: '4px',
+    6: '6px',
+    8: '8px',
+    10: '10px',
+    12: '12px',
+    16: '16px',
+    18: '18px',
+    20: '20px',
+    24: '24px',
+    26: '26px',
+    28: '28px',
+    30: '30px',
+    32: '32px',
+    36: '36px',
+    40: '40px',
+    45: '45px',
+    48: '48px',
+  },
+  borderWidths: {},
+  borderStyles: {},
+  shadows: {
+    /** Shadow for swap box */
+    mainContainer: '15px 15px 15px 0px rgba(0, 0, 0, 0.05)',
+  },
+  zIndices: {},
+  transitions: {},
+};
+const media = {
+  xs: '(min-width: 375px)',
+  sm: '(min-width: 640px)',
+  md: '(min-width: 768px)',
+  lg: '(min-width: 1024px)',
+};
+const utils = {
+  bc: (value: PropertyValue<'backgroundColor'>) => ({
+    backgroundColor: value,
+  }),
+};
+
+export const darkColors = {
+  secondary: '#2284ED',
+  secondary250: '#469BF5',
+  secondary500: '#2284ED',
+  secondary550: '#2B3462',
+
+  neutral: '#222222',
+  neutral900: '#E9E9E9',
+  neutral800: '#E6E6E6',
+  neutral700: '#B8B8B8',
+  neutral600: '#A2A2A2',
+  neutral500: '#222222',
+  neutral400: '#1B1B1B',
+  neutral300: '#121212',
+  neutral200: '#111111',
+  neutral100: '#101010',
+
+  error500: '#FF5050',
+
+  warning500: '#FF8A20',
+
+  background: '#010101',
+  foreground: '#FDFDFD',
+};
+
+/* ----------------------- End of Values ----------------------- */
+
+export const { styled, css, createTheme, keyframes, globalCss, config } =
+  createStitches<'', typeof media, typeof theme, DefaultThemeMap>({
+    media,
+    theme,
+    utils,
+  });
+
+export type CSS = StitchesCSS<typeof config>;
+
+export const lightTheme = createTheme('light-theme-ui', {});
+
+export const darkTheme = createTheme('dark-theme-ui', {
+  colors: darkColors,
+});
+
+export const rangoDarkColors = {
+  secondary800: '#242D5B',
+  secondary850: '#131C49',
+  neutral: '#161C38',
+  neutral100: '#101327',
+  neutral200: '#0D122C',
+  neutral300: '#0F142E',
+  neutral400: '#111733',
+  neutral500: '#161C38',
+  neutral600: '#929292',
+  neutral700: '#C0C0C0',
+  neutral800: '#B8B8B8',
+  neutral900: '#E9E9E9',
+  background: '#070917',
+  foreground: '#FDFDFD',
+};

package/src/types/index.ts

@@ -0,0 +1,5 @@
+export type { ConnectedWallet } from './wallet.js';
+export type {
+  SimulationAssetAndAmount,
+  SimulationValidationStatus,
+} from './swaps.js';

package/src/types/swaps.ts

@@ -0,0 +1,7 @@
+import type {
+  BlockchainValidationStatus,
+  WalletRequiredAssets,
+} from 'rango-types/lib/api/main';
+
+export type SimulationAssetAndAmount = WalletRequiredAssets;
+export type SimulationValidationStatus = BlockchainValidationStatus;

package/src/types/wallet.ts

@@ -0,0 +1,26 @@
+import type { WalletType } from '@rango-dev/wallets-shared';
+
+interface Wallet {
+  chain: string;
+  address: string;
+  walletType: WalletType;
+}
+
+export type TokenBalance = {
+  chain: string;
+  symbol: string;
+  ticker: string;
+  address: string | null;
+  rawAmount: string;
+  decimal: number | null;
+  amount: string;
+  logo: string | null;
+  usdPrice: number | null;
+};
+
+export interface ConnectedWallet extends Wallet {
+  balances: TokenBalance[] | null;
+  loading: boolean;
+  error: boolean;
+  explorerUrl: string | null;
+}