Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore(ramp): upgrade sdk to v2.0.3 #13257

Closed
wants to merge 7 commits into from
Closed
Show file tree
Hide file tree
Changes from 6 commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 10 additions & 11 deletions app/components/UI/Ramp/Views/Quotes/Quotes.test.tsx
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import React from 'react';
import { cloneDeep } from 'lodash';
import {
AllQuotesResponse,
ProviderBuyFeatureBrowserEnum,
QuoteError,
QuoteResponse,
} from '@consensys/on-ramp-sdk';
import {
Expand All @@ -15,15 +15,12 @@ import {
renderScreen,
DeepPartial,
} from '../../../../../util/test/renderWithProvider';

import Quotes, { QuotesParams } from './Quotes';
import { mockQuotesData } from './Quotes.constants';
import Timer from './Timer';
import LoadingQuotes from './LoadingQuotes';

import { RampSDK } from '../../sdk';
import useQuotes from '../../hooks/useQuotes';

import Routes from '../../../../../constants/navigation/Routes';
import { backgroundState } from '../../../../../util/test/initial-root-state';
import { RampType } from '../../types';
Expand Down Expand Up @@ -121,7 +118,7 @@ jest.mock('../../../../../util/navigation/navUtils', () => ({
const mockQueryGetQuotes = jest.fn();

const mockUseQuotesInitialValues: Partial<ReturnType<typeof useQuotes>> = {
data: mockQuotesData as (QuoteResponse | QuoteError)[],
data: { quotes: mockQuotesData } as AllQuotesResponse,
isFetching: false,
error: null,
query: mockQueryGetQuotes,
Expand Down Expand Up @@ -211,7 +208,7 @@ describe('Quotes', () => {
it('renders correctly after animation without quotes', async () => {
mockUseQuotesValues = {
...mockUseQuotesInitialValues,
data: [],
data: { quotes: [], sorted: [] } as AllQuotesResponse,
};
render(Quotes);
act(() => {
Expand Down Expand Up @@ -240,10 +237,12 @@ 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)[],
data: {
quotes: [
...mockQuotesData.slice(0, 2),
{ ...mockQuotesData[2], error: false },
],
} as AllQuotesResponse,
};
render(Quotes);
fireEvent.press(
Expand Down Expand Up @@ -302,7 +301,7 @@ describe('Quotes', () => {

mockUseQuotesValues = {
...mockUseQuotesInitialValues,
data: mockData as (QuoteResponse | QuoteError)[],
data: { quotes: mockData } as AllQuotesResponse,
};
render(Quotes);
act(() => {
Expand Down
2 changes: 1 addition & 1 deletion app/components/UI/Ramp/Views/Quotes/Quotes.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -135,7 +135,7 @@ function Quotes() {
});

const {
data: quotes,
quotes,
isFetching: isFetchingQuotes,
error: ErrorFetchingQuotes,
query: fetchQuotes,
Expand Down
186 changes: 186 additions & 0 deletions app/components/UI/Ramp/hooks/useQuotes.test.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,186 @@
import { RampSDK } from '../sdk';
import useSDKMethod from './useSDKMethod';
import { renderHookWithProvider } from '../../../../util/test/renderWithProvider';
import useQuotes from './useQuotes';

type DeepPartial<BaseType> = {
[key in keyof BaseType]?: DeepPartial<BaseType[key]>;
};

const mockuseRampSDKInitialValues: DeepPartial<RampSDK> = {
selectedRegion: { id: 'test-region-id' },
selectedPaymentMethodId: 'test-payment-method-id',
selectedAsset: { id: 'test-crypto-id' },
selectedFiatCurrencyId: 'test-fiat-currency-id-1',
selectedAddress: 'test-address',
isBuy: true,
};

let mockUseRampSDKValues: DeepPartial<RampSDK> = {
...mockuseRampSDKInitialValues,
};

jest.mock('../sdk', () => ({
useRampSDK: () => mockUseRampSDKValues,
}));

jest.mock('./useSDKMethod');

describe('useQuotes', () => {
beforeEach(() => {
jest.clearAllMocks();
mockUseRampSDKValues = {
...mockuseRampSDKInitialValues,
};
});

it('calls useSDKMethod with the correct parameters for buy', () => {
(useSDKMethod as jest.Mock).mockReturnValue([
{
data: { quotes: [] },
error: null,
isFetching: false,
},
jest.fn(),
]);
renderHookWithProvider(() => useQuotes(100));

expect(useSDKMethod).toHaveBeenCalledWith(
'getQuotes',
'test-region-id',
'test-payment-method-id',
'test-crypto-id',
'test-fiat-currency-id-1',
100,
'test-address',
);
});

it('calls useSDKMethod with the correct parameters for sell', () => {
mockUseRampSDKValues.isBuy = false;
(useSDKMethod as jest.Mock).mockReturnValue([
{
data: { quotes: [] },
error: null,
isFetching: false,
},
jest.fn(),
]);
renderHookWithProvider(() => useQuotes(100));

expect(useSDKMethod).toHaveBeenCalledWith(
'getSellQuotes',
'test-region-id',
'test-payment-method-id',
'test-crypto-id',
'test-fiat-currency-id-1',
100,
'test-address',
);
});

it('returns loading state if fetching quotes', () => {
const mockQuery = jest.fn();
(useSDKMethod as jest.Mock).mockReturnValue([
{
data: null,
error: null,
isFetching: true,
},
mockQuery,
]);
const { result } = renderHookWithProvider(() => useQuotes(100));
expect(result.current).toEqual({
quotes: null,
isFetching: true,
error: null,
query: mockQuery,
});
});

it('returns error state if there is an error fetching quotes', () => {
const mockQuery = jest.fn();
(useSDKMethod as jest.Mock).mockReturnValue([
{
data: null,
error: 'error-fetching-quotes',
isFetching: false,
},
mockQuery,
]);
const { result } = renderHookWithProvider(() => useQuotes(100));
expect(result.current).toEqual({
quotes: null,
isFetching: false,
error: 'error-fetching-quotes',
query: mockQuery,
});
});

it('returns quotes if fetching is successful', () => {
const mockQuery = jest.fn();
(useSDKMethod as jest.Mock).mockReturnValue([
{
data: { quotes: [{ id: 'quote-1' }, { id: 'quote-2' }] },
error: null,
isFetching: false,
},
mockQuery,
]);
const { result } = renderHookWithProvider(() => useQuotes(100));
expect(result.current).toEqual({
quotes: [{ id: 'quote-1' }, { id: 'quote-2' }],
isFetching: false,
error: null,
query: mockQuery,
});
});

it('handles different amount types (string and number)', () => {
const mockQuery = jest.fn();
(useSDKMethod as jest.Mock).mockReturnValue([
{
data: { quotes: [{ id: 'quote-1' }] },
error: null,
isFetching: false,
},
mockQuery,
]);

const { result: resultNumber } = renderHookWithProvider(() =>
useQuotes(100),
);
expect(resultNumber.current.quotes).toEqual([{ id: 'quote-1' }]);

const { result: resultString } = renderHookWithProvider(() =>
useQuotes('100'),
);
expect(resultString.current.quotes).toEqual([{ id: 'quote-1' }]);
});

it('updates correctly when parameters change', () => {
const mockQuery = jest.fn();
(useSDKMethod as jest.Mock).mockReturnValue([
{
data: { quotes: [{ id: 'quote-1' }] },
error: null,
isFetching: false,
},
mockQuery,
]);

const { result, rerender } = renderHookWithProvider(() => useQuotes(100));
expect(result.current.quotes).toEqual([{ id: 'quote-1' }]);

(useSDKMethod as jest.Mock).mockReturnValue([
{
data: { quotes: [{ id: 'quote-2' }] },
error: null,
isFetching: false,
},
mockQuery,
]);
rerender(() => useQuotes(200));
expect(result.current.quotes).toEqual([{ id: 'quote-2' }]);
});
});
5 changes: 4 additions & 1 deletion app/components/UI/Ramp/hooks/useQuotes.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import { useRampSDK } from '../sdk';
import useSDKMethod from './useSDKMethod';
import { useMemo } from 'react';

function useQuotes(amount: number | string) {
const {
Expand All @@ -20,8 +21,10 @@ function useQuotes(amount: number | string) {
selectedAddress,
);

const quotes = useMemo(() => data?.quotes || null, [data]);

return {
data,
quotes,
Comment on lines +24 to +27
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

useMemo is not needed,

for now the only change needed is

  return {
    data: data?.quotes,

And make sure data.quotes is correctly typed as data was before ((QuoteResponse | QuoteError)[] | (QuoteError | SellQuoteResponse)[] | null)

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I noticed the type changed to (QuoteResponse | QuoteError)[] | (QuoteError | SellQuoteResponse)[] | undefined

@AxelGes what is the reason for that? it should be just nesting the type in a quotes property 🤔

The only change needed in app/components/UI/Ramp/Views/Quotes/Quotes.test.tsx would be

  it('calls setOptions when rendering', async () => {
    mockUseQuotesValues = {
      ...mockUseQuotesInitialValues,
      isFetching: true,
-      data: null,
+      data: undefined,
    };
    render(Quotes);
    expect(mockSetOptions).toBeCalledTimes(1);
  });

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm a little confused with the suggestion. 😅 Maybe I misunderstood, but didn't we decide in an earlier comment that the useQuotes interface should now spread the data object and become this?

 return {
    quotes,
    // sorted,
    // otherMetadataInTheFuture,
    isFetching,
    error,
    query,
  };

If we want to keep it as data for now, that's fine but I just updated it to be the other way, so looking for some clarification.

If we only updated it to be this:

return {
    data: data?.quotes,
     isFetching,
    error,
    query,
}
  1. it's not spreading the data obj like we decided
  2. It's risking data to be undefined and not null

Copy link
Member

@wachunei wachunei Jan 30, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sorry, later I noticed this step is the backwards compatible one and the other data is not there yet, so to minimize changes we only need these from my last comment.

diff --git a/app/components/UI/Ramp/Views/Quotes/Quotes.test.tsx b/app/components/UI/Ramp/Views/Quotes/Quotes.test.tsx
index 22c84f9f7a..d7ea969ad8 100644
--- a/app/components/UI/Ramp/Views/Quotes/Quotes.test.tsx
+++ b/app/components/UI/Ramp/Views/Quotes/Quotes.test.tsx
@@ -159,7 +159,7 @@ describe('Quotes', () => {
     mockUseQuotesValues = {
       ...mockUseQuotesInitialValues,
       isFetching: true,
-      data: null,
+      data: undefined,
     };
     render(Quotes);
     expect(mockSetOptions).toBeCalledTimes(1);
@@ -200,7 +200,7 @@ describe('Quotes', () => {
     mockUseQuotesValues = {
       ...mockUseQuotesInitialValues,
       isFetching: true,
-      data: null,
+      data: undefined,
     };
     render(Quotes);
     const fetchingQuotesText = screen.getByText('Fetching quotes');
diff --git a/app/components/UI/Ramp/hooks/useQuotes.ts b/app/components/UI/Ramp/hooks/useQuotes.ts
index eea4950794..070ad16d9d 100644
--- a/app/components/UI/Ramp/hooks/useQuotes.ts
+++ b/app/components/UI/Ramp/hooks/useQuotes.ts
@@ -21,7 +21,7 @@ function useQuotes(amount: number | string) {
   );
 
   return {
-    data,
+    data: data?.quotes,
     isFetching,
     error,
     query,

This is enough along with the package.json bump.

It's risking data to be undefined and not null

Yeah not sure about this type change, it is coming from the SDK, however for mobile it would work either way since it checks for null-ish values and not specifically null

isFetching,
error,
query,
Expand Down
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -145,7 +145,7 @@
},
"dependencies": {
"@config-plugins/detox": "^8.0.0",
"@consensys/on-ramp-sdk": "1.28.8",
"@consensys/on-ramp-sdk": "^2.0.3",
"@keystonehq/bc-ur-registry-eth": "^0.19.1",
"@keystonehq/metamask-airgapped-keyring": "^0.13.1",
"@keystonehq/ur-decoder": "^0.12.2",
Expand Down
8 changes: 4 additions & 4 deletions yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -1429,10 +1429,10 @@
dependencies:
expo-build-properties "~0.12.1"

"@consensys/on-ramp-sdk@1.28.8":
version "1.28.8"
resolved "https://registry.yarnpkg.com/@consensys/on-ramp-sdk/-/on-ramp-sdk-1.28.8.tgz#e39d833974d9d49653a2ec107ffbebadb49580d1"
integrity sha512-snm1hGjIaFMHvB7seLoaBgUQXH1n8/iXPMSm96d5QItFKVw4GZyqsKRnuT2u/CwIeXtYOKf59q7+Lp0UMg+mFQ==
"@consensys/on-ramp-sdk@^2.0.3":
version "2.0.3"
resolved "https://consensys.jfrog.io/artifactory/api/npm/npm/@consensys/on-ramp-sdk/-/on-ramp-sdk-2.0.3.tgz#c4a9068c75e9a2e7bb8b33071900d6f1388bab69"
integrity sha512-zMNefDC6xGu8vuo/WRxQvsvaEmqRdOCs4afv8yaCRaDalnds4l9ph4lcs+NLrdJFUYjKMo8Y+pU8SidSUug0Wg==
dependencies:
async "^3.2.3"
axios "^0.28.0"
Expand Down
Loading