@rango-dev/ui 0.22.1-next.2 → 0.22.1-next.21

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 (148) hide show
  1. package/dist/index.js +6 -6
  2. package/dist/index.js.map +4 -4
  3. package/dist/translations/en.d.ts.map +1 -1
  4. package/dist/translations/es.d.ts.map +1 -1
  5. package/dist/translations/fr.d.ts.map +1 -1
  6. package/dist/translations/ja.d.ts.map +1 -1
  7. package/dist/widget/ui/src/components/Alert/Alert.styles.d.ts +157 -0
  8. package/dist/widget/ui/src/components/Alert/Alert.styles.d.ts.map +1 -1
  9. package/dist/widget/ui/src/components/BlockchainsChip/BlockchainsChip.styles.d.ts.map +1 -1
  10. package/dist/widget/ui/src/components/Button/Button.d.ts +54 -54
  11. package/dist/widget/ui/src/components/Button/Button.styles.d.ts.map +1 -1
  12. package/dist/widget/ui/src/components/Checkbox/Checkbox.styles.d.ts.map +1 -1
  13. package/dist/widget/ui/src/components/ListItem/ListItem.styles.d.ts.map +1 -1
  14. package/dist/widget/ui/src/components/ListItemButton/ListItemButton.styles.d.ts.map +1 -1
  15. package/dist/widget/ui/src/components/PriceImpact/PriceImpact.styles.d.ts +158 -0
  16. package/dist/widget/ui/src/components/PriceImpact/PriceImpact.styles.d.ts.map +1 -1
  17. package/dist/widget/ui/src/components/QuoteCost/QuoteCost.d.ts.map +1 -1
  18. package/dist/widget/ui/src/components/QuoteCost/QuoteCost.styles.d.ts +314 -0
  19. package/dist/widget/ui/src/components/QuoteCost/QuoteCost.styles.d.ts.map +1 -1
  20. package/dist/widget/ui/src/components/Radio/Radio.styles.d.ts.map +1 -1
  21. package/dist/widget/ui/src/components/RoutesOverview/RoutesOverview.d.ts.map +1 -1
  22. package/dist/widget/ui/src/components/SelectableCategoryList/SelectableCategoryList.d.ts.map +1 -1
  23. package/dist/widget/ui/src/components/SelectableCategoryList/SelectableCategoryList.helpers.d.ts +16 -2
  24. package/dist/widget/ui/src/components/SelectableCategoryList/SelectableCategoryList.helpers.d.ts.map +1 -1
  25. package/dist/widget/ui/src/components/SelectableCategoryList/index.d.ts +1 -0
  26. package/dist/widget/ui/src/components/SelectableCategoryList/index.d.ts.map +1 -1
  27. package/dist/widget/ui/src/components/Skeleton/Skeleton.d.ts.map +1 -1
  28. package/dist/widget/ui/src/components/Skeleton/Skeleton.types.d.ts +1 -1
  29. package/dist/widget/ui/src/components/Skeleton/Skeleton.types.d.ts.map +1 -1
  30. package/dist/widget/ui/src/components/StepDetails/StepDetails.d.ts.map +1 -1
  31. package/dist/widget/ui/src/components/StepDetails/StepDetails.styles.d.ts +6 -0
  32. package/dist/widget/ui/src/components/StepDetails/StepDetails.styles.d.ts.map +1 -1
  33. package/dist/widget/ui/src/components/SwapListItem/mock.d.ts +1 -1
  34. package/dist/widget/ui/src/components/SwapListItem/mock.d.ts.map +1 -1
  35. package/dist/widget/ui/src/components/Switch/Switch.styles.d.ts.map +1 -1
  36. package/dist/widget/ui/src/components/TextField/TextField.d.ts.map +1 -1
  37. package/dist/widget/ui/src/components/TokenAmount/TokenAmount.d.ts.map +1 -1
  38. package/dist/widget/ui/src/components/TokenAmount/TokenAmount.styles.d.ts +471 -1
  39. package/dist/widget/ui/src/components/TokenAmount/TokenAmount.styles.d.ts.map +1 -1
  40. package/dist/widget/ui/src/components/Tooltip/Tooltip.d.ts.map +1 -1
  41. package/dist/widget/ui/src/components/Tooltip/Tooltip.styles.d.ts +2 -2
  42. package/dist/widget/ui/src/components/Tooltip/Tooltip.styles.d.ts.map +1 -1
  43. package/dist/widget/ui/src/components/Wallet/Wallet.types.d.ts +3 -17
  44. package/dist/widget/ui/src/components/Wallet/Wallet.types.d.ts.map +1 -1
  45. package/dist/widget/ui/src/components/common/Image.d.ts +157 -0
  46. package/dist/widget/ui/src/components/common/Image.d.ts.map +1 -1
  47. package/dist/widget/ui/src/components/common/index.d.ts +1 -1
  48. package/dist/widget/ui/src/components/common/index.d.ts.map +1 -1
  49. package/dist/widget/ui/src/containers/BlockchainSelector/BlockchainSelector.d.ts +3 -3
  50. package/dist/widget/ui/src/containers/BlockchainSelector/BlockchainSelector.d.ts.map +1 -1
  51. package/dist/widget/ui/src/containers/SwapHistory/SwapHistory.d.ts +1 -1
  52. package/dist/widget/ui/src/containers/SwapHistory/SwapHistory.d.ts.map +1 -1
  53. package/dist/widget/ui/src/containers/SwapHistory/SwapHistory.stories.d.ts +2 -2
  54. package/dist/widget/ui/src/containers/SwapHistory/SwapHistory.stories.d.ts.map +1 -1
  55. package/dist/widget/ui/src/containers/SwapHistory/mock.d.ts +1 -1
  56. package/dist/widget/ui/src/containers/SwapHistory/mock.d.ts.map +1 -1
  57. package/dist/widget/ui/src/containers/SwapInput/SwapInput.d.ts.map +1 -1
  58. package/dist/widget/ui/src/containers/SwapInput/SwapInput.styles.d.ts +1313 -54
  59. package/dist/widget/ui/src/containers/SwapInput/SwapInput.styles.d.ts.map +1 -1
  60. package/dist/widget/ui/src/containers/SwapInput/SwapInput.types.d.ts +2 -0
  61. package/dist/widget/ui/src/containers/SwapInput/SwapInput.types.d.ts.map +1 -1
  62. package/dist/widget/ui/src/containers/SwapInput/TokenSection.d.ts.map +1 -1
  63. package/dist/widget/ui/src/containers/SwapInput/TokenSection.styles.d.ts +525 -54
  64. package/dist/widget/ui/src/containers/SwapInput/TokenSection.styles.d.ts.map +1 -1
  65. package/dist/widget/ui/src/containers/TokenSelector/TokenSelector.d.ts +2 -2
  66. package/dist/widget/ui/src/containers/TokenSelector/TokenSelector.d.ts.map +1 -1
  67. package/dist/widget/ui/src/icons/CosmosCategory.d.ts +5 -0
  68. package/dist/widget/ui/src/icons/CosmosCategory.d.ts.map +1 -0
  69. package/dist/widget/ui/src/icons/EvmCategory.d.ts +5 -0
  70. package/dist/widget/ui/src/icons/EvmCategory.d.ts.map +1 -0
  71. package/dist/widget/ui/src/icons/Icons.stories.d.ts +1 -1
  72. package/dist/widget/ui/src/icons/Language.d.ts +5 -0
  73. package/dist/widget/ui/src/icons/Language.d.ts.map +1 -0
  74. package/dist/widget/ui/src/icons/OtherCategory.d.ts +5 -0
  75. package/dist/widget/ui/src/icons/OtherCategory.d.ts.map +1 -0
  76. package/dist/widget/ui/src/icons/UtxoCategory.d.ts +5 -0
  77. package/dist/widget/ui/src/icons/UtxoCategory.d.ts.map +1 -0
  78. package/dist/widget/ui/src/icons/index.d.ts +5 -0
  79. package/dist/widget/ui/src/icons/index.d.ts.map +1 -1
  80. package/dist/widget/ui/src/index.d.ts +0 -1
  81. package/dist/widget/ui/src/index.d.ts.map +1 -1
  82. package/dist/widget/ui/src/types/index.d.ts +0 -1
  83. package/dist/widget/ui/src/types/index.d.ts.map +1 -1
  84. package/dist/widget/ui/src/types/swaps.d.ts +1 -27
  85. package/dist/widget/ui/src/types/swaps.d.ts.map +1 -1
  86. package/dist/widget/ui/src/{helper → utils}/index.d.ts +0 -3
  87. package/dist/widget/ui/src/utils/index.d.ts.map +1 -0
  88. package/package.json +6 -5
  89. package/src/components/Alert/Alert.styles.ts +9 -12
  90. package/src/components/Alert/Alert.tsx +2 -2
  91. package/src/components/BlockchainsChip/BlockchainsChip.styles.ts +2 -1
  92. package/src/components/Button/Button.styles.tsx +1 -0
  93. package/src/components/Checkbox/Checkbox.styles.ts +5 -1
  94. package/src/components/ListItem/ListItem.styles.ts +9 -0
  95. package/src/components/ListItem/ListItem.tsx +1 -1
  96. package/src/components/ListItemButton/ListItemButton.styles.ts +1 -0
  97. package/src/components/PriceImpact/PriceImpact.styles.ts +9 -1
  98. package/src/components/PriceImpact/PriceImpact.tsx +3 -3
  99. package/src/components/QuoteCost/QuoteCost.styles.ts +14 -12
  100. package/src/components/QuoteCost/QuoteCost.tsx +12 -7
  101. package/src/components/Radio/Radio.styles.tsx +5 -2
  102. package/src/components/RoutesOverview/RoutesOverview.tsx +6 -2
  103. package/src/components/SelectableCategoryList/SelectableCategoryList.helpers.ts +40 -13
  104. package/src/components/SelectableCategoryList/SelectableCategoryList.tsx +47 -46
  105. package/src/components/SelectableCategoryList/index.ts +1 -0
  106. package/src/components/SelectableWalletList/SelectableWalletList.tsx +1 -1
  107. package/src/components/Skeleton/Skeleton.tsx +3 -2
  108. package/src/components/Skeleton/Skeleton.types.ts +1 -1
  109. package/src/components/StepDetails/StepDetails.styles.ts +34 -26
  110. package/src/components/StepDetails/StepDetails.tsx +8 -4
  111. package/src/components/SvgIcon/SvgIcon.style.ts +1 -1
  112. package/src/components/SwapListItem/mock.ts +21 -6
  113. package/src/components/Switch/Switch.styles.tsx +8 -6
  114. package/src/components/TextField/TextField.tsx +3 -5
  115. package/src/components/TokenAmount/TokenAmount.styles.ts +12 -10
  116. package/src/components/TokenAmount/TokenAmount.tsx +23 -17
  117. package/src/components/Tooltip/Tooltip.styles.ts +8 -5
  118. package/src/components/Tooltip/Tooltip.tsx +2 -3
  119. package/src/components/Wallet/Wallet.styles.ts +1 -1
  120. package/src/components/Wallet/Wallet.types.ts +3 -23
  121. package/src/components/common/Image.tsx +1 -2
  122. package/src/components/common/index.ts +1 -1
  123. package/src/containers/BlockchainSelector/BlockchainSelector.tsx +9 -8
  124. package/src/containers/SwapHistory/SwapHistory.stories.tsx +5 -2
  125. package/src/containers/SwapHistory/SwapHistory.tsx +1 -1
  126. package/src/containers/SwapHistory/mock.ts +24 -8
  127. package/src/containers/SwapInput/SwapInput.styles.ts +78 -27
  128. package/src/containers/SwapInput/SwapInput.tsx +37 -29
  129. package/src/containers/SwapInput/SwapInput.types.ts +2 -0
  130. package/src/containers/SwapInput/TokenSection.styles.ts +27 -12
  131. package/src/containers/SwapInput/TokenSection.tsx +15 -6
  132. package/src/containers/TokenSelector/TokenSelector.tsx +8 -10
  133. package/src/icons/CosmosCategory.tsx +137 -0
  134. package/src/icons/EvmCategory.tsx +74 -0
  135. package/src/icons/Language.tsx +55 -0
  136. package/src/icons/OtherCategory.tsx +72 -0
  137. package/src/icons/UtxoCategory.tsx +44 -0
  138. package/src/icons/index.ts +5 -0
  139. package/src/index.ts +0 -1
  140. package/src/theme.ts +4 -4
  141. package/src/types/index.ts +0 -1
  142. package/src/types/swaps.ts +0 -38
  143. package/src/utils/index.ts +23 -0
  144. package/dist/widget/ui/src/containers/History/types.d.ts +0 -2
  145. package/dist/widget/ui/src/containers/History/types.d.ts.map +0 -1
  146. package/dist/widget/ui/src/helper/index.d.ts.map +0 -1
  147. package/src/containers/History/types.tsx +0 -1
  148. package/src/helper/index.ts +0 -99
@@ -0,0 +1,5 @@
1
+ import type { SvgIconPropsWithChildren } from '../components/SvgIcon';
2
+ import React from 'react';
3
+ declare function SvgEvmCategory(props: SvgIconPropsWithChildren): React.FunctionComponentElement<SvgIconPropsWithChildren>;
4
+ export default SvgEvmCategory;
5
+ //# sourceMappingURL=EvmCategory.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"EvmCategory.d.ts","sourceRoot":"","sources":["../../../../../src/icons/EvmCategory.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,uBAAuB,CAAC;AAEtE,OAAO,KAAwB,MAAM,OAAO,CAAC;AAI7C,iBAAS,cAAc,CAAC,KAAK,EAAE,wBAAwB,4DAkEtD;AACD,eAAe,cAAc,CAAC"}
@@ -1,6 +1,6 @@
1
1
  import type { SvgIconProps } from '../components/SvgIcon';
2
2
  import React from 'react';
3
- declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, any> | import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, any>;
3
+ declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, any>;
4
4
  export default _default;
5
5
  export declare const Main: (props: SvgIconProps) => React.JSX.Element;
6
6
  //# sourceMappingURL=Icons.stories.d.ts.map
@@ -0,0 +1,5 @@
1
+ import type { SvgIconPropsWithChildren } from '../components/SvgIcon';
2
+ import React from 'react';
3
+ declare function SvgLanguage(props: SvgIconPropsWithChildren): React.FunctionComponentElement<SvgIconPropsWithChildren>;
4
+ export default SvgLanguage;
5
+ //# sourceMappingURL=Language.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Language.d.ts","sourceRoot":"","sources":["../../../../../src/icons/Language.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,uBAAuB,CAAC;AAEtE,OAAO,KAAwB,MAAM,OAAO,CAAC;AAI7C,iBAAS,WAAW,CAAC,KAAK,EAAE,wBAAwB,4DA+CnD;AACD,eAAe,WAAW,CAAC"}
@@ -0,0 +1,5 @@
1
+ import type { SvgIconPropsWithChildren } from '../components/SvgIcon';
2
+ import React from 'react';
3
+ declare function SvgOtherCategory(props: SvgIconPropsWithChildren): React.FunctionComponentElement<SvgIconPropsWithChildren>;
4
+ export default SvgOtherCategory;
5
+ //# sourceMappingURL=OtherCategory.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"OtherCategory.d.ts","sourceRoot":"","sources":["../../../../../src/icons/OtherCategory.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,uBAAuB,CAAC;AAEtE,OAAO,KAAwB,MAAM,OAAO,CAAC;AAI7C,iBAAS,gBAAgB,CAAC,KAAK,EAAE,wBAAwB,4DAgExD;AACD,eAAe,gBAAgB,CAAC"}
@@ -0,0 +1,5 @@
1
+ import type { SvgIconPropsWithChildren } from '../components/SvgIcon';
2
+ import React from 'react';
3
+ declare function SvgUtxoCategory(props: SvgIconPropsWithChildren): React.FunctionComponentElement<SvgIconPropsWithChildren>;
4
+ export default SvgUtxoCategory;
5
+ //# sourceMappingURL=UtxoCategory.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"UtxoCategory.d.ts","sourceRoot":"","sources":["../../../../../src/icons/UtxoCategory.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,uBAAuB,CAAC;AAEtE,OAAO,KAAwB,MAAM,OAAO,CAAC;AAI7C,iBAAS,eAAe,CAAC,KAAK,EAAE,wBAAwB,4DAoCvD;AACD,eAAe,eAAe,CAAC"}
@@ -7,11 +7,13 @@ export { default as ChevronUpIcon } from './ChevronUp';
7
7
  export { default as CloseIcon } from './Close';
8
8
  export { default as CompleteIcon } from './Complete';
9
9
  export { default as CopyIcon } from './Copy';
10
+ export { default as CosmosCategoryIcon } from './CosmosCategory';
10
11
  export { default as CustomColorsIcon } from './CustomColors';
11
12
  export { default as DarkModeIcon } from './DarkMode';
12
13
  export { default as DeleteIcon } from './Delete';
13
14
  export { default as DesktopIcon } from './Desktop';
14
15
  export { default as DoneIcon } from './Done';
16
+ export { default as EvmCategoryIcon } from './EvmCategory';
15
17
  export { default as ErrorIcon } from './Error';
16
18
  export { default as ExternalLinkIcon } from './ExternalLink';
17
19
  export { default as FontIcon } from './Font';
@@ -19,6 +21,7 @@ export { default as GasIcon } from './Gas';
19
21
  export { default as InProgressIcon } from './InProgress';
20
22
  export { default as InfoErrorIcon } from './InfoError';
21
23
  export { default as InfoIcon } from './Info';
24
+ export { default as LanguageIcon } from './Language';
22
25
  export { default as LightModeIcon } from './LightMode';
23
26
  export { default as LinkIcon } from './Link';
24
27
  export { default as LoadingIcon } from './Loading';
@@ -29,6 +32,7 @@ export { default as NoNotificationIcon } from './NoNotification';
29
32
  export { default as NotificationNumberIcon } from './NotificationNumber';
30
33
  export { default as NotificationsIcon } from './Notifications';
31
34
  export { default as NumberIcon } from './Number';
35
+ export { default as OtherCategoryIcon } from './OtherCategory';
32
36
  export { default as PinIcon } from './Pin';
33
37
  export { default as RefreshIcon } from './Refresh';
34
38
  export { default as ReverseIcon } from './Reverse';
@@ -36,6 +40,7 @@ export { default as RouteIcon } from './Route';
36
40
  export { default as SearchIcon } from './Search';
37
41
  export { default as TimeIcon } from './Time';
38
42
  export { default as TransactionIcon } from './Transaction';
43
+ export { default as UtxoCategoryIcon } from './UtxoCategory';
39
44
  export { default as WalletIcon } from './Wallet';
40
45
  export { default as WarningIcon } from './Warning';
41
46
  export { default as ChainsIcon } from './Chains';
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/icons/index.ts"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/icons/index.ts"],"names":[],"mappings":"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"}
@@ -4,5 +4,4 @@ export * from './theme';
4
4
  export * from './types';
5
5
  export * from './hooks';
6
6
  export * from './icons';
7
- export { generateRangeColors } from './helper';
8
7
  //# sourceMappingURL=index.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,OAAO,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC"}
@@ -1,3 +1,2 @@
1
- export type { BestRouteWithFee } from './swaps';
2
1
  export type { ConnectedWallet } from './wallet';
3
2
  //# sourceMappingURL=index.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/types/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAChD,YAAY,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/types/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC"}
@@ -1,30 +1,4 @@
1
- import type { BestRouteResponse, BlockchainValidationStatus, SimulationResult, SwapResult, WalletRequiredAssets } from 'rango-sdk';
2
- export type SwapStatus = 'running' | 'failed' | 'success';
3
- export type MessageSeverity = 'error' | 'warning' | 'info' | 'success';
4
- export type StepStatus = 'created' | 'running' | 'failed' | 'success' | 'waitingForApproval' | 'approved';
5
- export declare enum PendingSwapNetworkStatus {
6
- WaitingForConnectingWallet = "waitingForConnectingWallet",
7
- WaitingForQueue = "waitingForQueue",
8
- WaitingForNetworkChange = "waitingForNetworkChange",
9
- NetworkChanged = "networkChanged"
10
- }
11
- export type WalletTypeAndAddress = {
12
- walletType: string;
13
- address: string;
14
- };
15
- export type SwapSavedSettings = {
16
- slippage: string;
17
- disabledSwappersIds: string[];
18
- disabledSwappersGroups: string[];
19
- };
1
+ import type { BlockchainValidationStatus, WalletRequiredAssets } from 'rango-sdk';
20
2
  export type SimulationAssetAndAmount = WalletRequiredAssets;
21
3
  export type SimulationValidationStatus = BlockchainValidationStatus;
22
- export type BestRouteType = BestRouteResponse;
23
- export type BestRouteWithFee = Omit<BestRouteResponse, 'result'> & {
24
- result: Omit<SimulationResult, 'swaps'> & {
25
- swaps: (SwapResult & {
26
- feeInUsd?: string;
27
- })[];
28
- };
29
- };
30
4
  //# sourceMappingURL=swaps.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"swaps.d.ts","sourceRoot":"","sources":["../../../../../src/types/swaps.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,iBAAiB,EACjB,0BAA0B,EAC1B,gBAAgB,EAChB,UAAU,EACV,oBAAoB,EACrB,MAAM,WAAW,CAAC;AAEnB,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,QAAQ,GAAG,SAAS,CAAC;AAC1D,MAAM,MAAM,eAAe,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,CAAC;AAEvE,MAAM,MAAM,UAAU,GAClB,SAAS,GACT,SAAS,GACT,QAAQ,GACR,SAAS,GACT,oBAAoB,GACpB,UAAU,CAAC;AAEf,oBAAY,wBAAwB;IAClC,0BAA0B,+BAA+B;IACzD,eAAe,oBAAoB;IACnC,uBAAuB,4BAA4B;IACnD,cAAc,mBAAmB;CAClC;AAED,MAAM,MAAM,oBAAoB,GAAG;IACjC,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,MAAM,CAAC;CACjB,CAAC;AACF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,QAAQ,EAAE,MAAM,CAAC;IACjB,mBAAmB,EAAE,MAAM,EAAE,CAAC;IAC9B,sBAAsB,EAAE,MAAM,EAAE,CAAC;CAClC,CAAC;AAEF,MAAM,MAAM,wBAAwB,GAAG,oBAAoB,CAAC;AAC5D,MAAM,MAAM,0BAA0B,GAAG,0BAA0B,CAAC;AACpE,MAAM,MAAM,aAAa,GAAG,iBAAiB,CAAC;AAE9C,MAAM,MAAM,gBAAgB,GAAG,IAAI,CAAC,iBAAiB,EAAE,QAAQ,CAAC,GAAG;IACjE,MAAM,EAAE,IAAI,CAAC,gBAAgB,EAAE,OAAO,CAAC,GAAG;QACxC,KAAK,EAAE,CAAC,UAAU,GAAG;YAAE,QAAQ,CAAC,EAAE,MAAM,CAAA;SAAE,CAAC,EAAE,CAAC;KAC/C,CAAC;CACH,CAAC"}
1
+ {"version":3,"file":"swaps.d.ts","sourceRoot":"","sources":["../../../../../src/types/swaps.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,0BAA0B,EAC1B,oBAAoB,EACrB,MAAM,WAAW,CAAC;AAEnB,MAAM,MAAM,wBAAwB,GAAG,oBAAoB,CAAC;AAC5D,MAAM,MAAM,0BAA0B,GAAG,0BAA0B,CAAC"}
@@ -1,6 +1,3 @@
1
1
  export declare function containsText(text: string, searchText: string): boolean;
2
2
  export declare function getConciseAddress(address: string | null, maxChars?: number, ellipsisLength?: number): string | null;
3
- export declare const generateRangeColors: (name: string, mode: 'light' | 'dark', color?: string) => {
4
- [x: string]: string | undefined;
5
- };
6
3
  //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/utils/index.ts"],"names":[],"mappings":"AAEA,wBAAgB,YAAY,CAAC,IAAI,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,GAAG,OAAO,CAEtE;AAED,wBAAgB,iBAAiB,CAC/B,OAAO,EAAE,MAAM,GAAG,IAAI,EACtB,QAAQ,SAAI,EACZ,cAAc,SAAI,GACjB,MAAM,GAAG,IAAI,CAYf"}
package/package.json CHANGED
@@ -1,9 +1,9 @@
1
1
  {
2
2
  "name": "@rango-dev/ui",
3
- "version": "0.22.1-next.2",
3
+ "version": "0.22.1-next.21",
4
4
  "license": "MIT",
5
5
  "type": "module",
6
- "module": "./dist/index.js",
6
+ "source": "./src/index.ts",
7
7
  "main": "./dist/index.js",
8
8
  "exports": "./dist/index.js",
9
9
  "typings": "dist/widget/ui/src/index.d.ts",
@@ -14,6 +14,7 @@
14
14
  "scripts": {
15
15
  "dev": "yarn bundle --watch",
16
16
  "build": "node ../../scripts/build/command.mjs --path widget/ui",
17
+ "ts-check": "tsc --declaration --emitDeclarationOnly -p ./tsconfig.json",
17
18
  "build:icons": "svgr svgs/resources/fill --config-file svgs/configs/.svgrrc.default.cjs",
18
19
  "type-checking": "tsc --declaration --emitDeclarationOnly",
19
20
  "storybook": "storybook dev -p 3000",
@@ -25,7 +26,6 @@
25
26
  "peerDependencies": {
26
27
  "@lingui/core": "4.2.1",
27
28
  "@lingui/react": "4.2.1",
28
- "@rango-dev/queue-manager-rango-preset": "*",
29
29
  "react": ">=16"
30
30
  },
31
31
  "devDependencies": {
@@ -65,9 +65,10 @@
65
65
  "@radix-ui/react-radio-group": "^1.1.1",
66
66
  "@radix-ui/react-switch": "^1.0.1",
67
67
  "@radix-ui/react-tooltip": "^1.0.2",
68
- "@rango-dev/wallets-shared": "^0.21.1-next.1",
68
+ "@rango-dev/wallets-shared": "^0.21.1-next.6",
69
69
  "@stitches/react": "^1.2.8",
70
- "rango-sdk": "^0.1.35",
70
+ "rango-sdk": "^0.1.44",
71
+ "rango-types": "^0.1.57",
71
72
  "react-virtualized-auto-sizer": "^1.0.7",
72
73
  "react-window": "^1.8.8",
73
74
  "react-window-infinite-loader": "^1.0.8",
@@ -1,16 +1,10 @@
1
- import { darkTheme, styled } from '../../theme';
1
+ import { css, darkTheme, styled } from '../../theme';
2
2
 
3
3
  export const Container = styled('div', {
4
4
  display: 'flex',
5
5
  flexDirection: 'column',
6
6
  borderRadius: '$xs',
7
7
 
8
- '.title': {
9
- display: 'flex',
10
- alignItems: 'center',
11
- flex: '1 0 0',
12
- },
13
-
14
8
  '.title_typography:first-letter': {
15
9
  textTransform: 'uppercase',
16
10
  },
@@ -20,11 +14,7 @@ export const Container = styled('div', {
20
14
  paddingLeft: '$24',
21
15
  },
22
16
  '.description': {
23
- $$color: '$colors$neutral700',
24
- [`.${darkTheme} &`]: {
25
- $$color: '$colors$neutral600',
26
- },
27
- color: '$$color',
17
+ color: '$neutral700',
28
18
  fontSize: '$10',
29
19
  lineHeight: '$12',
30
20
  },
@@ -124,6 +114,7 @@ export const IconHighlight = styled('div', {
124
114
  justifyContent: 'center',
125
115
  alignItems: 'center',
126
116
  alignSelf: 'flex-start',
117
+ flexShrink: 0,
127
118
  variants: {
128
119
  type: {
129
120
  success: {
@@ -164,3 +155,9 @@ export const IconHighlight = styled('div', {
164
155
  },
165
156
  },
166
157
  });
158
+
159
+ export const titleStyles = css({
160
+ display: 'flex',
161
+ alignItems: 'center',
162
+ flex: '1 0 0',
163
+ });
@@ -7,7 +7,7 @@ import { Divider } from '../Divider';
7
7
  import { Typography } from '../Typography';
8
8
 
9
9
  import { getColor } from './Alert.helpers';
10
- import { Container, IconHighlight, Main } from './Alert.styles';
10
+ import { Container, IconHighlight, Main, titleStyles } from './Alert.styles';
11
11
  import AlertIcon from './AlertIcon';
12
12
 
13
13
  export function Alert(props: PropsWithChildren<PropTypes>) {
@@ -28,7 +28,7 @@ export function Alert(props: PropsWithChildren<PropTypes>) {
28
28
  type={type}
29
29
  variant={variant}>
30
30
  <Main variant={variant}>
31
- <div className="title">
31
+ <div className={titleStyles()}>
32
32
  <IconHighlight type={type}>
33
33
  <AlertIcon type={type} />
34
34
  </IconHighlight>
@@ -1,4 +1,5 @@
1
1
  import { darkTheme, styled } from '../../theme';
2
+ import { ImageContainer } from '../common';
2
3
 
3
4
  export const Chip = styled('button', {
4
5
  padding: '$10',
@@ -15,7 +16,7 @@ export const Chip = styled('button', {
15
16
  cursor: 'pointer',
16
17
  border: 0,
17
18
  fontFamily: 'inherit',
18
- '.image-container': {
19
+ [`& ${ImageContainer}`]: {
19
20
  borderRadius: '$xm',
20
21
  overflow: 'hidden',
21
22
  },
@@ -524,6 +524,7 @@ export const ButtonBase = styled('button', {
524
524
  });
525
525
 
526
526
  export const Content = styled('span', {
527
+ flexGrow: 1,
527
528
  display: 'inline-block',
528
529
  variants: {
529
530
  pl: {
@@ -13,7 +13,11 @@ export const CheckboxRoot = styled(RadixCheckbox.Root, {
13
13
  width: '1rem',
14
14
  height: '1rem',
15
15
  padding: 0,
16
- border: '1px solid $neutral600',
16
+ $$borderColor: '$colors$neutral600',
17
+ [`.${darkTheme} &`]: {
18
+ $$borderColor: '$colors$neutral700',
19
+ },
20
+ border: '1px solid $$borderColor',
17
21
  backgroundColor: 'transparent',
18
22
  cursor: 'pointer',
19
23
  '&[data-state="checked"]': {
@@ -2,6 +2,7 @@ import { darkTheme, styled } from '../../theme';
2
2
 
3
3
  export const BaseListItem = styled('li', {
4
4
  width: '100%',
5
+ overflow: 'hidden',
5
6
  borderRadius: '$xs',
6
7
  display: 'flex',
7
8
  alignItems: 'center',
@@ -22,6 +23,13 @@ export const BaseListItem = styled('li', {
22
23
  flexShrink: 1,
23
24
  flexBasis: 'auto',
24
25
  textAlign: 'left',
26
+ '._description': {
27
+ $$color: '$colors$neutral600',
28
+ [`.${darkTheme} &`]: {
29
+ $$color: '$colors$neutral700',
30
+ },
31
+ color: '$$color',
32
+ },
25
33
 
26
34
  '.item-text-title': {
27
35
  fontWeight: 'bold',
@@ -34,6 +42,7 @@ export const BaseListItem = styled('li', {
34
42
  justifyContent: 'center',
35
43
  alignItems: 'center',
36
44
  paddingLeft: '$10',
45
+ overflow: 'hidden',
37
46
  },
38
47
  variants: {
39
48
  hasDivider: {
@@ -16,7 +16,7 @@ function ListItem(props: ListItemProps) {
16
16
  <div className="item-text-container">
17
17
  {title && <div className="item-text-title">{title}</div>}
18
18
  {description && (
19
- <Typography variant="body" size="small" color="neutral600">
19
+ <Typography variant="body" className="_description" size="small">
20
20
  {description}
21
21
  </Typography>
22
22
  )}
@@ -6,6 +6,7 @@ export const BaseListItemButton = styled('button', {
6
6
  width: '100%',
7
7
  backgroundColor: 'transparent',
8
8
  fontFamily: 'inherit',
9
+ padding: 'unset',
9
10
  '&:focus-visible': {
10
11
  borderRadius: '$xs',
11
12
 
@@ -1,7 +1,15 @@
1
1
  import { styled } from '../../theme';
2
+ import { Typography } from '../Typography';
2
3
 
3
4
  export const Container = styled('div', {
5
+ width: '100%',
4
6
  display: 'flex',
5
- justifyContent: 'center',
7
+ justifyContent: 'end',
6
8
  alignItems: 'center',
7
9
  });
10
+
11
+ export const OutputUsdValue = styled(Typography, {
12
+ overflow: 'hidden',
13
+ whiteSpace: 'nowrap',
14
+ textOverflow: 'ellipsis',
15
+ });
@@ -4,7 +4,7 @@ import React from 'react';
4
4
 
5
5
  import { Typography } from '..';
6
6
 
7
- import { Container } from './PriceImpact.styles';
7
+ import { Container, OutputUsdValue } from './PriceImpact.styles';
8
8
 
9
9
  export function PriceImpact(props: PriceImpactProps) {
10
10
  const { size, outputUsdValue, percentageChange, warningLevel, error } = props;
@@ -19,12 +19,12 @@ export function PriceImpact(props: PriceImpactProps) {
19
19
  return (
20
20
  <Container>
21
21
  {outputUsdValue && (
22
- <Typography
22
+ <OutputUsdValue
23
23
  size={size === 'small' ? 'small' : 'medium'}
24
24
  variant="body"
25
25
  color="$neutral600">
26
26
  {`~$${outputUsdValue}`}
27
- </Typography>
27
+ </OutputUsdValue>
28
28
  )}
29
29
  {((outputUsdValue && percentageChange) || !outputUsdValue) && (
30
30
  <Typography
@@ -1,4 +1,4 @@
1
- import { styled } from '../../theme';
1
+ import { css, styled } from '../../theme';
2
2
 
3
3
  export const Container = styled('div', {
4
4
  borderRadius: '$xs',
@@ -6,17 +6,6 @@ export const Container = styled('div', {
6
6
  justifyContent: 'start',
7
7
  alignItems: 'center',
8
8
  paddingBottom: '$10',
9
- '& .item': {
10
- display: 'flex',
11
- alignItems: 'center',
12
- },
13
- '& .icon': {
14
- width: '$16',
15
- height: '$16',
16
- display: 'flex',
17
- justifyContent: 'center',
18
- alignItems: 'center',
19
- },
20
9
  });
21
10
 
22
11
  export const Separator = styled('div', {
@@ -25,3 +14,16 @@ export const Separator = styled('div', {
25
14
  marginRight: '$10',
26
15
  borderLeft: '1px solid $foreground',
27
16
  });
17
+
18
+ export const iconStyles = css({
19
+ width: '$16',
20
+ height: '$16',
21
+ display: 'flex',
22
+ justifyContent: 'center',
23
+ alignItems: 'center',
24
+ });
25
+
26
+ export const itemStyles = css({
27
+ display: 'flex',
28
+ alignItems: 'center',
29
+ });
@@ -5,14 +5,19 @@ import React from 'react';
5
5
  import { GasIcon, NumberIcon, TimeIcon } from '../../icons';
6
6
  import { Typography } from '../Typography';
7
7
 
8
- import { Container, Separator } from './QuoteCost.styles';
8
+ import {
9
+ Container,
10
+ iconStyles,
11
+ itemStyles,
12
+ Separator,
13
+ } from './QuoteCost.styles';
9
14
 
10
15
  export function QuoteCost(props: PropTypes) {
11
16
  const { fee, time, steps } = props;
12
17
  return (
13
18
  <Container>
14
- <div className="item">
15
- <div className="icon">
19
+ <div className={itemStyles()}>
20
+ <div className={iconStyles()}>
16
21
  <GasIcon size={12} color={'gray'} />
17
22
  </div>
18
23
  <Typography ml={2} align="center" variant="body" size="small">
@@ -20,8 +25,8 @@ export function QuoteCost(props: PropTypes) {
20
25
  </Typography>
21
26
  </div>
22
27
  <Separator />
23
- <div className="item">
24
- <div className="icon">
28
+ <div className={itemStyles()}>
29
+ <div className={iconStyles()}>
25
30
  <TimeIcon size={12} color="gray" />
26
31
  </div>
27
32
  <Typography ml={2} align="center" variant="body" size="small">
@@ -29,8 +34,8 @@ export function QuoteCost(props: PropTypes) {
29
34
  </Typography>
30
35
  </div>
31
36
  <Separator />
32
- <div className="item">
33
- <div className="icon">
37
+ <div className={itemStyles()}>
38
+ <div className={iconStyles()}>
34
39
  <NumberIcon size={16} color="gray" />
35
40
  </div>
36
41
  <Typography ml={2} align="center" variant="body" size="small">
@@ -9,8 +9,11 @@ export const StyledItem = styled(Radio.Item, {
9
9
  borderRadius: '100%',
10
10
  cursor: 'pointer',
11
11
  backgroundColor: 'transparent',
12
- border: '1px solid $neutral600',
13
-
12
+ $$borderColor: '$colors$neutral600',
13
+ [`.${darkTheme} &`]: {
14
+ $$borderColor: '$colors$neutral700',
15
+ },
16
+ border: '1px solid $$borderColor',
14
17
  '&[data-state="checked"]': {
15
18
  $$color: '$colors$secondary500',
16
19
  [`.${darkTheme} &`]: {
@@ -2,7 +2,7 @@ import type { BestRouteResponse } from 'rango-sdk';
2
2
 
3
3
  import React from 'react';
4
4
 
5
- import { styled } from '../../theme';
5
+ import { darkTheme, styled } from '../../theme';
6
6
  import { Divider } from '../Divider';
7
7
  import { AngleRightIcon, GasIcon } from '../Icon';
8
8
 
@@ -13,7 +13,11 @@ export const Container = styled('div', {
13
13
  padding: '$8',
14
14
  borderRadius: '$xs',
15
15
  backgroundColor: '$background',
16
- color: '$neutral600',
16
+ $$color: '$colors$neutral600',
17
+ [`.${darkTheme} &`]: {
18
+ $$color: '$colors$neutral700',
19
+ },
20
+ color: '$$color',
17
21
  fontSize: '$12',
18
22
 
19
23
  '.routes': {
@@ -1,7 +1,29 @@
1
1
  import { type BlockchainMeta, TransactionType } from 'rango-sdk';
2
2
 
3
+ import {
4
+ CosmosCategoryIcon,
5
+ EvmCategoryIcon,
6
+ OtherCategoryIcon,
7
+ UtxoCategoryIcon,
8
+ } from '../../icons';
9
+
3
10
  import { BlockchainCategories } from './SelectableCategoryList.types';
4
11
 
12
+ export const blockchainCategoryIcons = {
13
+ [BlockchainCategories.EVM]: EvmCategoryIcon,
14
+ [BlockchainCategories.COSMOS]: CosmosCategoryIcon,
15
+ [BlockchainCategories.UTXO]: UtxoCategoryIcon,
16
+ [BlockchainCategories.OTHER]: OtherCategoryIcon,
17
+ };
18
+
19
+ export const blockchainCategoryLabel = {
20
+ [BlockchainCategories.ALL]: 'All',
21
+ [BlockchainCategories.EVM]: 'EVM',
22
+ [BlockchainCategories.COSMOS]: 'Cosmos',
23
+ [BlockchainCategories.UTXO]: 'UTXO',
24
+ [BlockchainCategories.OTHER]: 'Other',
25
+ };
26
+
5
27
  const filterByType = (blockchain: BlockchainMeta, type: string): boolean => {
6
28
  switch (type) {
7
29
  case BlockchainCategories.ALL:
@@ -19,17 +41,22 @@ const filterByType = (blockchain: BlockchainMeta, type: string): boolean => {
19
41
  }
20
42
  };
21
43
 
22
- const blockchainslogo = {
23
- [BlockchainCategories.EVM]: ['ETH', 'BSC', 'POLYGON'],
24
- [BlockchainCategories.COSMOS]: ['COSMOS', 'OSMOSIS', 'JUNO'],
25
- [BlockchainCategories.UTXO]: ['BTC', 'LTC', 'BCH'],
26
- [BlockchainCategories.OTHER]: ['STARKNET', 'TRON', 'SOLANA'],
27
- };
28
-
29
- export const generateBlockchainsLogo = (
44
+ export const hasAnyCategory = (
30
45
  list: BlockchainMeta[],
31
- type: Exclude<BlockchainCategories, 'ALL'>
32
- ) =>
33
- list
34
- .filter((item) => filterByType(item, type))
35
- .filter((item) => blockchainslogo[type].includes(item.name));
46
+ blockchainType: string
47
+ ) => list.some((blockchain) => filterByType(blockchain, blockchainType));
48
+
49
+ export const getCountCategories = (list: BlockchainMeta[]) => {
50
+ const categoriesToCheck = Object.values(BlockchainCategories).filter(
51
+ (category) => category !== BlockchainCategories.ALL
52
+ );
53
+
54
+ const categoriesCount = categoriesToCheck.reduce((count, category) => {
55
+ const isCategoryPresent = list.some((blockchain) =>
56
+ filterByType(blockchain, category)
57
+ );
58
+ return count + (isCategoryPresent ? 1 : 0);
59
+ }, 0);
60
+
61
+ return categoriesCount;
62
+ };