From 0bd9a978dcbf27d0c602e67f97f0213ea72e02a3 Mon Sep 17 00:00:00 2001 From: Dmitrii Podlesnyi Date: Mon, 18 Mar 2024 20:14:05 +0400 Subject: [PATCH 01/15] feat: connect wallet modal ui updated --- .../ConnectButton/ConnectButton.tsx | 4 +- .../src/components/ConnectButton/styles.tsx | 39 +-- .../src/components/Terms/styles.tsx | 3 +- .../components/WalletsModal/WalletsModal.tsx | 48 +--- .../ConnectWalletModal/ConnectWalletModal.tsx | 181 ++++++++++++++ .../ConnectWalletModal/getWalletsList.ts | 38 +++ .../components/ConnectWalletModal/index.ts | 1 + .../components/ConnectWalletModal/styles.tsx | 231 ++++++++++++++++++ .../EagerConnectModal.tsx | 16 +- .../components/EagerConnectModal/index.ts | 1 + .../components/EagerConnectModal/styles.ts | 18 ++ .../EmptyWalletsList/EmptyWalletsList.tsx | 33 +++ .../components/EmptyWalletsList/index.ts | 1 + .../components/EmptyWalletsList/styles.tsx | 46 ++++ .../WalletsModal/getWalletsButtons.ts | 66 ----- .../src/components/WalletsModal/styles.tsx | 66 ----- .../src/components/WalletsModal/types.ts | 3 +- .../src/connectButtons/types.ts | 1 + .../ui-react/src/components/modal/Modal.tsx | 10 +- .../src/components/modal/ModalStyles.tsx | 14 +- .../ui-react/src/components/modal/types.tsx | 2 + 21 files changed, 613 insertions(+), 209 deletions(-) create mode 100644 packages/connect-wallet-modal/src/components/WalletsModal/components/ConnectWalletModal/ConnectWalletModal.tsx create mode 100644 packages/connect-wallet-modal/src/components/WalletsModal/components/ConnectWalletModal/getWalletsList.ts create mode 100644 packages/connect-wallet-modal/src/components/WalletsModal/components/ConnectWalletModal/index.ts create mode 100644 packages/connect-wallet-modal/src/components/WalletsModal/components/ConnectWalletModal/styles.tsx rename packages/connect-wallet-modal/src/components/WalletsModal/components/{ => EagerConnectModal}/EagerConnectModal.tsx (72%) create mode 100644 packages/connect-wallet-modal/src/components/WalletsModal/components/EagerConnectModal/index.ts create mode 100644 packages/connect-wallet-modal/src/components/WalletsModal/components/EagerConnectModal/styles.ts create mode 100644 packages/connect-wallet-modal/src/components/WalletsModal/components/EmptyWalletsList/EmptyWalletsList.tsx create mode 100644 packages/connect-wallet-modal/src/components/WalletsModal/components/EmptyWalletsList/index.ts create mode 100644 packages/connect-wallet-modal/src/components/WalletsModal/components/EmptyWalletsList/styles.tsx delete mode 100644 packages/connect-wallet-modal/src/components/WalletsModal/getWalletsButtons.ts delete mode 100644 packages/connect-wallet-modal/src/components/WalletsModal/styles.tsx diff --git a/packages/connect-wallet-modal/src/components/ConnectButton/ConnectButton.tsx b/packages/connect-wallet-modal/src/components/ConnectButton/ConnectButton.tsx index c1598cef..42da7af1 100644 --- a/packages/connect-wallet-modal/src/components/ConnectButton/ConnectButton.tsx +++ b/packages/connect-wallet-modal/src/components/ConnectButton/ConnectButton.tsx @@ -20,7 +20,7 @@ function isWalletAdapterIcons( } const ConnectButton: FC = (props: ConnectButtonProps) => { - const { icon, shouldInvertWalletIcon, children, ...rest } = props; + const { icon, shouldInvertWalletIcon, children, isCompact, ...rest } = props; let ButtonIcon: ElementType = React.Fragment; if (icon) { @@ -34,7 +34,7 @@ const ConnectButton: FC = (props: ConnectButtonProps) => { return ( - + {isValidElement() && } {children} diff --git a/packages/connect-wallet-modal/src/components/ConnectButton/styles.tsx b/packages/connect-wallet-modal/src/components/ConnectButton/styles.tsx index 0415f26b..199666dc 100644 --- a/packages/connect-wallet-modal/src/components/ConnectButton/styles.tsx +++ b/packages/connect-wallet-modal/src/components/ConnectButton/styles.tsx @@ -17,32 +17,43 @@ export const ConnectButtonStyle = styled(Button).attrs({ `; export const ConnectButtonContentStyle = styled.span` - ${({ theme: { colors } }) => css` + ${({ theme }) => css` display: flex; - flex-direction: column; + flex-direction: row; align-items: center; - padding: 0 5px; - color: ${colors.text}; + padding: 0 ${theme.spaceMap.md}px; + color: ${theme.colors.text}; `} `; export const ConnectButtonTitleStyle = styled.div` - ${({ theme: { colors } }) => css` + ${({ theme }) => css` overflow: hidden; max-width: 100%; text-overflow: ellipsis; - color: ${colors.text}; + color: ${theme.colors.text}; + font-size: ${theme.fontSizesMap.xs}px; + font-weight: 400; line-height: 20px; `} `; -export const ConnectButtonIconStyle = styled.span` - display: flex; - margin-bottom: 8px; +export const ConnectButtonIconStyle = styled.span<{ $isCompact?: boolean }>` + ${({ $isCompact }) => css` + display: flex; + margin-right: 12px; - svg { - width: 40px; - height: 40px; - border-radius: 50%; - } + svg { + border-radius: 50%; + ${$isCompact + ? css` + width: 40px; + height: 40px; + ` + : css` + width: 48px; + height: 48px; + `} + } + `} `; diff --git a/packages/connect-wallet-modal/src/components/Terms/styles.tsx b/packages/connect-wallet-modal/src/components/Terms/styles.tsx index 25a7730a..3b364d2f 100644 --- a/packages/connect-wallet-modal/src/components/Terms/styles.tsx +++ b/packages/connect-wallet-modal/src/components/Terms/styles.tsx @@ -6,8 +6,7 @@ export const TermsStyle = styled.label` align-items: center; font-size: ${fontSizesMap.xxs}px; line-height: 1.6em; - padding: ${spaceMap.lg}px; - margin-top: ${spaceMap.sm}px; + padding: ${spaceMap.lg}px ${spaceMap.md}px; margin-bottom: ${spaceMap.md}px; border-radius: ${borderRadiusesMap.lg}px; background: ${colors.background}; diff --git a/packages/connect-wallet-modal/src/components/WalletsModal/WalletsModal.tsx b/packages/connect-wallet-modal/src/components/WalletsModal/WalletsModal.tsx index dffe87e4..b227cff6 100644 --- a/packages/connect-wallet-modal/src/components/WalletsModal/WalletsModal.tsx +++ b/packages/connect-wallet-modal/src/components/WalletsModal/WalletsModal.tsx @@ -1,30 +1,19 @@ import React from 'react'; import { Modal } from '@reef-knot/ui-react'; -import { WalletsModalProps, ButtonsCommonProps } from './types'; +import { WalletsModalProps } from './types'; import { Terms, WalletModalConnectTermsProps } from '../Terms'; -import { WalletsButtonsContainer } from './styles'; import { LedgerModal } from '../Ledger'; -import { EagerConnectModal } from './components'; -import { getWalletsButtons } from './getWalletsButtons'; +import { EagerConnectModal } from './components/EagerConnectModal'; +import { ConnectWalletModal } from './components/ConnectWalletModal'; import { useReefKnotModal } from '@reef-knot/core-react'; export function WalletsModal({ children, ...passedDownProps }: React.PropsWithChildren) { - const { - shouldInvertWalletIcon = false, - buttonsFullWidth = false, - metrics, - termsLink, - privacyNoticeLink, - buttonComponentsByConnectorId, - walletDataList, - hiddenWallets, - } = passedDownProps; + const { metrics, termsLink, privacyNoticeLink } = passedDownProps; - const { currentModal, closeModal, forceCloseAllModals, termsChecked } = - useReefKnotModal(); + const { currentModal, closeModal, forceCloseAllModals } = useReefKnotModal(); const termsProps: WalletModalConnectTermsProps = { termsLink: termsLink || 'https://lido.fi/terms-of-use', @@ -38,30 +27,13 @@ export function WalletsModal({ switch (currentModal?.type) { case 'wallet': { - const buttonsCommonProps: ButtonsCommonProps = { - disabled: !termsChecked, - onConnect: onCloseSuccess, - shouldInvertWalletIcon, - metrics, - }; return ( - - - - {getWalletsButtons({ - commonProps: buttonsCommonProps, - buttonComponentsByConnectorId, - hiddenWallets, - walletDataList, - })} - - + termsProps={termsProps} + onCloseSuccess={onCloseSuccess} + onCloseReject={onCloseReject} + /> ); } diff --git a/packages/connect-wallet-modal/src/components/WalletsModal/components/ConnectWalletModal/ConnectWalletModal.tsx b/packages/connect-wallet-modal/src/components/WalletsModal/components/ConnectWalletModal/ConnectWalletModal.tsx new file mode 100644 index 00000000..cb2e46d0 --- /dev/null +++ b/packages/connect-wallet-modal/src/components/WalletsModal/components/ConnectWalletModal/ConnectWalletModal.tsx @@ -0,0 +1,181 @@ +import React, { + useCallback, + useEffect, + useMemo, + useRef, + useState, +} from 'react'; +import { useReefKnotModal } from '@reef-knot/core-react'; +import { isMobileOrTablet } from '@reef-knot/wallets-helpers'; + +import { Link } from '@lidofinance/lido-ui'; +import { Modal } from '@reef-knot/ui-react'; +import { WalletsModalProps } from '../../types'; +import { Terms, WalletModalConnectTermsProps } from '../../../Terms'; +import { EmptyWalletsList } from '../EmptyWalletsList'; +import { + Subtitle, + WalletsButtonsScrollBox, + WalletsButtonsContainer, + ContentHeader, + MoreWalletsToggleButton, + WalletInput, + SearchIconWrap, + MoreWalletsText, + InputClearButton, + IconSearch, + IconMoreWallets, + IconInputClear, +} from './styles'; + +import { getWalletsList } from './getWalletsList'; + +type ConnectWalletModalProps = WalletsModalProps & { + onCloseSuccess?: () => void; + onCloseReject?: () => void; + termsProps: WalletModalConnectTermsProps; +}; + +export const ConnectWalletModal = ({ + onCloseSuccess, + onCloseReject, + termsProps, + ...passedDownProps +}: ConnectWalletModalProps) => { + const { + shouldInvertWalletIcon = false, + buttonsFullWidth = false, + metrics, + buttonComponentsByConnectorId, + walletDataList, + hiddenWallets, + } = passedDownProps; + + const { termsChecked } = useReefKnotModal(); + + const inputRef = useRef(null); + const [inputValue, setInputValue] = useState(''); + const [isShownOtherWallets, setShowOtherWallets] = useState(false); + + const walletsListFull = useMemo(() => { + return getWalletsList({ + hiddenWallets, + walletDataList, + }); + }, [hiddenWallets, walletDataList]); + + const walletsList = useMemo(() => { + if (!isShownOtherWallets) { + return walletsListFull.slice(0, 6); + } + + if (inputValue) { + return walletsListFull.filter((wallet) => + wallet.walletName.toLowerCase().includes(inputValue.toLowerCase()), + ); + } + + return walletsListFull; + }, [inputValue, walletsListFull, isShownOtherWallets]); + + useEffect(() => { + if (isShownOtherWallets) { + if (!isMobileOrTablet) inputRef.current?.focus(); + } else { + setInputValue(''); + } + }, [isShownOtherWallets]); + + const handleInputChange = useCallback( + (e: React.ChangeEvent) => { + setInputValue(e.currentTarget.value); + }, + [], + ); + + const handleClearInput = useCallback(() => { + setInputValue(''); + }, []); + + const handleToggleWalletsList = useCallback(() => { + setShowOtherWallets((value) => !value); + }, []); + + return ( + + + + + Choose wallet I don't have a wallet + + {isShownOtherWallets && ( + + + + } + rightDecorator={ + inputValue && ( + + + + ) + } + /> + )} + + + + {walletsList.length === 0 && ( + + )} + {walletsList.length > 0 && ( + + {walletsList.map((walletData) => { + const WalletComponent = + buttonComponentsByConnectorId[walletData.connector.id] ?? + buttonComponentsByConnectorId.default; + return ( + + ); + })} + + )} + + + + + + {isShownOtherWallets ? 'Hide wallets' : 'Other wallets'} + + + + ); +}; diff --git a/packages/connect-wallet-modal/src/components/WalletsModal/components/ConnectWalletModal/getWalletsList.ts b/packages/connect-wallet-modal/src/components/WalletsModal/components/ConnectWalletModal/getWalletsList.ts new file mode 100644 index 00000000..158cbe67 --- /dev/null +++ b/packages/connect-wallet-modal/src/components/WalletsModal/components/ConnectWalletModal/getWalletsList.ts @@ -0,0 +1,38 @@ +import { WalletAdapterData } from '@reef-knot/types'; +import { WalletsModalProps } from '../../types'; + +type GetWalletsListArgs = { + walletDataList: WalletAdapterData[]; + hiddenWallets: WalletsModalProps['hiddenWallets']; +}; + +export function getWalletsList({ + walletDataList = [], + hiddenWallets = [], +}: GetWalletsListArgs) { + const [detected, undetected] = walletDataList.reduce< + [WalletAdapterData[], WalletAdapterData[]] + >( + (walletsList, walletData) => { + const { walletId, detector, autoConnectOnly } = walletData; + + // Filtering wallets marked as hidden and auto connect only + if (autoConnectOnly || hiddenWallets.includes(walletId)) { + return walletsList; + } + + // If condition is true (usually means that a wallet is detected), + // move it to the first place in the wallets list, so a user can see it right away + if (detector?.()) { + walletsList[0].push(walletData); + } else { + walletsList[1].push(walletData); + } + + return walletsList; + }, + [[], []], + ); + + return [...detected, ...undetected]; +} diff --git a/packages/connect-wallet-modal/src/components/WalletsModal/components/ConnectWalletModal/index.ts b/packages/connect-wallet-modal/src/components/WalletsModal/components/ConnectWalletModal/index.ts new file mode 100644 index 00000000..423a5eae --- /dev/null +++ b/packages/connect-wallet-modal/src/components/WalletsModal/components/ConnectWalletModal/index.ts @@ -0,0 +1 @@ +export * from './ConnectWalletModal'; diff --git a/packages/connect-wallet-modal/src/components/WalletsModal/components/ConnectWalletModal/styles.tsx b/packages/connect-wallet-modal/src/components/WalletsModal/components/ConnectWalletModal/styles.tsx new file mode 100644 index 00000000..f61dd1db --- /dev/null +++ b/packages/connect-wallet-modal/src/components/WalletsModal/components/ConnectWalletModal/styles.tsx @@ -0,0 +1,231 @@ +import React from 'react'; +import styled, { css } from '@reef-knot/ui-react/styled-wrapper'; +import { Input } from '@lidofinance/lido-ui'; + +const SCROLLBAR_WIDTH = 10; + +const modalContentCss = css` + ${({ theme }) => css` + padding: 0 ${theme.spaceMap.xxl}px; + width: 100%; + height: fit-content; + box-sizing: border-box; + + ${theme.mediaQueries.md} { + padding: 0 ${theme.spaceMap.lg}px; + } + `} +`; + +export const ContentHeader = styled.div` + ${modalContentCss}; + ${({ theme }) => css` + margin-bottom: ${theme.spaceMap.md}px; + `} +`; + +export const WalletsButtonsScrollBox = styled.div<{ $isCompact: boolean }>` + ${({ theme, $isCompact }) => css` + display: flex; + overflow-y: scroll; + overflow-x: hidden; + -webkit-overflow-scrolling: touch; + + ${$isCompact + ? css` + max-height: 300px; + ` + : css` + height: 300px; + `} + + @supports selector(::-webkit-scrollbar) { + &::-webkit-scrollbar-track { + border-radius: 30px; + background-color: transparent; + } + + &::-webkit-scrollbar { + width: ${SCROLLBAR_WIDTH}px; + background-color: transparent; + } + + &::-webkit-scrollbar-thumb { + border-style: solid; + border-color: transparent; + border-width: 2px; + border-radius: 5px; + background-clip: content-box; + background-color: ${theme.colors.border}; + + &:hover { + border-width: 0; + } + } + } + `} +`; + +export const WalletsButtonsContainer = styled.div<{ + $buttonsFullWidth: boolean; + $isCompact?: boolean; +}>` + ${modalContentCss}; + ${({ theme, $buttonsFullWidth, $isCompact }) => css` + padding-right: calc(${theme.spaceMap.xxl}px - ${SCROLLBAR_WIDTH}px); + padding-bottom: ${theme.spaceMap.xxl}px; + height: fit-content; + + display: grid; + grid-template-columns: ${$buttonsFullWidth ? '100%' : 'repeat(2, 1fr)'}; + grid-auto-rows: ${$isCompact ? 64 : 80}px; + grid-gap: 10px; + + ${theme.mediaQueries.md} { + padding-bottom: ${theme.spaceMap.lg}px; + grid-template-columns: 100%; + } + `} +`; + +export const MoreWalletsToggleButton = styled.button` + ${({ theme }) => css` + border: none; + background: none; + display: flex; + width: 100%; + align-items: center; + justify-content: center; + padding: ${theme.spaceMap.md}px; + font-size: ${theme.fontSizesMap.xxs}px; + font-weight: 700; + color: ${theme.colors.primary}; + border-top: 1px solid ${theme.colors.border}; + cursor: pointer; + border-radius: 0 0 ${theme.borderRadiusesMap.xl}px + ${theme.borderRadiusesMap.xl}px; + transition: backround-color ease 0.4s; + overflow: hidden; + + svg { + display: block; + } + + &:focus, + &:hover { + outline: none; + background-color: ${theme.colors.background}; + } + `} +`; + +export const MoreWalletsText = styled.div` + ${({ theme }) => css` + margin-left: ${theme.spaceMap.xs}px; + `} +`; + +export const Subtitle = styled.div` + ${({ theme }) => css` + font-size: ${theme.fontSizesMap.xs}px; + font-weight: 700; + `} +`; + +export const WalletInput = styled(Input)` + ${({ theme }) => css` + margin-top: ${theme.spaceMap.sm}px; + height: 44px; + width: 100%; + + > span { + padding-top: 0; + padding-bottom: 0; + } + + input { + ::placeholder { + color: ${theme.colors.textSecondary}; + opacity: 0.5; + } + } + `} +`; + +export const SearchIconWrap = styled.span` + width: 14px; + + svg { + display: block; + } +`; + +export const InputClearButton = styled.button` + border: none; + background: none; + cursor: pointer; + + svg { + display: block; + } +`; + +export const IconInputClear = () => ( + + + +); + +export const IconMoreWallets = () => ( + + + +); + +export const IconSearch = () => ( + + + + +); diff --git a/packages/connect-wallet-modal/src/components/WalletsModal/components/EagerConnectModal.tsx b/packages/connect-wallet-modal/src/components/WalletsModal/components/EagerConnectModal/EagerConnectModal.tsx similarity index 72% rename from packages/connect-wallet-modal/src/components/WalletsModal/components/EagerConnectModal.tsx rename to packages/connect-wallet-modal/src/components/WalletsModal/components/EagerConnectModal/EagerConnectModal.tsx index b90d161a..f230045b 100644 --- a/packages/connect-wallet-modal/src/components/WalletsModal/components/EagerConnectModal.tsx +++ b/packages/connect-wallet-modal/src/components/WalletsModal/components/EagerConnectModal/EagerConnectModal.tsx @@ -1,7 +1,6 @@ import React, { useState } from 'react'; import { Button, Modal } from '@reef-knot/ui-react'; -import styled, { css } from '@reef-knot/ui-react/styled-wrapper'; -import { CommonButtonsContainer } from '../styles'; +import { CommonButtonsContainer, ErrorBlock } from './styles'; import { useReefKnotContext, getUnsupportedChainError, @@ -13,19 +12,6 @@ export type AcceptTermsModalProps = React.PropsWithChildren<{ initialError: Error | undefined; }>; -const ErrorBlock = styled.div` - ${({ theme: { fontSizesMap, spaceMap, borderRadiusesMap } }) => css` - background: var(--lido-color-error); - color: var(--lido-color-errorContrast); - font-size: ${fontSizesMap.xxs}px; - line-height: 1.6em; - padding: ${spaceMap.lg}px; - margin-top: ${spaceMap.sm}px; - margin-bottom: ${spaceMap.md}px; - border-radius: ${borderRadiusesMap.lg}px; - `} -`; - export const EagerConnectModal = ({ tryConnection, initialError, diff --git a/packages/connect-wallet-modal/src/components/WalletsModal/components/EagerConnectModal/index.ts b/packages/connect-wallet-modal/src/components/WalletsModal/components/EagerConnectModal/index.ts new file mode 100644 index 00000000..6a1cd2a9 --- /dev/null +++ b/packages/connect-wallet-modal/src/components/WalletsModal/components/EagerConnectModal/index.ts @@ -0,0 +1 @@ +export * from './EagerConnectModal'; diff --git a/packages/connect-wallet-modal/src/components/WalletsModal/components/EagerConnectModal/styles.ts b/packages/connect-wallet-modal/src/components/WalletsModal/components/EagerConnectModal/styles.ts new file mode 100644 index 00000000..5f52bb47 --- /dev/null +++ b/packages/connect-wallet-modal/src/components/WalletsModal/components/EagerConnectModal/styles.ts @@ -0,0 +1,18 @@ +import styled, { css } from '@reef-knot/ui-react/styled-wrapper'; + +export const ErrorBlock = styled.div` + ${({ theme: { fontSizesMap, spaceMap, borderRadiusesMap } }) => css` + background: var(--lido-color-error); + color: var(--lido-color-errorContrast); + font-size: ${fontSizesMap.xxs}px; + line-height: 1.6em; + padding: ${spaceMap.lg}px; + margin-top: ${spaceMap.sm}px; + margin-bottom: ${spaceMap.md}px; + border-radius: ${borderRadiusesMap.lg}px; + `} +`; + +export const CommonButtonsContainer = styled.div` + padding-bottom: 12px; +`; diff --git a/packages/connect-wallet-modal/src/components/WalletsModal/components/EmptyWalletsList/EmptyWalletsList.tsx b/packages/connect-wallet-modal/src/components/WalletsModal/components/EmptyWalletsList/EmptyWalletsList.tsx new file mode 100644 index 00000000..62d1a651 --- /dev/null +++ b/packages/connect-wallet-modal/src/components/WalletsModal/components/EmptyWalletsList/EmptyWalletsList.tsx @@ -0,0 +1,33 @@ +import React from 'react'; +import { Wrap, ContentWrap, WalletIcon } from './styles'; +import { Button, Text } from '@lidofinance/lido-ui'; + +type EmptyWalletsListProps = { + inputValue: string; + onClickClear: React.MouseEventHandler; +}; + +export const EmptyWalletsList = ({ + inputValue, + onClickClear, +}: EmptyWalletsListProps) => { + return ( + + + + + Search result:{' '} + + {inputValue} + + + + Nothing found + + + + + ); +}; diff --git a/packages/connect-wallet-modal/src/components/WalletsModal/components/EmptyWalletsList/index.ts b/packages/connect-wallet-modal/src/components/WalletsModal/components/EmptyWalletsList/index.ts new file mode 100644 index 00000000..a9329fe1 --- /dev/null +++ b/packages/connect-wallet-modal/src/components/WalletsModal/components/EmptyWalletsList/index.ts @@ -0,0 +1 @@ +export * from './EmptyWalletsList'; diff --git a/packages/connect-wallet-modal/src/components/WalletsModal/components/EmptyWalletsList/styles.tsx b/packages/connect-wallet-modal/src/components/WalletsModal/components/EmptyWalletsList/styles.tsx new file mode 100644 index 00000000..a608b2b9 --- /dev/null +++ b/packages/connect-wallet-modal/src/components/WalletsModal/components/EmptyWalletsList/styles.tsx @@ -0,0 +1,46 @@ +import React from 'react'; +import styled, { css } from '@reef-knot/ui-react/styled-wrapper'; + +export const Wrap = styled.div` + ${({ theme }) => css` + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + width: 100%; + height: 100%; + gap: ${theme.spaceMap.md}px; + + svg { + display: block; + fill: ${theme.name === 'dark' ? '#27272E' : '#EFF2F6'}; + } + `} +`; + +export const ContentWrap = styled.div` + ${({ theme }) => css` + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: ${theme.spaceMap.xs}px; + `} +`; + +export const WalletIcon = () => ( + + + + +); diff --git a/packages/connect-wallet-modal/src/components/WalletsModal/getWalletsButtons.ts b/packages/connect-wallet-modal/src/components/WalletsModal/getWalletsButtons.ts deleted file mode 100644 index 7a30753a..00000000 --- a/packages/connect-wallet-modal/src/components/WalletsModal/getWalletsButtons.ts +++ /dev/null @@ -1,66 +0,0 @@ -import React from 'react'; -import { - ButtonComponentsByConnectorId, - ButtonsCommonProps, - WalletsModalProps, -} from './types'; -import { WalletAdapterData } from '@reef-knot/types'; - -export function addWalletTo( - walletsList: string[], - walletId: string, - condition: boolean, // meant to be a wallet-detector function result -) { - // If condition is true (usually means that a wallet is detected), - // move it to the first place in the wallets list, so a user can see it right away - if (condition) { - walletsList.unshift(walletId); - } else { - walletsList.push(walletId); - } -} - -export function getWalletsButtons({ - commonProps, - buttonComponentsByConnectorId, - walletDataList = [], - hiddenWallets = [], -}: { - commonProps: ButtonsCommonProps; - buttonComponentsByConnectorId: ButtonComponentsByConnectorId; - walletDataList: WalletAdapterData[]; - hiddenWallets: WalletsModalProps['hiddenWallets']; -}) { - let wallets: string[] = []; - - walletDataList.forEach((walletData) => { - const { walletId, detector, autoConnectOnly } = walletData; - if (!autoConnectOnly) { - addWalletTo(wallets, walletId, !!detector?.()); - } - }); - - wallets = [...wallets].filter( - // Filtering wallets marked as hidden - (wallet) => !hiddenWallets.includes(wallet), - ); - - return wallets.map((walletId) => { - // Handle new wallet adapters - const walletData = walletDataList.find( - (data) => data.walletId === walletId, - ); - if (!walletData) throw 'walletData is not found in the walletDataList'; - const connectorId = walletData.connector.id; - - const component = - buttonComponentsByConnectorId[connectorId] ?? - buttonComponentsByConnectorId.default; - - return React.createElement(component, { - key: walletId, - ...commonProps, - ...walletData, - }); - }); -} diff --git a/packages/connect-wallet-modal/src/components/WalletsModal/styles.tsx b/packages/connect-wallet-modal/src/components/WalletsModal/styles.tsx deleted file mode 100644 index 56ca5da9..00000000 --- a/packages/connect-wallet-modal/src/components/WalletsModal/styles.tsx +++ /dev/null @@ -1,66 +0,0 @@ -import styled, { css } from '@reef-knot/ui-react/styled-wrapper'; - -const GAP_BOTTOM = '32px'; - -export const WalletsButtonsContainer = styled.div<{ - $buttonsFullWidth: boolean; -}>` - ${({ theme, $buttonsFullWidth }) => css` - box-sizing: content-box; - max-height: 370px; - display: grid; - grid-template-columns: ${$buttonsFullWidth ? '100%' : 'repeat(5, 112px)'}; - grid-auto-rows: 116px; - grid-gap: 10px; - padding-bottom: ${GAP_BOTTOM}; - - @media screen and (max-width: 720px) { - grid-template-columns: ${$buttonsFullWidth ? '100%' : 'repeat(3, 1fr)'}; - } - - /* === SCROLLBAR ADJUSTING START === */ - overflow-y: scroll; - overflow-x: hidden; - - @supports (scrollbar-width: thin) { - scrollbar-width: thin; - scrollbar-color: ${theme.colors.border} transparent; - padding-right: 12px; - margin-right: -12px; - } - - @supports selector(::-webkit-scrollbar) { - padding-right: 6px; - margin-right: -16px; - - &::-webkit-scrollbar-track { - margin-bottom: ${GAP_BOTTOM}; - border-radius: 30px; - background-color: transparent; - } - - &::-webkit-scrollbar { - width: 10px; - background-color: transparent; - } - - &::-webkit-scrollbar-thumb { - border-style: solid; - border-color: transparent; - border-width: 2px; - border-radius: 30px; - background-clip: content-box; - background-color: ${theme.colors.border}; - - &:hover { - border-width: 0; - } - } - /* === SCROLLBAR ADJUSTING END === */ - } - `} -`; - -export const CommonButtonsContainer = styled.div` - padding-bottom: 12px; -`; diff --git a/packages/connect-wallet-modal/src/components/WalletsModal/types.ts b/packages/connect-wallet-modal/src/components/WalletsModal/types.ts index b125b02c..8151aad7 100644 --- a/packages/connect-wallet-modal/src/components/WalletsModal/types.ts +++ b/packages/connect-wallet-modal/src/components/WalletsModal/types.ts @@ -10,7 +10,7 @@ export type Metrics = { }; export type ButtonComponentsByConnectorId = { - [K: string]: ComponentType; + [K: string]: ComponentType; }; export type WalletsModalProps = ModalProps & { @@ -30,4 +30,5 @@ export type ButtonsCommonProps = { onConnect?: () => void; shouldInvertWalletIcon: boolean; metrics?: Metrics; + isCompact?: boolean; }; diff --git a/packages/connect-wallet-modal/src/connectButtons/types.ts b/packages/connect-wallet-modal/src/connectButtons/types.ts index 300cb613..2b9451c2 100644 --- a/packages/connect-wallet-modal/src/connectButtons/types.ts +++ b/packages/connect-wallet-modal/src/connectButtons/types.ts @@ -5,6 +5,7 @@ import { ButtonsCommonProps } from '../components'; export type ConnectButtonProps = { icon: WalletAdapterData['icon']; shouldInvertWalletIcon?: boolean; + isCompact?: boolean; } & ButtonProps; export type ConnectWalletProps = ButtonsCommonProps & ButtonProps; diff --git a/packages/ui-react/src/components/modal/Modal.tsx b/packages/ui-react/src/components/modal/Modal.tsx index 2ff532b6..7c9683aa 100644 --- a/packages/ui-react/src/components/modal/Modal.tsx +++ b/packages/ui-react/src/components/modal/Modal.tsx @@ -24,6 +24,8 @@ function Modal(props: ModalProps, ref?: ForwardedRef) { center = false, extra, open, + widthClamp, + omitContentStyle, ...rest } = props; const { onClose, onBack } = props; @@ -55,11 +57,15 @@ function Modal(props: ModalProps, ref?: ForwardedRef) { return ( - + {modalHeader} {withSubtitle && {subtitle}} - {children} + {omitContentStyle ? ( + children + ) : ( + {children} + )} {extra} diff --git a/packages/ui-react/src/components/modal/ModalStyles.tsx b/packages/ui-react/src/components/modal/ModalStyles.tsx index 2a52fdd6..88f124f4 100644 --- a/packages/ui-react/src/components/modal/ModalStyles.tsx +++ b/packages/ui-react/src/components/modal/ModalStyles.tsx @@ -5,13 +5,21 @@ import { ButtonIcon } from '../button'; const MAX_INNER_WIDTH = 600; -export const ModalStyle = styled.div<{ $center: boolean }>` +export const ModalStyle = styled.div<{ $center: boolean; $width?: number }>` ${({ theme: { fontSizesMap, borderRadiusesMap, colors, boxShadows }, $center, + $width, }) => css` - width: 100%; - min-width: 280px; + ${$width + ? css` + width: ${$width}px; + max-width: 100%; + ` + : css` + width: 100%; + min-width: 280px; + `} font-weight: 400; font-size: ${fontSizesMap.xs}px; line-height: 1.5em; diff --git a/packages/ui-react/src/components/modal/types.tsx b/packages/ui-react/src/components/modal/types.tsx index 5d4ca0c1..a7a7ffc7 100644 --- a/packages/ui-react/src/components/modal/types.tsx +++ b/packages/ui-react/src/components/modal/types.tsx @@ -25,6 +25,8 @@ export type ModalProps = { extra?: React.ReactNode; center?: boolean; open?: boolean; + omitContentStyle?: boolean; + widthClamp?: number; } & Omit; export type ModalExtraProps = CommonComponentProps<'div'>; From be7772aa675a8318f68f37a4670db916f1be4cdf Mon Sep 17 00:00:00 2001 From: Dmitrii Podlesnyi Date: Tue, 19 Mar 2024 14:13:48 +0400 Subject: [PATCH 02/15] feat: wallets modal display priority config --- .../WalletsModal/WalletsModalForEth.tsx | 36 +++++++++++- .../ConnectWalletModal/ConnectWalletModal.tsx | 32 ++++++---- .../ConnectWalletModal/getWalletsList.ts | 38 ------------ .../ConnectWalletModal/sortWalletsList.ts | 58 +++++++++++++++++++ .../src/components/WalletsModal/types.ts | 7 +++ 5 files changed, 119 insertions(+), 52 deletions(-) delete mode 100644 packages/connect-wallet-modal/src/components/WalletsModal/components/ConnectWalletModal/getWalletsList.ts create mode 100644 packages/connect-wallet-modal/src/components/WalletsModal/components/ConnectWalletModal/sortWalletsList.ts diff --git a/packages/connect-wallet-modal/src/components/WalletsModal/WalletsModalForEth.tsx b/packages/connect-wallet-modal/src/components/WalletsModal/WalletsModalForEth.tsx index 26d946b6..04893ce5 100644 --- a/packages/connect-wallet-modal/src/components/WalletsModal/WalletsModalForEth.tsx +++ b/packages/connect-wallet-modal/src/components/WalletsModal/WalletsModalForEth.tsx @@ -8,7 +8,11 @@ import { ConnectBrowser, } from '../../connectButtons'; import { WalletsModal } from './WalletsModal'; -import type { ButtonComponentsByConnectorId, WalletsModalProps } from './types'; +import type { + ButtonComponentsByConnectorId, + WalletsDisplayPriorityConfig, + WalletsModalProps, +} from './types'; const buttonComponentsByConnectorId: ButtonComponentsByConnectorId = { default: ConnectInjected, // fallback @@ -18,10 +22,33 @@ const buttonComponentsByConnectorId: ButtonComponentsByConnectorId = { ledgerHID: ConnectLedger, }; +const walletsDisplayPriorityDefault: WalletsDisplayPriorityConfig = { + promoted: ['okx', 'browserExtension'], + default: [ + 'metamask', + 'ledgerHID', + 'ledgerLive', + 'walletconnect', + 'coinbase', + 'trust', + 'exodus', + 'brave', + 'bitkeep', + 'xdefi', + 'imToken', + 'coin98', + 'ambire', + 'safe', + 'dAppBrowserInjected', + ], +}; + type WalletsModalForEthProps = Omit< WalletsModalProps, - 'buttonComponentsByConnectorId' | 'walletDataList' ->; + 'buttonComponentsByConnectorId' | 'walletDataList' | 'walletsDisplayPriority' +> & { + walletsDisplayPriority?: WalletsDisplayPriorityConfig; +}; export function WalletsModalForEth(props: WalletsModalForEthProps) { const { walletDataList } = useReefKnotContext(); @@ -30,6 +57,9 @@ export function WalletsModalForEth(props: WalletsModalForEthProps) { ); diff --git a/packages/connect-wallet-modal/src/components/WalletsModal/components/ConnectWalletModal/ConnectWalletModal.tsx b/packages/connect-wallet-modal/src/components/WalletsModal/components/ConnectWalletModal/ConnectWalletModal.tsx index cb2e46d0..abcf96d1 100644 --- a/packages/connect-wallet-modal/src/components/WalletsModal/components/ConnectWalletModal/ConnectWalletModal.tsx +++ b/packages/connect-wallet-modal/src/components/WalletsModal/components/ConnectWalletModal/ConnectWalletModal.tsx @@ -28,7 +28,7 @@ import { IconInputClear, } from './styles'; -import { getWalletsList } from './getWalletsList'; +import { sortWalletsList } from './sortWalletsList'; type ConnectWalletModalProps = WalletsModalProps & { onCloseSuccess?: () => void; @@ -49,6 +49,8 @@ export const ConnectWalletModal = ({ buttonComponentsByConnectorId, walletDataList, hiddenWallets, + walletsDisplayPriority, + walletsDisplayInitialCount = 6, } = passedDownProps; const { termsChecked } = useReefKnotModal(); @@ -58,15 +60,16 @@ export const ConnectWalletModal = ({ const [isShownOtherWallets, setShowOtherWallets] = useState(false); const walletsListFull = useMemo(() => { - return getWalletsList({ + return sortWalletsList({ hiddenWallets, walletDataList, + walletsDisplayPriority, }); - }, [hiddenWallets, walletDataList]); + }, [hiddenWallets, walletDataList, walletsDisplayPriority]); const walletsList = useMemo(() => { if (!isShownOtherWallets) { - return walletsListFull.slice(0, 6); + return walletsListFull.slice(0, walletsDisplayInitialCount); } if (inputValue) { @@ -76,7 +79,12 @@ export const ConnectWalletModal = ({ } return walletsListFull; - }, [inputValue, walletsListFull, isShownOtherWallets]); + }, [ + inputValue, + walletsListFull, + isShownOtherWallets, + walletsDisplayInitialCount, + ]); useEffect(() => { if (isShownOtherWallets) { @@ -170,12 +178,14 @@ export const ConnectWalletModal = ({ )} - - - - {isShownOtherWallets ? 'Hide wallets' : 'Other wallets'} - - + {(walletsListFull.length > walletsList.length || isShownOtherWallets) && ( + + + + {isShownOtherWallets ? 'Hide wallets' : 'Other wallets'} + + + )} ); }; diff --git a/packages/connect-wallet-modal/src/components/WalletsModal/components/ConnectWalletModal/getWalletsList.ts b/packages/connect-wallet-modal/src/components/WalletsModal/components/ConnectWalletModal/getWalletsList.ts deleted file mode 100644 index 158cbe67..00000000 --- a/packages/connect-wallet-modal/src/components/WalletsModal/components/ConnectWalletModal/getWalletsList.ts +++ /dev/null @@ -1,38 +0,0 @@ -import { WalletAdapterData } from '@reef-knot/types'; -import { WalletsModalProps } from '../../types'; - -type GetWalletsListArgs = { - walletDataList: WalletAdapterData[]; - hiddenWallets: WalletsModalProps['hiddenWallets']; -}; - -export function getWalletsList({ - walletDataList = [], - hiddenWallets = [], -}: GetWalletsListArgs) { - const [detected, undetected] = walletDataList.reduce< - [WalletAdapterData[], WalletAdapterData[]] - >( - (walletsList, walletData) => { - const { walletId, detector, autoConnectOnly } = walletData; - - // Filtering wallets marked as hidden and auto connect only - if (autoConnectOnly || hiddenWallets.includes(walletId)) { - return walletsList; - } - - // If condition is true (usually means that a wallet is detected), - // move it to the first place in the wallets list, so a user can see it right away - if (detector?.()) { - walletsList[0].push(walletData); - } else { - walletsList[1].push(walletData); - } - - return walletsList; - }, - [[], []], - ); - - return [...detected, ...undetected]; -} diff --git a/packages/connect-wallet-modal/src/components/WalletsModal/components/ConnectWalletModal/sortWalletsList.ts b/packages/connect-wallet-modal/src/components/WalletsModal/components/ConnectWalletModal/sortWalletsList.ts new file mode 100644 index 00000000..e83e8525 --- /dev/null +++ b/packages/connect-wallet-modal/src/components/WalletsModal/components/ConnectWalletModal/sortWalletsList.ts @@ -0,0 +1,58 @@ +import { WalletAdapterData } from '@reef-knot/types'; +import { WalletsDisplayPriorityConfig, WalletsModalProps } from '../../types'; + +type GetWalletsListArgs = { + walletDataList: WalletAdapterData[]; + hiddenWallets: WalletsModalProps['hiddenWallets']; + walletsDisplayPriority: WalletsDisplayPriorityConfig; +}; + +export function sortWalletsList({ + walletDataList = [], + hiddenWallets = [], + walletsDisplayPriority, +}: GetWalletsListArgs) { + const priority = [ + ...walletsDisplayPriority.promoted, + ...walletsDisplayPriority.default, + ]; + + const sortedWalletData = [...walletDataList].sort( + (a, b) => priority.indexOf(a.walletId) - priority.indexOf(b.walletId), + ); + + const filteredWalletData = sortedWalletData.reduce( + (walletsList, walletData) => { + const { walletId, detector, autoConnectOnly } = walletData; + + // Filtering wallets marked as hidden and auto connect only + if (autoConnectOnly || hiddenWallets.includes(walletId)) { + return walletsList; + } + + if (walletsDisplayPriority.promoted.includes(walletId)) { + // Put the promoted wallets on the first place, above all another + walletsList.promoted.push(walletData); + } else if (detector?.()) { + // If condition is true (usually means that a wallet is detected), + // move it to the first place in the wallets list, so a user can see it right away + walletsList.detected.push(walletData); + } else { + walletsList.default.push(walletData); + } + + return walletsList; + }, + { + promoted: [] as WalletAdapterData[], + detected: [] as WalletAdapterData[], + default: [] as WalletAdapterData[], + }, + ); + + return [ + ...filteredWalletData.promoted, + ...filteredWalletData.detected, + ...filteredWalletData.default, + ]; +} diff --git a/packages/connect-wallet-modal/src/components/WalletsModal/types.ts b/packages/connect-wallet-modal/src/components/WalletsModal/types.ts index 8151aad7..ad437291 100644 --- a/packages/connect-wallet-modal/src/components/WalletsModal/types.ts +++ b/packages/connect-wallet-modal/src/components/WalletsModal/types.ts @@ -13,6 +13,11 @@ export type ButtonComponentsByConnectorId = { [K: string]: ComponentType; }; +export type WalletsDisplayPriorityConfig = { + promoted: string[]; + default: string[]; +}; + export type WalletsModalProps = ModalProps & { buttonComponentsByConnectorId: ButtonComponentsByConnectorId; walletDataList: WalletAdapterData[]; @@ -22,6 +27,8 @@ export type WalletsModalProps = ModalProps & { metrics?: Metrics; termsLink?: string; privacyNoticeLink?: string; + walletsDisplayPriority: WalletsDisplayPriorityConfig; + walletsDisplayInitialCount?: number; }; export type ButtonsCommonProps = { From 5d2ea10795b7341f80e285a90487e1dc868ce532 Mon Sep 17 00:00:00 2001 From: Dmitrii Podlesnyi Date: Tue, 19 Mar 2024 14:14:18 +0400 Subject: [PATCH 03/15] feat: wallets modal styles updated --- .../components/ConnectWalletModal/styles.tsx | 12 +++++++++++- .../browserExtension/src/icons/browserExtension.svg | 11 +---------- 2 files changed, 12 insertions(+), 11 deletions(-) diff --git a/packages/connect-wallet-modal/src/components/WalletsModal/components/ConnectWalletModal/styles.tsx b/packages/connect-wallet-modal/src/components/WalletsModal/components/ConnectWalletModal/styles.tsx index f61dd1db..021a3fe1 100644 --- a/packages/connect-wallet-modal/src/components/WalletsModal/components/ConnectWalletModal/styles.tsx +++ b/packages/connect-wallet-modal/src/components/WalletsModal/components/ConnectWalletModal/styles.tsx @@ -111,11 +111,21 @@ export const MoreWalletsToggleButton = styled.button` display: block; } - &:focus, &:hover { outline: none; background-color: ${theme.colors.background}; } + + /** prevents after-mouse-click focus */ + &:focus:not(:focus-visible) { + outline: none; + background-color: none; + } + + &:focus:focus-visible { + outline: none; + background-color: ${theme.colors.background}; + } `} `; diff --git a/packages/wallets/browserExtension/src/icons/browserExtension.svg b/packages/wallets/browserExtension/src/icons/browserExtension.svg index 874c8223..e9572d38 100644 --- a/packages/wallets/browserExtension/src/icons/browserExtension.svg +++ b/packages/wallets/browserExtension/src/icons/browserExtension.svg @@ -1,10 +1 @@ - - - - - - - - - - + From 3ba1b8f12d9cf03ee9f379a9aa507af337f944d4 Mon Sep 17 00:00:00 2001 From: Dmitrii Podlesnyi Date: Tue, 19 Mar 2024 15:06:28 +0400 Subject: [PATCH 04/15] feat: wallets modal dont have a wallet link prop support --- apps/demo-react/components/WalletsModal.tsx | 4 ++++ .../components/ConnectWalletModal/ConnectWalletModal.tsx | 6 +++++- .../src/components/WalletsModal/types.ts | 1 + 3 files changed, 10 insertions(+), 1 deletion(-) diff --git a/apps/demo-react/components/WalletsModal.tsx b/apps/demo-react/components/WalletsModal.tsx index a2c0a209..a5052bcd 100644 --- a/apps/demo-react/components/WalletsModal.tsx +++ b/apps/demo-react/components/WalletsModal.tsx @@ -1,6 +1,9 @@ import { WalletsModalForEth } from 'reef-knot/connect-wallet-modal'; import metrics from '../util/metrics'; +const LINK_DONT_HAVE_WALLET_DEFAULT = + 'https://support.metamask.io/hc/en-us/articles/360015489531-Getting-started-with-MetaMask'; + export default function WalletsModal(props: { isDarkTheme: boolean }) { const { isDarkTheme } = props; @@ -8,6 +11,7 @@ export default function WalletsModal(props: { isDarkTheme: boolean }) { ); } diff --git a/packages/connect-wallet-modal/src/components/WalletsModal/components/ConnectWalletModal/ConnectWalletModal.tsx b/packages/connect-wallet-modal/src/components/WalletsModal/components/ConnectWalletModal/ConnectWalletModal.tsx index abcf96d1..646c0290 100644 --- a/packages/connect-wallet-modal/src/components/WalletsModal/components/ConnectWalletModal/ConnectWalletModal.tsx +++ b/packages/connect-wallet-modal/src/components/WalletsModal/components/ConnectWalletModal/ConnectWalletModal.tsx @@ -51,6 +51,7 @@ export const ConnectWalletModal = ({ hiddenWallets, walletsDisplayPriority, walletsDisplayInitialCount = 6, + linkDontHaveWallet, } = passedDownProps; const { termsChecked } = useReefKnotModal(); @@ -122,7 +123,10 @@ export const ConnectWalletModal = ({ - Choose wallet I don't have a wallet + Choose wallet{' '} + {linkDontHaveWallet && ( + I don't have a wallet + )} {isShownOtherWallets && ( Date: Wed, 20 Mar 2024 16:52:07 +0400 Subject: [PATCH 05/15] feat: walletsDisplayConfig and walletsPinnedConfig props for wallets modal --- apps/demo-react/components/WalletsModal.tsx | 1 + packages/connect-wallet-modal/README.md | 23 ++++- .../WalletsModal/WalletsModalForEth.tsx | 58 ++++++++----- .../ConnectWalletModal/ConnectWalletModal.tsx | 11 +-- .../ConnectWalletModal/sortWalletsList.ts | 47 +++++----- .../src/components/WalletsModal/types.ts | 23 ++--- packages/types/src/walletAdapter.ts | 2 - packages/wallets-list/src/ethereum.ts | 87 +++++++++++-------- packages/wallets/ambire/src/index.ts | 7 +- packages/wallets/bitkeep/src/index.ts | 15 ++-- packages/wallets/brave/src/index.ts | 11 ++- .../wallets/browserExtension/src/index.ts | 4 +- packages/wallets/coin98/src/index.ts | 11 ++- packages/wallets/coinbase/src/index.ts | 7 +- .../wallets/dappBrowserInjected/src/index.ts | 7 +- packages/wallets/exodus/src/index.ts | 11 ++- packages/wallets/imtoken/src/index.ts | 11 ++- packages/wallets/ledger-hid/src/index.ts | 7 +- packages/wallets/ledger-live/src/index.ts | 7 +- packages/wallets/metamask/src/index.ts | 7 +- packages/wallets/okx/src/index.ts | 11 ++- packages/wallets/safe/src/index.ts | 7 +- packages/wallets/trust/src/index.ts | 11 ++- packages/wallets/walletconnect/src/index.ts | 7 +- packages/wallets/xdefi/src/index.ts | 11 ++- 25 files changed, 242 insertions(+), 162 deletions(-) diff --git a/apps/demo-react/components/WalletsModal.tsx b/apps/demo-react/components/WalletsModal.tsx index a5052bcd..f122d1ae 100644 --- a/apps/demo-react/components/WalletsModal.tsx +++ b/apps/demo-react/components/WalletsModal.tsx @@ -12,6 +12,7 @@ export default function WalletsModal(props: { isDarkTheme: boolean }) { metrics={metrics} shouldInvertWalletIcon={isDarkTheme} linkDontHaveWallet={LINK_DONT_HAVE_WALLET_DEFAULT} + walletsPinnedConfig={['okx', 'browserExtension']} /> ); } diff --git a/packages/connect-wallet-modal/README.md b/packages/connect-wallet-modal/README.md index 69f67ae2..1eb7d1a7 100644 --- a/packages/connect-wallet-modal/README.md +++ b/packages/connect-wallet-modal/README.md @@ -43,11 +43,26 @@ Use it like this: ``` -#### How to hide a wallet -You can hide one or several wallet connection buttons from the list of wallets in the modal. -Use the `hiddenWallets` property like this: +#### How to configure the wallets list +You can control displayed wallet connection buttons from the list of wallets in the modal. +Wallets will be displayed in the specified sequence. +Use the `walletsDisplayConfig` property like this: ```tsx +``` + +#### How to pin certain wallet at top of the list +You can pin certain wallets to display it at the top of the list. +Use the `walletsPinnedConfig` property like this: +```tsx + ``` diff --git a/packages/connect-wallet-modal/src/components/WalletsModal/WalletsModalForEth.tsx b/packages/connect-wallet-modal/src/components/WalletsModal/WalletsModalForEth.tsx index 04893ce5..aeb2c74f 100644 --- a/packages/connect-wallet-modal/src/components/WalletsModal/WalletsModalForEth.tsx +++ b/packages/connect-wallet-modal/src/components/WalletsModal/WalletsModalForEth.tsx @@ -8,46 +8,53 @@ import { ConnectBrowser, } from '../../connectButtons'; import { WalletsModal } from './WalletsModal'; -import type { - ButtonComponentsByConnectorId, - WalletsDisplayPriorityConfig, - WalletsModalProps, -} from './types'; +import type { WalletIdsEthereum } from '@reef-knot/wallets-list'; +import type { WalletsModalProps } from './types'; -const buttonComponentsByConnectorId: ButtonComponentsByConnectorId = { - default: ConnectInjected, // fallback - browserExtension: ConnectBrowser, - walletConnect: ConnectWC, - coinbaseWallet: ConnectCoinbase, - ledgerHID: ConnectLedger, -}; +type WalletsModalEthProps = WalletsModalProps; + +const buttonComponentsByConnectorId: WalletsModalEthProps['buttonComponentsByConnectorId'] = + { + default: ConnectInjected, // fallback + browserExtension: ConnectBrowser, + walletconnect: ConnectWC, + coinbase: ConnectCoinbase, + ledgerHID: ConnectLedger, + }; -const walletsDisplayPriorityDefault: WalletsDisplayPriorityConfig = { - promoted: ['okx', 'browserExtension'], - default: [ +const WALLETS_DISPLAY_CONFIG_DEFAULT: WalletsModalEthProps['walletsDisplayConfig'] = + [ + 'browserExtension', 'metamask', 'ledgerHID', 'ledgerLive', 'walletconnect', 'coinbase', 'trust', + 'okx', 'exodus', 'brave', - 'bitkeep', + 'bitget', 'xdefi', 'imToken', 'coin98', 'ambire', 'safe', - 'dAppBrowserInjected', - ], -}; + 'dappBrowserInjected', + ]; + +const WALLETS_PINNED_CONFIG_DEFAULT: WalletsModalEthProps['walletsPinnedConfig'] = + ['browserExtension']; type WalletsModalForEthProps = Omit< - WalletsModalProps, - 'buttonComponentsByConnectorId' | 'walletDataList' | 'walletsDisplayPriority' + WalletsModalEthProps, + | 'buttonComponentsByConnectorId' + | 'walletDataList' + | 'walletsDisplayConfig' + | 'walletsPinnedConfig' > & { - walletsDisplayPriority?: WalletsDisplayPriorityConfig; + walletsDisplayConfig?: WalletsModalEthProps['walletsDisplayConfig']; + walletsPinnedConfig?: WalletsModalEthProps['walletsPinnedConfig']; }; export function WalletsModalForEth(props: WalletsModalForEthProps) { @@ -57,8 +64,11 @@ export function WalletsModalForEth(props: WalletsModalForEthProps) { diff --git a/packages/connect-wallet-modal/src/components/WalletsModal/components/ConnectWalletModal/ConnectWalletModal.tsx b/packages/connect-wallet-modal/src/components/WalletsModal/components/ConnectWalletModal/ConnectWalletModal.tsx index 646c0290..cf9d48c2 100644 --- a/packages/connect-wallet-modal/src/components/WalletsModal/components/ConnectWalletModal/ConnectWalletModal.tsx +++ b/packages/connect-wallet-modal/src/components/WalletsModal/components/ConnectWalletModal/ConnectWalletModal.tsx @@ -48,8 +48,8 @@ export const ConnectWalletModal = ({ metrics, buttonComponentsByConnectorId, walletDataList, - hiddenWallets, - walletsDisplayPriority, + walletsDisplayConfig, + walletsPinnedConfig, walletsDisplayInitialCount = 6, linkDontHaveWallet, } = passedDownProps; @@ -62,11 +62,11 @@ export const ConnectWalletModal = ({ const walletsListFull = useMemo(() => { return sortWalletsList({ - hiddenWallets, walletDataList, - walletsDisplayPriority, + walletsDisplayConfig, + walletsPinnedConfig, }); - }, [hiddenWallets, walletDataList, walletsDisplayPriority]); + }, [walletDataList, walletsDisplayConfig, walletsPinnedConfig]); const walletsList = useMemo(() => { if (!isShownOtherWallets) { @@ -166,6 +166,7 @@ export const ConnectWalletModal = ({ const WalletComponent = buttonComponentsByConnectorId[walletData.connector.id] ?? buttonComponentsByConnectorId.default; + if (!WalletComponent) return null; return ( { + const walletData = walletDataList.find((w) => w.walletId === walletId); - const sortedWalletData = [...walletDataList].sort( - (a, b) => priority.indexOf(a.walletId) - priority.indexOf(b.walletId), - ); + if (!walletData) return walletsList; - const filteredWalletData = sortedWalletData.reduce( - (walletsList, walletData) => { - const { walletId, detector, autoConnectOnly } = walletData; + const { detector, autoConnectOnly } = walletData; // Filtering wallets marked as hidden and auto connect only - if (autoConnectOnly || hiddenWallets.includes(walletId)) { - return walletsList; - } + if (autoConnectOnly) return walletsList; - if (walletsDisplayPriority.promoted.includes(walletId)) { - // Put the promoted wallets on the first place, above all another - walletsList.promoted.push(walletData); + if (walletsPinnedConfig.includes(walletId)) { + // Put the pinned wallets on the first place, above all another + walletsList.pinned.push(walletData); } else if (detector?.()) { // If condition is true (usually means that a wallet is detected), // move it to the first place in the wallets list, so a user can see it right away @@ -44,14 +37,20 @@ export function sortWalletsList({ return walletsList; }, { - promoted: [] as WalletAdapterData[], + pinned: [] as WalletAdapterData[], detected: [] as WalletAdapterData[], default: [] as WalletAdapterData[], }, ); + const pinsSorted = [...filteredWalletData.pinned].sort( + (a, b) => + walletsPinnedConfig.indexOf(a.walletId) - + walletsPinnedConfig.indexOf(b.walletId), + ); + return [ - ...filteredWalletData.promoted, + ...pinsSorted, ...filteredWalletData.detected, ...filteredWalletData.default, ]; diff --git a/packages/connect-wallet-modal/src/components/WalletsModal/types.ts b/packages/connect-wallet-modal/src/components/WalletsModal/types.ts index 7745bbad..25f5cb88 100644 --- a/packages/connect-wallet-modal/src/components/WalletsModal/types.ts +++ b/packages/connect-wallet-modal/src/components/WalletsModal/types.ts @@ -1,6 +1,6 @@ -import { ComponentType } from 'react'; -import { ModalProps } from '@reef-knot/ui-react'; -import { WalletAdapterData } from '@reef-knot/types'; +import type { ComponentType } from 'react'; +import type { ModalProps } from '@reef-knot/ui-react'; +import type { WalletAdapterData } from '@reef-knot/types'; export type Metrics = { events?: { @@ -9,25 +9,20 @@ export type Metrics = { }; }; -export type ButtonComponentsByConnectorId = { - [K: string]: ComponentType; +export type ButtonComponentsByConnectorId = { + [K in I | 'default']?: ComponentType; }; -export type WalletsDisplayPriorityConfig = { - promoted: string[]; - default: string[]; -}; - -export type WalletsModalProps = ModalProps & { - buttonComponentsByConnectorId: ButtonComponentsByConnectorId; +export type WalletsModalProps = ModalProps & { + buttonComponentsByConnectorId: ButtonComponentsByConnectorId; walletDataList: WalletAdapterData[]; - hiddenWallets?: string[]; shouldInvertWalletIcon?: boolean; buttonsFullWidth?: boolean; metrics?: Metrics; termsLink?: string; privacyNoticeLink?: string; - walletsDisplayPriority: WalletsDisplayPriorityConfig; + walletsDisplayConfig: I[]; + walletsPinnedConfig: I[]; walletsDisplayInitialCount?: number; linkDontHaveWallet?: string; }; diff --git a/packages/types/src/walletAdapter.ts b/packages/types/src/walletAdapter.ts index 55c7234e..26b3d751 100644 --- a/packages/types/src/walletAdapter.ts +++ b/packages/types/src/walletAdapter.ts @@ -59,5 +59,3 @@ export interface WalletAdapterArgs { walletconnectProjectId?: string; } export type WalletAdapterType = (args: WalletAdapterArgs) => WalletAdapterData; - -export type WalletsListType = Record; diff --git a/packages/wallets-list/src/ethereum.ts b/packages/wallets-list/src/ethereum.ts index 92d9d710..da176c04 100644 --- a/packages/wallets-list/src/ethereum.ts +++ b/packages/wallets-list/src/ethereum.ts @@ -1,38 +1,51 @@ -import { WalletsListType } from '@reef-knot/types'; -import { BrowserExtension } from '@reef-knot/wallet-adapter-browser-extension'; -import { MetaMask } from '@reef-knot/wallet-adapter-metamask'; -import { Okx } from '@reef-knot/wallet-adapter-okx'; -import { Exodus } from '@reef-knot/wallet-adapter-exodus'; -import { WalletConnect } from '@reef-knot/wallet-adapter-walletconnect'; -import { Ambire } from '@reef-knot/wallet-adapter-ambire'; -import { BitKeep } from '@reef-knot/wallet-adapter-bitkeep'; -import { Coin98 } from '@reef-knot/wallet-adapter-coin98'; -import { Brave } from '@reef-knot/wallet-adapter-brave'; -import { ImToken } from '@reef-knot/wallet-adapter-imtoken'; -import { Trust } from '@reef-knot/wallet-adapter-trust'; -import { Xdefi } from '@reef-knot/wallet-adapter-xdefi'; -import { Coinbase } from '@reef-knot/wallet-adapter-coinbase'; -import { Ledger } from '@reef-knot/wallet-adapter-ledger-hid'; -import { LedgerLive } from '@reef-knot/wallet-adapter-ledger-live'; -import { DAppBrowserInjected } from '@reef-knot/wallet-adapter-dapp-browser-injected'; -import { Safe } from '@reef-knot/wallet-adapter-safe'; +import { + BrowserExtension, + id as idBrowserExtension, +} from '@reef-knot/wallet-adapter-browser-extension'; +import { MetaMask, id as idMetaMask } from '@reef-knot/wallet-adapter-metamask'; +import { Okx, id as idOkx } from '@reef-knot/wallet-adapter-okx'; +import { Exodus, id as idExodus } from '@reef-knot/wallet-adapter-exodus'; +import { + WalletConnect, + id as idWalletConnect, +} from '@reef-knot/wallet-adapter-walletconnect'; +import { Ambire, id as idAmbire } from '@reef-knot/wallet-adapter-ambire'; +import { BitKeep, id as idBitKeep } from '@reef-knot/wallet-adapter-bitkeep'; +import { Coin98, id as idCoin98 } from '@reef-knot/wallet-adapter-coin98'; +import { Brave, id as idBrave } from '@reef-knot/wallet-adapter-brave'; +import { ImToken, id as idImToken } from '@reef-knot/wallet-adapter-imtoken'; +import { Trust, id as idTrust } from '@reef-knot/wallet-adapter-trust'; +import { Xdefi, id as idXdefi } from '@reef-knot/wallet-adapter-xdefi'; +import { Coinbase, id as idCoinbase } from '@reef-knot/wallet-adapter-coinbase'; +import { Ledger, id as idLedger } from '@reef-knot/wallet-adapter-ledger-hid'; +import { + LedgerLive, + id as idLedgerLive, +} from '@reef-knot/wallet-adapter-ledger-live'; +import { + DAppBrowserInjected, + id as idDAppBrowserInjected, +} from '@reef-knot/wallet-adapter-dapp-browser-injected'; +import { Safe, id as idSafe } from '@reef-knot/wallet-adapter-safe'; -export const WalletsListEthereum: WalletsListType = { - browserExtension: BrowserExtension, - metamask: MetaMask, - okx: Okx, - walletconnect: WalletConnect, - ledgerHID: Ledger, - ledgerLive: LedgerLive, - exodus: Exodus, - ambire: Ambire, - bitkeep: BitKeep, - coin98: Coin98, - brave: Brave, - imtoken: ImToken, - trust: Trust, - xdefi: Xdefi, - coinbase: Coinbase, - dAppBrowserInjected: DAppBrowserInjected, - safe: Safe, -}; +export const WalletsListEthereum = { + [idBrowserExtension]: BrowserExtension, + [idMetaMask]: MetaMask, + [idOkx]: Okx, + [idWalletConnect]: WalletConnect, + [idLedger]: Ledger, + [idLedgerLive]: LedgerLive, + [idExodus]: Exodus, + [idAmbire]: Ambire, + [idBitKeep]: BitKeep, + [idCoin98]: Coin98, + [idBrave]: Brave, + [idImToken]: ImToken, + [idTrust]: Trust, + [idXdefi]: Xdefi, + [idCoinbase]: Coinbase, + [idDAppBrowserInjected]: DAppBrowserInjected, + [idSafe]: Safe, +} as const; + +export type WalletIdsEthereum = keyof typeof WalletsListEthereum; diff --git a/packages/wallets/ambire/src/index.ts b/packages/wallets/ambire/src/index.ts index 1888d6ce..6725ab19 100644 --- a/packages/wallets/ambire/src/index.ts +++ b/packages/wallets/ambire/src/index.ts @@ -2,12 +2,15 @@ import { WalletAdapterType } from '@reef-knot/types'; import { getWalletConnectConnector } from '@reef-knot/wallets-helpers'; import WalletIcon from './icons/ambire.svg'; +export const id = 'ambire'; +export const name = 'Ambire'; + export const Ambire: WalletAdapterType = ({ walletconnectProjectId, chains, }) => ({ - walletName: 'Ambire', - walletId: 'ambire', + walletName: name, + walletId: id, icon: WalletIcon, connector: getWalletConnectConnector({ chains, diff --git a/packages/wallets/bitkeep/src/index.ts b/packages/wallets/bitkeep/src/index.ts index b40173ab..a302fb8c 100644 --- a/packages/wallets/bitkeep/src/index.ts +++ b/packages/wallets/bitkeep/src/index.ts @@ -11,9 +11,14 @@ declare global { } } +// The current metrics implementation is based on walletId, +// using previous "bitkeep" name here not to break metrics +export const id = 'bitget'; +export const name = 'Bitget'; + export class BitgetConnector extends InjectedConnector { - readonly id = 'bitget'; - readonly name = 'Bitget'; + readonly id = id; + readonly name = name; constructor(chains: Chain[]) { super({ chains, @@ -25,10 +30,8 @@ export class BitgetConnector extends InjectedConnector { } export const Bitget: WalletAdapterType = ({ chains }) => ({ - walletName: 'Bitget', - // The current metrics implementation is based on walletId, - // using previous "bitkeep" name here not to break metrics - walletId: 'bitkeep', + walletName: name, + walletId: id, icon: WalletIcon, detector: () => !!globalThis.window?.bitkeep?.ethereum, downloadURLs: { diff --git a/packages/wallets/brave/src/index.ts b/packages/wallets/brave/src/index.ts index 7174c32f..08fc42c8 100644 --- a/packages/wallets/brave/src/index.ts +++ b/packages/wallets/brave/src/index.ts @@ -9,9 +9,12 @@ declare global { } } +export const id = 'brave'; +export const name = 'Brave'; + export class BraveConnector extends InjectedConnector { - readonly id = 'brave'; - readonly name = 'Brave'; + readonly id = id; + readonly name = name; constructor(chains: Chain[]) { super({ chains, @@ -24,8 +27,8 @@ export class BraveConnector extends InjectedConnector { } export const Brave: WalletAdapterType = ({ chains }) => ({ - walletName: 'Brave', - walletId: 'brave', + walletName: name, + walletId: id, icon: WalletIcon, detector: () => !!globalThis.window?.braveEthereum?.isBraveWallet || diff --git a/packages/wallets/browserExtension/src/index.ts b/packages/wallets/browserExtension/src/index.ts index 26c977d3..9487ba92 100644 --- a/packages/wallets/browserExtension/src/index.ts +++ b/packages/wallets/browserExtension/src/index.ts @@ -2,8 +2,8 @@ import { WalletAdapterType } from '@reef-knot/types'; import { InjectedConnector } from 'wagmi/connectors/injected'; import { WalletIcon } from './icons/index.js'; -const id = 'browserExtension'; -const name = 'Browser'; +export const id = 'browserExtension'; +export const name = 'Browser'; export class BrowserExtensionConnector extends InjectedConnector { readonly id = id; diff --git a/packages/wallets/coin98/src/index.ts b/packages/wallets/coin98/src/index.ts index b09d3d32..0af529c1 100644 --- a/packages/wallets/coin98/src/index.ts +++ b/packages/wallets/coin98/src/index.ts @@ -17,9 +17,12 @@ declare global { } } +export const id = 'coin98'; +export const name = 'Coin98'; + export class Coin98Connector extends InjectedConnector { - readonly id = 'coin98'; - readonly name = 'Coin98'; + readonly id = id; + readonly name = name; constructor(chains: Chain[]) { super({ chains, @@ -32,8 +35,8 @@ export class Coin98Connector extends InjectedConnector { } export const Coin98: WalletAdapterType = ({ chains }) => ({ - walletName: 'Coin98', - walletId: 'coin98', + walletName: name, + walletId: id, icon: WalletIcon, detector: () => !!globalThis.window?.coin98?.provider || diff --git a/packages/wallets/coinbase/src/index.ts b/packages/wallets/coinbase/src/index.ts index 252df6b4..445db76a 100644 --- a/packages/wallets/coinbase/src/index.ts +++ b/packages/wallets/coinbase/src/index.ts @@ -2,9 +2,12 @@ import { WalletAdapterType } from '@reef-knot/types'; import { CoinbaseWalletConnector } from 'wagmi/connectors/coinbaseWallet'; import { WalletIcon } from './icons/index.js'; +export const id = 'coinbase'; +export const name = 'Coinbase'; + export const Coinbase: WalletAdapterType = ({ chains }) => ({ - walletName: 'Coinbase', - walletId: 'coinbase', + walletName: name, + walletId: id, icon: WalletIcon, detector: () => !!globalThis.window?.ethereum?.isCoinbaseWallet, connector: new CoinbaseWalletConnector({ diff --git a/packages/wallets/dappBrowserInjected/src/index.ts b/packages/wallets/dappBrowserInjected/src/index.ts index 62d92042..6fe3a546 100644 --- a/packages/wallets/dappBrowserInjected/src/index.ts +++ b/packages/wallets/dappBrowserInjected/src/index.ts @@ -2,9 +2,12 @@ import { WalletAdapterType } from '@reef-knot/types'; import { InjectedConnector } from 'wagmi/connectors/injected'; import { isMobileOrTablet } from '@reef-knot/wallets-helpers'; +export const id = 'dappBrowserInjected'; +export const name = 'DAppBrowser'; + export const DAppBrowserInjected: WalletAdapterType = ({ chains }) => ({ - walletName: 'DAppBrowser', - walletId: 'dappBrowserInjected', + walletName: name, + walletId: id, autoConnectOnly: true, detector: () => !!globalThis.window?.ethereum && isMobileOrTablet, connector: new InjectedConnector({ diff --git a/packages/wallets/exodus/src/index.ts b/packages/wallets/exodus/src/index.ts index 7b06ae6e..2a267ea7 100644 --- a/packages/wallets/exodus/src/index.ts +++ b/packages/wallets/exodus/src/index.ts @@ -12,9 +12,12 @@ declare global { } } +export const id = 'exodus'; +export const name = 'Exodus'; + export class ExodusConnector extends InjectedConnector { - readonly id = 'exodus'; - readonly name = 'Exodus'; + readonly id = id; + readonly name = name; constructor(chains: Chain[]) { super({ chains, @@ -27,8 +30,8 @@ export class ExodusConnector extends InjectedConnector { } export const Exodus: WalletAdapterType = ({ chains }) => ({ - walletName: 'Exodus', - walletId: 'exodus', + walletName: name, + walletId: id, icon: WalletIcon, detector: () => !!globalThis.window?.exodus || !!globalThis.window?.ethereum?.isExodus, diff --git a/packages/wallets/imtoken/src/index.ts b/packages/wallets/imtoken/src/index.ts index bc0aa123..1caf88f3 100644 --- a/packages/wallets/imtoken/src/index.ts +++ b/packages/wallets/imtoken/src/index.ts @@ -9,9 +9,12 @@ declare module '@wagmi/core' { } } +export const id = 'imToken'; +export const name = 'imToken'; + export class ImTokenConnector extends InjectedConnector { - readonly id = 'imToken'; - readonly name = 'imToken'; + readonly id = id; + readonly name = name; constructor(chains: Chain[]) { super({ chains, @@ -23,8 +26,8 @@ export class ImTokenConnector extends InjectedConnector { } export const ImToken: WalletAdapterType = ({ chains }) => ({ - walletName: 'imToken', - walletId: 'imToken', + walletName: name, + walletId: id, icon: WalletIcon, detector: () => !!globalThis.window?.ethereum?.isImToken, downloadURLs: { diff --git a/packages/wallets/ledger-hid/src/index.ts b/packages/wallets/ledger-hid/src/index.ts index 5c134b98..57c3c75c 100644 --- a/packages/wallets/ledger-hid/src/index.ts +++ b/packages/wallets/ledger-hid/src/index.ts @@ -2,9 +2,12 @@ import { WalletAdapterType } from '@reef-knot/types'; import { WalletIcon, WalletIconInverted } from './icons/index.js'; import { LedgerHIDConnector } from '@reef-knot/ledger-connector'; +export const id = 'ledgerHID'; +export const name = 'Ledger'; + export const Ledger: WalletAdapterType = ({ chains, defaultChain, rpc }) => ({ - walletName: 'Ledger', - walletId: 'ledgerHID', + walletName: name, + walletId: id, icon: { light: WalletIcon, dark: WalletIconInverted, diff --git a/packages/wallets/ledger-live/src/index.ts b/packages/wallets/ledger-live/src/index.ts index e7fe6483..36e7f524 100644 --- a/packages/wallets/ledger-live/src/index.ts +++ b/packages/wallets/ledger-live/src/index.ts @@ -1,9 +1,12 @@ import { WalletAdapterType } from '@reef-knot/types'; import { LedgerLiveConnector, isLedgerLive } from '@reef-knot/ledger-connector'; +export const id = 'ledgerLive'; +export const name = 'Ledger Live'; + export const LedgerLive: WalletAdapterType = ({ chains }) => ({ - walletName: 'Ledger Live', - walletId: 'ledgerLive', + walletName: name, + walletId: id, autoConnectOnly: true, detector: () => isLedgerLive(), connector: new LedgerLiveConnector({ diff --git a/packages/wallets/metamask/src/index.ts b/packages/wallets/metamask/src/index.ts index 7a090984..7f51e2a4 100644 --- a/packages/wallets/metamask/src/index.ts +++ b/packages/wallets/metamask/src/index.ts @@ -2,9 +2,12 @@ import { WalletAdapterType } from '@reef-knot/types'; import { MetaMaskConnector } from 'wagmi/connectors/metaMask'; import { WalletIcon, WalletIconInverted } from './icons/index.js'; +export const id = 'metamask'; +export const name = 'MetaMask'; + export const MetaMask: WalletAdapterType = ({ chains }) => ({ - walletName: 'MetaMask', - walletId: 'metamask', + walletName: name, + walletId: id, icon: { light: WalletIcon, dark: WalletIconInverted, diff --git a/packages/wallets/okx/src/index.ts b/packages/wallets/okx/src/index.ts index 9cd107a6..0256ef8f 100644 --- a/packages/wallets/okx/src/index.ts +++ b/packages/wallets/okx/src/index.ts @@ -16,9 +16,12 @@ declare global { } } +export const id = 'okx'; +export const name = 'OKX Wallet'; + export class OkxConnector extends InjectedConnector { - readonly id = 'okx'; - readonly name = 'OKX Wallet'; + readonly id = id; + readonly name = name; constructor(chains: Chain[]) { super({ chains, @@ -31,8 +34,8 @@ export class OkxConnector extends InjectedConnector { } export const Okx: WalletAdapterType = ({ chains }) => ({ - walletName: 'OKX Wallet', - walletId: 'okx', + walletName: name, + walletId: id, icon: { light: WalletIcon, dark: WalletIconInverted, diff --git a/packages/wallets/safe/src/index.ts b/packages/wallets/safe/src/index.ts index ae21193f..02d20fca 100644 --- a/packages/wallets/safe/src/index.ts +++ b/packages/wallets/safe/src/index.ts @@ -1,9 +1,12 @@ import { WalletAdapterType } from '@reef-knot/types'; import { SafeConnector } from 'wagmi/connectors/safe'; +export const id = 'safe'; +export const name = 'Safe'; + export const Safe: WalletAdapterType = ({ chains }) => ({ - walletName: 'Safe', - walletId: 'safe', + walletName: name, + walletId: id, autoConnectOnly: true, detector: () => { // iframe check diff --git a/packages/wallets/trust/src/index.ts b/packages/wallets/trust/src/index.ts index 59a9bc61..54be53cd 100644 --- a/packages/wallets/trust/src/index.ts +++ b/packages/wallets/trust/src/index.ts @@ -9,9 +9,12 @@ declare module '@wagmi/core' { } } +export const id = 'trust'; +export const name = 'Trust'; + export class TrustConnector extends InjectedConnector { - readonly id = 'trust'; - readonly name = 'Trust'; + readonly id = id; + readonly name = name; constructor(chains: Chain[]) { super({ chains, @@ -23,8 +26,8 @@ export class TrustConnector extends InjectedConnector { } export const Trust: WalletAdapterType = ({ chains }) => ({ - walletName: 'Trust', - walletId: 'trust', + walletName: name, + walletId: id, icon: WalletIcon, detector: () => !!globalThis.window?.ethereum?.isTrust, downloadURLs: { diff --git a/packages/wallets/walletconnect/src/index.ts b/packages/wallets/walletconnect/src/index.ts index d54758ba..91a9a67c 100644 --- a/packages/wallets/walletconnect/src/index.ts +++ b/packages/wallets/walletconnect/src/index.ts @@ -2,12 +2,15 @@ import { WalletAdapterType } from '@reef-knot/types'; import { getWalletConnectConnector } from '@reef-knot/wallets-helpers'; import WalletIcon from './icons/wallet-connect-circle.svg'; +export const id = 'walletconnect'; +export const name = 'WalletConnect'; + export const WalletConnect: WalletAdapterType = ({ walletconnectProjectId, chains, }) => ({ - walletName: 'WalletConnect', - walletId: 'walletconnect', + walletName: name, + walletId: id, icon: WalletIcon, connector: getWalletConnectConnector({ chains, diff --git a/packages/wallets/xdefi/src/index.ts b/packages/wallets/xdefi/src/index.ts index b587b5f2..156a1638 100644 --- a/packages/wallets/xdefi/src/index.ts +++ b/packages/wallets/xdefi/src/index.ts @@ -17,9 +17,12 @@ declare global { } } +export const id = 'xdefi'; +export const name = 'XDEFI'; + export class XdefiConnector extends InjectedConnector { - readonly id = 'xdefi'; - readonly name = 'XDEFI'; + readonly id = id; + readonly name = name; constructor(chains: Chain[]) { super({ chains, @@ -32,8 +35,8 @@ export class XdefiConnector extends InjectedConnector { } export const Xdefi: WalletAdapterType = ({ chains }) => ({ - walletName: 'XDEFI', - walletId: 'xdefi', + walletName: name, + walletId: id, icon: WalletIcon, detector: () => !!globalThis.window?.xfi?.ethereum || From a3745b3408497898c50e1b8492299dd7dbd8861a Mon Sep 17 00:00:00 2001 From: Dmitrii Podlesnyi Date: Wed, 20 Mar 2024 17:07:38 +0400 Subject: [PATCH 06/15] chore: subdeps update --- packages/connect-wallet-modal/package.json | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/connect-wallet-modal/package.json b/packages/connect-wallet-modal/package.json index c321beec..fb1bb9ce 100644 --- a/packages/connect-wallet-modal/package.json +++ b/packages/connect-wallet-modal/package.json @@ -41,6 +41,7 @@ "@ledgerhq/hw-app-eth": "^6.35.2", "@ledgerhq/hw-transport-webhid": "^6.28.1", "@lidofinance/lido-ui": "^3.18.0", + "@reef-knot/wallets-list": "^1.12.0", "@types/react": "18.2.45", "@types/react-dom": "18.2.17" }, From 3d15129be8f70c1faede86b1a5016059c4a28098 Mon Sep 17 00:00:00 2001 From: Dmitrii Podlesnyi Date: Mon, 25 Mar 2024 14:15:24 +0400 Subject: [PATCH 07/15] fix: connect wallet modal codestyle updated --- apps/demo-react/components/WalletsModal.tsx | 2 +- packages/connect-wallet-modal/README.md | 10 ++-- .../WalletsModal/WalletsModalForEth.tsx | 60 +++++++++---------- .../ConnectWalletModal/ConnectWalletModal.tsx | 12 ++-- .../ConnectWalletModal/sortWalletsList.ts | 15 +++-- .../src/components/WalletsModal/types.ts | 4 +- 6 files changed, 49 insertions(+), 54 deletions(-) diff --git a/apps/demo-react/components/WalletsModal.tsx b/apps/demo-react/components/WalletsModal.tsx index f122d1ae..b1fe67b6 100644 --- a/apps/demo-react/components/WalletsModal.tsx +++ b/apps/demo-react/components/WalletsModal.tsx @@ -12,7 +12,7 @@ export default function WalletsModal(props: { isDarkTheme: boolean }) { metrics={metrics} shouldInvertWalletIcon={isDarkTheme} linkDontHaveWallet={LINK_DONT_HAVE_WALLET_DEFAULT} - walletsPinnedConfig={['okx', 'browserExtension']} + walletsPinned={['okx', 'browserExtension']} /> ); } diff --git a/packages/connect-wallet-modal/README.md b/packages/connect-wallet-modal/README.md index 1eb7d1a7..62740122 100644 --- a/packages/connect-wallet-modal/README.md +++ b/packages/connect-wallet-modal/README.md @@ -31,7 +31,7 @@ Use it like this: ### For Ethereum -The package provides the modal variant with the predefined list of wallets, which work with the Ethereum network. +The package provides the modal variant with the predefined list of wallets, which work with the Ethereum network. Import the component: ```ts @@ -46,10 +46,10 @@ Use it like this: #### How to configure the wallets list You can control displayed wallet connection buttons from the list of wallets in the modal. Wallets will be displayed in the specified sequence. -Use the `walletsDisplayConfig` property like this: +Use the `walletsShown` property like this: ```tsx ``` diff --git a/packages/connect-wallet-modal/src/components/WalletsModal/WalletsModalForEth.tsx b/packages/connect-wallet-modal/src/components/WalletsModal/WalletsModalForEth.tsx index aeb2c74f..64eff9be 100644 --- a/packages/connect-wallet-modal/src/components/WalletsModal/WalletsModalForEth.tsx +++ b/packages/connect-wallet-modal/src/components/WalletsModal/WalletsModalForEth.tsx @@ -22,39 +22,39 @@ const buttonComponentsByConnectorId: WalletsModalEthProps['buttonComponentsByCon ledgerHID: ConnectLedger, }; -const WALLETS_DISPLAY_CONFIG_DEFAULT: WalletsModalEthProps['walletsDisplayConfig'] = - [ - 'browserExtension', - 'metamask', - 'ledgerHID', - 'ledgerLive', - 'walletconnect', - 'coinbase', - 'trust', - 'okx', - 'exodus', - 'brave', - 'bitget', - 'xdefi', - 'imToken', - 'coin98', - 'ambire', - 'safe', - 'dappBrowserInjected', - ]; +const WALLETS_DISPLAY_CONFIG_DEFAULT: WalletsModalEthProps['walletsShown'] = [ + 'browserExtension', + 'metamask', + 'ledgerHID', + 'ledgerLive', + 'walletconnect', + 'coinbase', + 'trust', + 'okx', + 'exodus', + 'brave', + 'bitget', + 'xdefi', + 'imToken', + 'coin98', + 'ambire', + 'safe', + 'dappBrowserInjected', +]; -const WALLETS_PINNED_CONFIG_DEFAULT: WalletsModalEthProps['walletsPinnedConfig'] = - ['browserExtension']; +const WALLETS_PINNED_CONFIG_DEFAULT: WalletsModalEthProps['walletsPinned'] = [ + 'browserExtension', +]; type WalletsModalForEthProps = Omit< WalletsModalEthProps, | 'buttonComponentsByConnectorId' | 'walletDataList' - | 'walletsDisplayConfig' - | 'walletsPinnedConfig' + | 'walletsShown' + | 'walletsPinned' > & { - walletsDisplayConfig?: WalletsModalEthProps['walletsDisplayConfig']; - walletsPinnedConfig?: WalletsModalEthProps['walletsPinnedConfig']; + walletsShown?: WalletsModalEthProps['walletsShown']; + walletsPinned?: WalletsModalEthProps['walletsPinned']; }; export function WalletsModalForEth(props: WalletsModalForEthProps) { @@ -64,12 +64,8 @@ export function WalletsModalForEth(props: WalletsModalForEthProps) { ); diff --git a/packages/connect-wallet-modal/src/components/WalletsModal/components/ConnectWalletModal/ConnectWalletModal.tsx b/packages/connect-wallet-modal/src/components/WalletsModal/components/ConnectWalletModal/ConnectWalletModal.tsx index cf9d48c2..e742d0d4 100644 --- a/packages/connect-wallet-modal/src/components/WalletsModal/components/ConnectWalletModal/ConnectWalletModal.tsx +++ b/packages/connect-wallet-modal/src/components/WalletsModal/components/ConnectWalletModal/ConnectWalletModal.tsx @@ -48,8 +48,8 @@ export const ConnectWalletModal = ({ metrics, buttonComponentsByConnectorId, walletDataList, - walletsDisplayConfig, - walletsPinnedConfig, + walletsShown, + walletsPinned, walletsDisplayInitialCount = 6, linkDontHaveWallet, } = passedDownProps; @@ -63,10 +63,10 @@ export const ConnectWalletModal = ({ const walletsListFull = useMemo(() => { return sortWalletsList({ walletDataList, - walletsDisplayConfig, - walletsPinnedConfig, + walletsShown, + walletsPinned, }); - }, [walletDataList, walletsDisplayConfig, walletsPinnedConfig]); + }, [walletDataList, walletsShown, walletsPinned]); const walletsList = useMemo(() => { if (!isShownOtherWallets) { @@ -125,7 +125,7 @@ export const ConnectWalletModal = ({ Choose wallet{' '} {linkDontHaveWallet && ( - I don't have a wallet + I don't have a wallet )} {isShownOtherWallets && ( diff --git a/packages/connect-wallet-modal/src/components/WalletsModal/components/ConnectWalletModal/sortWalletsList.ts b/packages/connect-wallet-modal/src/components/WalletsModal/components/ConnectWalletModal/sortWalletsList.ts index 0e32b465..af5d638d 100644 --- a/packages/connect-wallet-modal/src/components/WalletsModal/components/ConnectWalletModal/sortWalletsList.ts +++ b/packages/connect-wallet-modal/src/components/WalletsModal/components/ConnectWalletModal/sortWalletsList.ts @@ -3,16 +3,16 @@ import { WalletsModalProps } from '../../types'; type GetWalletsListArgs = { walletDataList: WalletAdapterData[]; - walletsDisplayConfig: WalletsModalProps['walletsDisplayConfig']; - walletsPinnedConfig: WalletsModalProps['walletsPinnedConfig']; + walletsShown: WalletsModalProps['walletsShown']; + walletsPinned: WalletsModalProps['walletsPinned']; }; export function sortWalletsList({ walletDataList, - walletsDisplayConfig, - walletsPinnedConfig, + walletsShown, + walletsPinned, }: GetWalletsListArgs) { - const filteredWalletData = walletsDisplayConfig.reduce( + const filteredWalletData = walletsShown.reduce( (walletsList, walletId) => { const walletData = walletDataList.find((w) => w.walletId === walletId); @@ -23,7 +23,7 @@ export function sortWalletsList({ // Filtering wallets marked as hidden and auto connect only if (autoConnectOnly) return walletsList; - if (walletsPinnedConfig.includes(walletId)) { + if (walletsPinned.includes(walletId)) { // Put the pinned wallets on the first place, above all another walletsList.pinned.push(walletData); } else if (detector?.()) { @@ -45,8 +45,7 @@ export function sortWalletsList({ const pinsSorted = [...filteredWalletData.pinned].sort( (a, b) => - walletsPinnedConfig.indexOf(a.walletId) - - walletsPinnedConfig.indexOf(b.walletId), + walletsPinned.indexOf(a.walletId) - walletsPinned.indexOf(b.walletId), ); return [ diff --git a/packages/connect-wallet-modal/src/components/WalletsModal/types.ts b/packages/connect-wallet-modal/src/components/WalletsModal/types.ts index 25f5cb88..0ca74f92 100644 --- a/packages/connect-wallet-modal/src/components/WalletsModal/types.ts +++ b/packages/connect-wallet-modal/src/components/WalletsModal/types.ts @@ -21,8 +21,8 @@ export type WalletsModalProps = ModalProps & { metrics?: Metrics; termsLink?: string; privacyNoticeLink?: string; - walletsDisplayConfig: I[]; - walletsPinnedConfig: I[]; + walletsShown: I[]; + walletsPinned: I[]; walletsDisplayInitialCount?: number; linkDontHaveWallet?: string; }; From b50842c5c616ebe35190a3d70c43332fc2aecb89 Mon Sep 17 00:00:00 2001 From: Dmitrii Podlesnyi Date: Mon, 25 Mar 2024 15:07:41 +0400 Subject: [PATCH 08/15] chore: changeset performed --- packages/connect-wallet-modal/CHANGELOG.md | 11 ++++++ packages/connect-wallet-modal/package.json | 8 ++-- packages/reef-knot/CHANGELOG.md | 19 ++++++++++ packages/reef-knot/package.json | 10 ++--- packages/types/CHANGELOG.md | 6 +++ packages/types/package.json | 2 +- packages/ui-react/CHANGELOG.md | 6 +++ packages/ui-react/package.json | 2 +- packages/wallets-list/CHANGELOG.md | 27 +++++++++++++ packages/wallets-list/package.json | 38 +++++++++---------- packages/wallets/ambire/CHANGELOG.md | 6 +++ packages/wallets/ambire/package.json | 4 +- packages/wallets/bitkeep/CHANGELOG.md | 6 +++ packages/wallets/bitkeep/package.json | 4 +- packages/wallets/brave/CHANGELOG.md | 6 +++ packages/wallets/brave/package.json | 4 +- .../wallets/browserExtension/CHANGELOG.md | 7 ++++ .../wallets/browserExtension/package.json | 4 +- packages/wallets/coin98/CHANGELOG.md | 6 +++ packages/wallets/coin98/package.json | 4 +- packages/wallets/coinbase/CHANGELOG.md | 7 ++++ packages/wallets/coinbase/package.json | 4 +- .../wallets/dappBrowserInjected/CHANGELOG.md | 7 ++++ .../wallets/dappBrowserInjected/package.json | 4 +- packages/wallets/exodus/CHANGELOG.md | 6 +++ packages/wallets/exodus/package.json | 4 +- packages/wallets/imtoken/CHANGELOG.md | 7 ++++ packages/wallets/imtoken/package.json | 4 +- packages/wallets/ledger-hid/CHANGELOG.md | 6 +++ packages/wallets/ledger-hid/package.json | 4 +- packages/wallets/ledger-live/CHANGELOG.md | 6 +++ packages/wallets/ledger-live/package.json | 4 +- packages/wallets/metamask/CHANGELOG.md | 7 ++++ packages/wallets/metamask/package.json | 4 +- packages/wallets/okx/CHANGELOG.md | 6 +++ packages/wallets/okx/package.json | 4 +- packages/wallets/safe/CHANGELOG.md | 7 ++++ packages/wallets/safe/package.json | 4 +- packages/wallets/trust/CHANGELOG.md | 7 ++++ packages/wallets/trust/package.json | 4 +- packages/wallets/walletconnect/CHANGELOG.md | 6 +++ packages/wallets/walletconnect/package.json | 4 +- packages/wallets/xdefi/CHANGELOG.md | 7 ++++ packages/wallets/xdefi/package.json | 4 +- 44 files changed, 243 insertions(+), 64 deletions(-) create mode 100644 packages/wallets/browserExtension/CHANGELOG.md create mode 100644 packages/wallets/coinbase/CHANGELOG.md create mode 100644 packages/wallets/dappBrowserInjected/CHANGELOG.md create mode 100644 packages/wallets/imtoken/CHANGELOG.md create mode 100644 packages/wallets/metamask/CHANGELOG.md create mode 100644 packages/wallets/safe/CHANGELOG.md create mode 100644 packages/wallets/trust/CHANGELOG.md create mode 100644 packages/wallets/xdefi/CHANGELOG.md diff --git a/packages/connect-wallet-modal/CHANGELOG.md b/packages/connect-wallet-modal/CHANGELOG.md index c6d70107..d0b01a46 100644 --- a/packages/connect-wallet-modal/CHANGELOG.md +++ b/packages/connect-wallet-modal/CHANGELOG.md @@ -1,5 +1,16 @@ # @reef-knot/connect-wallet-modal +## 4.0.0 + +### Major Changes + +- connect-wallet-modal ui and config updated + +### Patch Changes + +- Updated dependencies + - @reef-knot/wallets-list@1.13.0 + ## 3.0.2 ### Patch Changes diff --git a/packages/connect-wallet-modal/package.json b/packages/connect-wallet-modal/package.json index fb1bb9ce..3acef999 100644 --- a/packages/connect-wallet-modal/package.json +++ b/packages/connect-wallet-modal/package.json @@ -1,6 +1,6 @@ { "name": "@reef-knot/connect-wallet-modal", - "version": "3.0.2", + "version": "4.0.0", "main": "dist/index.js", "types": "dist/index.d.ts", "exports": { @@ -41,14 +41,14 @@ "@ledgerhq/hw-app-eth": "^6.35.2", "@ledgerhq/hw-transport-webhid": "^6.28.1", "@lidofinance/lido-ui": "^3.18.0", - "@reef-knot/wallets-list": "^1.12.0", + "@reef-knot/wallets-list": "^1.13.0", "@types/react": "18.2.45", "@types/react-dom": "18.2.17" }, "devDependencies": { "@reef-knot/core-react": "^3.0.0", - "@reef-knot/types": "^1.5.0", - "@reef-knot/ui-react": "^1.0.8", + "@reef-knot/types": "^1.6.0", + "@reef-knot/ui-react": "^1.1.0", "@reef-knot/wallets-helpers": "^1.1.5", "@reef-knot/web3-react": "^3.0.0", "@reef-knot/ledger-connector": "^3.0.0", diff --git a/packages/reef-knot/CHANGELOG.md b/packages/reef-knot/CHANGELOG.md index 87b477a1..b223933b 100644 --- a/packages/reef-knot/CHANGELOG.md +++ b/packages/reef-knot/CHANGELOG.md @@ -1,5 +1,24 @@ # reef-knot +## 4.0.0 + +### Major Changes + +- connect-wallet-modal ui and config updated + +### Minor Changes + +- wallet connectors id exports and typings updated + +### Patch Changes + +- Updated dependencies +- Updated dependencies + - @reef-knot/wallets-list@1.13.0 + - @reef-knot/types@1.6.0 + - @reef-knot/connect-wallet-modal@4.0.0 + - @reef-knot/ui-react@1.1.0 + ## 3.0.2 ### Patch Changes diff --git a/packages/reef-knot/package.json b/packages/reef-knot/package.json index 74f04dcc..bb77a3e7 100644 --- a/packages/reef-knot/package.json +++ b/packages/reef-knot/package.json @@ -1,6 +1,6 @@ { "name": "reef-knot", - "version": "3.0.2", + "version": "4.0.0", "main": "dist/index.js", "types": "dist/index.d.ts", "exports": { @@ -41,13 +41,13 @@ "lint": "eslint --ext ts,tsx,js,mjs ." }, "dependencies": { - "@reef-knot/connect-wallet-modal": "3.0.2", + "@reef-knot/connect-wallet-modal": "4.0.0", "@reef-knot/core-react": "3.0.0", "@reef-knot/web3-react": "3.0.0", - "@reef-knot/ui-react": "1.0.8", - "@reef-knot/wallets-list": "1.12.0", + "@reef-knot/ui-react": "1.1.0", + "@reef-knot/wallets-list": "1.13.0", "@reef-knot/wallets-helpers": "1.1.5", - "@reef-knot/types": "1.5.0", + "@reef-knot/types": "1.6.0", "@reef-knot/ledger-connector": "3.0.0" }, "devDependencies": { diff --git a/packages/types/CHANGELOG.md b/packages/types/CHANGELOG.md index 3c7fe6e3..55d5f1a0 100644 --- a/packages/types/CHANGELOG.md +++ b/packages/types/CHANGELOG.md @@ -1,5 +1,11 @@ # @reef-knot/types +## 1.6.0 + +### Minor Changes + +- wallet connectors id exports and typings updated + ## 1.5.0 ### Minor Changes diff --git a/packages/types/package.json b/packages/types/package.json index 8506249d..a3f004ab 100644 --- a/packages/types/package.json +++ b/packages/types/package.json @@ -1,6 +1,6 @@ { "name": "@reef-knot/types", - "version": "1.5.0", + "version": "1.6.0", "main": "", "types": "dist/index.d.ts", "type": "module", diff --git a/packages/ui-react/CHANGELOG.md b/packages/ui-react/CHANGELOG.md index d1ea670f..5bee45cf 100644 --- a/packages/ui-react/CHANGELOG.md +++ b/packages/ui-react/CHANGELOG.md @@ -1,5 +1,11 @@ # @reef-knot/ui-react +## 1.1.0 + +### Minor Changes + +- connect-wallet-modal ui and config updated + ## 1.0.8 ### Patch Changes diff --git a/packages/ui-react/package.json b/packages/ui-react/package.json index ab1978f6..27066572 100644 --- a/packages/ui-react/package.json +++ b/packages/ui-react/package.json @@ -1,6 +1,6 @@ { "name": "@reef-knot/ui-react", - "version": "1.0.8", + "version": "1.1.0", "main": "dist/index.js", "types": "dist/index.d.ts", "exports": { diff --git a/packages/wallets-list/CHANGELOG.md b/packages/wallets-list/CHANGELOG.md index 5c1c1a3b..4f3ce5fb 100644 --- a/packages/wallets-list/CHANGELOG.md +++ b/packages/wallets-list/CHANGELOG.md @@ -1,5 +1,32 @@ # @reef-knot/wallets-list +## 1.13.0 + +### Minor Changes + +- wallet connectors id exports and typings updated + +### Patch Changes + +- Updated dependencies + - @reef-knot/wallet-adapter-dapp-browser-injected@1.1.0 + - @reef-knot/wallet-adapter-browser-extension@1.1.0 + - @reef-knot/wallet-adapter-walletconnect@1.3.0 + - @reef-knot/wallet-adapter-ledger-live@2.1.0 + - @reef-knot/wallet-adapter-ledger-hid@2.1.0 + - @reef-knot/wallet-adapter-coinbase@1.1.0 + - @reef-knot/wallet-adapter-metamask@1.1.0 + - @reef-knot/wallet-adapter-bitkeep@1.2.0 + - @reef-knot/wallet-adapter-imtoken@1.1.0 + - @reef-knot/wallet-adapter-ambire@1.3.0 + - @reef-knot/wallet-adapter-coin98@1.1.0 + - @reef-knot/wallet-adapter-exodus@1.3.0 + - @reef-knot/wallet-adapter-brave@1.1.0 + - @reef-knot/wallet-adapter-trust@1.1.0 + - @reef-knot/wallet-adapter-xdefi@1.1.0 + - @reef-knot/wallet-adapter-safe@1.1.0 + - @reef-knot/wallet-adapter-okx@1.4.0 + ## 1.12.0 ### Minor Changes diff --git a/packages/wallets-list/package.json b/packages/wallets-list/package.json index 2ad6b8af..7e6ddc4d 100644 --- a/packages/wallets-list/package.json +++ b/packages/wallets-list/package.json @@ -1,6 +1,6 @@ { "name": "@reef-knot/wallets-list", - "version": "1.12.0", + "version": "1.13.0", "main": "dist/index.js", "types": "dist/index.d.ts", "exports": { @@ -37,26 +37,26 @@ "lint": "eslint --ext ts,tsx,js,mjs ." }, "dependencies": { - "@reef-knot/wallet-adapter-browser-extension": "1.0.0", - "@reef-knot/wallet-adapter-metamask": "1.0.0", - "@reef-knot/wallet-adapter-okx": "1.3.1", - "@reef-knot/wallet-adapter-exodus": "1.2.4", - "@reef-knot/wallet-adapter-walletconnect": "1.2.4", - "@reef-knot/wallet-adapter-ambire": "1.2.4", - "@reef-knot/wallet-adapter-bitkeep": "1.1.1", - "@reef-knot/wallet-adapter-coin98": "1.0.1", - "@reef-knot/wallet-adapter-brave": "1.0.1", - "@reef-knot/wallet-adapter-imtoken": "1.0.0", - "@reef-knot/wallet-adapter-trust": "1.0.0", - "@reef-knot/wallet-adapter-xdefi": "1.0.0", - "@reef-knot/wallet-adapter-coinbase": "1.0.0", - "@reef-knot/wallet-adapter-ledger-hid": "2.0.0", - "@reef-knot/wallet-adapter-ledger-live": "2.0.0", - "@reef-knot/wallet-adapter-dapp-browser-injected": "1.0.0", - "@reef-knot/wallet-adapter-safe": "1.0.0" + "@reef-knot/wallet-adapter-browser-extension": "1.1.0", + "@reef-knot/wallet-adapter-metamask": "1.1.0", + "@reef-knot/wallet-adapter-okx": "1.4.0", + "@reef-knot/wallet-adapter-exodus": "1.3.0", + "@reef-knot/wallet-adapter-walletconnect": "1.3.0", + "@reef-knot/wallet-adapter-ambire": "1.3.0", + "@reef-knot/wallet-adapter-bitkeep": "1.2.0", + "@reef-knot/wallet-adapter-coin98": "1.1.0", + "@reef-knot/wallet-adapter-brave": "1.1.0", + "@reef-knot/wallet-adapter-imtoken": "1.1.0", + "@reef-knot/wallet-adapter-trust": "1.1.0", + "@reef-knot/wallet-adapter-xdefi": "1.1.0", + "@reef-knot/wallet-adapter-coinbase": "1.1.0", + "@reef-knot/wallet-adapter-ledger-hid": "2.1.0", + "@reef-knot/wallet-adapter-ledger-live": "2.1.0", + "@reef-knot/wallet-adapter-dapp-browser-injected": "1.1.0", + "@reef-knot/wallet-adapter-safe": "1.1.0" }, "devDependencies": { - "@reef-knot/types": "^1.5.0", + "@reef-knot/types": "^1.6.0", "eslint-config-custom": "*" }, "peerDependencies": { diff --git a/packages/wallets/ambire/CHANGELOG.md b/packages/wallets/ambire/CHANGELOG.md index 40d1a515..f1d70791 100644 --- a/packages/wallets/ambire/CHANGELOG.md +++ b/packages/wallets/ambire/CHANGELOG.md @@ -1,5 +1,11 @@ # @reef-knot/wallet-adapter-ambire +## 1.3.0 + +### Minor Changes + +- wallet connectors id exports and typings updated + ## 1.2.4 ### Patch Changes diff --git a/packages/wallets/ambire/package.json b/packages/wallets/ambire/package.json index 64c436a4..e72dc83d 100644 --- a/packages/wallets/ambire/package.json +++ b/packages/wallets/ambire/package.json @@ -1,6 +1,6 @@ { "name": "@reef-knot/wallet-adapter-ambire", - "version": "1.2.4", + "version": "1.3.0", "main": "dist/index.js", "types": "dist/index.d.ts", "exports": { @@ -32,7 +32,7 @@ "lint": "eslint --ext ts,tsx,js,mjs ." }, "devDependencies": { - "@reef-knot/types": "^1.3.0", + "@reef-knot/types": "^1.6.0", "@reef-knot/wallets-helpers": "^1.1.5", "@svgr/rollup": "^6.5.1", "eslint-config-custom": "*" diff --git a/packages/wallets/bitkeep/CHANGELOG.md b/packages/wallets/bitkeep/CHANGELOG.md index bfd28387..8b51f04a 100644 --- a/packages/wallets/bitkeep/CHANGELOG.md +++ b/packages/wallets/bitkeep/CHANGELOG.md @@ -1,5 +1,11 @@ # @reef-knot/wallet-adapter-bitkeep +## 1.2.0 + +### Minor Changes + +- wallet connectors id exports and typings updated + ## 1.1.1 ### Patch Changes diff --git a/packages/wallets/bitkeep/package.json b/packages/wallets/bitkeep/package.json index b24a0bd3..8506bb27 100644 --- a/packages/wallets/bitkeep/package.json +++ b/packages/wallets/bitkeep/package.json @@ -1,6 +1,6 @@ { "name": "@reef-knot/wallet-adapter-bitkeep", - "version": "1.1.1", + "version": "1.2.0", "main": "dist/index.js", "types": "dist/index.d.ts", "exports": { @@ -32,7 +32,7 @@ "lint": "eslint --ext ts,tsx,js,mjs ." }, "devDependencies": { - "@reef-knot/types": "^1.3.0", + "@reef-knot/types": "^1.6.0", "@svgr/rollup": "^6.5.1", "eslint-config-custom": "*" }, diff --git a/packages/wallets/brave/CHANGELOG.md b/packages/wallets/brave/CHANGELOG.md index 61c15efc..6065d944 100644 --- a/packages/wallets/brave/CHANGELOG.md +++ b/packages/wallets/brave/CHANGELOG.md @@ -1,5 +1,11 @@ # @reef-knot/wallet-adapter-brave +## 1.1.0 + +### Minor Changes + +- wallet connectors id exports and typings updated + ## 1.0.1 ### Patch Changes diff --git a/packages/wallets/brave/package.json b/packages/wallets/brave/package.json index 1b2a430c..617420b4 100644 --- a/packages/wallets/brave/package.json +++ b/packages/wallets/brave/package.json @@ -1,6 +1,6 @@ { "name": "@reef-knot/wallet-adapter-brave", - "version": "1.0.1", + "version": "1.1.0", "main": "dist/index.js", "types": "dist/index.d.ts", "exports": { @@ -32,7 +32,7 @@ "lint": "eslint --ext ts,tsx,js,mjs ." }, "devDependencies": { - "@reef-knot/types": "^1.3.0", + "@reef-knot/types": "^1.6.0", "@svgr/rollup": "^6.5.1", "eslint-config-custom": "*" }, diff --git a/packages/wallets/browserExtension/CHANGELOG.md b/packages/wallets/browserExtension/CHANGELOG.md new file mode 100644 index 00000000..54459cac --- /dev/null +++ b/packages/wallets/browserExtension/CHANGELOG.md @@ -0,0 +1,7 @@ +# @reef-knot/wallet-adapter-browser-extension + +## 1.1.0 + +### Minor Changes + +- wallet connectors id exports and typings updated diff --git a/packages/wallets/browserExtension/package.json b/packages/wallets/browserExtension/package.json index 0df0587d..6185ec37 100644 --- a/packages/wallets/browserExtension/package.json +++ b/packages/wallets/browserExtension/package.json @@ -1,6 +1,6 @@ { "name": "@reef-knot/wallet-adapter-browser-extension", - "version": "1.0.0", + "version": "1.1.0", "main": "dist/index.js", "types": "dist/index.d.ts", "exports": { @@ -32,7 +32,7 @@ "lint": "eslint --ext ts,tsx,js,mjs ." }, "devDependencies": { - "@reef-knot/types": "^1.3.0", + "@reef-knot/types": "^1.6.0", "@svgr/rollup": "^6.5.1", "eslint-config-custom": "*" }, diff --git a/packages/wallets/coin98/CHANGELOG.md b/packages/wallets/coin98/CHANGELOG.md index 94541a80..040056d7 100644 --- a/packages/wallets/coin98/CHANGELOG.md +++ b/packages/wallets/coin98/CHANGELOG.md @@ -1,5 +1,11 @@ # @reef-knot/wallet-adapter-coin98 +## 1.1.0 + +### Minor Changes + +- wallet connectors id exports and typings updated + ## 1.0.1 ### Patch Changes diff --git a/packages/wallets/coin98/package.json b/packages/wallets/coin98/package.json index d6f67a1e..c34122eb 100644 --- a/packages/wallets/coin98/package.json +++ b/packages/wallets/coin98/package.json @@ -1,6 +1,6 @@ { "name": "@reef-knot/wallet-adapter-coin98", - "version": "1.0.1", + "version": "1.1.0", "main": "dist/index.js", "types": "dist/index.d.ts", "exports": { @@ -32,7 +32,7 @@ "lint": "eslint" }, "devDependencies": { - "@reef-knot/types": "^1.2.2", + "@reef-knot/types": "^1.6.0", "@svgr/rollup": "^6.5.1" }, "peerDependencies": { diff --git a/packages/wallets/coinbase/CHANGELOG.md b/packages/wallets/coinbase/CHANGELOG.md new file mode 100644 index 00000000..c86ba05f --- /dev/null +++ b/packages/wallets/coinbase/CHANGELOG.md @@ -0,0 +1,7 @@ +# @reef-knot/wallet-adapter-coinbase + +## 1.1.0 + +### Minor Changes + +- wallet connectors id exports and typings updated diff --git a/packages/wallets/coinbase/package.json b/packages/wallets/coinbase/package.json index 933584f6..8218d3c5 100644 --- a/packages/wallets/coinbase/package.json +++ b/packages/wallets/coinbase/package.json @@ -1,6 +1,6 @@ { "name": "@reef-knot/wallet-adapter-coinbase", - "version": "1.0.0", + "version": "1.1.0", "main": "dist/index.js", "types": "dist/index.d.ts", "exports": { @@ -32,7 +32,7 @@ "lint": "eslint --ext ts,tsx,js,mjs ." }, "devDependencies": { - "@reef-knot/types": "^1.3.0", + "@reef-knot/types": "^1.6.0", "@svgr/rollup": "^6.5.1", "eslint-config-custom": "*" }, diff --git a/packages/wallets/dappBrowserInjected/CHANGELOG.md b/packages/wallets/dappBrowserInjected/CHANGELOG.md new file mode 100644 index 00000000..0a10eb2c --- /dev/null +++ b/packages/wallets/dappBrowserInjected/CHANGELOG.md @@ -0,0 +1,7 @@ +# @reef-knot/wallet-adapter-dapp-browser-injected + +## 1.1.0 + +### Minor Changes + +- wallet connectors id exports and typings updated diff --git a/packages/wallets/dappBrowserInjected/package.json b/packages/wallets/dappBrowserInjected/package.json index 0ed6dbac..4cbc1b7b 100644 --- a/packages/wallets/dappBrowserInjected/package.json +++ b/packages/wallets/dappBrowserInjected/package.json @@ -1,6 +1,6 @@ { "name": "@reef-knot/wallet-adapter-dapp-browser-injected", - "version": "1.0.0", + "version": "1.1.0", "main": "dist/index.js", "types": "dist/index.d.ts", "exports": { @@ -32,7 +32,7 @@ "lint": "eslint --ext ts,tsx,js,mjs ." }, "devDependencies": { - "@reef-knot/types": "^1.3.0", + "@reef-knot/types": "^1.6.0", "@reef-knot/wallets-helpers": "^1.1.5", "@svgr/rollup": "^6.5.1", "eslint-config-custom": "*" diff --git a/packages/wallets/exodus/CHANGELOG.md b/packages/wallets/exodus/CHANGELOG.md index b1b6c515..b8e7f811 100644 --- a/packages/wallets/exodus/CHANGELOG.md +++ b/packages/wallets/exodus/CHANGELOG.md @@ -1,5 +1,11 @@ # @reef-knot/wallet-adapter-exodus +## 1.3.0 + +### Minor Changes + +- wallet connectors id exports and typings updated + ## 1.2.4 ### Patch Changes diff --git a/packages/wallets/exodus/package.json b/packages/wallets/exodus/package.json index a68fcb84..cf2d530f 100644 --- a/packages/wallets/exodus/package.json +++ b/packages/wallets/exodus/package.json @@ -1,6 +1,6 @@ { "name": "@reef-knot/wallet-adapter-exodus", - "version": "1.2.4", + "version": "1.3.0", "main": "dist/index.js", "types": "dist/index.d.ts", "exports": { @@ -32,7 +32,7 @@ "lint": "eslint --ext ts,tsx,js,mjs ." }, "devDependencies": { - "@reef-knot/types": "^1.3.0", + "@reef-knot/types": "^1.6.0", "@svgr/rollup": "^6.5.1", "eslint-config-custom": "*" }, diff --git a/packages/wallets/imtoken/CHANGELOG.md b/packages/wallets/imtoken/CHANGELOG.md new file mode 100644 index 00000000..8a98308c --- /dev/null +++ b/packages/wallets/imtoken/CHANGELOG.md @@ -0,0 +1,7 @@ +# @reef-knot/wallet-adapter-imtoken + +## 1.1.0 + +### Minor Changes + +- wallet connectors id exports and typings updated diff --git a/packages/wallets/imtoken/package.json b/packages/wallets/imtoken/package.json index f9a2bfe3..6989df47 100644 --- a/packages/wallets/imtoken/package.json +++ b/packages/wallets/imtoken/package.json @@ -1,6 +1,6 @@ { "name": "@reef-knot/wallet-adapter-imtoken", - "version": "1.0.0", + "version": "1.1.0", "main": "dist/index.js", "types": "dist/index.d.ts", "exports": { @@ -32,7 +32,7 @@ "lint": "eslint --ext ts,tsx,js,mjs ." }, "devDependencies": { - "@reef-knot/types": "^1.3.0", + "@reef-knot/types": "^1.6.0", "@svgr/rollup": "^6.5.1", "eslint-config-custom": "*" }, diff --git a/packages/wallets/ledger-hid/CHANGELOG.md b/packages/wallets/ledger-hid/CHANGELOG.md index 8da354c1..b6cd0822 100644 --- a/packages/wallets/ledger-hid/CHANGELOG.md +++ b/packages/wallets/ledger-hid/CHANGELOG.md @@ -1,5 +1,11 @@ # @reef-knot/wallet-adapter-ledger-hid +## 2.1.0 + +### Minor Changes + +- wallet connectors id exports and typings updated + ## 2.0.0 ### Patch Changes diff --git a/packages/wallets/ledger-hid/package.json b/packages/wallets/ledger-hid/package.json index c1ae829f..72c470be 100644 --- a/packages/wallets/ledger-hid/package.json +++ b/packages/wallets/ledger-hid/package.json @@ -1,6 +1,6 @@ { "name": "@reef-knot/wallet-adapter-ledger-hid", - "version": "2.0.0", + "version": "2.1.0", "main": "dist/index.js", "types": "dist/index.d.ts", "exports": { @@ -32,7 +32,7 @@ "lint": "eslint --ext ts,tsx,js,mjs ." }, "devDependencies": { - "@reef-knot/types": "^1.5.0", + "@reef-knot/types": "^1.6.0", "@reef-knot/ledger-connector": "^3.0.0", "@svgr/rollup": "^6.5.1", "eslint-config-custom": "*" diff --git a/packages/wallets/ledger-live/CHANGELOG.md b/packages/wallets/ledger-live/CHANGELOG.md index 2ac97e78..bcb4d2c8 100644 --- a/packages/wallets/ledger-live/CHANGELOG.md +++ b/packages/wallets/ledger-live/CHANGELOG.md @@ -1,5 +1,11 @@ # @reef-knot/wallet-adapter-ledger-live +## 2.1.0 + +### Minor Changes + +- wallet connectors id exports and typings updated + ## 2.0.0 ### Patch Changes diff --git a/packages/wallets/ledger-live/package.json b/packages/wallets/ledger-live/package.json index d13dc637..53c6cad9 100644 --- a/packages/wallets/ledger-live/package.json +++ b/packages/wallets/ledger-live/package.json @@ -1,6 +1,6 @@ { "name": "@reef-knot/wallet-adapter-ledger-live", - "version": "2.0.0", + "version": "2.1.0", "main": "dist/index.js", "types": "dist/index.d.ts", "exports": { @@ -32,7 +32,7 @@ "lint": "eslint --ext ts,tsx,js,mjs ." }, "devDependencies": { - "@reef-knot/types": "^1.5.0", + "@reef-knot/types": "^1.6.0", "@reef-knot/ledger-connector": "^3.0.0", "@svgr/rollup": "^6.5.1", "eslint-config-custom": "*" diff --git a/packages/wallets/metamask/CHANGELOG.md b/packages/wallets/metamask/CHANGELOG.md new file mode 100644 index 00000000..caec8a82 --- /dev/null +++ b/packages/wallets/metamask/CHANGELOG.md @@ -0,0 +1,7 @@ +# @reef-knot/wallet-adapter-metamask + +## 1.1.0 + +### Minor Changes + +- wallet connectors id exports and typings updated diff --git a/packages/wallets/metamask/package.json b/packages/wallets/metamask/package.json index 8e135142..7cfdfa72 100644 --- a/packages/wallets/metamask/package.json +++ b/packages/wallets/metamask/package.json @@ -1,6 +1,6 @@ { "name": "@reef-knot/wallet-adapter-metamask", - "version": "1.0.0", + "version": "1.1.0", "main": "dist/index.js", "types": "dist/index.d.ts", "exports": { @@ -32,7 +32,7 @@ "lint": "eslint --ext ts,tsx,js,mjs ." }, "devDependencies": { - "@reef-knot/types": "^1.3.0", + "@reef-knot/types": "^1.6.0", "@svgr/rollup": "^6.5.1", "eslint-config-custom": "*" }, diff --git a/packages/wallets/okx/CHANGELOG.md b/packages/wallets/okx/CHANGELOG.md index fa34a842..8f434adb 100644 --- a/packages/wallets/okx/CHANGELOG.md +++ b/packages/wallets/okx/CHANGELOG.md @@ -1,5 +1,11 @@ # @reef-knot/wallet-adapter-okx +## 1.4.0 + +### Minor Changes + +- wallet connectors id exports and typings updated + ## 1.3.1 ### Patch Changes diff --git a/packages/wallets/okx/package.json b/packages/wallets/okx/package.json index 279d5557..2f3f7786 100644 --- a/packages/wallets/okx/package.json +++ b/packages/wallets/okx/package.json @@ -1,6 +1,6 @@ { "name": "@reef-knot/wallet-adapter-okx", - "version": "1.3.1", + "version": "1.4.0", "main": "dist/index.js", "types": "dist/index.d.ts", "exports": { @@ -32,7 +32,7 @@ "lint": "eslint --ext ts,tsx,js,mjs ." }, "devDependencies": { - "@reef-knot/types": "^1.3.0", + "@reef-knot/types": "^1.6.0", "@svgr/rollup": "^6.5.1", "eslint-config-custom": "*" }, diff --git a/packages/wallets/safe/CHANGELOG.md b/packages/wallets/safe/CHANGELOG.md new file mode 100644 index 00000000..8488ac68 --- /dev/null +++ b/packages/wallets/safe/CHANGELOG.md @@ -0,0 +1,7 @@ +# @reef-knot/wallet-adapter-safe + +## 1.1.0 + +### Minor Changes + +- wallet connectors id exports and typings updated diff --git a/packages/wallets/safe/package.json b/packages/wallets/safe/package.json index 8ee864aa..058791ef 100644 --- a/packages/wallets/safe/package.json +++ b/packages/wallets/safe/package.json @@ -1,6 +1,6 @@ { "name": "@reef-knot/wallet-adapter-safe", - "version": "1.0.0", + "version": "1.1.0", "main": "dist/index.js", "types": "dist/index.d.ts", "exports": { @@ -32,7 +32,7 @@ "lint": "eslint --ext ts,tsx,js,mjs ." }, "devDependencies": { - "@reef-knot/types": "^1.3.0", + "@reef-knot/types": "^1.6.0", "@svgr/rollup": "^6.5.1", "eslint-config-custom": "*" }, diff --git a/packages/wallets/trust/CHANGELOG.md b/packages/wallets/trust/CHANGELOG.md new file mode 100644 index 00000000..6bd3cd64 --- /dev/null +++ b/packages/wallets/trust/CHANGELOG.md @@ -0,0 +1,7 @@ +# @reef-knot/wallet-adapter-trust + +## 1.1.0 + +### Minor Changes + +- wallet connectors id exports and typings updated diff --git a/packages/wallets/trust/package.json b/packages/wallets/trust/package.json index 897f63c2..e8d81efb 100644 --- a/packages/wallets/trust/package.json +++ b/packages/wallets/trust/package.json @@ -1,6 +1,6 @@ { "name": "@reef-knot/wallet-adapter-trust", - "version": "1.0.0", + "version": "1.1.0", "main": "dist/index.js", "types": "dist/index.d.ts", "exports": { @@ -32,7 +32,7 @@ "lint": "eslint --ext ts,tsx,js,mjs ." }, "devDependencies": { - "@reef-knot/types": "^1.3.0", + "@reef-knot/types": "^1.6.0", "@svgr/rollup": "^6.5.1", "eslint-config-custom": "*" }, diff --git a/packages/wallets/walletconnect/CHANGELOG.md b/packages/wallets/walletconnect/CHANGELOG.md index ff5e4701..7254478c 100644 --- a/packages/wallets/walletconnect/CHANGELOG.md +++ b/packages/wallets/walletconnect/CHANGELOG.md @@ -1,5 +1,11 @@ # @reef-knot/wallet-adapter-walletconnect +## 1.3.0 + +### Minor Changes + +- wallet connectors id exports and typings updated + ## 1.2.4 ### Patch Changes diff --git a/packages/wallets/walletconnect/package.json b/packages/wallets/walletconnect/package.json index d76020e4..d706c947 100644 --- a/packages/wallets/walletconnect/package.json +++ b/packages/wallets/walletconnect/package.json @@ -1,6 +1,6 @@ { "name": "@reef-knot/wallet-adapter-walletconnect", - "version": "1.2.4", + "version": "1.3.0", "main": "dist/index.js", "types": "dist/index.d.ts", "exports": { @@ -32,7 +32,7 @@ "lint": "eslint --ext ts,tsx,js,mjs ." }, "devDependencies": { - "@reef-knot/types": "^1.3.0", + "@reef-knot/types": "^1.6.0", "@reef-knot/wallets-helpers": "^1.1.5", "@svgr/rollup": "^6.5.1", "eslint-config-custom": "*" diff --git a/packages/wallets/xdefi/CHANGELOG.md b/packages/wallets/xdefi/CHANGELOG.md new file mode 100644 index 00000000..4337df69 --- /dev/null +++ b/packages/wallets/xdefi/CHANGELOG.md @@ -0,0 +1,7 @@ +# @reef-knot/wallet-adapter-xdefi + +## 1.1.0 + +### Minor Changes + +- wallet connectors id exports and typings updated diff --git a/packages/wallets/xdefi/package.json b/packages/wallets/xdefi/package.json index 0d378a6c..11cdf69b 100644 --- a/packages/wallets/xdefi/package.json +++ b/packages/wallets/xdefi/package.json @@ -1,6 +1,6 @@ { "name": "@reef-knot/wallet-adapter-xdefi", - "version": "1.0.0", + "version": "1.1.0", "main": "dist/index.js", "types": "dist/index.d.ts", "exports": { @@ -32,7 +32,7 @@ "lint": "eslint --ext ts,tsx,js,mjs ." }, "devDependencies": { - "@reef-knot/types": "^1.3.0", + "@reef-knot/types": "^1.6.0", "@svgr/rollup": "^6.5.1", "eslint-config-custom": "*" }, From 372c3d42b99767054b2fd09bfe01193ad16d977a Mon Sep 17 00:00:00 2001 From: Dmitrii Podlesnyi Date: Mon, 25 Mar 2024 17:50:37 +0400 Subject: [PATCH 09/15] fix: connect wallet modal wallet component by id fix --- .../components/ConnectWalletModal/ConnectWalletModal.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/connect-wallet-modal/src/components/WalletsModal/components/ConnectWalletModal/ConnectWalletModal.tsx b/packages/connect-wallet-modal/src/components/WalletsModal/components/ConnectWalletModal/ConnectWalletModal.tsx index e742d0d4..e8eb0fe1 100644 --- a/packages/connect-wallet-modal/src/components/WalletsModal/components/ConnectWalletModal/ConnectWalletModal.tsx +++ b/packages/connect-wallet-modal/src/components/WalletsModal/components/ConnectWalletModal/ConnectWalletModal.tsx @@ -164,7 +164,7 @@ export const ConnectWalletModal = ({ > {walletsList.map((walletData) => { const WalletComponent = - buttonComponentsByConnectorId[walletData.connector.id] ?? + buttonComponentsByConnectorId[walletData.walletId] ?? buttonComponentsByConnectorId.default; if (!WalletComponent) return null; return ( From 5444cde81a9f40eae72a9ce05651e0e85d1854d7 Mon Sep 17 00:00:00 2001 From: Dmitrii Podlesnyi Date: Mon, 25 Mar 2024 18:07:57 +0400 Subject: [PATCH 10/15] styles: wallets modal no wallet link updated --- .../ConnectWalletModal/ConnectWalletModal.tsx | 8 +++++--- .../components/ConnectWalletModal/styles.tsx | 11 ++++++++++- 2 files changed, 15 insertions(+), 4 deletions(-) diff --git a/packages/connect-wallet-modal/src/components/WalletsModal/components/ConnectWalletModal/ConnectWalletModal.tsx b/packages/connect-wallet-modal/src/components/WalletsModal/components/ConnectWalletModal/ConnectWalletModal.tsx index e8eb0fe1..2ed0a3e7 100644 --- a/packages/connect-wallet-modal/src/components/WalletsModal/components/ConnectWalletModal/ConnectWalletModal.tsx +++ b/packages/connect-wallet-modal/src/components/WalletsModal/components/ConnectWalletModal/ConnectWalletModal.tsx @@ -8,7 +8,6 @@ import React, { import { useReefKnotModal } from '@reef-knot/core-react'; import { isMobileOrTablet } from '@reef-knot/wallets-helpers'; -import { Link } from '@lidofinance/lido-ui'; import { Modal } from '@reef-knot/ui-react'; import { WalletsModalProps } from '../../types'; import { Terms, WalletModalConnectTermsProps } from '../../../Terms'; @@ -26,6 +25,7 @@ import { IconSearch, IconMoreWallets, IconInputClear, + NoWalletLink, } from './styles'; import { sortWalletsList } from './sortWalletsList'; @@ -123,9 +123,11 @@ export const ConnectWalletModal = ({ - Choose wallet{' '} + Choose wallet {linkDontHaveWallet && ( - I don't have a wallet + + I don't have a wallet + )} {isShownOtherWallets && ( diff --git a/packages/connect-wallet-modal/src/components/WalletsModal/components/ConnectWalletModal/styles.tsx b/packages/connect-wallet-modal/src/components/WalletsModal/components/ConnectWalletModal/styles.tsx index 021a3fe1..a0a8bdc3 100644 --- a/packages/connect-wallet-modal/src/components/WalletsModal/components/ConnectWalletModal/styles.tsx +++ b/packages/connect-wallet-modal/src/components/WalletsModal/components/ConnectWalletModal/styles.tsx @@ -1,6 +1,6 @@ import React from 'react'; import styled, { css } from '@reef-knot/ui-react/styled-wrapper'; -import { Input } from '@lidofinance/lido-ui'; +import { Input, Link } from '@lidofinance/lido-ui'; const SCROLLBAR_WIDTH = 10; @@ -137,6 +137,8 @@ export const MoreWalletsText = styled.div` export const Subtitle = styled.div` ${({ theme }) => css` + display: flex; + align-items: baseline; font-size: ${theme.fontSizesMap.xs}px; font-weight: 700; `} @@ -180,6 +182,13 @@ export const InputClearButton = styled.button` } `; +export const NoWalletLink = styled(Link)` + ${({ theme }) => css` + margin-left: ${theme.spaceMap.md}px; + font-size: ${theme.fontSizesMap.xxs}px; + `} +`; + export const IconInputClear = () => ( Date: Mon, 25 Mar 2024 18:28:53 +0400 Subject: [PATCH 11/15] core: wallets modal text updated --- .../components/ConnectWalletModal/ConnectWalletModal.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/connect-wallet-modal/src/components/WalletsModal/components/ConnectWalletModal/ConnectWalletModal.tsx b/packages/connect-wallet-modal/src/components/WalletsModal/components/ConnectWalletModal/ConnectWalletModal.tsx index 2ed0a3e7..5c429f78 100644 --- a/packages/connect-wallet-modal/src/components/WalletsModal/components/ConnectWalletModal/ConnectWalletModal.tsx +++ b/packages/connect-wallet-modal/src/components/WalletsModal/components/ConnectWalletModal/ConnectWalletModal.tsx @@ -189,7 +189,7 @@ export const ConnectWalletModal = ({ - {isShownOtherWallets ? 'Hide wallets' : 'Other wallets'} + {isShownOtherWallets ? 'Less wallets' : 'More wallets'} )} From 56f0b9e4579224d65668ff6aeaa995e9b859055a Mon Sep 17 00:00:00 2001 From: Dmitrii Podlesnyi Date: Wed, 27 Mar 2024 16:44:47 +0400 Subject: [PATCH 12/15] styles: connect wallet modal layout styles refactored and mobile scroll ux improved --- apps/demo-react/components/Header.tsx | 4 + .../src/components/ConnectButton/styles.tsx | 14 +- .../ConnectWalletModal/ConnectWalletModal.tsx | 153 +++--------- .../ConnectWalletModalLayout.tsx | 128 ++++++++++ .../ConnectWalletModalLayout/index.ts | 1 + .../styles.tsx | 231 ++++++++---------- .../EmptyWalletsList/EmptyWalletsList.tsx | 11 +- .../components/EmptyWalletsList/styles.tsx | 1 + .../WalletModalInput/WalletModalInput.tsx | 42 ++++ .../components/WalletModalInput/index.ts | 1 + .../components/WalletModalInput/styles.tsx | 84 +++++++ .../ui-react/src/components/modal/Modal.tsx | 16 +- .../src/components/modal/ModalOverlay.tsx | 10 +- .../components/modal/ModalOverlayStyles.tsx | 13 +- .../src/components/modal/ModalStyles.tsx | 23 +- .../ui-react/src/components/modal/types.tsx | 5 +- 16 files changed, 477 insertions(+), 260 deletions(-) create mode 100644 packages/connect-wallet-modal/src/components/WalletsModal/components/ConnectWalletModalLayout/ConnectWalletModalLayout.tsx create mode 100644 packages/connect-wallet-modal/src/components/WalletsModal/components/ConnectWalletModalLayout/index.ts rename packages/connect-wallet-modal/src/components/WalletsModal/components/{ConnectWalletModal => ConnectWalletModalLayout}/styles.tsx (68%) create mode 100644 packages/connect-wallet-modal/src/components/WalletsModal/components/WalletModalInput/WalletModalInput.tsx create mode 100644 packages/connect-wallet-modal/src/components/WalletsModal/components/WalletModalInput/index.ts create mode 100644 packages/connect-wallet-modal/src/components/WalletsModal/components/WalletModalInput/styles.tsx diff --git a/apps/demo-react/components/Header.tsx b/apps/demo-react/components/Header.tsx index b6287e20..49ae4c6d 100644 --- a/apps/demo-react/components/Header.tsx +++ b/apps/demo-react/components/Header.tsx @@ -4,6 +4,10 @@ const Header = () => ( Reef Knot demo app +