Merge pull request #136 from lidofinance/fix/connect-wallet-modal-styles

fix: connect wallet modal safari styles
lidofinance · Apr 15, 2024 · f68288c · f68288c
2 parents 80086cd + 4c15ca5
commit f68288c
Show file tree

Hide file tree

Showing 38 changed files with 224 additions and 140 deletions.
diff --git a/packages/connect-wallet-modal/CHANGELOG.md b/packages/connect-wallet-modal/CHANGELOG.md
@@ -1,5 +1,17 @@
 # @reef-knot/connect-wallet-modal
 
+## 4.1.2
+
+### Patch Changes
+
+- Updated dependencies
+
+## 4.1.1
+
+### Patch Changes
+
+- connect wallet modal safari styles fixed
+
 ## 4.1.0
 
 ### Minor Changes

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": "4.1.0",
+  "version": "4.1.2",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "exports": {
@@ -46,29 +46,26 @@
     "@types/react-dom": "18.2.17"
   },
   "devDependencies": {
-    "@reef-knot/core-react": "^3.1.0",
+    "@reef-knot/core-react": "^3.1.2",
     "@reef-knot/types": "^1.7.0",
     "@reef-knot/ui-react": "^1.1.0",
-    "@reef-knot/wallets-helpers": "^1.1.5",
-    "@reef-knot/web3-react": "^3.0.0",
+    "@reef-knot/wallets-helpers": "^1.1.6",
+    "@reef-knot/web3-react": "^3.0.1",
     "@reef-knot/ledger-connector": "^3.0.0",
-    "@types/ua-parser-js": "^0.7.36",
     "eslint-config-custom": "*",
     "react": "18.2.0",
     "react-dom": "^18.2.0",
-    "ua-parser-js": "1.0.33",
     "wagmi": "^0.12.19"
   },
   "peerDependencies": {
     "@reef-knot/core-react": "^3.0.0",
     "@reef-knot/types": "^1.2.1",
     "@reef-knot/ui-react": "^1.0.4",
-    "@reef-knot/wallets-helpers": "^1.1.2",
+    "@reef-knot/wallets-helpers": "^1.1.6",
     "@reef-knot/web3-react": "^3.0.0",
     "@reef-knot/ledger-connector": "^3.0.0",
     "react": ">=18",
     "@lidofinance/lido-ui": "^3.18.0",
-    "ua-parser-js": "^1.0.33",
     "wagmi": "^0.12.19"
   }
 }
diff --git a/packages/connect-wallet-modal/src/components/ConnectButton/styles.tsx b/packages/connect-wallet-modal/src/components/ConnectButton/styles.tsx
@@ -56,15 +56,8 @@ export const ConnectButtonIconStyle = styled.span<{ $isCompact?: boolean }>`
           `}
 
       ${theme.mediaQueries.md} {
-        ${$isCompact
-          ? css`
-              width: 36px;
-              height: 36px;
-            `
-          : css`
-              width: 40px;
-              height: 40px;
-            `}
+        width: 40px;
+        height: 40px;
       }
     }
   `}

diff --git a/.../components/WalletsModal/components/ConnectWalletModalLayout/ConnectWalletModalLayout.tsx b/.../components/WalletsModal/components/ConnectWalletModalLayout/ConnectWalletModalLayout.tsx
@@ -17,10 +17,14 @@ import {
 } from './styles';
 import { Terms, WalletModalConnectTermsProps } from '../../../Terms';
 
-import { isMobileOrTablet } from '@reef-knot/wallets-helpers';
+import { isMobileOrTablet, isIOS, isIPad } from '@reef-knot/wallets-helpers';
 import type { WalletsModalProps } from '../../types';
 import { WalletModalInput } from '../WalletModalInput';
 
+// Additional check because `@supports selector(::-webkit-scrollbar)`
+// passes as true on iOS/iPad devices, but styles will not really apply
+const isSupportedCustomScrollbar = !isIOS && !isIPad;
+
 type ConnectWalletModalLayoutProps = WalletsModalProps & {
   termsProps: WalletModalConnectTermsProps;
   inputValue: string;
@@ -61,6 +65,7 @@ export const ConnectWalletModalLayout = ({
   }, [isShownOtherWallets, onInputClear]);
 
   useEffect(() => {
+    // Screen height media query
     const mediaQuery = window.matchMedia(MEDIA_MOBILE_HEIGHT);
     setIsMobileHeight(mediaQuery.matches);
     const onMediaChange = (e: MediaQueryListEvent) => {
@@ -84,8 +89,13 @@ export const ConnectWalletModalLayout = ({
       clampHeightByWindow={!isShownOtherWallets && isMobileHeight}
       stretchHeightByWindow={isShownOtherWallets && isMobileHeight}
     >
-      <ContentWrapper key={isShownOtherWallets ? 'compact' : 'full'}>
-        <ContentWrapperInner>
+      <ContentWrapper
+        key={isShownOtherWallets ? 'compact' : 'full'}
+        $isSupportedCustomScrollbar={isSupportedCustomScrollbar}
+      >
+        <ContentWrapperInner
+          $isSupportedCustomScrollbar={isSupportedCustomScrollbar}
+        >
           <ContentHeader>
             <Terms {...termsProps} />
             <Subtitle>
@@ -109,6 +119,7 @@ export const ConnectWalletModalLayout = ({
           <WalletsButtonsScrollBox
             key={isShownOtherWallets ? 'full' : 'compact'}
             $isCompact={!isShownOtherWallets}
+            $isSupportedCustomScrollbar={isSupportedCustomScrollbar}
           >
             {isEmptyWalletsList && (
               <EmptyWalletsList
@@ -122,6 +133,7 @@ export const ConnectWalletModalLayout = ({
               <WalletsButtonsContainer
                 $isCompact={isShownOtherWallets}
                 $buttonsFullWidth={isShownOtherWallets || buttonsFullWidth}
+                $isSupportedCustomScrollbar={isSupportedCustomScrollbar}
               >
                 {children}
               </WalletsButtonsContainer>

diff --git a/...t-wallet-modal/src/components/WalletsModal/components/ConnectWalletModalLayout/styles.tsx b/...t-wallet-modal/src/components/WalletsModal/components/ConnectWalletModalLayout/styles.tsx
@@ -10,36 +10,42 @@ export const SCROLLBAR_WIDTH = 10;
 export const MEDIA_DESKTOP_HEIGHT = `(min-height: 641px)`;
 export const MEDIA_MOBILE_HEIGHT = `(max-height: 640px)`;
 
-const scrollBoxCss = css`
-  ${({ theme }) => css`
+type ScrollbarProps = {
+  $isSupportedCustomScrollbar: boolean;
+};
+const scrollBoxCss = css<ScrollbarProps>`
+  ${({ theme, $isSupportedCustomScrollbar }) => css`
     overflow-y: scroll;
     overflow-x: hidden;
     -webkit-overflow-scrolling: touch;
 
-    @supports selector(::-webkit-scrollbar) {
-      &::-webkit-scrollbar-track {
-        border-radius: 30px;
-        background-color: transparent;
-      }
-
-      &::-webkit-scrollbar {
-        width: ${SCROLLBAR_WIDTH}px;
-        background-color: transparent;
-      }
+    ${$isSupportedCustomScrollbar &&
+    css`
+      @supports selector(::-webkit-scrollbar) {
+        &::-webkit-scrollbar-track {
+          border-radius: 30px;
+          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};
+        &::-webkit-scrollbar {
+          width: ${SCROLLBAR_WIDTH}px;
+          background-color: transparent;
+        }
 
-        &:hover {
-          border-width: 0;
+        &::-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;
+          }
         }
       }
-    }
+    `}
   `}
 `;
 
@@ -59,7 +65,7 @@ const modalContentCss = css`
 /**
  * Main Container
  */
-export const ContentWrapper = styled.div`
+export const ContentWrapper = styled.div<ScrollbarProps>`
   display: flex;
   flex-direction: column;
   flex: 0 1 auto;
@@ -75,13 +81,18 @@ export const ContentWrapper = styled.div`
   }
 `;
 
-export const ContentWrapperInner = styled.div`
+export const ContentWrapperInner = styled.div<ScrollbarProps>`
   @media ${MEDIA_MOBILE_HEIGHT} {
     display: flex;
     flex-direction: column;
     flex: 1 1 auto;
     min-height: 100%;
-    margin-right: -${SCROLLBAR_WIDTH}px;
+
+    ${({ $isSupportedCustomScrollbar }) =>
+      $isSupportedCustomScrollbar &&
+      css`
+        margin-right: -${SCROLLBAR_WIDTH}px;
+      `}
   }
 `;
 
@@ -104,7 +115,10 @@ export const Subtitle = styled.div`
 /**
  * Wallets Layout
  */
-export const WalletsButtonsScrollBox = styled.div<{ $isCompact: boolean }>`
+type WalletsButtonsScrollBox = ScrollbarProps & {
+  $isCompact: boolean;
+};
+export const WalletsButtonsScrollBox = styled.div<WalletsButtonsScrollBox>`
   ${({ $isCompact }) => css`
     display: flex;
     flex: 1 1 auto;
@@ -114,24 +128,37 @@ export const WalletsButtonsScrollBox = styled.div<{ $isCompact: boolean }>`
       ${scrollBoxCss}
       ${$isCompact
         ? css`
-            max-height: 300px;
+            max-height: 350px;
           `
         : css`
-            height: 300px;
+            height: 298px;
           `}
     }
   `}
 `;
 
-export const WalletsButtonsContainer = styled.div<{
+type WalletsButtonsContainerProps = ScrollbarProps & {
   $buttonsFullWidth: boolean;
   $isCompact?: boolean;
-}>`
+};
+export const WalletsButtonsContainer = styled.div<WalletsButtonsContainerProps>`
   ${modalContentCss};
-  ${({ theme, $buttonsFullWidth, $isCompact }) => css`
-    @media ${MEDIA_DESKTOP_HEIGHT} {
-      padding-right: calc(${theme.spaceMap.xxl}px - ${SCROLLBAR_WIDTH}px);
-    }
+  ${({
+    theme,
+    $buttonsFullWidth,
+    $isCompact,
+    $isSupportedCustomScrollbar,
+  }) => css`
+    ${$isSupportedCustomScrollbar &&
+    css`
+      @media ${MEDIA_DESKTOP_HEIGHT} {
+        padding-right: calc(${theme.spaceMap.xxl}px - ${SCROLLBAR_WIDTH}px);
+
+        ${theme.mediaQueries.md} {
+          padding-right: calc(${theme.spaceMap.lg}px - ${SCROLLBAR_WIDTH}px);
+        }
+      }
+    `}
 
     padding-bottom: ${theme.spaceMap.xxl}px;
     height: fit-content;
@@ -144,7 +171,7 @@ export const WalletsButtonsContainer = styled.div<{
     ${theme.mediaQueries.md} {
       padding-bottom: ${theme.spaceMap.lg}px;
       grid-template-columns: 100%;
-      grid-auto-rows: ${$isCompact ? 56 : 64}px;
+      grid-auto-rows: 64px;
     }
   `}
 `;

diff --git a/packages/connect-wallet-modal/src/helpers/index.ts b/packages/connect-wallet-modal/src/helpers/index.ts
@@ -1,4 +1,3 @@
-export * from './userAgents';
 export * from './noop';
 export * from './capitalize';
 export * from './openWindow';

diff --git a/packages/connect-wallet-modal/src/helpers/suggestApp.ts b/packages/connect-wallet-modal/src/helpers/suggestApp.ts
@@ -1,5 +1,5 @@
 import { openWindow } from './openWindow';
-import { isAndroid, isIOS } from './userAgents';
+import { isAndroid, isIOS } from '@reef-knot/wallets-helpers';
 
 export const suggestApp = (urls: {
   default: string;

diff --git a/packages/connect-wallet-modal/src/helpers/userAgents.ts b/packages/connect-wallet-modal/src/helpers/userAgents.ts
diff --git a/packages/core-react/CHANGELOG.md b/packages/core-react/CHANGELOG.md
@@ -1,5 +1,11 @@
 # @reef-knot/core-react
 
+## 3.1.2
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 3.1.1
 
 ### Patch Changes

diff --git a/packages/core-react/package.json b/packages/core-react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@reef-knot/core-react",
-  "version": "3.1.1",
+  "version": "3.1.2",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "exports": {
@@ -36,15 +36,12 @@
     "dev": "dev=on rollup -c -w",
     "lint": "eslint --ext ts,tsx,js,mjs ."
   },
-  "dependencies": {
-    "ua-parser-js": "1.0.33"
-  },
   "devDependencies": {
     "@reef-knot/ledger-connector": "^3.0.0",
     "@reef-knot/wallets-list": "^1.13.1",
     "@reef-knot/types": "^1.7.0",
     "@reef-knot/ui-react": "^1.0.8",
-    "@types/ua-parser-js": "^0.7.36",
+    "@reef-knot/wallets-helpers": "^1.1.6",
     "eslint-config-custom": "*",
     "react": "18.2.0",
     "wagmi": "^0.12.19"
@@ -54,6 +51,7 @@
     "@reef-knot/wallets-list": "^1.4.1",
     "@reef-knot/types": "^1.2.1",
     "@reef-knot/ui-react": "^1.0.4",
+    "@reef-knot/wallets-helpers": "^1.1.6",
     "react": ">=18",
     "wagmi": "^0.12.19"
   }

diff --git a/packages/core-react/src/helpers/index.ts b/packages/core-react/src/helpers/index.ts
@@ -1,4 +1,3 @@
 export * from './getUnsupportedChainError';
 export * from './checkTermsAccepted';
-export * from './userAgents';
 export * from './useLocalStorage';
diff --git a/packages/core-react/src/helpers/userAgents.ts b/packages/core-react/src/helpers/userAgents.ts
diff --git a/packages/core-react/src/hooks/useConnectorInfo.ts b/packages/core-react/src/hooks/useConnectorInfo.ts
@@ -4,7 +4,7 @@ import {
   LedgerHIDConnector,
   LedgerLiveConnector,
 } from '@reef-knot/ledger-connector';
-import { isMobileOrTablet } from '../helpers/userAgents';
+import { isMobileOrTablet } from '@reef-knot/wallets-helpers';
 
 type ConnectorInfo = {
   connectorName?: string;