@rango-dev/ui 0.1.10-next.72 → 0.1.10-next.74
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.
- package/dist/ui.cjs.development.js +31 -26
- package/dist/ui.cjs.development.js.map +1 -1
- package/dist/ui.cjs.production.min.js +1 -1
- package/dist/ui.cjs.production.min.js.map +1 -1
- package/dist/ui.esm.js +31 -26
- package/dist/ui.esm.js.map +1 -1
- package/package.json +3 -3
- package/src/components/LiquiditySourceList/LiquiditySourceList.tsx +31 -25
- package/src/components/Switch/Switch.tsx +1 -1
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@rango-dev/ui",
|
|
3
|
-
"version": "0.1.10-next.
|
|
3
|
+
"version": "0.1.10-next.74",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"typings": "dist/index.d.ts",
|
|
@@ -75,7 +75,7 @@
|
|
|
75
75
|
"@radix-ui/react-radio-group": "^1.1.1",
|
|
76
76
|
"@radix-ui/react-switch": "^1.0.1",
|
|
77
77
|
"@radix-ui/react-tooltip": "^1.0.2",
|
|
78
|
-
"@rango-dev/wallets-shared": "^0.1.11-next.
|
|
78
|
+
"@rango-dev/wallets-shared": "^0.1.11-next.73",
|
|
79
79
|
"@stitches/react": "^1.2.8",
|
|
80
80
|
"@types/react-color": "^3.0.6",
|
|
81
81
|
"rango-sdk": "^0.1.11",
|
|
@@ -87,5 +87,5 @@
|
|
|
87
87
|
"publishConfig": {
|
|
88
88
|
"access": "public"
|
|
89
89
|
},
|
|
90
|
-
"gitHead": "
|
|
90
|
+
"gitHead": "038334e680f1172e7e861689eec7ca7b385f0a92"
|
|
91
91
|
}
|
|
@@ -55,30 +55,9 @@ export function LiquiditySourceList(props: PropTypes) {
|
|
|
55
55
|
if (clickedItem.selected) return [...prevState, clickedItem];
|
|
56
56
|
return prevState.filter((item) => item.title != clickedItem.title);
|
|
57
57
|
});
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
const LiquiditySourceItem = ({
|
|
62
|
-
liquiditySource,
|
|
63
|
-
selected,
|
|
64
|
-
}: {
|
|
65
|
-
liquiditySource: LiquiditySource;
|
|
66
|
-
selected: boolean;
|
|
67
|
-
}) => {
|
|
68
|
-
return (
|
|
69
|
-
<Button
|
|
70
|
-
size="large"
|
|
71
|
-
align="start"
|
|
72
|
-
variant="outlined"
|
|
73
|
-
prefix={<LiquidityImage src={liquiditySource.logo} />}
|
|
74
|
-
suffix={<Switch checked={selected} />}
|
|
75
|
-
style={{ marginBottom: '12px' }}
|
|
76
|
-
type={selected ? 'primary' : undefined}
|
|
77
|
-
onClick={changeLiquiditySources.bind(null, liquiditySource)}
|
|
78
|
-
>
|
|
79
|
-
<Typography variant="body1">{liquiditySource.title}</Typography>
|
|
80
|
-
</Button>
|
|
81
|
-
);
|
|
58
|
+
setTimeout(() => {
|
|
59
|
+
onChange(clickedItem);
|
|
60
|
+
}, 200);
|
|
82
61
|
};
|
|
83
62
|
|
|
84
63
|
const isSelected = (liquiditySource: LiquiditySource) =>
|
|
@@ -88,12 +67,13 @@ export function LiquiditySourceList(props: PropTypes) {
|
|
|
88
67
|
<div style={{ height: '450px', ...listContainerStyle }}>
|
|
89
68
|
<div>
|
|
90
69
|
<LiquiditySourceType variant="h5">Bridges</LiquiditySourceType>
|
|
91
|
-
<Spacer size={16} direction="vertical"/>
|
|
70
|
+
<Spacer size={16} direction="vertical" />
|
|
92
71
|
{groupLiquiditySources(list).bridge.map((liquiditySource, index) => (
|
|
93
72
|
<LiquiditySourceItem
|
|
94
73
|
liquiditySource={liquiditySource}
|
|
95
74
|
key={index}
|
|
96
75
|
selected={isSelected(liquiditySource)}
|
|
76
|
+
onChange={changeLiquiditySources}
|
|
97
77
|
/>
|
|
98
78
|
))}
|
|
99
79
|
</div>
|
|
@@ -106,9 +86,35 @@ export function LiquiditySourceList(props: PropTypes) {
|
|
|
106
86
|
liquiditySource={liquiditySource}
|
|
107
87
|
key={index}
|
|
108
88
|
selected={isSelected(liquiditySource)}
|
|
89
|
+
onChange={changeLiquiditySources}
|
|
109
90
|
/>
|
|
110
91
|
))}
|
|
111
92
|
</div>
|
|
112
93
|
</div>
|
|
113
94
|
);
|
|
114
95
|
}
|
|
96
|
+
|
|
97
|
+
const LiquiditySourceItem = ({
|
|
98
|
+
liquiditySource,
|
|
99
|
+
selected,
|
|
100
|
+
onChange,
|
|
101
|
+
}: {
|
|
102
|
+
liquiditySource: LiquiditySource;
|
|
103
|
+
selected: boolean;
|
|
104
|
+
onChange: (clickedItem: LiquiditySource) => void;
|
|
105
|
+
}) => {
|
|
106
|
+
return (
|
|
107
|
+
<Button
|
|
108
|
+
size="large"
|
|
109
|
+
align="start"
|
|
110
|
+
variant="outlined"
|
|
111
|
+
prefix={<LiquidityImage src={liquiditySource.logo} />}
|
|
112
|
+
suffix={<Switch checked={selected} />}
|
|
113
|
+
style={{ marginBottom: '12px' }}
|
|
114
|
+
type={selected ? 'primary' : undefined}
|
|
115
|
+
onClick={onChange.bind(null, liquiditySource)}
|
|
116
|
+
>
|
|
117
|
+
<Typography variant="body1">{liquiditySource.title}</Typography>
|
|
118
|
+
</Button>
|
|
119
|
+
);
|
|
120
|
+
};
|
|
@@ -28,7 +28,7 @@ const StyledSwitchThumb = styled(RadixSwitch.Thumb, {
|
|
|
28
28
|
width: '18px',
|
|
29
29
|
height: '18px',
|
|
30
30
|
backgroundColor: '$neutrals500',
|
|
31
|
-
transition: ' transform
|
|
31
|
+
transition: ' transform 300ms',
|
|
32
32
|
borderRadius: '999999px',
|
|
33
33
|
willChange: 'transform',
|
|
34
34
|
'&[data-state="checked"]': {
|