@rango-dev/ui 0.53.1-next.3 → 0.53.1-next.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (64) hide show
  1. package/dist/index.js +1 -1
  2. package/dist/index.js.map +4 -4
  3. package/dist/ui.build.json +1 -1
  4. package/dist/widget/ui/src/components/Alert/Alert.styles.d.ts.map +1 -1
  5. package/dist/widget/ui/src/components/FullExpandedQuote/FullExpandedQuote.TokenSection.d.ts.map +1 -1
  6. package/dist/widget/ui/src/components/FullExpandedQuote/FullExpandedQuote.d.ts.map +1 -1
  7. package/dist/widget/ui/src/components/FullExpandedQuote/FullExpandedQuote.styles.d.ts +213 -49
  8. package/dist/widget/ui/src/components/FullExpandedQuote/FullExpandedQuote.styles.d.ts.map +1 -1
  9. package/dist/widget/ui/src/components/PriceImpact/PriceImpact.d.ts.map +1 -1
  10. package/dist/widget/ui/src/components/PriceImpact/PriceImpact.styles.d.ts.map +1 -1
  11. package/dist/widget/ui/src/components/PriceImpact/PriceImpact.types.d.ts +2 -0
  12. package/dist/widget/ui/src/components/PriceImpact/PriceImpact.types.d.ts.map +1 -1
  13. package/dist/widget/ui/src/components/StepDetails/StepDetails.d.ts.map +1 -1
  14. package/dist/widget/ui/src/components/StepDetails/StepDetails.styles.d.ts +324 -0
  15. package/dist/widget/ui/src/components/StepDetails/StepDetails.styles.d.ts.map +1 -1
  16. package/dist/widget/ui/src/components/SwapListItem/SwapToken.d.ts.map +1 -1
  17. package/dist/widget/ui/src/components/SwapListItem/SwapToken.styles.d.ts +484 -0
  18. package/dist/widget/ui/src/components/SwapListItem/SwapToken.styles.d.ts.map +1 -1
  19. package/dist/widget/ui/src/components/Toast/Toast.styles.d.ts +3 -2
  20. package/dist/widget/ui/src/components/Toast/Toast.styles.d.ts.map +1 -1
  21. package/dist/widget/ui/src/components/TokenAmount/TokenAmount.d.ts.map +1 -1
  22. package/dist/widget/ui/src/components/TokenAmount/TokenAmount.styles.d.ts +1285 -1
  23. package/dist/widget/ui/src/components/TokenAmount/TokenAmount.styles.d.ts.map +1 -1
  24. package/dist/widget/ui/src/components/Tooltip/Tooltip.styles.d.ts +3 -2
  25. package/dist/widget/ui/src/components/Tooltip/Tooltip.styles.d.ts.map +1 -1
  26. package/dist/widget/ui/src/components/Typography/NotSelectableTypography.d.ts +3 -2
  27. package/dist/widget/ui/src/components/Typography/NotSelectableTypography.d.ts.map +1 -1
  28. package/dist/widget/ui/src/components/Typography/Typography.d.ts +3 -2
  29. package/dist/widget/ui/src/components/Typography/Typography.d.ts.map +1 -1
  30. package/dist/widget/ui/src/components/Wallet/Wallet.styles.d.ts +3 -2
  31. package/dist/widget/ui/src/components/Wallet/Wallet.styles.d.ts.map +1 -1
  32. package/dist/widget/ui/src/components/Wallet/index.d.ts +1 -1
  33. package/dist/widget/ui/src/components/Wallet/index.d.ts.map +1 -1
  34. package/dist/widget/ui/src/containers/SwapInput/SwapInput.d.ts.map +1 -1
  35. package/dist/widget/ui/src/containers/SwapInput/SwapInput.styles.d.ts +3 -2
  36. package/dist/widget/ui/src/containers/SwapInput/SwapInput.styles.d.ts.map +1 -1
  37. package/dist/widget/ui/src/containers/SwapInput/TokenSection.styles.d.ts +169 -3
  38. package/dist/widget/ui/src/containers/SwapInput/TokenSection.styles.d.ts.map +1 -1
  39. package/dist/widget/ui/src/hooks/index.d.ts +1 -0
  40. package/dist/widget/ui/src/hooks/index.d.ts.map +1 -1
  41. package/dist/widget/ui/src/hooks/useIsTruncated.d.ts +3 -0
  42. package/dist/widget/ui/src/hooks/useIsTruncated.d.ts.map +1 -0
  43. package/package.json +3 -3
  44. package/src/components/Alert/Alert.styles.ts +3 -0
  45. package/src/components/FullExpandedQuote/FullExpandedQuote.TokenSection.tsx +18 -5
  46. package/src/components/FullExpandedQuote/FullExpandedQuote.styles.ts +11 -3
  47. package/src/components/FullExpandedQuote/FullExpandedQuote.tsx +13 -3
  48. package/src/components/PriceImpact/PriceImpact.styles.ts +8 -3
  49. package/src/components/PriceImpact/PriceImpact.tsx +27 -17
  50. package/src/components/PriceImpact/PriceImpact.types.ts +2 -0
  51. package/src/components/StepDetails/StepDetails.styles.ts +15 -0
  52. package/src/components/StepDetails/StepDetails.tsx +33 -8
  53. package/src/components/SwapListItem/SwapToken.styles.ts +16 -1
  54. package/src/components/SwapListItem/SwapToken.tsx +97 -25
  55. package/src/components/Toast/Toast.styles.ts +2 -0
  56. package/src/components/TokenAmount/TokenAmount.styles.ts +60 -2
  57. package/src/components/TokenAmount/TokenAmount.tsx +98 -38
  58. package/src/components/Typography/Typography.tsx +15 -15
  59. package/src/components/Wallet/index.ts +4 -1
  60. package/src/containers/SwapInput/SwapInput.styles.ts +2 -1
  61. package/src/containers/SwapInput/SwapInput.tsx +18 -35
  62. package/src/containers/SwapInput/TokenSection.styles.ts +7 -0
  63. package/src/hooks/index.ts +1 -0
  64. package/src/hooks/useIsTruncated.tsx +27 -0
@@ -1 +1 @@
1
- {"version":3,"file":"TokenAmount.styles.d.ts","sourceRoot":"","sources":["../../../../../../src/components/TokenAmount/TokenAmount.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kEAepB,CAAC;AAEH,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kEAI5B,CAAC;AAEH,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kEAGzB,CAAC;AAEH,eAAO,MAAM,gBAAgB;;CAE5B,CAAC"}
1
+ {"version":3,"file":"TokenAmount.styles.d.ts","sourceRoot":"","sources":["../../../../../../src/components/TokenAmount/TokenAmount.styles.ts"],"names":[],"mappings":"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"}
@@ -1,5 +1,4 @@
1
1
  import * as RadixTooltip from '@radix-ui/react-tooltip';
2
- import { Typography } from '../Typography/index.js';
3
2
  export declare const TooltipContent: import("@stitches/react/types/styled-component.js").StyledComponent<import("react").ForwardRefExoticComponent<RadixTooltip.TooltipContentProps & import("react").RefAttributes<HTMLDivElement>>, {}, {
4
3
  xs: string;
5
4
  sm: string;
@@ -160,7 +159,9 @@ export declare const TooltipContent: import("@stitches/react/types/styled-compon
160
159
  zIndices: {};
161
160
  transitions: {};
162
161
  }, import("@stitches/react/types/config.js").DefaultThemeMap, {}>>;
163
- export declare const TooltipTypography: import("@stitches/react/types/styled-component.js").StyledComponent<typeof Typography, {}, {
162
+ export declare const TooltipTypography: import("@stitches/react/types/styled-component.js").StyledComponent<import("react").ForwardRefExoticComponent<import("../Typography/Typography.types.js").TypographyPropTypes & {
163
+ children?: import("react").ReactNode | undefined;
164
+ } & import("react").RefAttributes<HTMLSpanElement>>, {}, {
164
165
  xs: string;
165
166
  sm: string;
166
167
  md: string;
@@ -1 +1 @@
1
- {"version":3,"file":"Tooltip.styles.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Tooltip/Tooltip.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,YAAY,MAAM,yBAAyB,CAAC;AAGxD,OAAO,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AAEpD,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kEAEzB,CAAC;AAEH,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kEAQ5B,CAAC;AAEH,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kEAIzB,CAAC"}
1
+ {"version":3,"file":"Tooltip.styles.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Tooltip/Tooltip.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,YAAY,MAAM,yBAAyB,CAAC;AAKxD,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kEAEzB,CAAC;AAEH,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kEAQ5B,CAAC;AAEH,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kEAIzB,CAAC"}
@@ -1,5 +1,6 @@
1
- import { Typography } from './Typography.js';
2
- export declare const NotSelectableTypography: import("@stitches/react/types/styled-component.js").StyledComponent<typeof Typography, {}, {
1
+ export declare const NotSelectableTypography: import("@stitches/react/types/styled-component.js").StyledComponent<import("react").ForwardRefExoticComponent<import("./Typography.types.js").TypographyPropTypes & {
2
+ children?: import("react").ReactNode | undefined;
3
+ } & import("react").RefAttributes<HTMLSpanElement>>, {}, {
3
4
  xs: string;
4
5
  sm: string;
5
6
  md: string;
@@ -1 +1 @@
1
- {"version":3,"file":"NotSelectableTypography.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Typography/NotSelectableTypography.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAE7C,eAAO,MAAM,uBAAuB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kEAElC,CAAC"}
1
+ {"version":3,"file":"NotSelectableTypography.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Typography/NotSelectableTypography.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,uBAAuB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kEAElC,CAAC"}
@@ -1,5 +1,6 @@
1
1
  import type { TypographyPropTypes } from './Typography.types.js';
2
- import type { PropsWithChildren } from 'react';
3
2
  import React from 'react';
4
- export declare function Typography({ children, id, className, color, ...props }: PropsWithChildren<TypographyPropTypes>): React.JSX.Element;
3
+ export declare const Typography: React.ForwardRefExoticComponent<TypographyPropTypes & {
4
+ children?: React.ReactNode | undefined;
5
+ } & React.RefAttributes<HTMLSpanElement>>;
5
6
  //# sourceMappingURL=Typography.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"Typography.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Typography/Typography.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AACjE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAE/C,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,wBAAgB,UAAU,CAAC,EACzB,QAAQ,EACR,EAAE,EACF,SAAS,EACT,KAAK,EACL,GAAG,KAAK,EACT,EAAE,iBAAiB,CAAC,mBAAmB,CAAC,qBAgBxC"}
1
+ {"version":3,"file":"Typography.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Typography/Typography.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAGjE,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,eAAO,MAAM,UAAU;;yCAoBrB,CAAC"}
@@ -1,4 +1,3 @@
1
- import { Typography } from '../Typography/index.js';
2
1
  export declare const WalletImageContainer: import("@stitches/react/types/styled-component.js").StyledComponent<"div", {}, {
3
2
  xs: string;
4
3
  sm: string;
@@ -159,7 +158,9 @@ export declare const WalletImageContainer: import("@stitches/react/types/styled-
159
158
  zIndices: {};
160
159
  transitions: {};
161
160
  }, import("@stitches/react/types/config.js").DefaultThemeMap, {}>>;
162
- export declare const Title: import("@stitches/react/types/styled-component.js").StyledComponent<typeof Typography, {}, {
161
+ export declare const Title: import("@stitches/react/types/styled-component.js").StyledComponent<import("react").ForwardRefExoticComponent<import("../Typography/Typography.types.js").TypographyPropTypes & {
162
+ children?: import("react").ReactNode | undefined;
163
+ } & import("react").RefAttributes<HTMLSpanElement>>, {}, {
163
164
  xs: string;
164
165
  sm: string;
165
166
  md: string;
@@ -1 +1 @@
1
- {"version":3,"file":"Wallet.styles.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Wallet/Wallet.styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AAEpD,eAAO,MAAM,oBAAoB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kEAI/B,CAAC;AAEH,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kEAEhB,CAAC;AAEH,eAAO,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kEAIf,CAAC;AAEH,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kEAgDvB,CAAC;AAEH,eAAO,MAAM,sBAAsB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kEAQjC,CAAC;AAEH,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kEAUxB,CAAC"}
1
+ {"version":3,"file":"Wallet.styles.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Wallet/Wallet.styles.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,oBAAoB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kEAI/B,CAAC;AAEH,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kEAEhB,CAAC;AAEH,eAAO,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kEAIf,CAAC;AAEH,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kEAgDvB,CAAC;AAEH,eAAO,MAAM,sBAAsB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kEAQjC,CAAC;AAEH,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kEAUxB,CAAC"}
@@ -1,5 +1,5 @@
1
1
  export * from './Wallet.js';
2
2
  export type { WalletInfo } from './Wallet.types.js';
3
3
  export { WalletState } from './Wallet.types.js';
4
- export { SelectableWalletButton } from './Wallet.styles.js';
4
+ export { SelectableWalletButton, WalletImageContainer, } from './Wallet.styles.js';
5
5
  //# sourceMappingURL=index.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Wallet/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,YAAY,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Wallet/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,YAAY,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EACL,sBAAsB,EACtB,oBAAoB,GACrB,MAAM,oBAAoB,CAAC"}
@@ -1 +1 @@
1
- {"version":3,"file":"SwapInput.d.ts","sourceRoot":"","sources":["../../../../../../src/containers/SwapInput/SwapInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAG/D,OAAO,KAAK,MAAM,OAAO,CAAC;AA2B1B,wBAAgB,SAAS,CAAC,KAAK,EAAE,kBAAkB,qBAoJlD"}
1
+ {"version":3,"file":"SwapInput.d.ts","sourceRoot":"","sources":["../../../../../../src/containers/SwapInput/SwapInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAG/D,OAAO,KAAK,MAAM,OAAO,CAAC;AAyB1B,wBAAgB,SAAS,CAAC,KAAK,EAAE,kBAAkB,qBAqIlD"}
@@ -1,4 +1,3 @@
1
- import { Typography } from '../../components/index.js';
2
1
  export declare const textStyles: import("@stitches/react/types/styled-component.js").CssComponent<never, {}, {
3
2
  xs: string;
4
3
  sm: string;
@@ -2056,7 +2055,9 @@ export declare const labelContainerStyles: import("@stitches/react/types/styled-
2056
2055
  zIndices: {};
2057
2056
  transitions: {};
2058
2057
  }, import("@stitches/react/types/config.js").DefaultThemeMap, {}>>;
2059
- export declare const UsdPrice: import("@stitches/react/types/styled-component.js").StyledComponent<typeof Typography, {}, {
2058
+ export declare const UsdPrice: import("@stitches/react/types/styled-component.js").StyledComponent<import("react").ForwardRefExoticComponent<import("../../components/index.js").TypographyPropTypes & {
2059
+ children?: import("react").ReactNode | undefined;
2060
+ } & import("react").RefAttributes<HTMLSpanElement>>, {}, {
2060
2061
  xs: string;
2061
2062
  sm: string;
2062
2063
  md: string;
@@ -1 +1 @@
1
- {"version":3,"file":"SwapInput.styles.d.ts","sourceRoot":"","sources":["../../../../../../src/containers/SwapInput/SwapInput.styles.ts"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"SwapInput.styles.d.ts","sourceRoot":"","sources":["../../../../../../src/containers/SwapInput/SwapInput.styles.ts"],"names":[],"mappings":"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"}
@@ -1,4 +1,4 @@
1
- import { type TooltipPropTypes, Typography } from '../../components/index.js';
1
+ import { type TooltipPropTypes } from '../../components/index.js';
2
2
  export declare const Container: import("@stitches/react/types/styled-component.js").StyledComponent<import("react").ForwardRefExoticComponent<{
3
3
  id?: string | undefined | undefined;
4
4
  slot?: string | undefined | undefined;
@@ -1239,7 +1239,9 @@ export declare const TitleContainer: import("@stitches/react/types/styled-compon
1239
1239
  zIndices: {};
1240
1240
  transitions: {};
1241
1241
  }, import("@stitches/react/types/config.js").DefaultThemeMap, {}>>;
1242
- export declare const Title: import("@stitches/react/types/styled-component.js").StyledComponent<typeof Typography, {}, {
1242
+ export declare const Title: import("@stitches/react/types/styled-component.js").StyledComponent<import("react").ForwardRefExoticComponent<import("../../components/index.js").TypographyPropTypes & {
1243
+ children?: import("react").ReactNode | undefined;
1244
+ } & import("react").RefAttributes<HTMLSpanElement>>, {}, {
1243
1245
  xs: string;
1244
1246
  sm: string;
1245
1247
  md: string;
@@ -1400,7 +1402,171 @@ export declare const Title: import("@stitches/react/types/styled-component.js").
1400
1402
  transitions: {};
1401
1403
  }, import("@stitches/react/types/config.js").DefaultThemeMap, {}>>;
1402
1404
  export declare const SymbolTooltipStyles: TooltipPropTypes['styles'];
1403
- export declare const SymbolTooltipContent: import("@stitches/react/types/styled-component.js").StyledComponent<typeof Typography, {}, {
1405
+ export declare const SymbolTooltipContent: import("@stitches/react/types/styled-component.js").StyledComponent<import("react").ForwardRefExoticComponent<import("../../components/index.js").TypographyPropTypes & {
1406
+ children?: import("react").ReactNode | undefined;
1407
+ } & import("react").RefAttributes<HTMLSpanElement>>, {}, {
1408
+ xs: string;
1409
+ sm: string;
1410
+ md: string;
1411
+ lg: string;
1412
+ }, import("@stitches/react/types/css-util.js").CSS<{
1413
+ xs: string;
1414
+ sm: string;
1415
+ md: string;
1416
+ lg: string;
1417
+ }, {
1418
+ colors: {
1419
+ primary: string;
1420
+ primary500: string;
1421
+ primary550: string;
1422
+ secondary: string;
1423
+ secondary100: string;
1424
+ secondary150: string;
1425
+ secondary200: string;
1426
+ secondary250: string;
1427
+ secondary500: string;
1428
+ secondary550: string;
1429
+ neutral: string;
1430
+ neutral100: string;
1431
+ neutral200: string;
1432
+ neutral300: string;
1433
+ neutral400: string;
1434
+ neutral500: string;
1435
+ neutral600: string;
1436
+ neutral700: string;
1437
+ neutral800: string;
1438
+ neutral900: string;
1439
+ error100: string;
1440
+ error300: string;
1441
+ error500: string;
1442
+ error600: string;
1443
+ error700: string;
1444
+ warning100: string;
1445
+ warning300: string;
1446
+ warning500: string;
1447
+ warning600: string;
1448
+ warning700: string;
1449
+ info: string;
1450
+ info100: string;
1451
+ info300: string;
1452
+ info500: string;
1453
+ info600: string;
1454
+ info700: string;
1455
+ success100: string;
1456
+ success300: string;
1457
+ success500: string;
1458
+ success600: string;
1459
+ success700: string;
1460
+ background: string;
1461
+ foreground: string;
1462
+ };
1463
+ space: {
1464
+ 0: string;
1465
+ 5: string;
1466
+ 10: string;
1467
+ 15: string;
1468
+ 20: string;
1469
+ 25: string;
1470
+ 30: string;
1471
+ 40: string;
1472
+ 46: string;
1473
+ 50: string;
1474
+ 60: string;
1475
+ 70: string;
1476
+ 80: string;
1477
+ 90: string;
1478
+ 100: string;
1479
+ 2: string;
1480
+ 4: string;
1481
+ 6: string;
1482
+ 8: string;
1483
+ 12: string;
1484
+ 16: string;
1485
+ 24: string;
1486
+ 28: string;
1487
+ 32: string;
1488
+ 36: string;
1489
+ };
1490
+ radii: {
1491
+ xs: string;
1492
+ sm: string;
1493
+ xm: string;
1494
+ md: string;
1495
+ xl: string;
1496
+ lg: string;
1497
+ primary: string;
1498
+ secondary: string;
1499
+ };
1500
+ fontSizes: {
1501
+ 10: string;
1502
+ 12: string;
1503
+ 14: string;
1504
+ 16: string;
1505
+ 18: string;
1506
+ 20: string;
1507
+ 22: string;
1508
+ 24: string;
1509
+ 28: string;
1510
+ 32: string;
1511
+ 36: string;
1512
+ 40: string;
1513
+ 48: string;
1514
+ };
1515
+ fonts: {
1516
+ primary: string;
1517
+ widget: string;
1518
+ };
1519
+ fontWeights: {
1520
+ regular: number;
1521
+ medium: number;
1522
+ semiBold: number;
1523
+ bold: number;
1524
+ };
1525
+ lineHeights: {
1526
+ 12: string;
1527
+ 16: string;
1528
+ 20: string;
1529
+ 24: string;
1530
+ 26: string;
1531
+ 28: string;
1532
+ 30: string;
1533
+ 36: string;
1534
+ 40: string;
1535
+ 44: string;
1536
+ 52: string;
1537
+ 64: string;
1538
+ };
1539
+ letterSpacings: {};
1540
+ sizes: {
1541
+ 4: string;
1542
+ 6: string;
1543
+ 8: string;
1544
+ 10: string;
1545
+ 12: string;
1546
+ 16: string;
1547
+ 18: string;
1548
+ 20: string;
1549
+ 24: string;
1550
+ 26: string;
1551
+ 28: string;
1552
+ 30: string;
1553
+ 32: string;
1554
+ 36: string;
1555
+ 40: string;
1556
+ 45: string;
1557
+ 48: string;
1558
+ };
1559
+ borderWidths: {};
1560
+ borderStyles: {};
1561
+ shadows: {
1562
+ mainContainer: string;
1563
+ };
1564
+ zIndices: {};
1565
+ transitions: {};
1566
+ }, import("@stitches/react/types/config.js").DefaultThemeMap, {}>>;
1567
+ export declare const BlockChainTypography: import("@stitches/react/types/styled-component.js").StyledComponent<import("react").ForwardRefExoticComponent<import("../../components/index.js").TypographyPropTypes & {
1568
+ children?: import("react").ReactNode | undefined;
1569
+ } & import("react").RefAttributes<HTMLSpanElement>>, {}, {
1404
1570
  xs: string;
1405
1571
  sm: string;
1406
1572
  md: string;
@@ -1 +1 @@
1
- {"version":3,"file":"TokenSection.styles.d.ts","sourceRoot":"","sources":["../../../../../../src/containers/SwapInput/TokenSection.styles.ts"],"names":[],"mappings":"AACA,OAAO,EAEL,KAAK,gBAAgB,EACrB,UAAU,EACX,MAAM,2BAA2B,CAAC;AAGnC,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;aAuBlB,MAAO,SAAS;aAAY,MAC5B,SAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kEAiBT,CAAC;AAEH,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kEAAQ,CAAC;AAErC,eAAO,MAAM,qBAAqB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kEAgBhC,CAAC;AAEH,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kEAU3B,CAAC;AAEH,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kEAGzB,CAAC;AAEH,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kEAIzB,CAAC;AAEH,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kEAIhB,CAAC;AAEH,eAAO,MAAM,mBAAmB,EAAE,gBAAgB,CAAC,QAAQ,CAU1D,CAAC;AAEF,eAAO,MAAM,oBAAoB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kEAG/B,CAAC"}
1
+ {"version":3,"file":"TokenSection.styles.d.ts","sourceRoot":"","sources":["../../../../../../src/containers/SwapInput/TokenSection.styles.ts"],"names":[],"mappings":"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"}
@@ -1,2 +1,3 @@
1
1
  export { useCopyToClipboard } from './useCopyToClipboard.js';
2
+ export { useIsTruncated } from './useIsTruncated.js';
2
3
  //# sourceMappingURL=index.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAC7D,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC"}
@@ -0,0 +1,3 @@
1
+ import { type RefObject } from 'react';
2
+ export declare function useIsTruncated(content: string, ref: RefObject<HTMLElement>): boolean;
3
+ //# sourceMappingURL=useIsTruncated.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"useIsTruncated.d.ts","sourceRoot":"","sources":["../../../../../src/hooks/useIsTruncated.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAuB,MAAM,OAAO,CAAC;AAO5D,wBAAgB,cAAc,CAC5B,OAAO,EAAE,MAAM,EACf,GAAG,EAAE,SAAS,CAAC,WAAW,CAAC,GAC1B,OAAO,CAgBT"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@rango-dev/ui",
3
- "version": "0.53.1-next.3",
3
+ "version": "0.53.1-next.5",
4
4
  "license": "MIT",
5
5
  "type": "module",
6
6
  "source": "./src/index.ts",
@@ -53,7 +53,7 @@
53
53
  "@radix-ui/react-select": "^2.0.0",
54
54
  "@radix-ui/react-switch": "^1.0.1",
55
55
  "@radix-ui/react-tooltip": "^1.0.2",
56
- "@rango-dev/wallets-shared": "^0.50.1-next.2",
56
+ "@rango-dev/wallets-shared": "^0.50.1-next.3",
57
57
  "@stitches/react": "^1.2.8",
58
58
  "copy-to-clipboard": "^3.3.3",
59
59
  "rango-types": "^0.1.89",
@@ -62,4 +62,4 @@
62
62
  "publishConfig": {
63
63
  "access": "public"
64
64
  }
65
- }
65
+ }
@@ -95,6 +95,9 @@ export const Main = styled('div', {
95
95
  display: 'flex',
96
96
  alignItems: 'center',
97
97
  alignSelf: 'stretch',
98
+ whiteSpace: 'normal',
99
+ wordBreak: 'break-all',
100
+
98
101
  variants: {
99
102
  variant: {
100
103
  regular: {
@@ -1,17 +1,21 @@
1
1
  import type { TokenSectionPropTypes } from './FullExpandedQuote.types.js';
2
2
 
3
3
  import React from 'react';
4
+ import { InfoIcon } from 'src/icons/index.js';
4
5
 
5
6
  import { ChainToken } from '../ChainToken/index.js';
7
+ import { textTruncate } from '../TokenAmount/TokenAmount.styles.js';
6
8
  import { NumericTooltip } from '../Tooltip/index.js';
7
9
  import { Typography } from '../Typography/index.js';
8
10
 
9
11
  import {
12
+ AmountText,
10
13
  TokenInfo,
11
- tokenLabelStyles,
12
14
  TokenSectionContainer,
13
15
  } from './FullExpandedQuote.styles.js';
14
16
 
17
+ const MAX_AMOUNT_LENGTH_FOR_INFO_ICON = 6;
18
+
15
19
  export function TokenSection(props: TokenSectionPropTypes) {
16
20
  const {
17
21
  style = {},
@@ -23,6 +27,7 @@ export function TokenSection(props: TokenSectionPropTypes) {
23
27
  isInternalSwap,
24
28
  size = 'xmedium',
25
29
  } = props;
30
+
26
31
  return (
27
32
  <TokenSectionContainer style={style} isInternalSwap={isInternalSwap}>
28
33
  <ChainToken size={size} chainImage={chainImage} tokenImage={tokenImage} />
@@ -32,14 +37,22 @@ export function TokenSection(props: TokenSectionPropTypes) {
32
37
  container={tooltipProps?.container}
33
38
  side="bottom"
34
39
  open={tooltipProps?.open}>
35
- <Typography
40
+ <AmountText
36
41
  size="xsmall"
37
42
  variant="body"
38
- className={isInternalSwap ? tokenLabelStyles() : ''}>
43
+ className={`${textTruncate()} ${
44
+ isInternalSwap ? 'internal_swap_amount_typography' : ''
45
+ }`}>
39
46
  {amount}
40
- </Typography>
47
+ </AmountText>
48
+ {amount && amount.length > MAX_AMOUNT_LENGTH_FOR_INFO_ICON && (
49
+ <InfoIcon color="gray" size={12} />
50
+ )}
41
51
  </NumericTooltip>
42
- <Typography size="xsmall" variant="body" className={tokenLabelStyles()}>
52
+ <Typography
53
+ size="xsmall"
54
+ variant="body"
55
+ className="token_label_typography">
43
56
  {name}
44
57
  </Typography>
45
58
  </TokenInfo>
@@ -1,7 +1,6 @@
1
1
  import { css, darkTheme, styled } from '../../theme.js';
2
2
  import { PriceImpact } from '../PriceImpact/index.js';
3
-
4
- export const tokenLabelStyles = css({});
3
+ import { Typography } from '../Typography/Typography.js';
5
4
 
6
5
  export const FlexCenter = styled('div', {
7
6
  display: 'flex',
@@ -135,7 +134,7 @@ export const TokenInfo = styled(FlexCenter, {
135
134
  bottom: 0,
136
135
  left: 0,
137
136
  right: 0,
138
- [`& .${tokenLabelStyles}`]: {
137
+ '& .internal_swap_amount_typography, & .token_label_typography': {
139
138
  color: '$neutral700',
140
139
  [`.${darkTheme} &`]: {
141
140
  color: '$neutral900',
@@ -226,6 +225,7 @@ export const VerticalLine = styled('div', {
226
225
  export const StyledPriceImpact = styled(PriceImpact, {
227
226
  justifyContent: 'center',
228
227
  gap: '$4',
228
+ maxWidth: 150,
229
229
  });
230
230
 
231
231
  export const lastStepStyle = css({
@@ -305,3 +305,11 @@ export const TooltipFooter = styled(FlexCenter, {
305
305
  export const Icon = styled('div', {
306
306
  paddingBottom: '$20',
307
307
  });
308
+
309
+ export const OutputPriceValue = styled(Typography, {
310
+ maxWidth: '65px',
311
+ });
312
+
313
+ export const AmountText = styled(Typography, {
314
+ maxWidth: '34px',
315
+ });
@@ -4,11 +4,12 @@ import type { Tag } from 'rango-types/lib/api/main';
4
4
  import { i18n } from '@lingui/core';
5
5
  import React, { useState } from 'react';
6
6
 
7
- import { ErrorIcon, WarningIcon } from '../../icons/index.js';
7
+ import { ErrorIcon, InfoIcon, WarningIcon } from '../../icons/index.js';
8
8
  import { ChainToken } from '../ChainToken/index.js';
9
9
  import { Image } from '../common/index.js';
10
10
  import { Divider } from '../Divider/index.js';
11
11
  import { QuoteTag } from '../QuoteTag/index.js';
12
+ import { textTruncate } from '../TokenAmount/TokenAmount.styles.js';
12
13
  import { NumericTooltip, Tooltip } from '../Tooltip/index.js';
13
14
  import { Typography } from '../Typography/index.js';
14
15
 
@@ -28,6 +29,7 @@ import {
28
29
  import {
29
30
  IconHighlight,
30
31
  lastStepStyle,
32
+ OutputPriceValue,
31
33
  OutputSection,
32
34
  RouteContainer,
33
35
  RouteHeader,
@@ -46,6 +48,7 @@ import {
46
48
  import { TokenSection } from './FullExpandedQuote.TokenSection.js';
47
49
  import { TooltipContent } from './FullExpandedQuote.Tooltip.js';
48
50
 
51
+ const MAX_OUTPUT_AMOUNT_LENGTH_FOR_INFO_ICON = 7;
49
52
  export function FullExpandedQuote(props: PropTypes) {
50
53
  const {
51
54
  loading,
@@ -244,9 +247,16 @@ export function FullExpandedQuote(props: PropTypes) {
244
247
  open={
245
248
  !props.outputPrice.realValue ? false : undefined
246
249
  }>
247
- <Typography size="xmedium" variant="title">
250
+ <OutputPriceValue
251
+ className={textTruncate()}
252
+ size="xmedium"
253
+ variant="title">
248
254
  {props.outputPrice.value}
249
- </Typography>
255
+ </OutputPriceValue>
256
+ {props.outputPrice.value.length >
257
+ MAX_OUTPUT_AMOUNT_LENGTH_FOR_INFO_ICON && (
258
+ <InfoIcon color="gray" size={12} />
259
+ )}
250
260
  <Divider size={4} direction="horizontal" />
251
261
  <Typography size="xmedium" variant="title">
252
262
  {step.to.token.displayName}
@@ -5,13 +5,18 @@ export const Container = styled('div', {
5
5
  display: 'flex',
6
6
  justifyContent: 'end',
7
7
  alignItems: 'center',
8
+ overflow: 'hidden',
9
+ minWidth: 0,
8
10
  });
9
11
 
10
12
  export const ValueTypography = styled('div', {
11
13
  display: 'flex',
12
- whiteSpace: 'nowrap',
13
- overflow: 'hidden',
14
- textOverflow: 'ellipsis',
14
+ '& .output-usd-value': {
15
+ flex: '1 1 auto',
16
+ minWidth: 0,
17
+ flexShrink: 1,
18
+ maxWidth: '100%',
19
+ },
15
20
  '& ._typography': {
16
21
  $$color: '$colors$neutral600',
17
22
  [`.${darkTheme} &`]: {
@@ -1,8 +1,11 @@
1
1
  import type { PriceImpactPropTypes } from './PriceImpact.types.js';
2
2
 
3
- import React from 'react';
3
+ import React, { useRef } from 'react';
4
+ import { useIsTruncated } from 'src/hooks/useIsTruncated.js';
5
+ import { InfoIcon } from 'src/icons/index.js';
4
6
 
5
7
  import { Divider, NumericTooltip, Typography } from '../index.js';
8
+ import { textTruncate } from '../TokenAmount/TokenAmount.styles.js';
6
9
 
7
10
  import { Container, ValueTypography } from './PriceImpact.styles.js';
8
11
 
@@ -21,25 +24,32 @@ export function PriceImpact(props: PriceImpactPropTypes) {
21
24
 
22
25
  const hasWarning = !outputUsdValue || warningLevel === 'low';
23
26
  const hasError = warningLevel === 'high';
24
-
27
+ const realOutputUsdValueRef = useRef<HTMLSpanElement | null>(null);
28
+ const isRealOutputUsdValueTruncated = useIsTruncated(
29
+ realOutputUsdValue || '',
30
+ realOutputUsdValueRef
31
+ );
25
32
  return (
26
33
  <Container {...rest}>
27
34
  {outputUsdValue && (
28
- <NumericTooltip
29
- content={realOutputUsdValue}
30
- container={tooltipProps?.container}
31
- open={
32
- !realOutputUsdValue || realOutputUsdValue === '0'
33
- ? false
34
- : undefined
35
- }
36
- side={tooltipProps?.side}>
37
- <ValueTypography>
38
- <Typography size={size} variant="body" color={outputColor}>
39
- {outputUsdValue === '0' ? '0.00' : `~$${outputUsdValue}`}
40
- </Typography>
41
- </ValueTypography>
42
- </NumericTooltip>
35
+ <ValueTypography className={textTruncate()}>
36
+ <Typography
37
+ className={`${textTruncate()} output-usd-value`}
38
+ size={size}
39
+ ref={realOutputUsdValueRef}
40
+ variant="body"
41
+ color={outputColor}>
42
+ {realOutputUsdValue === '0' ? '0.00' : `~$${realOutputUsdValue}`}
43
+ </Typography>
44
+ {isRealOutputUsdValueTruncated && (
45
+ <NumericTooltip
46
+ content={realOutputUsdValue}
47
+ container={tooltipProps?.container}
48
+ side={tooltipProps?.side}>
49
+ <InfoIcon size={12} color="gray" />
50
+ </NumericTooltip>
51
+ )}
52
+ </ValueTypography>
43
53
  )}
44
54
  {((outputUsdValue && percentageChange) || !outputUsdValue) && (
45
55
  <ValueTypography hasError={hasError} hasWarning={hasWarning}>
@@ -11,6 +11,8 @@ export type PriceImpactPropTypes = {
11
11
  error?: string;
12
12
  percentageChange?: string | null;
13
13
  warningLevel?: PriceImpactWarningLevel;
14
+ style?: React.CSSProperties;
15
+ className?: string;
14
16
  tooltipProps?: {
15
17
  container?: TooltipPropTypes['container'];
16
18
  side?: TooltipPropTypes['side'];