Skip to content

Commit e2ddb4f

Browse files
wachuneiwachunei
authored
Merge branch 'main' into feat/ramp-non-evm-balance
2 parents 7bd7db7 + 92b1771 commit e2ddb4f

File tree

68 files changed

+2127
-1266
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

68 files changed

+2127
-1266
lines changed

‎.storybook/storybook.requires.js

+3
Original file line numberDiff line numberDiff line change
@@ -108,15 +108,18 @@ const getStories = () => {
108108
"./app/component-library/components/Navigation/TabBarItem/TabBarItem.stories.tsx": require("../app/component-library/components/Navigation/TabBarItem/TabBarItem.stories.tsx"),
109109
"./app/component-library/components/Overlay/Overlay.stories.tsx": require("../app/component-library/components/Overlay/Overlay.stories.tsx"),
110110
"./app/component-library/components/Pickers/PickerAccount/PickerAccount.stories.tsx": require("../app/component-library/components/Pickers/PickerAccount/PickerAccount.stories.tsx"),
111+
"./app/component-library/components/Pickers/PickerBase/PickerBase.stories.tsx": require("../app/component-library/components/Pickers/PickerBase/PickerBase.stories.tsx"),
111112
"./app/component-library/components/Pickers/PickerNetwork/PickerNetwork.stories.tsx": require("../app/component-library/components/Pickers/PickerNetwork/PickerNetwork.stories.tsx"),
112113
"./app/component-library/components/RadioButton/RadioButton.stories.tsx": require("../app/component-library/components/RadioButton/RadioButton.stories.tsx"),
113114
"./app/component-library/components/Select/SelectButton/SelectButton.stories.tsx": require("../app/component-library/components/Select/SelectButton/SelectButton.stories.tsx"),
114115
"./app/component-library/components/Select/SelectOption/SelectOption.stories.tsx": require("../app/component-library/components/Select/SelectOption/SelectOption.stories.tsx"),
115116
"./app/component-library/components/Select/SelectValue/SelectValue.stories.tsx": require("../app/component-library/components/Select/SelectValue/SelectValue.stories.tsx"),
116117
"./app/component-library/components/Sheet/SheetBottom/SheetBottom.stories.tsx": require("../app/component-library/components/Sheet/SheetBottom/SheetBottom.stories.tsx"),
117118
"./app/component-library/components/Sheet/SheetHeader/SheetHeader.stories.tsx": require("../app/component-library/components/Sheet/SheetHeader/SheetHeader.stories.tsx"),
119+
"./app/component-library/components/Skeleton/Skeleton.stories.tsx": require("../app/component-library/components/Skeleton/Skeleton.stories.tsx"),
118120
"./app/component-library/components/Tags/Tag/Tag.stories.tsx": require("../app/component-library/components/Tags/Tag/Tag.stories.tsx"),
119121
"./app/component-library/components/Tags/TagUrl/TagUrl.stories.tsx": require("../app/component-library/components/Tags/TagUrl/TagUrl.stories.tsx"),
122+
"./app/component-library/components/Texts/SensitiveText/SensitiveText.stories.tsx": require("../app/component-library/components/Texts/SensitiveText/SensitiveText.stories.tsx"),
120123
"./app/component-library/components/Texts/Text/Text.stories.tsx": require("../app/component-library/components/Texts/Text/Text.stories.tsx"),
121124
"./app/component-library/components/Texts/TextWithPrefixIcon/TextWithPrefixIcon.stories.tsx": require("../app/component-library/components/Texts/TextWithPrefixIcon/TextWithPrefixIcon.stories.tsx"),
122125
"./app/component-library/components/Toast/Toast.stories.tsx": require("../app/component-library/components/Toast/Toast.stories.tsx"),

‎app/component-library/components/Skeleton/README.md

+105
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
1+
# Skeleton
2+
3+
Skeleton is a placeholder component that is used while the content is loading.
4+
5+
## Props
6+
7+
This component extends React Native's [ViewProps](https://reactnative.dev/docs/view) component.
8+
9+
### `height`
10+
11+
Optional prop to specify the height of the Skeleton.
12+
13+
| <span style="color:gray;font-size:14px">TYPE</span> | <span style="color:gray;font-size:14px">REQUIRED</span> |
14+
| :-------------------------------------------------- | :------------------------------------------------------ |
15+
| number \| string | No |
16+
17+
### `width`
18+
19+
Optional prop to specify the width of the Skeleton.
20+
21+
| <span style="color:gray;font-size:14px">TYPE</span> | <span style="color:gray;font-size:14px">REQUIRED</span> |
22+
| :-------------------------------------------------- | :------------------------------------------------------ |
23+
| number \| string | No |
24+
25+
### `children`
26+
27+
Optional prop for content to display within the skeleton.
28+
29+
| <span style="color:gray;font-size:14px">TYPE</span> | <span style="color:gray;font-size:14px">REQUIRED</span> |
30+
| :-------------------------------------------------- | :------------------------------------------------------ |
31+
| ReactNode | No |
32+
33+
### `hideChildren`
34+
35+
Optional prop to hide the children of the Skeleton component while maintaining its dimensions.
36+
37+
| <span style="color:gray;font-size:14px">TYPE</span> | <span style="color:gray;font-size:14px">REQUIRED</span> | <span style="color:gray;font-size:14px">DEFAULT</span> |
38+
| :-------------------------------------------------- | :------------------------------------------------------ | :----------------------------------------------------- |
39+
| boolean | No | false |
40+
41+
### `style`
42+
43+
Optional custom styles for the skeleton component.
44+
45+
| <span style="color:gray;font-size:14px">TYPE</span> | <span style="color:gray;font-size:14px">REQUIRED</span> |
46+
| :-------------------------------------------------- | :------------------------------------------------------ |
47+
| StyleProp<ViewStyle> | No |
48+
49+
## Usage
50+
51+
### Basic Usage
52+
53+
```javascript
54+
import { Skeleton } from 'app/component-library';
55+
56+
<Skeleton height={32} width={300} />;
57+
```
58+
59+
### Multiple Skeletons
60+
61+
```javascript
62+
import { Skeleton } from 'app/component-library';
63+
64+
<>
65+
<Skeleton height={32} width={300} />
66+
<Skeleton height={16} width={250} />
67+
<Skeleton height={16} width={250} />
68+
</>;
69+
```
70+
71+
### With Children
72+
73+
```javascript
74+
import { Skeleton } from 'app/component-library';
75+
import { View } from 'react-native';
76+
77+
<Skeleton
78+
style={{
79+
display: 'flex',
80+
flexDirection: 'column',
81+
gap: 4,
82+
backgroundColor: colors.background.alternative,
83+
borderRadius: 12,
84+
padding: 16,
85+
}}
86+
>
87+
<Skeleton height={32} width="100%" />
88+
<Skeleton height={16} width="95%" />
89+
<Skeleton height={16} width="95%" />
90+
</Skeleton>;
91+
```
92+
93+
### Hiding Children
94+
95+
```javascript
96+
import { Skeleton, Text } from 'app/component-library';
97+
98+
isLoaded ? (
99+
<Text>Content to load</Text>
100+
) : (
101+
<Skeleton width="max-content" hideChildren={true}>
102+
<Text>Hidden placeholder text</Text>
103+
</Skeleton>
104+
);
105+
```

‎app/component-library/components/Skeleton/Skeleton.stories.tsx

+109
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
1+
/* eslint-disable react-native/no-inline-styles */
2+
/* eslint-disable react/display-name */
3+
4+
// Third party dependencies.
5+
import React, { useState } from 'react';
6+
import { View, StyleSheet } from 'react-native';
7+
8+
// External dependencies.
9+
import Text from '../Texts/Text';
10+
import Button from '../Buttons/Button';
11+
import { ButtonVariants } from '../Buttons/Button/Button.types';
12+
13+
// Internal dependencies.
14+
import { default as SkeletonComponent } from './Skeleton';
15+
16+
const SkeletonMeta = {
17+
title: 'Component Library / Skeleton',
18+
component: SkeletonComponent,
19+
argTypes: {
20+
height: {
21+
control: { type: 'number' },
22+
},
23+
width: {
24+
control: { type: 'number' },
25+
},
26+
hideChildren: {
27+
control: { type: 'boolean' },
28+
},
29+
},
30+
};
31+
32+
export default SkeletonMeta;
33+
34+
export const Skeleton = {
35+
args: {
36+
width: 300,
37+
height: 32,
38+
},
39+
};
40+
41+
export const WidthHeight = () => {
42+
const styles = StyleSheet.create({
43+
container: {
44+
display: 'flex',
45+
flexDirection: 'column',
46+
gap: 8,
47+
},
48+
});
49+
50+
return (
51+
<View style={styles.container}>
52+
<SkeletonComponent height={32} width={300} />
53+
<SkeletonComponent height={16} width={250} />
54+
<SkeletonComponent height={16} width={250} />
55+
</View>
56+
);
57+
};
58+
59+
export const WithChildren = () => {
60+
const styles = StyleSheet.create({
61+
container: {
62+
display: 'flex',
63+
flexDirection: 'column',
64+
borderRadius: 12,
65+
padding: 16,
66+
},
67+
skeleton: {
68+
marginBottom: 8,
69+
},
70+
});
71+
72+
return (
73+
<SkeletonComponent style={styles.container}>
74+
<SkeletonComponent height={32} width="100%" style={styles.skeleton} />
75+
<SkeletonComponent height={16} width="95%" style={styles.skeleton} />
76+
<SkeletonComponent height={16} width="95%" />
77+
</SkeletonComponent>
78+
);
79+
};
80+
81+
export const HideChildren = () => {
82+
const [isLoaded, setIsLoaded] = useState(false);
83+
const styles = StyleSheet.create({
84+
container: {
85+
marginBottom: 16,
86+
},
87+
skeleton: {
88+
alignSelf: 'flex-start',
89+
},
90+
});
91+
92+
return (
93+
<View>
94+
<Button
95+
variant={ButtonVariants.Secondary}
96+
label="Toggle Loading"
97+
onPress={() => setIsLoaded(!isLoaded)}
98+
style={styles.container}
99+
/>
100+
{isLoaded ? (
101+
<Text>Content to load</Text>
102+
) : (
103+
<SkeletonComponent hideChildren style={styles.skeleton}>
104+
<Text>Content to load</Text>
105+
</SkeletonComponent>
106+
)}
107+
</View>
108+
);
109+
};

‎app/component-library/components/Skeleton/Skeleton.styles.ts

+48
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
// Third party dependencies.
2+
import { ViewStyle, StyleSheet } from 'react-native';
3+
4+
// External dependencies.
5+
import { Theme } from '../../../util/theme/models';
6+
7+
// Internal dependencies.
8+
import { SkeletonStyleSheetVars } from './Skeleton.types';
9+
10+
/**
11+
* Style sheet function for Skeleton component.
12+
*
13+
* @param params Style sheet params.
14+
* @param params.theme App theme from ThemeContext.
15+
* @param params.vars Inputs that the style sheet depends on.
16+
* @returns StyleSheet object.
17+
*/
18+
const styleSheet = (params: { theme: Theme; vars: SkeletonStyleSheetVars }) => {
19+
const { vars, theme } = params;
20+
const { height, width, style } = vars;
21+
22+
return StyleSheet.create({
23+
base: Object.assign(
24+
{
25+
borderRadius: 4,
26+
overflow: 'hidden',
27+
// Only apply explicit height/width if provided
28+
...(height !== undefined && { height }),
29+
...(width !== undefined && { width }),
30+
} as ViewStyle,
31+
style,
32+
) as ViewStyle,
33+
background: {
34+
...StyleSheet.absoluteFillObject,
35+
backgroundColor: theme.colors.icon.alternative,
36+
borderRadius: 4,
37+
} as ViewStyle,
38+
hideChildren: {
39+
opacity: 0,
40+
},
41+
childrenContainer: {
42+
position: 'relative',
43+
zIndex: 1,
44+
},
45+
});
46+
};
47+
48+
export default styleSheet;

0 commit comments

Comments
 (0)