Merge pull request #130 from lidofinance/feature/si-1268-new-modal-fo…

…r-widgets Connect wallet modal ui update
lidofinance · Apr 1, 2024 · 17f84b3 · 17f84b3
2 parents d5adbf3 + 43da4b4
commit 17f84b3
Show file tree

Hide file tree

Showing 96 changed files with 1,422 additions and 400 deletions.
diff --git a/apps/demo-react/components/Header.tsx b/apps/demo-react/components/Header.tsx
@@ -4,6 +4,10 @@ const Header = () => (
   <Head>
     <title>Reef Knot demo app</title>
     <meta name="viewport" content="initial-scale=1.0, width=device-width" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
+    />
     <link rel="icon" type="image/png" href="/reef-knot-logo-32x32.png" />
     <style>{`
           body {

diff --git a/apps/demo-react/components/WalletsModal.tsx b/apps/demo-react/components/WalletsModal.tsx
@@ -1,13 +1,18 @@
 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;
 
   return (
     <WalletsModalForEth
       metrics={metrics}
       shouldInvertWalletIcon={isDarkTheme}
+      linkDontHaveWallet={LINK_DONT_HAVE_WALLET_DEFAULT}
+      walletsPinned={['okx', 'browserExtension']}
     />
   );
 }
diff --git 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/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
@@ -43,11 +43,26 @@ Use it like this:
 <WalletsModalForEth {...props} />
 ```
 
-#### 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 `walletsShown` property like this:
 ```tsx
 <WalletsModalForEth
-  hiddenWallets={['Metamask']}
+  walletsShown={[
+    'metamask',
+    'walletconnect',
+    'brave',
+    'dappBrowserInjected',
+  ]}
+/>
+```
+
+#### 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 `walletsPinned` property like this:
+```tsx
+<WalletsModalForEth
+  walletsPinned={['dappBrowserInjected']}
 />
 ```
diff --git 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,13 +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.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/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<ConnectButtonProps> = (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<ConnectButtonProps> = (props: ConnectButtonProps) => {
   return (
     <ConnectButtonStyle {...rest}>
       <ConnectButtonContentStyle>
-        <ConnectButtonIconStyle>
+        <ConnectButtonIconStyle $isCompact={isCompact}>
           {isValidElement(<ButtonIcon />) && <ButtonIcon />}
         </ConnectButtonIconStyle>
         <ConnectButtonTitleStyle>{children}</ConnectButtonTitleStyle>

diff --git a/packages/connect-wallet-modal/src/components/ConnectButton/styles.tsx b/packages/connect-wallet-modal/src/components/ConnectButton/styles.tsx
@@ -17,32 +17,55 @@ 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 }>`
+  ${({ theme, $isCompact }) => css`
+    display: flex;
+    margin-right: 12px;
+
+    svg {
+      border-radius: 50%;
+      ${$isCompact
+        ? css`
+            width: 40px;
+            height: 40px;
+          `
+        : css`
+            width: 48px;
+            height: 48px;
+          `}
 
-  svg {
-    width: 40px;
-    height: 40px;
-    border-radius: 50%;
-  }
+      ${theme.mediaQueries.md} {
+        ${$isCompact
+          ? css`
+              width: 36px;
+              height: 36px;
+            `
+          : css`
+              width: 40px;
+              height: 40px;
+            `}
+      }
+    }
+  `}
 `;
diff --git 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
@@ -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<WalletsModalProps>) {
-  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 (
-        <Modal
+        <ConnectWalletModal
           {...passedDownProps}
-          open
-          title="Connect wallet"
-          center={false}
-          onClose={onCloseReject}
-        >
-          <Terms {...termsProps} />
-          <WalletsButtonsContainer $buttonsFullWidth={buttonsFullWidth}>
-            {getWalletsButtons({
-              commonProps: buttonsCommonProps,
-              buttonComponentsByConnectorId,
-              hiddenWallets,
-              walletDataList,
-            })}
-          </WalletsButtonsContainer>
-        </Modal>
+          termsProps={termsProps}
+          onCloseSuccess={onCloseSuccess}
+          onCloseReject={onCloseReject}
+        />
       );
     }
 

diff --git a/packages/connect-wallet-modal/src/components/WalletsModal/WalletsModalForEth.tsx b/packages/connect-wallet-modal/src/components/WalletsModal/WalletsModalForEth.tsx
@@ -8,20 +8,54 @@ import {
   ConnectBrowser,
 } from '../../connectButtons';
 import { WalletsModal } from './WalletsModal';
-import type { ButtonComponentsByConnectorId, 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<WalletIdsEthereum>;
+
+const buttonComponentsByConnectorId: WalletsModalEthProps['buttonComponentsByConnectorId'] =
+  {
+    default: ConnectInjected, // fallback
+    browserExtension: ConnectBrowser,
+    walletConnect: ConnectWC,
+    coinbaseWallet: ConnectCoinbase,
+    ledgerHID: ConnectLedger,
+  };
+
+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['walletsPinned'] = [
+  'browserExtension',
+];
 
 type WalletsModalForEthProps = Omit<
-  WalletsModalProps,
-  'buttonComponentsByConnectorId' | 'walletDataList'
->;
+  WalletsModalEthProps,
+  | 'buttonComponentsByConnectorId'
+  | 'walletDataList'
+  | 'walletsShown'
+  | 'walletsPinned'
+> & {
+  walletsShown?: WalletsModalEthProps['walletsShown'];
+  walletsPinned?: WalletsModalEthProps['walletsPinned'];
+};
 
 export function WalletsModalForEth(props: WalletsModalForEthProps) {
   const { walletDataList } = useReefKnotContext();
@@ -30,6 +64,8 @@ export function WalletsModalForEth(props: WalletsModalForEthProps) {
     <WalletsModal
       {...props}
       walletDataList={walletDataList}
+      walletsShown={props.walletsShown || WALLETS_DISPLAY_CONFIG_DEFAULT}
+      walletsPinned={props.walletsPinned || WALLETS_PINNED_CONFIG_DEFAULT}
       buttonComponentsByConnectorId={buttonComponentsByConnectorId}
     />
   );