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

package/dist/widget/ui/src/theme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../../src/theme.ts"],"names":[],"mappings":"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"}

package/dist/widget/ui/src/types/index.d.ts

@@ -0,0 +1,3 @@
+export type { ConnectedWallet } from './wallet.js';
+export type { SimulationAssetAndAmount, SimulationValidationStatus, } from './swaps.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/widget/ui/src/types/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/types/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AACnD,YAAY,EACV,wBAAwB,EACxB,0BAA0B,GAC3B,MAAM,YAAY,CAAC"}

package/dist/widget/ui/src/types/swaps.d.ts

@@ -0,0 +1,4 @@
+import type { BlockchainValidationStatus, WalletRequiredAssets } from 'rango-types/lib/api/main';
+export type SimulationAssetAndAmount = WalletRequiredAssets;
+export type SimulationValidationStatus = BlockchainValidationStatus;
+//# sourceMappingURL=swaps.d.ts.map

package/dist/widget/ui/src/types/swaps.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"swaps.d.ts","sourceRoot":"","sources":["../../../../../src/types/swaps.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,0BAA0B,EAC1B,oBAAoB,EACrB,MAAM,0BAA0B,CAAC;AAElC,MAAM,MAAM,wBAAwB,GAAG,oBAAoB,CAAC;AAC5D,MAAM,MAAM,0BAA0B,GAAG,0BAA0B,CAAC"}

package/dist/widget/ui/src/types/wallet.d.ts

@@ -0,0 +1,25 @@
+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;
+}
+export {};
+//# sourceMappingURL=wallet.d.ts.map

package/dist/widget/ui/src/types/wallet.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"wallet.d.ts","sourceRoot":"","sources":["../../../../../src/types/wallet.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AAE5D,UAAU,MAAM;IACd,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,EAAE,UAAU,CAAC;CACxB;AAED,MAAM,MAAM,YAAY,GAAG;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,MAAM,GAAG,IAAI,CAAC;IACvB,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,MAAM,GAAG,IAAI,CAAC;IACvB,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,GAAG,IAAI,CAAC;IACpB,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC;CACzB,CAAC;AAEF,MAAM,WAAW,eAAgB,SAAQ,MAAM;IAC7C,QAAQ,EAAE,YAAY,EAAE,GAAG,IAAI,CAAC;IAChC,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,OAAO,CAAC;IACf,WAAW,EAAE,MAAM,GAAG,IAAI,CAAC;CAC5B"}

package/package.json

@@ -0,0 +1,65 @@
+{
+  "name": "@rango-dev/ui",
+  "version": "0.0.0-experimental-936229e8-20251208",
+  "license": "MIT",
+  "type": "module",
+  "source": "./src/index.ts",
+  "main": "./dist/index.js",
+  "exports": {
+    "types": "./dist/widget/ui/src/index.d.ts",
+    "default": "./dist/index.js"
+  },
+  "typings": "./dist/widget/ui/src/index.d.ts",
+  "files": [
+    "dist",
+    "src"
+  ],
+  "scripts": {
+    "dev": "yarn bundle --watch",
+    "build": "node ../../scripts/build/command.mjs --path widget/ui",
+    "ts-check": "tsc --declaration --emitDeclarationOnly -p ./tsconfig.json",
+    "build:icons": "svgr svgs/resources/fill --config-file svgs/configs/.svgrrc.default.cjs",
+    "type-checking": "tsc --declaration --emitDeclarationOnly",
+    "clean": "rimraf dist",
+    "format": "prettier --write '{.,src}/**/*.{ts,tsx}'",
+    "lint": "eslint \"**/*.{ts,tsx}\""
+  },
+  "peerDependencies": {
+    "@lingui/core": "4.2.1",
+    "@lingui/react": "4.2.1",
+    "react": ">=16"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.20.2",
+    "@babel/preset-env": "^7.21.4",
+    "@babel/preset-react": "^7.18.6",
+    "@babel/preset-typescript": "^7.21.4",
+    "@lingui/core": "4.2.1",
+    "@lingui/react": "4.2.1",
+    "@svgr/babel-plugin-remove-jsx-attribute": "8.0.0",
+    "@svgr/cli": "^8.0.1",
+    "@types/react": "^18.0.25",
+    "@types/react-dom": "^18.0.8",
+    "babel-loader": "^9.1.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-is": "^18.2.0"
+  },
+  "dependencies": {
+    "@radix-ui/react-checkbox": "^1.0.1",
+    "@radix-ui/react-collapsible": "^1.0.3",
+    "@radix-ui/react-popover": "^1.0.6",
+    "@radix-ui/react-radio-group": "^1.1.1",
+    "@radix-ui/react-select": "^2.0.0",
+    "@radix-ui/react-switch": "^1.0.1",
+    "@radix-ui/react-tooltip": "^1.0.2",
+    "@rango-dev/wallets-shared": "^0.0.0-experimental-936229e8-20251208",
+    "@stitches/react": "^1.2.8",
+    "copy-to-clipboard": "^3.3.3",
+    "rango-types": "^0.1.89",
+    "react-virtuoso": "^4.6.2"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/readme.md

@@ -0,0 +1,8 @@
+# @rango-dev/ui
+
+Rango UI components
+
+### Icons
+
+Add your svg icon to `svgs/resources/` then run `yarn build:icons`.
+

package/src/components/Alert/Alert.helpers.ts

@@ -0,0 +1,28 @@
+import type { AlertPropTypes, Type } from './Alert.types.js';
+
+export const getColor = (type: Type, variant: AlertPropTypes['variant']) => {
+  if (variant === 'regular') {
+    return undefined;
+  }
+
+  switch (type) {
+    case 'success':
+    case 'warning':
+    case 'error':
+    case 'info':
+      return `${type}500`;
+    default:
+      return undefined;
+  }
+};
+
+export const mapVariantToSize = (variant: AlertPropTypes['variant']) => {
+  switch (variant) {
+    case 'alarm':
+      return 'small';
+    case 'regular':
+      return 'xsmall';
+    default:
+      return 'xsmall';
+  }
+};

package/src/components/Alert/Alert.icon.tsx

@@ -0,0 +1,28 @@
+import type { AlertPropTypes } from './Alert.types.js';
+
+import React from 'react';
+
+import {
+  CompleteIcon,
+  ErrorIcon,
+  InfoErrorIcon,
+  WarningIcon,
+} from '../../icons/index.js';
+import { Spinner } from '../Spinner/index.js';
+
+function AlertIcon(props: Pick<AlertPropTypes, 'type'>) {
+  switch (props.type) {
+    case 'success':
+      return <CompleteIcon color={props.type} size={12} />;
+    case 'warning':
+      return <WarningIcon color={props.type} size={12} />;
+    case 'error':
+      return <ErrorIcon color={props.type} size={12} />;
+    case 'loading':
+      return <Spinner color="info" size={12} />;
+    default:
+      return <InfoErrorIcon color={props.type} size={12} />;
+  }
+}
+
+export default AlertIcon;

package/src/components/Alert/Alert.styles.ts

@@ -0,0 +1,172 @@
+import { darkTheme, styled } from '../../theme.js';
+
+export const Container = styled('div', {
+  display: 'flex',
+  flexDirection: 'column',
+  borderRadius: '$xs',
+  '.title_typography': {
+    width: '100%',
+  },
+  '.title_typography:first-letter': {
+    textTransform: 'uppercase',
+  },
+
+  '.footer': {
+    paddingTop: '$5',
+    paddingLeft: '$24',
+  },
+  '.description': {
+    color: '$neutral700',
+    fontSize: '$10',
+    lineHeight: '$12',
+  },
+  variants: {
+    type: {
+      success: {},
+      warning: {},
+      error: {},
+      info: {},
+      loading: {},
+    },
+    variant: {
+      regular: {
+        padding: '$5',
+        alignItems: 'flex-start',
+        backgroundColor: '$neutral400',
+      },
+      alarm: {
+        padding: '$5 $10',
+        '.title_typography': {
+          fontWeight: '$medium',
+        },
+      },
+    },
+  },
+
+  compoundVariants: [
+    {
+      type: 'warning',
+      variant: 'alarm',
+      css: {
+        $$color: '$colors$warning100',
+        [`.${darkTheme} &`]: {
+          $$color: '$colors$warning700',
+        },
+        backgroundColor: '$$color',
+      },
+    },
+    {
+      type: 'error',
+      variant: 'alarm',
+      css: {
+        $$color: '$colors$error100',
+        [`.${darkTheme} &`]: {
+          $$color: '$colors$error700',
+        },
+        backgroundColor: '$$color',
+      },
+    },
+    {
+      type: 'info',
+      variant: 'alarm',
+      css: {
+        $$color: '$colors$info100',
+        [`.${darkTheme} &`]: {
+          $$color: '$colors$info700',
+        },
+        backgroundColor: '$$color',
+      },
+    },
+    {
+      type: 'success',
+      variant: 'alarm',
+      css: {
+        $$color: '$colors$success100',
+        [`.${darkTheme} &`]: {
+          $$color: '$colors$success700',
+        },
+        backgroundColor: '$$color',
+      },
+    },
+  ],
+});
+
+export const Main = styled('div', {
+  display: 'flex',
+  alignItems: 'center',
+  alignSelf: 'stretch',
+  whiteSpace: 'normal',
+  wordBreak: 'break-all',
+
+  variants: {
+    variant: {
+      regular: {
+        justifyContent: 'space-between',
+      },
+      alarm: {
+        justifyContent: 'flex-start',
+      },
+    },
+  },
+});
+
+export const TitleContainer = styled('div', {
+  display: 'flex',
+  alignItems: 'center',
+  flex: '1 0 0',
+});
+
+export const IconHighlight = styled('div', {
+  borderRadius: '$lg',
+  width: '$20',
+  height: '$20',
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  alignSelf: 'flex-start',
+  flexShrink: 0,
+  variants: {
+    type: {
+      success: {
+        $$color: '$colors$success300',
+        [`.${darkTheme} &`]: {
+          $$color: '$colors$success600',
+        },
+        backgroundColor: '$$color',
+      },
+      warning: {
+        $$color: '$colors$warning300',
+        [`.${darkTheme} &`]: {
+          $$color: '$colors$warning600',
+        },
+        backgroundColor: '$$color',
+      },
+      error: {
+        $$color: '$colors$error300',
+        [`.${darkTheme} &`]: {
+          $$color: '$colors$error600',
+        },
+        backgroundColor: '$$color',
+      },
+      info: {
+        $$color: '$colors$info300',
+        [`.${darkTheme} &`]: {
+          $$color: '$colors$info600',
+        },
+        backgroundColor: '$$color',
+      },
+      loading: {
+        $$color: '$colors$info300',
+        [`.${darkTheme} &`]: {
+          $$color: '$colors$info600',
+        },
+        backgroundColor: '$$color',
+      },
+    },
+    align: {
+      center: {
+        alignSelf: 'center',
+      },
+    },
+  },
+});

package/src/components/Alert/Alert.tsx

@@ -0,0 +1,71 @@
+import type { AlertPropTypes } from './Alert.types.js';
+import type { PropsWithChildren } from 'react';
+
+import React from 'react';
+
+import { Divider } from '../Divider/index.js';
+import { Typography } from '../Typography/index.js';
+
+import { getColor, mapVariantToSize } from './Alert.helpers.js';
+import AlertIcon from './Alert.icon.js';
+import {
+  Container,
+  IconHighlight,
+  Main,
+  TitleContainer,
+} from './Alert.styles.js';
+
+export function Alert(props: PropsWithChildren<AlertPropTypes>) {
+  const {
+    type,
+    title,
+    footer,
+    action,
+    containerStyles,
+    variant = 'regular',
+    titleAlign,
+    id,
+  } = props;
+  const isFooterString = typeof footer === 'string';
+
+  return (
+    <Container
+      className="_alert"
+      id={id}
+      css={containerStyles}
+      type={type}
+      variant={variant}>
+      <Main variant={variant}>
+        <TitleContainer>
+          <IconHighlight type={type}>
+            <AlertIcon type={type} />
+          </IconHighlight>
+          <Divider direction="horizontal" size={4} />
+          {title && (
+            <Typography
+              color={getColor(type, variant)}
+              align={titleAlign}
+              variant="body"
+              className="title_typography"
+              size={mapVariantToSize(variant)}>
+              {title}
+            </Typography>
+          )}
+        </TitleContainer>
+        {action ? (
+          <>
+            <Divider direction="horizontal" size={'20'} />
+            <div>{action}</div>
+          </>
+        ) : null}
+      </Main>
+      {footer ? (
+        <div className={`footer ${isFooterString ? 'description' : ''}`}>
+          {footer}
+        </div>
+      ) : null}
+    </Container>
+  );
+}
+
+Alert.toString = () => '._alert';

package/src/components/Alert/Alert.types.ts

@@ -0,0 +1,16 @@
+import type { CSS } from '../../theme.js';
+import type { BaseAlign } from '../Typography/Typography.types.js';
+import type { ReactNode } from 'react';
+
+export type Type = 'success' | 'warning' | 'error' | 'info' | 'loading';
+
+export interface AlertPropTypes {
+  type: Type;
+  title?: ReactNode;
+  footer?: ReactNode;
+  action?: ReactNode;
+  variant?: 'alarm' | 'regular';
+  containerStyles?: CSS;
+  id?: string;
+  titleAlign?: BaseAlign;
+}

package/src/components/Alert/index.ts

@@ -0,0 +1,2 @@
+export { Alert } from './Alert.js';
+export type { AlertPropTypes } from './Alert.types.js';

package/src/components/BlockchainsChip/BlockchainsChip.styles.ts

@@ -0,0 +1,45 @@
+import { darkTheme, styled } from '../../theme.js';
+import { ImageContainer } from '../common/index.js';
+
+export const Chip = styled('button', {
+  padding: '$10',
+  borderRadius: '$sm',
+  width: '100%',
+  $$color: '$colors$neutral100',
+  [`.${darkTheme} &`]: {
+    $$color: '$colors$neutral300',
+  },
+  backgroundColor: '$$color',
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'center',
+  alignItems: 'center',
+  cursor: 'pointer',
+  border: 0,
+  fontFamily: 'inherit',
+  [`& ${ImageContainer}`]: {
+    borderRadius: '$xm',
+    overflow: 'hidden',
+  },
+  '&:hover': {
+    $$color: '$colors$secondary100',
+    [`.${darkTheme} &`]: {
+      $$color: '$colors$neutral100',
+    },
+    backgroundColor: '$$color',
+  },
+  '&:focus-visible': {
+    outline: 0,
+    $$color: '$colors$secondary100',
+    [`.${darkTheme} &`]: {
+      $$color: '$colors$info700',
+    },
+    backgroundColor: '$$color',
+  },
+  variants: {
+    selected: {
+      true: { outline: '1px solid $secondary500' },
+      false: { outline: 0 },
+    },
+  },
+});

package/src/components/BlockchainsChip/BlockchainsChip.tsx

@@ -0,0 +1,15 @@
+import type { PropTypes } from './BlockchainsChip.types.js';
+import type { PropsWithChildren } from 'react';
+
+import React from 'react';
+
+import { Chip } from './BlockchainsChip.styles.js';
+
+export function BlockchainsChip(props: PropsWithChildren<PropTypes>) {
+  const { children, selected, onClick, className } = props;
+  return (
+    <Chip selected={selected} onClick={onClick} className={className}>
+      {children}
+    </Chip>
+  );
+}

package/src/components/BlockchainsChip/BlockchainsChip.types.ts

@@ -0,0 +1,5 @@
+export interface PropTypes {
+  selected?: boolean;
+  className: string;
+  onClick?: React.MouseEventHandler<HTMLButtonElement>;
+}

package/src/components/BlockchainsChip/index.ts

@@ -0,0 +1 @@
+export { BlockchainsChip } from './BlockchainsChip.js';

package/src/components/BottomLogo/BottomLogo.styles.ts

@@ -0,0 +1,15 @@
+import { styled } from '../../theme.js';
+
+export const Container = styled('div', {
+  display: 'flex',
+  width: '100%',
+  justifyContent: 'end',
+  alignItems: 'center',
+});
+
+export const StyledAnchor = styled('a', {
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  textDecoration: 'none',
+});

package/src/components/BottomLogo/BottomLogo.tsx

@@ -0,0 +1,27 @@
+import { i18n } from '@lingui/core';
+import React from 'react';
+
+import { Divider } from '../Divider/index.js';
+import { Logo } from '../Logo/index.js';
+import { Typography } from '../Typography/index.js';
+
+import { Container, StyledAnchor } from './BottomLogo.styles.js';
+
+export function BottomLogo() {
+  return (
+    <Container>
+      <Typography variant="body" size="xsmall" color="$neutral700">
+        {i18n.t('Powered By')}
+      </Typography>
+      <Divider direction="horizontal" size={8} />
+      <StyledAnchor href="https://rango.exchange" target="_blank">
+        <Logo size={16} color="gray" />
+        <Divider direction="horizontal" size={4} />
+
+        <Typography variant="body" size="xsmall" color="neutral700">
+          RANGO
+        </Typography>
+      </StyledAnchor>
+    </Container>
+  );
+}

package/src/components/BottomLogo/index.ts

@@ -0,0 +1 @@
+export { BottomLogo } from './BottomLogo.js';