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

package/src/components/Typography/Typography.styles.tsx

@@ -0,0 +1,206 @@
+import { styled } from '../../theme.js';
+
+export const TypographyContainer = styled('span', {
+  display: 'inline-block',
+  variants: {
+    variant: {
+      display: {},
+      headline: {},
+      title: {},
+      label: {},
+      body: {},
+    },
+    size: {
+      large: {},
+      medium: {},
+      xmedium: {},
+      small: {},
+      xsmall: {},
+    },
+    align: {
+      center: {
+        textAlign: 'center',
+      },
+      left: {
+        textAlign: 'left',
+      },
+      right: {
+        textAlign: 'right',
+      },
+    },
+    noWrap: {
+      true: {
+        whiteSpace: 'nowrap',
+      },
+    },
+  },
+
+  compoundVariants: [
+    {
+      size: 'large',
+      variant: 'display',
+      css: {
+        fontSize: '$48',
+        fontWeight: '$semiBold',
+        lineHeight: '$64',
+      },
+    },
+    {
+      size: 'medium',
+      variant: 'display',
+      css: {
+        fontSize: '$40',
+        fontWeight: '$semiBold',
+        lineHeight: '$52',
+      },
+    },
+    {
+      size: 'small',
+      variant: 'display',
+      css: {
+        fontSize: '$36',
+        fontWeight: '$semiBold',
+        lineHeight: '$44',
+      },
+    },
+
+    {
+      size: 'large',
+      variant: 'headline',
+      css: {
+        fontSize: '$32',
+        fontWeight: '$semiBold',
+        lineHeight: '$40',
+      },
+    },
+    {
+      size: 'medium',
+      variant: 'headline',
+      css: {
+        fontSize: '$38',
+        fontWeight: '$semiBold',
+        lineHeight: '$36',
+      },
+    },
+    {
+      size: 'small',
+      variant: 'headline',
+      css: {
+        fontSize: '$22',
+        fontWeight: '$semiBold',
+        lineHeight: '$30',
+      },
+    },
+    {
+      size: 'xsmall',
+      variant: 'headline',
+      css: {
+        fontSize: '$20',
+        fontWeight: '$semiBold',
+        lineHeight: '$28',
+      },
+    },
+
+    {
+      size: 'large',
+      variant: 'title',
+      css: {
+        fontSize: '$22',
+        fontWeight: '$medium',
+        lineHeight: '$28',
+      },
+    },
+    {
+      size: 'medium',
+      variant: 'title',
+      css: {
+        fontSize: '$18',
+        fontWeight: '$medium',
+        lineHeight: '$26',
+      },
+    },
+    {
+      size: 'xmedium',
+      variant: 'title',
+      css: {
+        fontSize: '$16',
+        fontWeight: '$medium',
+        lineHeight: '$24',
+      },
+    },
+    {
+      size: 'small',
+      variant: 'title',
+      css: {
+        fontSize: '$14',
+        fontWeight: '$medium',
+        lineHeight: '$20',
+      },
+    },
+
+    {
+      size: 'large',
+      variant: 'label',
+      css: {
+        fontSize: '$14',
+        fontWeight: '$medium',
+        lineHeight: '$20',
+      },
+    },
+    {
+      size: 'medium',
+      variant: 'label',
+      css: {
+        fontSize: '$12',
+        fontWeight: '$medium',
+        lineHeight: '$16',
+      },
+    },
+    {
+      size: 'small',
+      variant: 'label',
+      css: {
+        fontSize: '$10',
+        fontWeight: '$medium',
+        lineHeight: '$16',
+      },
+    },
+
+    {
+      size: 'large',
+      variant: 'body',
+      css: {
+        fontSize: '$16',
+        fontWeight: '$regular',
+        lineHeight: '$24',
+      },
+    },
+    {
+      size: 'medium',
+      variant: 'body',
+      css: {
+        fontSize: '$14',
+        fontWeight: '$regular',
+        lineHeight: '$20',
+      },
+    },
+    {
+      size: 'small',
+      variant: 'body',
+      css: {
+        fontSize: '$12',
+        fontWeight: '$regular',
+        lineHeight: '$16',
+      },
+    },
+    {
+      size: 'xsmall',
+      variant: 'body',
+      css: {
+        fontSize: '$10',
+        fontWeight: '$regular',
+        lineHeight: '$12',
+      },
+    },
+  ],
+});

package/src/components/Typography/Typography.tsx

@@ -0,0 +1,30 @@
+import type { TypographyPropTypes } from './Typography.types.js';
+import type { PropsWithChildren } from 'react';
+
+import React from 'react';
+
+import { TypographyContainer } from './Typography.styles.js';
+
+export const Typography = React.forwardRef<
+  HTMLSpanElement,
+  PropsWithChildren<TypographyPropTypes>
+>((props, ref) => {
+  const { children, id, className, color, ...rest } = props;
+
+  const customCss = color
+    ? { color: color.startsWith('$') ? color : `$${color}` }
+    : { color: '$foreground' };
+
+  return (
+    <TypographyContainer
+      id={id}
+      className={`_typography _text ${className || ''}`}
+      css={customCss}
+      ref={ref}
+      {...rest}>
+      {children}
+    </TypographyContainer>
+  );
+});
+
+Typography.displayName = 'Typography';

package/src/components/Typography/Typography.types.tsx

@@ -0,0 +1,18 @@
+import type { TypographyContainer } from './Typography.styles.js';
+import type * as Stitches from '@stitches/react';
+
+type BaseProps = Stitches.VariantProps<typeof TypographyContainer>;
+type BaseSizes = Exclude<BaseProps['size'], object>;
+type BaseVariants = Exclude<BaseProps['variant'], object>;
+export type BaseAlign = Exclude<BaseProps['align'], object>;
+
+export interface TypographyPropTypes {
+  variant: BaseVariants;
+  size: BaseSizes;
+  align?: BaseAlign;
+  noWrap?: boolean;
+  id?: string;
+  className?: string;
+  style?: Stitches.CSSProperties;
+  color?: string;
+}

package/src/components/Typography/index.ts

@@ -0,0 +1,3 @@
+export { Typography } from './Typography.js';
+export { NotSelectableTypography } from './NotSelectableTypography.js';
+export type { TypographyPropTypes } from './Typography.types.js';

package/src/components/VirtualizedList/VirtualizedList.tsx

@@ -0,0 +1,6 @@
+import {
+  GroupedVirtuoso as GroupedVirtualizedList,
+  Virtuoso as VirtualizedList,
+} from 'react-virtuoso';
+
+export { VirtualizedList, GroupedVirtualizedList };

package/src/components/VirtualizedList/index.ts

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

package/src/components/Wallet/ClickableWallet.tsx

@@ -0,0 +1,84 @@
+import type { WalletPropTypes } from './Wallet.types.js';
+
+import { detectInstallLink } from '@rango-dev/wallets-shared';
+import React from 'react';
+
+import { Image } from '../common/index.js';
+import { Divider } from '../Divider/index.js';
+import { Skeleton } from '../Skeleton/index.js';
+import { Tooltip } from '../Tooltip/index.js';
+import { Typography } from '../Typography/index.js';
+
+import { makeInfo } from './Wallet.helpers.js';
+import {
+  LoadingButton,
+  Text,
+  Title,
+  WalletButton,
+  WalletImageContainer,
+} from './Wallet.styles.js';
+import { WalletState } from './Wallet.types.js';
+
+function Wallet(props: WalletPropTypes) {
+  const { title, type, image, onClick, isLoading, disabled = false } = props;
+  const info = makeInfo(props.state);
+
+  if (isLoading) {
+    return (
+      <LoadingButton>
+        <Skeleton variant="circular" width={35} height={35} />
+        <Divider size={12} />
+        <Skeleton variant="text" width={85} size="medium" />
+        <Divider size={4} />
+        <Skeleton variant="text" width={64} size="medium" />
+      </LoadingButton>
+    );
+  }
+
+  const wrapComponentWithTooltip = (children: React.ReactNode) => {
+    if (disabled) {
+      return <>{children}</>;
+    }
+    return (
+      <Tooltip
+        container={props.container}
+        content={info.tooltipText}
+        side="top">
+        {children}
+      </Tooltip>
+    );
+  };
+
+  return wrapComponentWithTooltip(
+    <WalletButton
+      className={'widget-clickable-wallet-btn'}
+      disabled={props.state == WalletState.CONNECTING || disabled}
+      onClick={() => {
+        if (props.state === WalletState.NOT_INSTALLED) {
+          window.open(detectInstallLink(props.link), '_blank');
+        } else {
+          onClick(type);
+        }
+      }}>
+      <WalletImageContainer>
+        <Image src={image} size={35} />
+      </WalletImageContainer>
+
+      <Text>
+        <Title variant="label" size="medium" noWrap={false}>
+          {title}
+        </Title>
+
+        <Typography
+          variant="body"
+          size="xsmall"
+          noWrap={false}
+          color={info.color}>
+          {info.description}
+        </Typography>
+      </Text>
+    </WalletButton>
+  );
+}
+
+export default Wallet;

package/src/components/Wallet/SelectableWallet.tsx

@@ -0,0 +1,59 @@
+import { detectInstallLink } from '@rango-dev/wallets-shared';
+import React from 'react';
+
+import { Image } from '../common/index.js';
+import { Typography } from '../Typography/index.js';
+
+import {
+  SelectableWalletButton,
+  Text,
+  Title,
+  WalletImageContainer,
+} from './Wallet.styles.js';
+import { type SelectablePropTypes, WalletState } from './Wallet.types.js';
+
+export function SelectableWallet(props: SelectablePropTypes) {
+  const {
+    title,
+    type,
+    image,
+    onClick,
+    selected,
+    id,
+    description,
+    descriptionColor,
+    disabled = false,
+  } = props;
+
+  return (
+    <SelectableWalletButton
+      selected={selected}
+      id={id}
+      disabled={props.state == WalletState.CONNECTING || disabled}
+      onClick={() => {
+        if (props.state === WalletState.NOT_INSTALLED) {
+          window.open(detectInstallLink(props.link), '_blank');
+        } else {
+          onClick(type);
+        }
+      }}>
+      <WalletImageContainer>
+        <Image src={image} size={35} />
+      </WalletImageContainer>
+
+      <Text>
+        <Title variant="label" size="medium" noWrap={false}>
+          {title}
+        </Title>
+
+        <Typography
+          variant="body"
+          size="xsmall"
+          noWrap={false}
+          color={descriptionColor}>
+          {description}
+        </Typography>
+      </Text>
+    </SelectableWalletButton>
+  );
+}

package/src/components/Wallet/Wallet.helpers.ts

@@ -0,0 +1,42 @@
+import type { Info } from './Wallet.types.js';
+
+import { i18n } from '@lingui/core';
+
+import { WalletState } from './Wallet.types.js';
+
+export function makeInfo(state: WalletState): Info {
+  switch (state) {
+    case WalletState.CONNECTED:
+      return {
+        color: 'success500',
+        description: i18n.t('Connected'),
+        tooltipText: i18n.t('Disconnect'),
+      };
+    case WalletState.PARTIALLY_CONNECTED:
+      return {
+        color: 'warning500',
+        description: i18n.t('Connected Partially'),
+        tooltipText: i18n.t('Connect other chains'),
+      };
+    case WalletState.NOT_INSTALLED:
+      return {
+        color: 'info500',
+        description: i18n.t('Install'),
+        tooltipText: i18n.t('Install'),
+      };
+    case WalletState.CONNECTING:
+      return {
+        color: 'neutral600',
+        description: i18n.t('Connecting ...'),
+        tooltipText: i18n.t('Connecting'),
+      };
+    case WalletState.DISCONNECTED:
+      return {
+        color: 'neutral600',
+        description: i18n.t('Disconnected'),
+        tooltipText: i18n.t('Connect'),
+      };
+    default:
+      throw new Error(i18n.t('you need to pass a correct state to Wallet.'));
+  }
+}

package/src/components/Wallet/Wallet.styles.ts

@@ -0,0 +1,90 @@
+import { darkTheme, styled } from '../../theme.js';
+import { Typography } from '../Typography/index.js';
+
+export const WalletImageContainer = styled('div', {
+  '& img': {
+    borderRadius: '50%',
+  },
+});
+
+export const Title = styled(Typography, {
+  textTransform: 'capitalize',
+});
+
+export const Text = styled('div', {
+  display: 'flex',
+  flexDirection: 'column',
+  marginTop: '$10',
+});
+
+export const WalletButton = styled('button', {
+  borderRadius: '$xm',
+  padding: '$10',
+  border: '0',
+  display: 'flex',
+  flexDirection: 'column',
+  $$color: '$colors$neutral100',
+  [`.${darkTheme} &`]: {
+    $$color: '$colors$neutral300',
+  },
+  backgroundColor: '$$color',
+  alignItems: 'center',
+  cursor: 'pointer',
+  width: 108,
+  position: 'relative',
+  fontFamily: 'inherit',
+  '&:hover': {
+    $$color: '$colors$secondary100',
+    [`.${darkTheme} &`]: {
+      $$color: '$colors$neutral100',
+    },
+    backgroundColor: '$$color',
+  },
+  '&:focus-visible': {
+    $$color: '$colors$secondary100',
+    [`.${darkTheme} &`]: {
+      $$color: '$colors$info700',
+    },
+    backgroundColor: '$$color',
+    outline: 0,
+  },
+  '&:disabled': {
+    filter: 'grayscale(1)',
+    pointerEvents: 'none',
+  },
+  variants: {
+    selected: {
+      true: {
+        outlineWidth: 1,
+        $$outline: '$colors$secondary500',
+        [`.${darkTheme} &`]: {
+          $$outline: '$colors$secondary250',
+        },
+        outlineColor: '$$outline',
+        outlineStyle: 'solid',
+      },
+    },
+  },
+});
+
+export const SelectableWalletButton = styled(WalletButton, {
+  width: 'auto',
+  paddingRight: '$6',
+  paddingLeft: '$6',
+  flex: 1,
+  minWidth: '98px',
+  maxWidth: '110px',
+  minHeight: '93px',
+});
+
+export const LoadingButton = styled('div', {
+  borderRadius: '$xm',
+  padding: '$10 0',
+  border: '0',
+  display: 'flex',
+  flexDirection: 'column',
+  backgroundColor: '$neutral100',
+  alignItems: 'center',
+  justifyContent: 'center',
+  width: 100,
+});

package/src/components/Wallet/Wallet.tsx

@@ -0,0 +1,3 @@
+export { default as Wallet } from './ClickableWallet.js';
+export { SelectableWallet } from './SelectableWallet.js';
+export { makeInfo } from './Wallet.helpers.js';

package/src/components/Wallet/Wallet.types.ts

@@ -0,0 +1,57 @@
+import type { LegacyWalletInfo } from '@rango-dev/wallets-core/legacy';
+import type { InstallObjects, WalletType } from '@rango-dev/wallets-shared';
+import type { TransactionType } from 'rango-types';
+
+export enum WalletState {
+  NOT_INSTALLED = 'not_installed',
+  DISCONNECTED = 'disconnected',
+  CONNECTING = 'connecting',
+  CONNECTED = 'connected',
+  PARTIALLY_CONNECTED = 'partially_connected',
+}
+
+export type WalletInfo = {
+  state: WalletState;
+  link: InstallObjects | string;
+  title: string;
+  image: string;
+  type: string;
+  showOnMobile?: boolean;
+  blockchainTypes: TransactionType[];
+  needsNamespace?: LegacyWalletInfo['needsNamespace'];
+  needsDerivationPath?: LegacyWalletInfo['needsDerivationPath'];
+};
+
+export interface Info {
+  color: string;
+  description: string;
+  tooltipText: string;
+}
+
+export interface ContentProps {
+  image: string;
+  title: string;
+  description: string;
+  descriptionColor?: string;
+}
+
+export interface WalletPropTypes {
+  state: WalletState;
+  title: string;
+  image: string;
+  link: InstallObjects | string;
+  type: WalletType;
+  onClick: (type: WalletType) => void;
+  selected?: boolean;
+  description?: string;
+  isLoading?: boolean;
+  container?: HTMLElement;
+  disabled?: boolean;
+}
+
+export type SelectablePropTypes = WalletPropTypes & {
+  selected: boolean;
+  disabled?: boolean;
+  id: string;
+  descriptionColor: string;
+};

package/src/components/Wallet/index.ts

@@ -0,0 +1,7 @@
+export * from './Wallet.js';
+export type { WalletInfo } from './Wallet.types.js';
+export { WalletState } from './Wallet.types.js';
+export {
+  SelectableWalletButton,
+  WalletImageContainer,
+} from './Wallet.styles.js';

package/src/components/common/Image.tsx

@@ -0,0 +1,54 @@
+import React from 'react';
+
+import { styled } from '../../theme.js';
+
+export const ImageContainer = styled('div', {
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  '.image': {
+    width: '100%',
+    height: '100%',
+    objectFit: 'contain',
+  },
+  '.circular': {
+    borderRadius: '$lg',
+  },
+});
+
+type PropTypes = {
+  id?: string;
+  size: number;
+  useAsPlaceholder?: boolean;
+  backgroundColor?: string;
+  borderRadius?: string;
+  type?: 'circular' | 'rectangular';
+} & React.ImgHTMLAttributes<HTMLImageElement>;
+
+export function Image(props: PropTypes) {
+  const {
+    size,
+    useAsPlaceholder,
+    backgroundColor = '$secondary100',
+    type,
+    ...otherProps
+  } = props;
+
+  const borderRadius = type === 'circular' ? '$lg' : '$xs';
+
+  return (
+    <ImageContainer
+      css={{
+        width: size + 'px',
+        height: size + 'px',
+        ...(useAsPlaceholder && { backgroundColor, borderRadius }),
+      }}>
+      {!useAsPlaceholder && (
+        <img
+          className={`image ${type === 'circular' ? 'circular' : ''}`}
+          {...otherProps}
+        />
+      )}
+    </ImageContainer>
+  );
+}

package/src/components/common/index.ts

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