From 68c3f267ea7d53adc1b95b2fc05af754247f5529 Mon Sep 17 00:00:00 2001 From: Corban Riley Date: Tue, 23 Apr 2024 11:10:53 -0400 Subject: [PATCH] Fixing Logo sizing in ConnectButton --- .../src/connectors/apple/AppleLogo.tsx | 41 +- .../coinbaseWallet/CoinbaseWalletLogo.tsx | 23 +- .../src/connectors/discord/DiscordLogo.tsx | 33 +- .../src/connectors/email/EmailLogo.tsx | 25 +- .../src/connectors/facebook/FacebookLogo.tsx | 67 ++- .../src/connectors/google/GoogleLogo.tsx | 57 ++- packages/connectors/src/connectors/index.ts | 1 + .../src/connectors/injected/InjectedLogo.tsx | 37 +- .../src/connectors/metamask/MetamaskLogo.tsx | 475 +++++++++--------- .../src/connectors/sequence/SequenceLogo.tsx | 270 +++++----- .../src/connectors/twitch/TwitchLogo.tsx | 44 +- packages/connectors/src/connectors/types.ts | 4 + .../walletConnect/WalletConnectLogo.tsx | 18 +- .../ConnectWalletContent/index.tsx | 8 +- .../kit/src/utils/getKitConnectWallets.ts | 9 +- 15 files changed, 549 insertions(+), 563 deletions(-) create mode 100644 packages/connectors/src/connectors/types.ts diff --git a/packages/connectors/src/connectors/apple/AppleLogo.tsx b/packages/connectors/src/connectors/apple/AppleLogo.tsx index bb5c0f6a..34b807bc 100644 --- a/packages/connectors/src/connectors/apple/AppleLogo.tsx +++ b/packages/connectors/src/connectors/apple/AppleLogo.tsx @@ -1,4 +1,5 @@ import React from 'react' +import { LogoProps } from '../types' interface GetAppleLogo { isDarkMode: boolean @@ -7,16 +8,14 @@ interface GetAppleLogo { export const getAppleLogo = ({ isDarkMode }: GetAppleLogo) => { const fillColor = isDarkMode ? 'white' : 'black' - const AppleLogo: React.FunctionComponent = ({ ...props }) => { + const AppleLogo: React.FunctionComponent = (props: LogoProps) => { return ( - - - - - + + + ) } return AppleLogo @@ -29,20 +28,18 @@ interface GetAppleMonochromeLogo { export const getAppleMonochromeLogo = ({ isDarkMode }: GetAppleMonochromeLogo) => { const fillColor = isDarkMode ? '#FFFFFF' : '#000000' - const AppleOtcLogo: React.FunctionComponent = ({ ...props }) => { + const AppleOtcLogo: React.FunctionComponent = (props: LogoProps) => { return ( - - - - - - + + + + ) } diff --git a/packages/connectors/src/connectors/coinbaseWallet/CoinbaseWalletLogo.tsx b/packages/connectors/src/connectors/coinbaseWallet/CoinbaseWalletLogo.tsx index a3a8c886..f1c52282 100644 --- a/packages/connectors/src/connectors/coinbaseWallet/CoinbaseWalletLogo.tsx +++ b/packages/connectors/src/connectors/coinbaseWallet/CoinbaseWalletLogo.tsx @@ -1,17 +1,16 @@ import React from 'react' +import { LogoProps } from '../types' -export const CoinbaseWalletLogo: React.FunctionComponent = ({ ...props }) => { +export const CoinbaseWalletLogo: React.FunctionComponent = (props: LogoProps) => { return ( - - - - - - + + + + ) } diff --git a/packages/connectors/src/connectors/discord/DiscordLogo.tsx b/packages/connectors/src/connectors/discord/DiscordLogo.tsx index 3127d97f..473ea531 100644 --- a/packages/connectors/src/connectors/discord/DiscordLogo.tsx +++ b/packages/connectors/src/connectors/discord/DiscordLogo.tsx @@ -1,4 +1,5 @@ import React from 'react' +import { LogoProps } from '../types' interface GetDiscordLogo { isDarkMode: boolean @@ -7,24 +8,22 @@ interface GetDiscordLogo { export const getDiscordLogo = ({ isDarkMode }: GetDiscordLogo) => { const fillColor = isDarkMode ? 'white' : 'black' - const DiscordLogo: React.FunctionComponent = ({ ...props }) => { + const DiscordLogo: React.FunctionComponent = (props: LogoProps) => { return ( - - - - - - - - - - - - + + + + + + + + + + ) } return DiscordLogo diff --git a/packages/connectors/src/connectors/email/EmailLogo.tsx b/packages/connectors/src/connectors/email/EmailLogo.tsx index 7700c669..b9e45e94 100644 --- a/packages/connectors/src/connectors/email/EmailLogo.tsx +++ b/packages/connectors/src/connectors/email/EmailLogo.tsx @@ -1,4 +1,5 @@ import React from 'react' +import { LogoProps } from '../types' interface GetEmailLogo { isDarkMode: boolean @@ -7,20 +8,18 @@ interface GetEmailLogo { export const getEmailLogo = ({ isDarkMode }: GetEmailLogo) => { const fillColor = isDarkMode ? 'white' : 'black' - const EmailLogo: React.FunctionComponent = ({ ...props }) => { + const EmailLogo: React.FunctionComponent = (props: LogoProps) => { return ( - - - - - - + + + + ) } diff --git a/packages/connectors/src/connectors/facebook/FacebookLogo.tsx b/packages/connectors/src/connectors/facebook/FacebookLogo.tsx index ce047ce0..bc7b0279 100644 --- a/packages/connectors/src/connectors/facebook/FacebookLogo.tsx +++ b/packages/connectors/src/connectors/facebook/FacebookLogo.tsx @@ -1,32 +1,31 @@ import React from 'react' +import { LogoProps } from '../types' -export const FacebookLogo: React.FunctionComponent = ({ ...props }) => { +export const FacebookLogo: React.FunctionComponent = (props: LogoProps) => { return ( - - - - - - - - - - - - + + + + + + + + + + ) } @@ -37,16 +36,14 @@ interface GetFacebookMonochromeLogo { export const getFacebookMonochromeLogo = ({ isDarkMode }: GetFacebookMonochromeLogo) => { const fillColor = isDarkMode ? '#FFFFFF' : '#000000' - const FacebookMonochromeLogo: React.FunctionComponent = ({ ...props }) => { + const FacebookMonochromeLogo: React.FunctionComponent = (props: LogoProps) => { return ( - - - - - + + + ) } diff --git a/packages/connectors/src/connectors/google/GoogleLogo.tsx b/packages/connectors/src/connectors/google/GoogleLogo.tsx index 8bf2aa3b..8ef4513d 100644 --- a/packages/connectors/src/connectors/google/GoogleLogo.tsx +++ b/packages/connectors/src/connectors/google/GoogleLogo.tsx @@ -1,35 +1,34 @@ import React from 'react' +import { LogoProps } from '../types' -export const GoogleLogo: React.FunctionComponent = ({ ...props }) => { +export const GoogleLogo: React.FunctionComponent = (props: LogoProps) => { return ( - - - - - - - - - + + + + + + + - - + + ) } @@ -40,7 +39,7 @@ interface GetGoogleMonochromeLogo { export const getMonochromeGoogleLogo = ({ isDarkMode }: GetGoogleMonochromeLogo) => { const fillColor = isDarkMode ? 'white' : 'black' - const GoogleMonochromeLogo: React.FunctionComponent = ({ ...props }) => { + const GoogleMonochromeLogo: React.FunctionComponent = (props: LogoProps) => { return ( { +export const InjectedLogo: React.FunctionComponent = (props: LogoProps) => { return ( - - - - + + - - - + /> + + ) } diff --git a/packages/connectors/src/connectors/metamask/MetamaskLogo.tsx b/packages/connectors/src/connectors/metamask/MetamaskLogo.tsx index c40a8cdd..d5642aaa 100644 --- a/packages/connectors/src/connectors/metamask/MetamaskLogo.tsx +++ b/packages/connectors/src/connectors/metamask/MetamaskLogo.tsx @@ -1,243 +1,242 @@ import React from 'react' +import { LogoProps } from '../types' -export const MetamaskLogo: React.FunctionComponent = ({ ...props }) => { +export const MetamaskLogo: React.FunctionComponent = (props: LogoProps) => { return ( - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ) } diff --git a/packages/connectors/src/connectors/sequence/SequenceLogo.tsx b/packages/connectors/src/connectors/sequence/SequenceLogo.tsx index f05a9b4b..e1b379e6 100644 --- a/packages/connectors/src/connectors/sequence/SequenceLogo.tsx +++ b/packages/connectors/src/connectors/sequence/SequenceLogo.tsx @@ -1,145 +1,137 @@ import React from 'react' +import { LogoProps } from '../types' -export const SequenceLogo: React.FunctionComponent = ({ ...props }) => { +export const SequenceLogo: React.FunctionComponent = (props: LogoProps) => { return ( - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ) } diff --git a/packages/connectors/src/connectors/twitch/TwitchLogo.tsx b/packages/connectors/src/connectors/twitch/TwitchLogo.tsx index d946646c..3f8551db 100644 --- a/packages/connectors/src/connectors/twitch/TwitchLogo.tsx +++ b/packages/connectors/src/connectors/twitch/TwitchLogo.tsx @@ -1,4 +1,5 @@ import React from 'react' +import { LogoProps } from '../types' interface GetTwitchLogo { isDarkMode?: boolean @@ -12,31 +13,30 @@ export const getTwitchLogo = ({ isDarkMode }: GetTwitchLogo) => { fillColor = isDarkMode ? 'white' : 'black' } - const TwitchLogo: React.FunctionComponent = ({ ...props }) => { + const TwitchLogo: React.FunctionComponent = (props: LogoProps) => { return ( - - - - - + + + - - - + /> + + - - + + ) } return TwitchLogo diff --git a/packages/connectors/src/connectors/types.ts b/packages/connectors/src/connectors/types.ts new file mode 100644 index 00000000..4f4dfad2 --- /dev/null +++ b/packages/connectors/src/connectors/types.ts @@ -0,0 +1,4 @@ +export interface LogoProps { + className?: string + style?: React.CSSProperties +} diff --git a/packages/connectors/src/connectors/walletConnect/WalletConnectLogo.tsx b/packages/connectors/src/connectors/walletConnect/WalletConnectLogo.tsx index 2ab1c12a..c22e70ea 100644 --- a/packages/connectors/src/connectors/walletConnect/WalletConnectLogo.tsx +++ b/packages/connectors/src/connectors/walletConnect/WalletConnectLogo.tsx @@ -1,13 +1,13 @@ import React from 'react' -export const WalletConnectLogo: React.FunctionComponent = ({ ...props }) => { +import { LogoProps } from '../types' + +export const WalletConnectLogo: React.FunctionComponent = (props: LogoProps) => { return ( - - - - - + + + ) } diff --git a/packages/kit/src/components/KitProvider/ConnectWalletContent/index.tsx b/packages/kit/src/components/KitProvider/ConnectWalletContent/index.tsx index ef052491..c65eaff1 100644 --- a/packages/kit/src/components/KitProvider/ConnectWalletContent/index.tsx +++ b/packages/kit/src/components/KitProvider/ConnectWalletContent/index.tsx @@ -16,7 +16,7 @@ import { Tooltip } from '@0xsequence/design-system' import { useConnect, useAccount, Connector } from 'wagmi' -import { EMAIL_CONNECTOR_LOCAL_STORAGE_KEY } from '@0xsequence/kit-connectors' +import { EMAIL_CONNECTOR_LOCAL_STORAGE_KEY, LogoProps } from '@0xsequence/kit-connectors' import { GoogleLogin } from '@react-oauth/google' import { appleAuthHelpers, useScript } from 'react-apple-signin-auth' @@ -61,8 +61,8 @@ export const ConnectWalletContent = (props: ConnectWalletContentProps) => { const injectedConnectors: ExtendedConnector[] = baseConnectors .filter(c => c.type === 'injected' && !c.hasOwnProperty('_wallet')) .map(connector => { - const Logo = () => { - return {connector.name} + const Logo = (props: LogoProps) => { + return {connector.name} } return { @@ -379,7 +379,7 @@ const ConnectButton = (props: ConnectButtonProps) => { alignItems="center" onClick={() => onConnect(connector)} > - + ) diff --git a/packages/kit/src/utils/getKitConnectWallets.ts b/packages/kit/src/utils/getKitConnectWallets.ts index 678261a6..040c9233 100644 --- a/packages/kit/src/utils/getKitConnectWallets.ts +++ b/packages/kit/src/utils/getKitConnectWallets.ts @@ -2,13 +2,14 @@ import React from 'react' import { Connector, CreateConnectorFn } from 'wagmi' import { LocalStorageKey } from '../constants' +import { LogoProps } from '@0xsequence/kit-connectors' export interface WalletProperties { id: string - logoDark: React.FunctionComponent - logoLight: React.FunctionComponent - monochromeLogoDark?: React.FunctionComponent - monochromeLogoLight?: React.FunctionComponent + logoDark: React.FunctionComponent + logoLight: React.FunctionComponent + monochromeLogoDark?: React.FunctionComponent + monochromeLogoLight?: React.FunctionComponent name: string iconBackground?: string hideConnectorId?: string | null