Skip to content

Commit

Permalink
feat(ramp): add bottom sheet quotes (#8627)
Browse files Browse the repository at this point in the history 
Co-authored-by: Cal Leung <cleun007@gmail.com>
  • Loading branch information
@wachunei @Cal-L
wachunei and Cal-L authored Feb 28, 2024
1 parent f225655 commit 672475e
Show file tree
Hide file tree
Showing 16 changed files with 3,859 additions and 949 deletions.
16 changes: 8 additions & 8 deletions app/components/UI/Ramp/Views/BuildQuote/__snapshots__/BuildQuote.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -472,7 +472,7 @@ exports[`BuildQuote View Crypto Currency Data renders a special error page if cr
<View
style={
Object {
"marginTop": -100,
"marginVertical": 60,
"paddingHorizontal": 60,
"width": "100%",
}
Expand Down Expand Up @@ -1204,7 +1204,7 @@ exports[`BuildQuote View Crypto Currency Data renders a special error page if cr
<View
style={
Object {
"marginTop": -100,
"marginVertical": 60,
"paddingHorizontal": 60,
"width": "100%",
}
Expand Down Expand Up @@ -1936,7 +1936,7 @@ exports[`BuildQuote View Crypto Currency Data renders an error page when there i
<View
style={
Object {
"marginTop": -100,
"marginVertical": 60,
"paddingHorizontal": 60,
"width": "100%",
}
Expand Down Expand Up @@ -3534,7 +3534,7 @@ exports[`BuildQuote View Fiat Currency Data renders an error page when there is
<View
style={
Object {
"marginTop": -100,
"marginVertical": 60,
"paddingHorizontal": 60,
"width": "100%",
}
Expand Down Expand Up @@ -5132,7 +5132,7 @@ exports[`BuildQuote View Payment Method Data renders an error page when there is
<View
style={
Object {
"marginTop": -100,
"marginVertical": 60,
"paddingHorizontal": 60,
"width": "100%",
}
Expand Down Expand Up @@ -6730,7 +6730,7 @@ exports[`BuildQuote View Regions data renders an error page when there is a regi
<View
style={
Object {
"marginTop": -100,
"marginVertical": 60,
"paddingHorizontal": 60,
"width": "100%",
}
Expand Down Expand Up @@ -14802,7 +14802,7 @@ exports[`BuildQuote View renders correctly when sdkError is present 1`] = `
<View
style={
Object {
"marginTop": -100,
"marginVertical": 60,
"paddingHorizontal": 60,
"width": "100%",
}
Expand Down Expand Up @@ -15505,7 +15505,7 @@ exports[`BuildQuote View renders correctly when sdkError is present 2`] = `
<View
style={
Object {
"marginTop": -100,
"marginVertical": 60,
"paddingHorizontal": 60,
"width": "100%",
}
Expand Down
2 changes: 1 addition & 1 deletion app/components/UI/Ramp/Views/GetStarted/__snapshots__/GetStarted.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2226,7 +2226,7 @@ exports[`GetStarted renders correctly when sdkError is present 1`] = `
<View
style={
Object {
"marginTop": -100,
"marginVertical": 60,
"paddingHorizontal": 60,
"width": "100%",
}
Expand Down
6 changes: 3 additions & 3 deletions app/components/UI/Ramp/Views/NetworkSwitcher/__snapshots__/NetworkSwitcher.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8176,7 +8176,7 @@ exports[`NetworkSwitcher View renders correctly with errors 1`] = `
<View
style={
Object {
"marginTop": -100,
"marginVertical": 60,
"paddingHorizontal": 60,
"width": "100%",
}
Expand Down Expand Up @@ -8858,7 +8858,7 @@ exports[`NetworkSwitcher View renders correctly with errors 2`] = `
<View
style={
Object {
"marginTop": -100,
"marginVertical": 60,
"paddingHorizontal": 60,
"width": "100%",
}
Expand Down Expand Up @@ -9540,7 +9540,7 @@ exports[`NetworkSwitcher View renders correctly with no data 1`] = `
<View
style={
Object {
"marginTop": -100,
"marginVertical": 60,
"paddingHorizontal": 60,
"width": "100%",
}
Expand Down
2 changes: 1 addition & 1 deletion app/components/UI/Ramp/Views/OrderDetails/__snapshots__/OrderDetails.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10484,7 +10484,7 @@ exports[`OrderDetails renders an error screen if a CREATED order cannot be polle
<View
style={
Object {
"marginTop": -100,
"marginVertical": 60,
"paddingHorizontal": 60,
"width": "100%",
}
Expand Down
8 changes: 4 additions & 4 deletions app/components/UI/Ramp/Views/PaymentMethods/__snapshots__/PaymentMethods.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6017,7 +6017,7 @@ exports[`PaymentMethods View renders correctly with empty data 1`] = `
<View
style={
Object {
"marginTop": -100,
"marginVertical": 60,
"paddingHorizontal": 60,
"width": "100%",
}
Expand Down Expand Up @@ -6722,7 +6722,7 @@ exports[`PaymentMethods View renders correctly with empty data for sell 1`] = `
<View
style={
Object {
"marginTop": -100,
"marginVertical": 60,
"paddingHorizontal": 60,
"width": "100%",
}
Expand Down Expand Up @@ -7427,7 +7427,7 @@ exports[`PaymentMethods View renders correctly with error 1`] = `
<View
style={
Object {
"marginTop": -100,
"marginVertical": 60,
"paddingHorizontal": 60,
"width": "100%",
}
Expand Down Expand Up @@ -11675,7 +11675,7 @@ exports[`PaymentMethods View renders correctly with sdkError 1`] = `
<View
style={
Object {
"marginTop": -100,
"marginVertical": 60,
"paddingHorizontal": 60,
"width": "100%",
}
Expand Down
18 changes: 17 additions & 1 deletion app/components/UI/Ramp/Views/Quotes/LoadingQuotes.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,23 @@ import React from 'react';
import Row from '../../components/Row';
import SkeletonQuote from '../../components/SkeletonQuote';

function LoadingQuotes() {
interface Props {
count?: number;
}

function LoadingQuotes({ count }: Props) {
if (count) {
return (
<>
{Array.from({ length: count }, (_, index) => (
<Row key={index} first={index === 0}>
<SkeletonQuote collapsed />
</Row>
))}
</>
);
}

return (
<>
<Row first>
Expand Down
1 change: 1 addition & 0 deletions app/components/UI/Ramp/Views/Quotes/Quotes.styles.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ const styleSheet = (params: { theme: Theme }) => {
paddingHorizontal: 15,
flexDirection: 'row',
alignItems: 'center',
alignSelf: 'center',
},
timer: {
fontVariant: ['tabular-nums'],
Expand Down
23 changes: 23 additions & 0 deletions app/components/UI/Ramp/Views/Quotes/Quotes.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -176,6 +176,7 @@ describe('Quotes', () => {
jest.useRealTimers();
});
});

it('navigates and tracks event on SELL cancel button press', async () => {
mockUseRampSDKValues.rampType = RampType.SELL;
mockUseRampSDKValues.isSell = true;
Expand Down Expand Up @@ -234,6 +235,28 @@ describe('Quotes', () => {
});
});

it('renders correctly after animation with quotes and expanded', async () => {
mockUseQuotesValues = {
...mockUseQuotesInitialValues,
data: [
...mockQuotesData.slice(0, 2),
{ ...mockQuotesData[2], error: false },
] as (QuoteResponse | QuoteError)[],
};
render(Quotes);
fireEvent.press(
screen.getByRole('button', { name: 'Explore more options' }),
);
act(() => {
jest.advanceTimersByTime(3000);
jest.clearAllTimers();
});
expect(screen.toJSON()).toMatchSnapshot();
act(() => {
jest.useRealTimers();
});
});

const simulateQuoteSelection = async (
browser: ProviderBuyFeatureBrowserEnum,
) => {
Expand Down
Loading

0 comments on commit 672475e

Please sign in to comment.