@rango-dev/ui 0.35.1-next.7 → 0.35.1-next.9

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 (13) hide show
  1. package/dist/index.js +1 -1
  2. package/dist/index.js.map +3 -3
  3. package/dist/ui.build.json +1 -1
  4. package/dist/widget/ui/src/components/FullExpandedQuote/FullExpandedQuote.d.ts.map +1 -1
  5. package/dist/widget/ui/src/components/PriceImpact/PriceImpact.d.ts.map +1 -1
  6. package/dist/widget/ui/src/components/PriceImpact/PriceImpact.styles.d.ts +4 -2
  7. package/dist/widget/ui/src/components/PriceImpact/PriceImpact.styles.d.ts.map +1 -1
  8. package/dist/widget/ui/src/components/TokenAmount/TokenAmount.d.ts.map +1 -1
  9. package/package.json +3 -3
  10. package/src/components/FullExpandedQuote/FullExpandedQuote.tsx +0 -1
  11. package/src/components/PriceImpact/PriceImpact.styles.ts +27 -4
  12. package/src/components/PriceImpact/PriceImpact.tsx +11 -17
  13. package/src/components/TokenAmount/TokenAmount.tsx +4 -3
package/dist/widget/ui/src/components/FullExpandedQuote/FullExpandedQuote.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"FullExpandedQuote.d.ts","sourceRoot":"","sources":["../../../../../../src/components/FullExpandedQuote/FullExpandedQuote.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAmB,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAE5E,OAAO,KAAmB,MAAM,OAAO,CAAC;AA4CxC,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,SAAS,qBAsOjD"}
1
+ {"version":3,"file":"FullExpandedQuote.d.ts","sourceRoot":"","sources":["../../../../../../src/components/FullExpandedQuote/FullExpandedQuote.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAmB,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAE5E,OAAO,KAAmB,MAAM,OAAO,CAAC;AA4CxC,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,SAAS,qBAqOjD"}
package/dist/widget/ui/src/components/PriceImpact/PriceImpact.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"PriceImpact.d.ts","sourceRoot":"","sources":["../../../../../../src/components/PriceImpact/PriceImpact.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAC;AAEhE,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,wBAAgB,WAAW,CAAC,KAAK,EAAE,oBAAoB,qBA2DtD"}
1
+ {"version":3,"file":"PriceImpact.d.ts","sourceRoot":"","sources":["../../../../../../src/components/PriceImpact/PriceImpact.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAC;AAEhE,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,wBAAgB,WAAW,CAAC,KAAK,EAAE,oBAAoB,qBAqDtD"}
package/dist/widget/ui/src/components/PriceImpact/PriceImpact.styles.d.ts CHANGED
@@ -1,4 +1,3 @@
1
- import { Typography } from '../Typography';
2
1
  export declare const Container: import("@stitches/react/types/styled-component").StyledComponent<"div", {}, {
3
2
  xs: string;
4
3
  sm: string;
@@ -158,7 +157,10 @@ export declare const Container: import("@stitches/react/types/styled-component")
158
157
  zIndices: {};
159
158
  transitions: {};
160
159
  }, import("@stitches/react/types/config").DefaultThemeMap, {}>>;
161
- export declare const OutputUsdValue: import("@stitches/react/types/styled-component").StyledComponent<typeof Typography, {}, {
160
+ export declare const ValueTypography: import("@stitches/react/types/styled-component").StyledComponent<"div", {
161
+ hasWarning?: boolean | "true" | undefined;
162
+ hasError?: boolean | "true" | undefined;
163
+ }, {
162
164
  xs: string;
163
165
  sm: string;
164
166
  md: string;
package/dist/widget/ui/src/components/PriceImpact/PriceImpact.styles.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"PriceImpact.styles.d.ts","sourceRoot":"","sources":["../../../../../../src/components/PriceImpact/PriceImpact.styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAE3C,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAKpB,CAAC;AAEH,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAIzB,CAAC"}
1
+ {"version":3,"file":"PriceImpact.styles.d.ts","sourceRoot":"","sources":["../../../../../../src/components/PriceImpact/PriceImpact.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAKpB,CAAC;AAEH,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DA4B1B,CAAC"}
package/dist/widget/ui/src/components/TokenAmount/TokenAmount.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"TokenAmount.d.ts","sourceRoot":"","sources":["../../../../../../src/components/TokenAmount/TokenAmount.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAErD,OAAO,KAAK,MAAM,OAAO,CAAC;AAc1B,wBAAgB,WAAW,CAAC,KAAK,EAAE,SAAS,qBAmE3C"}
1
+ {"version":3,"file":"TokenAmount.d.ts","sourceRoot":"","sources":["../../../../../../src/components/TokenAmount/TokenAmount.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAErD,OAAO,KAAK,MAAM,OAAO,CAAC;AAe1B,wBAAgB,WAAW,CAAC,KAAK,EAAE,SAAS,qBAmE3C"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@rango-dev/ui",
3
- "version": "0.35.1-next.7",
3
+ "version": "0.35.1-next.9",
4
4
  "license": "MIT",
5
5
  "type": "module",
6
6
  "source": "./src/index.ts",
@@ -50,7 +50,7 @@
50
50
  "@radix-ui/react-select": "^2.0.0",
51
51
  "@radix-ui/react-switch": "^1.0.1",
52
52
  "@radix-ui/react-tooltip": "^1.0.2",
53
- "@rango-dev/wallets-shared": "^0.34.1-next.4",
53
+ "@rango-dev/wallets-shared": "^0.34.1-next.5",
54
54
  "@stitches/react": "^1.2.8",
55
55
  "copy-to-clipboard": "^3.3.3",
56
56
  "rango-sdk": "^0.1.49",
@@ -60,4 +60,4 @@
60
60
  "publishConfig": {
61
61
  "access": "public"
62
62
  }
63
- }
63
+ }
package/src/components/FullExpandedQuote/FullExpandedQuote.tsx CHANGED
@@ -253,7 +253,6 @@ export function FullExpandedQuote(props: PropTypes) {
253
253
  </div>
254
254
  <StyledPriceImpact
255
255
  size="small"
256
- outputColor="$neutral700"
257
256
  warningLevel={warningLevel}
258
257
  outputUsdValue={props.outputPrice.usdValue}
259
258
  realOutputUsdValue={props.outputPrice.realUsdValue}
package/src/components/PriceImpact/PriceImpact.styles.ts CHANGED
@@ -1,5 +1,4 @@
1
- import { styled } from '../../theme';
2
- import { Typography } from '../Typography';
1
+ import { darkTheme, styled } from '../../theme';
3
2
 
4
3
  export const Container = styled('div', {
5
4
  width: '100%',
@@ -8,8 +7,32 @@ export const Container = styled('div', {
8
7
  alignItems: 'center',
9
8
  });
10
9
 
11
- export const OutputUsdValue = styled(Typography, {
12
- overflow: 'hidden',
10
+ export const ValueTypography = styled('div', {
11
+ display: 'flex',
13
12
  whiteSpace: 'nowrap',
13
+ overflow: 'hidden',
14
14
  textOverflow: 'ellipsis',
15
+ '& ._typography': {
16
+ $$color: '$colors$neutral600',
17
+ [`.${darkTheme} &`]: {
18
+ $$color: '$colors$neutral700',
19
+ },
20
+ color: '$$color',
21
+ },
22
+ variants: {
23
+ hasWarning: {
24
+ true: {
25
+ '& ._typography': {
26
+ color: '$warning500',
27
+ },
28
+ },
29
+ },
30
+ hasError: {
31
+ true: {
32
+ '& ._typography': {
33
+ color: '$error500',
34
+ },
35
+ },
36
+ },
37
+ },
15
38
  });
package/src/components/PriceImpact/PriceImpact.tsx CHANGED
@@ -4,7 +4,7 @@ import React from 'react';
4
4
 
5
5
  import { Divider, Tooltip, Typography } from '..';
6
6
 
7
- import { Container, OutputUsdValue } from './PriceImpact.styles';
7
+ import { Container, ValueTypography } from './PriceImpact.styles';
8
8
 
9
9
  export function PriceImpact(props: PriceImpactPropTypes) {
10
10
  const {
@@ -19,12 +19,8 @@ export function PriceImpact(props: PriceImpactPropTypes) {
19
19
  ...rest
20
20
  } = props;
21
21
 
22
- let percentageChangeColor = '$neutral600';
23
- if (!outputUsdValue || warningLevel === 'low') {
24
- percentageChangeColor = '$warning500';
25
- } else if (warningLevel === 'high') {
26
- percentageChangeColor = '$error500';
27
- }
22
+ const hasWarning = !outputUsdValue || warningLevel === 'low';
23
+ const hasError = warningLevel === 'high';
28
24
 
29
25
  return (
30
26
  <Container {...rest}>
@@ -38,19 +34,17 @@ export function PriceImpact(props: PriceImpactPropTypes) {
38
34
  : undefined
39
35
  }
40
36
  side={tooltipProps?.side}>
41
- <OutputUsdValue
42
- size={size}
43
- variant="body"
44
- color={outputColor || '$neutral600'}>
45
- {outputUsdValue === '0' ? '0.00' : `~$${outputUsdValue}`}
46
- </OutputUsdValue>
37
+ <ValueTypography>
38
+ <Typography size={size} variant="body" color={outputColor}>
39
+ {outputUsdValue === '0' ? '0.00' : `~$${outputUsdValue}`}
40
+ </Typography>
41
+ </ValueTypography>
47
42
  </Tooltip>
48
43
  )}
49
44
  {((outputUsdValue && percentageChange) || !outputUsdValue) && (
50
- <>
45
+ <ValueTypography hasError={hasError} hasWarning={hasWarning}>
51
46
  <Divider direction="horizontal" size={4} />
52
-
53
- <Typography size={size} variant="body" color={percentageChangeColor}>
47
+ <Typography size={size} variant="body">
54
48
  {outputUsdValue &&
55
49
  percentageChange &&
56
50
  `(${
@@ -61,7 +55,7 @@ export function PriceImpact(props: PriceImpactPropTypes) {
61
55
 
62
56
  {!outputUsdValue && error}
63
57
  </Typography>
64
- </>
58
+ </ValueTypography>
65
59
  )}
66
60
  </Container>
67
61
  );
package/src/components/TokenAmount/TokenAmount.tsx CHANGED
@@ -5,6 +5,7 @@ import React from 'react';
5
5
  import { ChainToken } from '../ChainToken';
6
6
  import { Divider } from '../Divider';
7
7
  import { PriceImpact } from '../PriceImpact';
8
+ import { ValueTypography } from '../PriceImpact/PriceImpact.styles';
8
9
  import { Tooltip } from '../Tooltip';
9
10
  import { Typography } from '../Typography';
10
11
 
@@ -59,12 +60,12 @@ export function TokenAmount(props: PropTypes) {
59
60
  content={props.price.realUsdValue}
60
61
  container={props.tooltipContainer}>
61
62
  {props.type === 'input' && (
62
- <>
63
- <Typography size="small" variant="body" color="$neutral700">
63
+ <ValueTypography>
64
+ <Typography size="small" variant="body">
64
65
  {`~$${props.price.usdValue}`}
65
66
  </Typography>
66
67
  <Divider direction="horizontal" size={4} />
67
- </>
68
+ </ValueTypography>
68
69
  )}
69
70
  </Tooltip>
70
71
  {props.type === 'output' && (