@rango-dev/widget-embedded 0.0.0-experimental-936229e8-20251208

package/src/components/CustomTokenModal/CustomTokenModal.helpers.ts

@@ -0,0 +1,19 @@
+import type { BlockchainMeta } from 'rango-types';
+
+export function generateExplorerLink(
+  address: string | null,
+  blockchain: BlockchainMeta
+): string {
+  // We don't have Cosmos explorer url in API.
+  if (blockchain.type === 'COSMOS') {
+    return '';
+  }
+
+  const explorerLinkPattern = blockchain.info?.addressUrl;
+
+  if (!explorerLinkPattern || !address) {
+    return '';
+  }
+
+  return explorerLinkPattern.replace('{wallet}', address);
+}

package/src/components/CustomTokenModal/CustomTokenModal.styles.ts

@@ -0,0 +1,74 @@
+import { Button, darkTheme, styled, Typography } from '@rango-dev/ui';
+
+export const StyledLink = styled('a', {
+  textDecoration: 'none',
+  color: '$colors$neutral700',
+  [`.${darkTheme} &`]: {
+    color: '$colors$neutral900',
+  },
+
+  '& svg': {
+    marginLeft: '$4',
+    color: '$colors$neutral700',
+    [`.${darkTheme} &`]: {
+      color: '$colors$neutral900',
+    },
+  },
+
+  variants: {
+    hasHover: {
+      true: {
+        '&:hover': {
+          color: '$colors$secondary550',
+          [`.${darkTheme} &`]: {
+            color: '$colors$secondary500',
+          },
+          '& svg': {
+            color: '$colors$secondary550',
+            [`.${darkTheme} &`]: {
+              color: '$colors$secondary500',
+            },
+          },
+        },
+      },
+      false: {},
+    },
+  },
+});
+
+export const Container = styled('div', {
+  display: 'flex',
+  justifyContent: 'center',
+  flexDirection: 'column',
+  alignItems: 'center',
+  textAlign: 'center',
+  '& ._blockchain-name, & ._coin-source': {
+    color: '$colors$neutral600',
+    [`.${darkTheme} &`]: {
+      color: '$colors$neutral800',
+    },
+  },
+  '& ._coin-source-name, & ._custom-token-description': {
+    color: '$colors$neutral700',
+    [`.${darkTheme} &`]: {
+      color: '$colors$neutral900',
+    },
+  },
+});
+
+export const StyledButton = styled(Button, {
+  minHeight: '$40',
+});
+
+export const TokenSymbolText = styled(Typography, {
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap',
+  maxWidth: '96px',
+});
+
+export const FlexCenteredContainer = styled('div', {
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+});

package/src/components/CustomTokenModal/CustomTokenModal.tsx

@@ -0,0 +1,131 @@
+import type { PropTypes } from './CustomTokenModal.types';
+
+import { i18n } from '@lingui/core';
+import {
+  Divider,
+  ExternalLinkIcon,
+  Image,
+  InfoIcon,
+  Tooltip,
+  Typography,
+} from '@rango-dev/ui';
+import React from 'react';
+
+import { DEFAULT_TOKEN_IMAGE_SRC } from '../../constants/customTokens';
+import { getContainer } from '../../utils/common';
+import { WatermarkedModal } from '../common/WatermarkedModal';
+
+import { CUSTOM_TOKEN_LEARN_MORE_LINK } from './CustomTokenModal.constants';
+import { generateExplorerLink } from './CustomTokenModal.helpers';
+import {
+  Container,
+  FlexCenteredContainer,
+  StyledButton,
+  StyledLink,
+  TokenSymbolText,
+} from './CustomTokenModal.styles';
+
+const MAX_SYMBOL_LENGTH_THRESHOLD = 9;
+export function CustomTokenModal(props: PropTypes) {
+  const { open, onClose, token, onExit, onSubmitClick, blockchain } = props;
+
+  const explorerLink = generateExplorerLink(token.address, blockchain);
+
+  const onClickLearnMore = () =>
+    window.open(CUSTOM_TOKEN_LEARN_MORE_LINK, '_blank');
+
+  return (
+    <WatermarkedModal
+      open={open}
+      id="widget-custom-token-watermarked-modal"
+      dismissible
+      onClose={onClose}
+      onExit={onExit}
+      container={getContainer()}>
+      <Container>
+        <Image
+          src={token.image === '' ? DEFAULT_TOKEN_IMAGE_SRC : token.image}
+          size={45}
+          type="circular"
+        />
+        <Divider size={4} />
+        <FlexCenteredContainer>
+          <TokenSymbolText variant="title" size="medium">
+            {token.symbol}
+          </TokenSymbolText>
+          {token.symbol.length > MAX_SYMBOL_LENGTH_THRESHOLD && (
+            <Tooltip content={token.symbol} container={getContainer()}>
+              <InfoIcon size={12} color="gray" />
+            </Tooltip>
+          )}
+        </FlexCenteredContainer>
+
+        <Typography variant="body" size="small" className="_blockchain-name">
+          {blockchain.displayName}
+        </Typography>
+        <Divider size={4} />
+
+        <Typography variant="body" size="medium">
+          {!!explorerLink ? (
+            <StyledLink
+              hasHover
+              href={explorerLink}
+              target="_blank"
+              rel="nofollow noreferrer">
+              {token.address}
+              <ExternalLinkIcon size={12} color="gray" />
+            </StyledLink>
+          ) : (
+            <StyledLink>{token.address}</StyledLink>
+          )}
+        </Typography>
+
+        <Divider size={4} />
+
+        {token.coinSource && (
+          <Typography className="_coin-source" variant="body" size="xsmall">
+            {i18n.t('via')}{' '}
+            <Typography
+              className="_coin-source-name"
+              variant="body"
+              size="xsmall">
+              {token.coinSource}
+            </Typography>
+          </Typography>
+        )}
+        <Divider size={'32'} />
+
+        <Typography
+          size="medium"
+          variant="body"
+          className="_custom-token-description">
+          {i18n.t(
+            `This token is not part of our verified token list. please verify its source and make sure to understand all associated risks before proceeding.`
+          )}
+        </Typography>
+      </Container>
+      <Divider size={40} />
+      <Divider size={10} />
+
+      <StyledButton
+        id="widget-custom-token-modal-import-btn"
+        variant="contained"
+        size="large"
+        type="primary"
+        fullWidth
+        onClick={onSubmitClick}>
+        {i18n.t('Import Anyway')}
+      </StyledButton>
+      <Divider size={10} />
+      <StyledButton
+        id="widget-custom-token-modal-learn-more-btn"
+        variant="outlined"
+        size="large"
+        type="primary"
+        fullWidth
+        onClick={onClickLearnMore}>
+        {i18n.t('Learn More')}
+      </StyledButton>
+    </WatermarkedModal>
+  );
+}

package/src/components/CustomTokenModal/CustomTokenModal.types.ts

@@ -0,0 +1,10 @@
+import type { BlockchainMeta, Token } from 'rango-sdk';
+
+export type PropTypes = {
+  open: boolean;
+  onClose: () => void;
+  onExit: () => void;
+  onSubmitClick: () => void;
+  token: Token;
+  blockchain: BlockchainMeta;
+};

package/src/components/CustomTokenModal/index.ts

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

package/src/components/FilterSelector/FilterSelector.style.ts

@@ -0,0 +1,95 @@
+import { css, darkTheme, IconButton, styled } from '@rango-dev/ui';
+
+export const IconContainer = styled('div', {
+  position: 'relative',
+  '&::before': {
+    position: 'absolute',
+    right: '1px',
+    top: '-1px',
+    width: '$8',
+    height: '$8',
+    borderRadius: '100%',
+    backgroundColor: '$neutral300',
+    [`.${darkTheme} &`]: {
+      backgroundColor: '$neutral400',
+    },
+    padding: '$2',
+  },
+  variants: {
+    isSelect: {
+      true: {
+        '&::before': {
+          content: '',
+        },
+      },
+    },
+  },
+});
+
+export const FilterButton = styled(IconButton, {
+  width: '$36',
+  height: '$36',
+  position: 'relative',
+  padding: '0',
+  overflow: 'unset',
+  backgroundColor: '$neutral300',
+  [`.${darkTheme} &`]: {
+    backgroundColor: '$neutral400',
+  },
+  '&:hover': {
+    backgroundColor: '$secondary100',
+    [`.${darkTheme} &`]: {
+      backgroundColor: '$neutral',
+    },
+    [`& ${IconContainer}::before`]: {
+      backgroundColor: '$secondary100',
+      [`.${darkTheme} &`]: {
+        backgroundColor: '$neutral',
+      },
+    },
+  },
+  variants: {
+    isSelect: {
+      true: {
+        border: '1px solid $secondary',
+      },
+    },
+  },
+});
+
+export const Badge = styled('div', {
+  position: 'absolute',
+  width: '$6',
+  height: '$6',
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  borderRadius: '3px',
+  top: '$0',
+  right: '1px',
+  backgroundColor: '$secondary500',
+});
+
+export const FilterContainer = styled('div', {
+  padding: '$15',
+  borderRadius: '$sm',
+  width: '248px',
+  backgroundColor: '$background',
+  zIndex: 10,
+});
+
+export const centeredFlexContainer = css({
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+});
+
+export const FilterList = styled('ul', {
+  margin: 0,
+  listStyle: 'none',
+  height: '100%',
+  padding: 0,
+  '.item-start-container': {
+    paddingRight: '0 !important',
+  },
+});

package/src/components/FilterSelector/FilterSelector.tsx

@@ -0,0 +1,43 @@
+import type { FilterSelectorPropTypes } from './FilterSelector.type';
+
+import { FilterIcon, Popover } from '@rango-dev/ui';
+import React from 'react';
+
+import { getContainer } from '../../utils/common';
+
+import { Badge, FilterButton, IconContainer } from './FilterSelector.style';
+import { FilterSelectorContent } from './FilterSelectorContent';
+
+export function FilterSelector(props: FilterSelectorPropTypes) {
+  const { onClickItem, onOpenChange, filterBy, list, open } = props;
+  return (
+    <div>
+      <Popover
+        open={open}
+        align="end"
+        onOpenChange={onOpenChange}
+        container={getContainer()}
+        content={
+          <FilterSelectorContent
+            list={list}
+            filterBy={filterBy}
+            onClickItem={(id) => {
+              onClickItem(id);
+              onOpenChange(false);
+            }}
+          />
+        }>
+        <FilterButton
+          id="widget-filter-selector-filter-icon-btn"
+          variant="default"
+          isSelect={!!filterBy}
+          onClick={() => onOpenChange(!props.open)}>
+          <IconContainer isSelect={!!filterBy}>
+            <FilterIcon size={16} color="black" />
+            {!!filterBy && <Badge />}
+          </IconContainer>
+        </FilterButton>
+      </Popover>
+    </div>
+  );
+}

package/src/components/FilterSelector/FilterSelector.type.ts

@@ -0,0 +1,15 @@
+export type PropTypes = {
+  filterBy: string;
+  onClickItem: (id: string) => void;
+  list: Array<FilterItem>;
+};
+
+export type FilterItem = {
+  id: string;
+  title: string;
+};
+
+export type FilterSelectorPropTypes = PropTypes & {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+};

package/src/components/FilterSelector/FilterSelectorContent.tsx

@@ -0,0 +1,65 @@
+import type { PropTypes } from './FilterSelector.type';
+
+import { i18n } from '@lingui/core';
+import {
+  Button,
+  Divider,
+  ListItemButton,
+  Radio,
+  RadioRoot,
+  Typography,
+} from '@rango-dev/ui';
+import React from 'react';
+
+import {
+  centeredFlexContainer,
+  FilterContainer,
+  FilterList,
+} from './FilterSelector.style';
+
+export function FilterSelectorContent(props: PropTypes) {
+  const { filterBy: value, onClickItem } = props;
+  return (
+    <FilterContainer>
+      <div className={centeredFlexContainer()}>
+        <Typography size="small" variant="body">
+          {i18n.t('Status')}
+        </Typography>
+        <Button
+          id="widget-filter-selector-reset-btn"
+          variant="ghost"
+          size="xxsmall"
+          onClick={() => onClickItem('')}>
+          {i18n.t('Reset')}
+        </Button>
+      </div>
+      <Divider size={10} />
+      <RadioRoot value={value}>
+        <FilterList>
+          {props.list.map((item, index) => {
+            return (
+              <ListItemButton
+                key={item.id}
+                className="widget-filter-selector-list-item-btn"
+                style={{ height: '40px', width: '100%' }}
+                selected={false}
+                hasDivider={props.list.length - 1 != index}
+                id={item.id}
+                title={
+                  <>
+                    <Divider direction="horizontal" size={4} />
+                    <Typography size="medium" variant="body">
+                      {item.title}
+                    </Typography>
+                  </>
+                }
+                start={<Radio value={item.id} />}
+                onClick={onClickItem}
+              />
+            );
+          })}
+        </FilterList>
+      </RadioRoot>
+    </FilterContainer>
+  );
+}

package/src/components/FilterSelector/index.ts

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

package/src/components/HeaderButtons/BackButton.tsx

@@ -0,0 +1,20 @@
+import type { PropTypes } from './HeaderButtons.types';
+
+import { ChevronLeftIcon } from '@rango-dev/ui';
+import React from 'react';
+
+import { HeaderButton } from './HeaderButtons.styles';
+
+function BackButton(props: PropTypes) {
+  return (
+    <HeaderButton
+      id="widget-header-back-icon-btn"
+      variant="ghost"
+      size="small"
+      onClick={props.onClick}>
+      <ChevronLeftIcon color="black" size={16} />
+    </HeaderButton>
+  );
+}
+
+export { BackButton };

package/src/components/HeaderButtons/CancelButton.tsx

@@ -0,0 +1,25 @@
+import type { PropTypes } from './HeaderButtons.types';
+
+import { i18n } from '@lingui/core';
+import { Button, Typography } from '@rango-dev/ui';
+import React from 'react';
+
+import { SuffixContainer } from './HeaderButtons.styles';
+
+function CancelButton(props: PropTypes) {
+  return (
+    <SuffixContainer>
+      <Button
+        id="widget-header-cancel-btn"
+        variant="ghost"
+        onClick={props.onClick}
+        size="xsmall">
+        <Typography variant="label" size="medium" color="error500">
+          {i18n.t('Cancel')}
+        </Typography>
+      </Button>
+    </SuffixContainer>
+  );
+}
+
+export { CancelButton };

package/src/components/HeaderButtons/HeaderButtons.styles.ts

@@ -0,0 +1,96 @@
+import { css, darkTheme, IconButton, styled } from '@rango-dev/ui';
+
+export const HeaderButton = styled(IconButton, {
+  width: '$24',
+  position: 'relative',
+  padding: '0',
+  overflow: 'unset',
+  '&:hover': {
+    backgroundColor: '$secondary100',
+    [`.${darkTheme} &`]: {
+      backgroundColor: '$neutral',
+    },
+  },
+});
+
+export const ConnectedIcon = styled('div', {
+  position: 'absolute',
+  background: '$secondary500',
+  [`.${darkTheme} &`]: {
+    $$color: '$colors$secondary250',
+  },
+  width: '$6',
+  height: '$6',
+  borderRadius: '$lg',
+  right: '$4',
+  border: '1px solid $surface100',
+});
+
+export const SuffixContainer = styled('div', {
+  display: 'flex',
+  justifyContent: 'flex-end',
+  minWidth: '$40',
+  button: {
+    padding: 0,
+  },
+});
+
+export const NotificationsBadgeContainer = styled('div', {
+  position: 'absolute',
+  width: '14px',
+  height: '14px',
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  borderRadius: '7px',
+  top: '$0',
+  right: '$0',
+  variants: {
+    isSever: {
+      true: {
+        backgroundColor: '$error500',
+      },
+      false: {
+        backgroundColor: '$secondary500',
+      },
+    },
+  },
+});
+
+export const ProgressIcon = styled('div', {
+  padding: '$2',
+  variants: {
+    isRefetched: {
+      true: {
+        transform: `rotate(360deg)`,
+        transition: 'transform 1s ease-in-out',
+      },
+    },
+  },
+});
+
+export const InProgressTransactionBadgeContainer = styled('div', {
+  position: 'absolute',
+  right: '$4',
+  top: '$4',
+  backgroundColor: '$background',
+  borderRadius: '100%',
+});
+
+export const rowStyles = css({
+  display: 'flex',
+  flexDirection: 'row',
+  justifyContent: 'center',
+  alignItems: 'center',
+});
+
+export const WalletImageContainer = styled('div', {
+  borderRadius: '100%',
+  border: '1.5px transparent solid',
+  '&:not(:first-child)': {
+    marginLeft: '-$6',
+  },
+  img: {
+    borderRadius: '100%',
+  },
+});