diff --git a/.changeset/spicy-pears-attend.md b/.changeset/spicy-pears-attend.md new file mode 100644 index 0000000000..ad01fc621c --- /dev/null +++ b/.changeset/spicy-pears-attend.md @@ -0,0 +1,5 @@ +--- +"@coinbase/onchainkit": patch +--- + +- **feat**: exported `Swap` components. By @zizzamia #530 diff --git a/CHANGELOG.md b/CHANGELOG.md index 60c23164f8..64b717803c 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,14 +4,14 @@ ### Patch Changes -- 9fef5e9: - **feat**: added `Swap` component. By @abcrane123 & @kyhyco #522 +- **feat**: added `Swap` component. By @abcrane123 & @kyhyco #522 9fef5e9 ## 0.20.1 ### Patch Changes -- ccb069e: - **feat**: added `buildSwapTransaction`. By @0xAlec & @zizzamia #503 #518 - - **fix**: added tailwind utilities to exported styles.css. By @kyhyco #515 +- **feat**: added `buildSwapTransaction`. By @0xAlec & @zizzamia #503 #518 ccb069e +- **fix**: added tailwind utilities to exported styles.css. By @kyhyco #515 ## 0.20.0 diff --git a/package.json b/package.json index 84d2014251..a7a987aa9b 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@coinbase/onchainkit", - "version": "0.20.2", + "version": "0.20.3", "type": "module", "repository": "https://github.com/coinbase/onchainkit.git", "license": "MIT", diff --git a/site/docs/pages/swap/types.mdx b/site/docs/pages/swap/types.mdx index 163997b6b7..b20474166b 100644 --- a/site/docs/pages/swap/types.mdx +++ b/site/docs/pages/swap/types.mdx @@ -5,6 +5,50 @@ description: Glossary of Types in Swap components & utilities. # Types [Glossary of Types in Swap components & utilities.] +## `BuildSwapTransaction` + +```ts +type BuildSwapTransaction = { + approveTransaction?: SwapTransaction; // The approval transaction + fee: Fee; // The fee for the swap + quote: SwapQuote; // The quote for the swap + transaction: SwapTransaction; // The swap transaction + warning?: QuoteWarning; // The warning associated with the swap +}; +``` + +## `BuildSwapTransactionResponse` + +```ts +type BuildSwapTransactionResponse = BuildSwapTransaction | SwapError; +``` + +## `BuildSwapTransactionParams` + +```ts +type BuildSwapTransactionParams = GetSwapQuoteParams & { + fromAddress: Address; // The address of the user +}; +``` + +## `GetSwapQuoteParams` + +```ts +export type GetSwapQuoteParams = { + from: Token; // The source token for the swap + to: Token; // The destination token for the swap + amount: string; // The amount to be swapped + amountReference?: string; // The reference amount for the swap + isAmountInDecimals?: boolean; // Whether the amount is in decimals +}; +``` + +## `GetSwapQuoteResponse` + +```ts +export type GetSwapQuoteResponse = SwapQuote | SwapError; +``` + ## `SwapAmountInputReact` ```ts @@ -15,10 +59,19 @@ type SwapAmountInputReact = { }; ``` +## `SwapError` + +```ts +type SwapError = { + code: number; // The error code + error: string; // The error message +}; +``` + ## `SwapReact` ```ts -export type SwapReact = { +type SwapReact = { account: Account; // Ethereum account children: ReactNode; // Children components to render onError?: (error: SwapError) => void; // Callback when swap is unsuccessful diff --git a/src/frame/components/FrameMetadata.tsx b/src/frame/components/FrameMetadata.tsx index 5c80c39bb7..de620ef3c1 100644 --- a/src/frame/components/FrameMetadata.tsx +++ b/src/frame/components/FrameMetadata.tsx @@ -19,10 +19,10 @@ export function FrameMetadata({ state, wrapper: Wrapper = Fragment, }: FrameMetadataReact) { - const button1 = buttons && buttons[0]; - const button2 = buttons && buttons[1]; - const button3 = buttons && buttons[2]; - const button4 = buttons && buttons[3]; + const button1 = buttons?.[0]; + const button2 = buttons?.[1]; + const button3 = buttons?.[2]; + const button4 = buttons?.[3]; const postUrlToUse = postUrl || post_url; const refreshPeriodToUse = refreshPeriod || refresh_period; const imageSrc = typeof image === 'string' ? image : image.src; @@ -47,9 +47,7 @@ export function FrameMetadata({ {!!(button1 && !!button1.action) && ( )} - {!!(button1 && button1.target) && ( - - )} + {!!button1?.target && } {!!(button1 && button1.action === 'tx' && button1.postUrl) && ( )} @@ -58,9 +56,7 @@ export function FrameMetadata({ {!!(button2 && !!button2.action) && ( )} - {!!(button2 && button2.target) && ( - - )} + {!!button2?.target && } {!!(button2 && button2.action === 'tx' && button2.postUrl) && ( )} @@ -69,9 +65,7 @@ export function FrameMetadata({ {!!(button3 && !!button3.action) && ( )} - {!!(button3 && button3.target) && ( - - )} + {!!button3?.target && } {!!(button3 && button3.action === 'tx' && button3.postUrl) && ( )} @@ -80,9 +74,7 @@ export function FrameMetadata({ {!!(button4 && !!button4.action) && ( )} - {!!(button4 && button4.target) && ( - - )} + {!!button4?.target && } {!!(button4 && button4.action === 'tx' && button4.postUrl) && ( )} @@ -95,8 +87,8 @@ export function FrameMetadata({ {!!isOpenFrame && } - {!!isOpenFrame && accepts && accepts['xmtp'] && ( - + {!!isOpenFrame && accepts && accepts.xmtp && ( + )} {!!isOpenFrame && imageSrc && } diff --git a/src/frame/getFrameMessage.ts b/src/frame/getFrameMessage.ts index a990c0db71..cab15fe958 100644 --- a/src/frame/getFrameMessage.ts +++ b/src/frame/getFrameMessage.ts @@ -46,13 +46,12 @@ async function getFrameMessage( isValid: true, message: response, }; - } else { - // Security best practice, don't return anything if we can't validate the frame. - return { - isValid: false, - message: undefined, - }; } + // Security best practice, don't return anything if we can't validate the frame. + return { + isValid: false, + message: undefined, + }; } export { getFrameMessage }; diff --git a/src/identity/components/Name.test.tsx b/src/identity/components/Name.test.tsx index d95dfaa635..2a73cf557f 100644 --- a/src/identity/components/Name.test.tsx +++ b/src/identity/components/Name.test.tsx @@ -17,7 +17,7 @@ jest.mock('../getSlicedAddress', () => ({ getSlicedAddress: jest.fn(), })); -const mockSliceAddress = (addr: string) => addr.slice(0, 6) + '...' + addr.slice(-4); +const mockSliceAddress = (addr: string) => `${addr.slice(0, 6)}...${addr.slice(-4)}`; describe('OnchainAddress', () => { const testAddress = '0x1234567890abcdef1234567890abcdef12345678'; diff --git a/src/identity/components/WithAvatarBadge.tsx b/src/identity/components/WithAvatarBadge.tsx index 123b7c6ed6..a87fc36a35 100644 --- a/src/identity/components/WithAvatarBadge.tsx +++ b/src/identity/components/WithAvatarBadge.tsx @@ -21,7 +21,7 @@ function WithAvatarBadgeInner({ children, address }: WithAvatarBadgeInnerReact) return (
{children} - {attestations && attestations[0] && ( + {attestations?.[0] && (
diff --git a/src/identity/components/WithNameBadge.tsx b/src/identity/components/WithNameBadge.tsx index 3cc30c5245..47edfb91c5 100644 --- a/src/identity/components/WithNameBadge.tsx +++ b/src/identity/components/WithNameBadge.tsx @@ -21,7 +21,7 @@ function WithNameBadgeInner({ children, address }: WithNameBadgeInnerReact) { return (
{children} - {attestations && attestations[0] && ( + {attestations?.[0] && (
diff --git a/src/swap/components/Swap.tsx b/src/swap/components/Swap.tsx index 7cc2e7c873..5a2b842cd3 100644 --- a/src/swap/components/Swap.tsx +++ b/src/swap/components/Swap.tsx @@ -94,7 +94,7 @@ export function Swap({ account, children, onError }: SwapReact) {