diff --git a/.changeset/sixty-clocks-shop.md b/.changeset/sixty-clocks-shop.md new file mode 100644 index 0000000000..25cc3d6360 --- /dev/null +++ b/.changeset/sixty-clocks-shop.md @@ -0,0 +1,5 @@ +--- +"@coinbase/onchainkit": patch +--- + +- **chore**: Add Swap settings SVG. By @cpcramer #1187 diff --git a/src/internal/svg/swapSettings.tsx b/src/internal/svg/swapSettings.tsx new file mode 100644 index 0000000000..8352e4c295 --- /dev/null +++ b/src/internal/svg/swapSettings.tsx @@ -0,0 +1,21 @@ +import { fill } from '../../styles/theme'; + +export const swapSettingsSvg = ( + + + +); diff --git a/src/wallet/hooks/useIcon.test.tsx b/src/wallet/hooks/useIcon.test.tsx index fcb0f8dda8..e7d84dad3f 100644 --- a/src/wallet/hooks/useIcon.test.tsx +++ b/src/wallet/hooks/useIcon.test.tsx @@ -1,6 +1,7 @@ import { renderHook } from '@testing-library/react'; import { describe, expect, it } from 'vitest'; import { fundWalletSvg } from '../../internal/svg/fundWallet'; +import { swapSettingsSvg } from '../../internal/svg/swapSettings'; import { walletSvg } from '../../internal/svg/walletSvg'; import { useIcon } from './useIcon'; @@ -60,4 +61,9 @@ describe('useIcon', () => { rerender({ icon: customIcon }); expect(result.current).toBe(initialResult); }); + + it('should return swapSettingsSvg when icon is "swapSettings"', () => { + const { result } = renderHook(() => useIcon({ icon: 'swapSettings' })); + expect(result.current).toBe(swapSettingsSvg); + }); }); diff --git a/src/wallet/hooks/useIcon.tsx b/src/wallet/hooks/useIcon.tsx index 468a5874e9..88c2fd80b9 100644 --- a/src/wallet/hooks/useIcon.tsx +++ b/src/wallet/hooks/useIcon.tsx @@ -1,5 +1,6 @@ import { isValidElement, useMemo } from 'react'; import { fundWalletSvg } from '../../internal/svg/fundWallet'; +import { swapSettingsSvg } from '../../internal/svg/swapSettings'; import { walletSvg } from '../../internal/svg/walletSvg'; export const useIcon = ({ icon }: { icon?: React.ReactNode }) => { @@ -8,10 +9,12 @@ export const useIcon = ({ icon }: { icon?: React.ReactNode }) => { return null; } switch (icon) { - case 'wallet': - return walletSvg; case 'fundWallet': return fundWalletSvg; + case 'swapSettings': + return swapSettingsSvg; + case 'wallet': + return walletSvg; } if (isValidElement(icon)) { return icon;