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

package/src/components/Flags/Thai.tsx

@@ -0,0 +1,32 @@
+import type { FlagPropTypes } from './Flags.types.js';
+
+import React from 'react';
+
+import { DEFAULT_SIZE } from './Flags.constants.js';
+
+export default function Thai(props: FlagPropTypes) {
+  const { size = DEFAULT_SIZE } = props;
+
+  return (
+    <svg
+      width={size}
+      height={size}
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 512 512">
+      <mask id="a">
+        <circle cx={256} cy={256} r={256} fill="#fff" />
+      </mask>
+      <g mask="url(#a)">
+        <path
+          fill="#d80027"
+          d="M0 0h512v89l-79.2 163.7L512 423v89H0v-89l82.7-169.6L0 89z"
+        />
+        <path
+          fill="#eee"
+          d="M0 89h512v78l-42.6 91.2L512 345v78H0v-78l40-92.5L0 167z"
+        />
+        <path fill="#0052b4" d="M0 167h512v178H0z" />
+      </g>
+    </svg>
+  );
+}

package/src/components/Flags/Turkish.tsx

@@ -0,0 +1,28 @@
+import type { FlagPropTypes } from './Flags.types.js';
+
+import React from 'react';
+
+import { DEFAULT_SIZE } from './Flags.constants.js';
+
+export default function Turkish(props: FlagPropTypes) {
+  const { size = DEFAULT_SIZE } = props;
+
+  return (
+    <svg
+      width={size}
+      height={size}
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 512 512">
+      <mask id="a">
+        <circle cx={256} cy={256} r={256} fill="#fff" />
+      </mask>
+      <g mask="url(#a)">
+        <path fill="#d80027" d="M0 0h512v512H0z" />
+        <g fill="#eee">
+          <path d="m245.5 209.2 21 29 34-11.1-21 29 21 28.9-34-11.1-21 29V267l-34-11.1 34-11z" />
+          <path d="M188.2 328.3a72.3 72.3 0 1 1 34.4-136 89 89 0 1 0 0 127.3 72 72 0 0 1-34.4 8.7z" />
+        </g>
+      </g>
+    </svg>
+  );
+}

package/src/components/Flags/Ukrainian.tsx

@@ -0,0 +1,25 @@
+import type { FlagPropTypes } from './Flags.types.js';
+
+import React from 'react';
+
+import { DEFAULT_SIZE } from './Flags.constants.js';
+
+export default function Ukrainian(props: FlagPropTypes) {
+  const { size = DEFAULT_SIZE } = props;
+
+  return (
+    <svg
+      width={size}
+      height={size}
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 512 512">
+      <mask id="a">
+        <circle cx={256} cy={256} r={256} fill="#fff" />
+      </mask>
+      <g mask="url(#a)">
+        <path fill="#ffda44" d="m0 256 258-39.4L512 256v256H0z" />
+        <path fill="#338af3" d="M0 0h512v256H0z" />
+      </g>
+    </svg>
+  );
+}

package/src/components/Flags/Vietnamese.tsx

@@ -0,0 +1,28 @@
+import type { FlagPropTypes } from './Flags.types.js';
+
+import React from 'react';
+
+import { DEFAULT_SIZE } from './Flags.constants.js';
+
+export default function Vietnamese(props: FlagPropTypes) {
+  const { size = DEFAULT_SIZE } = props;
+
+  return (
+    <svg
+      width={size}
+      height={size}
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 512 512">
+      <mask id="a">
+        <circle cx={256} cy={256} r={256} fill="#fff" />
+      </mask>
+      <g mask="url(#a)">
+        <path fill="#d80027" d="M0 0h512v512H0z" />
+        <path
+          fill="#ffda44"
+          d="m256 133.6 27.6 85H373L300.7 271l27.6 85-72.3-52.5-72.3 52.6 27.6-85-72.3-52.6h89.4z"
+        />
+      </g>
+    </svg>
+  );
+}

package/src/components/Flags/index.ts

@@ -0,0 +1,77 @@
+import Bengali from './Bengali.js';
+import Catalonia from './Catalonia.js';
+import Chinese from './Chinese.js';
+import Cyprus from './Cyprus.js';
+import Denmark from './Denmark.js';
+import English from './English.js';
+import Finland from './Finland.js';
+import French from './French.js';
+import German from './German.js';
+import Greece from './Greece.js';
+import Hindi from './Hindi.js';
+import Hungary from './Hungary.js';
+import India from './India.js';
+import Indonesian from './Indonesian.js';
+import Italian from './Italian.js';
+import Japanese from './Japanese.js';
+import Korea from './Korea.js';
+import Lithuania from './Lithuania.js';
+import Malay from './Malay.js';
+import Netherlands from './Netherlands.js';
+import Pakistan from './Pakistan.js';
+import Philippines from './Philippines.js';
+import Poland from './Poland.js';
+import Portuguese from './Portuguese.js';
+import Russian from './Russian.js';
+import SaudiArabia from './SaudiArabia.js';
+import Serbia from './Serbia.js';
+import Slovakia from './Slovakia.js';
+import SouthAfrica from './SouthAfrica.js';
+import Spanish from './Spanish.js';
+import Swahili from './Swahili.js';
+import Swedish from './Swedish.js';
+import Thai from './Thai.js';
+import Turkish from './Turkish.js';
+import Ukrainian from './Ukrainian.js';
+import Vietnamese from './Vietnamese.js';
+
+export type { FlagPropTypes } from './Flags.types.js';
+
+export {
+  English,
+  Spanish,
+  Japanese,
+  French,
+  Portuguese,
+  Hindi,
+  Chinese,
+  Bengali,
+  Russian,
+  Indonesian,
+  German,
+  Malay,
+  Swedish,
+  Thai,
+  Turkish,
+  Ukrainian,
+  Vietnamese,
+  Finland,
+  Netherlands,
+  Greece,
+  Italian,
+  Poland,
+  Catalonia,
+  Cyprus,
+  Denmark,
+  Hungary,
+  India,
+  Korea,
+  Lithuania,
+  Pakistan,
+  Philippines,
+  SaudiArabia,
+  Serbia,
+  Slovakia,
+  SouthAfrica,
+  Swahili,
+};

package/src/components/FullExpandedQuote/FullExpandedQuote.Skeletons.tsx

@@ -0,0 +1,65 @@
+import React from 'react';
+
+import { ChainToken } from '../ChainToken/index.js';
+import { Skeleton } from '../Skeleton/index.js';
+
+import {
+  FlexCenter,
+  OutputLoading,
+  Separator,
+  SkeletonItemLeftContainer,
+  VerticalLine,
+} from './FullExpandedQuote.styles.js';
+
+export function SkeletonHeader() {
+  return (
+    <>
+      <FlexCenter>
+        <Skeleton width={57.5} variant="text" size="large" />
+        <Separator />
+        <Skeleton width={57.5} variant="text" size="large" />
+        <Separator />
+        <Skeleton width={25.5} variant="text" size="large" />
+      </FlexCenter>
+      <FlexCenter
+        css={{
+          gap: '$5',
+        }}>
+        <Skeleton width={153} variant="text" size="large" />
+      </FlexCenter>
+    </>
+  );
+}
+
+export function SkeletonOutput() {
+  return (
+    <OutputLoading>
+      <ChainToken useAsPlaceholder={true} size="large" loading={true} />
+      <Skeleton variant="rounded" width={122} height={29} />
+    </OutputLoading>
+  );
+}
+export function SkeletonItemLeft() {
+  return (
+    <SkeletonItemLeftContainer>
+      <Skeleton variant="rounded" width={42} height={49} />
+    </SkeletonItemLeftContainer>
+  );
+}
+
+export function SkeletonItemRight() {
+  return (
+    <FlexCenter
+      css={{
+        flexDirection: 'column',
+        gap: '$2',
+      }}>
+      <Skeleton variant="circular" width={30} height={30} />
+      <VerticalLine
+        css={{
+          width: 'unset',
+        }}
+      />
+    </FlexCenter>
+  );
+}

package/src/components/FullExpandedQuote/FullExpandedQuote.TokenSection.tsx

@@ -0,0 +1,61 @@
+import type { TokenSectionPropTypes } from './FullExpandedQuote.types.js';
+
+import React from 'react';
+import { InfoIcon } from 'src/icons/index.js';
+
+import { ChainToken } from '../ChainToken/index.js';
+import { textTruncate } from '../TokenAmount/TokenAmount.styles.js';
+import { NumericTooltip } from '../Tooltip/index.js';
+import { Typography } from '../Typography/index.js';
+
+import {
+  AmountText,
+  TokenInfo,
+  TokenSectionContainer,
+} from './FullExpandedQuote.styles.js';
+
+const MAX_AMOUNT_LENGTH_FOR_INFO_ICON = 6;
+
+export function TokenSection(props: TokenSectionPropTypes) {
+  const {
+    style = {},
+    chainImage,
+    tokenImage,
+    tooltipProps,
+    amount,
+    name,
+    isInternalSwap,
+    size = 'xmedium',
+  } = props;
+
+  return (
+    <TokenSectionContainer style={style} isInternalSwap={isInternalSwap}>
+      <ChainToken size={size} chainImage={chainImage} tokenImage={tokenImage} />
+      <TokenInfo className="token-info">
+        <NumericTooltip
+          content={tooltipProps?.content}
+          container={tooltipProps?.container}
+          side="bottom"
+          open={tooltipProps?.open}>
+          <AmountText
+            size="xsmall"
+            variant="body"
+            className={`${textTruncate()} ${
+              isInternalSwap ? 'internal_swap_amount_typography' : ''
+            }`}>
+            {amount}
+          </AmountText>
+          {amount && amount.length > MAX_AMOUNT_LENGTH_FOR_INFO_ICON && (
+            <InfoIcon color="gray" size={12} />
+          )}
+        </NumericTooltip>
+        <Typography
+          size="xsmall"
+          variant="body"
+          className="token_label_typography">
+          {name}
+        </Typography>
+      </TokenInfo>
+    </TokenSectionContainer>
+  );
+}

package/src/components/FullExpandedQuote/FullExpandedQuote.Tooltip.tsx

@@ -0,0 +1,101 @@
+import type { TooltipContentProps } from './FullExpandedQuote.types.js';
+
+import { i18n } from '@lingui/core';
+import React from 'react';
+
+import { ChevronRightIcon } from '../../icons/index.js';
+import { Image } from '../common/index.js';
+import { Divider } from '../Divider/index.js';
+import { QuoteCost } from '../QuoteCost/index.js';
+import { Typography } from '../Typography/index.js';
+
+import {
+  FlexCenter,
+  Icon,
+  SwapperContainer,
+  SwapperImage,
+  TooltipContainer,
+  TooltipFooter,
+  TooltipHeader,
+} from './FullExpandedQuote.styles.js';
+import { TokenSection } from './FullExpandedQuote.TokenSection.js';
+
+export function TooltipContent(props: TooltipContentProps) {
+  const { internalSwaps, time, fee, alerts } = props;
+  const hasInternalSwaps = !!internalSwaps.length;
+  const hasFooter = hasInternalSwaps || !!alerts;
+  return (
+    <TooltipContainer>
+      <TooltipHeader hasFooter={hasFooter}>
+        <QuoteCost fee={fee} time={time} />
+      </TooltipHeader>
+      {hasFooter && (
+        <TooltipFooter>
+          {hasInternalSwaps && (
+            <>
+              <Typography size="xsmall" variant="body">
+                {i18n.t('Aggregated Transaction')}
+              </Typography>
+              <FlexCenter
+                style={{
+                  padding: '2px',
+                }}>
+                {internalSwaps.map((internalSwap, index, arr) => {
+                  const key = `internal-item-${index}`;
+                  const isLastItem = index === arr.length - 1;
+                  return (
+                    <FlexCenter key={key}>
+                      <TokenSection
+                        isInternalSwap
+                        size="small"
+                        chainImage={internalSwap.from.chain.image}
+                        tokenImage={internalSwap.from.token?.image || ''}
+                        name={internalSwap.from.token?.displayName}
+                        amount={internalSwap.from.price?.value}
+                      />
+                      <Icon>
+                        <ChevronRightIcon color="black" />
+                      </Icon>
+                      <SwapperContainer
+                        style={{
+                          paddingBottom: '10px',
+                        }}>
+                        <SwapperImage>
+                          <Image
+                            size={16}
+                            type="circular"
+                            src={internalSwap.swapper.image}
+                          />
+                        </SwapperImage>
+                        <Divider size={2} />
+                        <Typography size="xsmall" variant="body" align="center">
+                          {internalSwap.swapper.displayName}
+                        </Typography>
+                      </SwapperContainer>
+                      <Icon>
+                        <ChevronRightIcon color="black" />
+                      </Icon>
+                      {isLastItem && (
+                        <>
+                          <TokenSection
+                            isInternalSwap
+                            size="small"
+                            chainImage={internalSwap.to.chain.image}
+                            tokenImage={internalSwap.to.token?.image || ''}
+                            name={internalSwap.to.token?.displayName}
+                            amount={internalSwap.to.price?.value}
+                          />
+                        </>
+                      )}
+                    </FlexCenter>
+                  );
+                })}
+              </FlexCenter>
+            </>
+          )}
+          {alerts}
+        </TooltipFooter>
+      )}
+    </TooltipContainer>
+  );
+}

package/src/components/FullExpandedQuote/FullExpandedQuote.helpers.ts

@@ -0,0 +1,32 @@
+import type { I18n } from '@lingui/core';
+import type { Tag } from 'rango-types/lib/api/main';
+
+export const ITEM_SKELETON_COUNT = 3;
+export const TOOLTIP_SIDE_OFFSET = 10;
+const MAX_AMOUNT_LENGTH_DISPLAY = 4;
+const MAX_NAME_LENGTH_DISPLAY = 6;
+
+export function shortenAmount(amount: string) {
+  if (!amount || amount.length <= MAX_AMOUNT_LENGTH_DISPLAY) {
+    return amount;
+  }
+  return amount.slice(0, MAX_AMOUNT_LENGTH_DISPLAY) + '...';
+}
+
+export function shortenDisplayName(name: string) {
+  if (!name || name.length <= MAX_NAME_LENGTH_DISPLAY) {
+    return name;
+  }
+  return name.slice(0, MAX_NAME_LENGTH_DISPLAY) + '...';
+}
+
+export function getTagLabel(tag: Tag, t: I18n['t']): string {
+  const data: Record<Tag, string> = {
+    CENTRALIZED: t('Centralized'),
+    FASTEST: t('Fastest'),
+    HIGH_IMPACT: t('High Impact'),
+    LOWEST_FEE: t('Lowest Fee'),
+    RECOMMENDED: t('Recommended'),
+  };
+  return data[tag];
+}