Merge pull request #2076 from Koniverse/koni/dev/issue-2014

[Issue - 2014] Update responsive for dapps
Koniverse · Oct 26, 2023 · 8514f37 · 8514f37
2 parents 8eabfa3 + ce8d79d
commit 8514f37
Show file tree

Hide file tree

Showing 11 changed files with 341 additions and 159 deletions.
diff --git a/packages/extension-koni-ui/package.json b/packages/extension-koni-ui/package.json
@@ -43,7 +43,6 @@
     "@subwallet/keyring": "^0.1.1",
     "@subwallet/react-ui": "5.1.2-b73",
     "@subwallet/ui-keyring": "^0.1.1",
-    "@trendyol-js/react-carousel": "^3.0.2",
     "@walletconnect/types": "^2.8.4",
     "axios": "^1.2.1",
     "bip39": "^3.1.0",
@@ -80,7 +79,8 @@
     "redux-toolkit": "^1.1.2-1",
     "semantic-ui-react": "^2.1.4",
     "styled-components": "^5.3.6",
-    "usehooks-ts": "^2.9.1"
+    "usehooks-ts": "^2.9.1",
+    "react-slick": "^0.29.0"
   },
   "devDependencies": {
     "@subwallet/extension-mocks": "^1.1.12-1",
@@ -94,6 +94,7 @@
     "@types/redux-persist": "^4.3.1",
     "@types/sinon-chrome": "^2.2.11",
     "@types/store": "^2.0.2",
+    "@types/react-slick": "^0.23.11",
     "@types/styled-components": "^5.1.26",
     "@wojtekmaj/enzyme-adapter-react-17": "^0.8.0",
     "enzyme": "^3.11.0",

diff --git a/...ages/extension-koni-ui/src/Popup/CrowdloanUnlockCampaign/CrowdloanContributionsResult.tsx b/...ages/extension-koni-ui/src/Popup/CrowdloanUnlockCampaign/CrowdloanContributionsResult.tsx
@@ -508,7 +508,10 @@ const Component: React.FC<Props> = ({ className = '' }: Props) => {
           </div>
         )}
         {!!filteredTableItems.length && !loading && (
-          <CrowdloanTable hideBalance={false} items={filteredTableItems} />
+          <CrowdloanTable
+            hideBalance={false}
+            items={filteredTableItems}
+          />
         )}
         {!filteredTableItems.length && !loading && (
           <div className={'__empty-list-wrapper'}>

diff --git a/packages/extension-koni-ui/src/Popup/DApps/DAppItem.tsx b/packages/extension-koni-ui/src/Popup/DApps/DAppItem.tsx
@@ -17,11 +17,13 @@ import { useTranslation } from 'react-i18next';
 import styled, { ThemeContext } from 'styled-components';
 import { useLocalStorage } from 'usehooks-ts';
 
-type Props = ThemeProps & DAppInfo;
+type Props = ThemeProps & DAppInfo & {
+  compactMode?: boolean
+};
 
 function Component (props: Props): React.ReactElement<Props> {
   const { categories, categoryMap, chains,
-    className = '', description, icon, id, subtitle,
+    className = '', compactMode, description, icon, id, subtitle,
     title, url } = props;
   const { t } = useTranslation();
   const [dAppsFavorite, setDAppsFavorite] = useLocalStorage(DAPPS_FAVORITE, DEFAULT_DAPPS_FAVORITE);
@@ -37,14 +39,69 @@ function Component (props: Props): React.ReactElement<Props> {
 
   const isStared = dAppsFavorite[id];
 
+  if (compactMode) {
+    return (
+      <div
+        className={CN(className, '-compact-mode', { '-is-stared': isStared })}
+        onClick={openInNewTab(url)}
+      >
+        <Image
+          height={'100%'}
+          src={icon || logoMap.default as string}
+          width={'100%'}
+        />
+        <div className={'__item-title-group'}>
+          <div className={'__item-title-wrapper'}>
+            <div className='__item-title'>
+              {title}
+            </div>
+
+            {
+              !!categories && !!categories.length && (
+                <div className='__item-tags-area'>
+                  {categories.map((c) => (
+                    <Tag
+                      className='__item-tag'
+                      color={categoryMap[c]?.color || 'gray'}
+                      key={c}
+                    >
+                      {t(categoryMap[c]?.name || capitalize(c))}
+                    </Tag>
+                  ))}
+                </div>
+              )
+            }
+          </div>
+          <div className='__item-subtitle'>
+            {subtitle}
+          </div>
+        </div>
+        <Button
+          className={CN('__star-button', {
+            '-active': isStared
+          })}
+          icon={(
+            <Icon
+              phosphorIcon={Star}
+              size='sm'
+              weight={isStared ? 'fill' : undefined}
+            />
+          )}
+          onClick={onClickStar}
+          size={'xs'}
+          type='ghost'
+        />
+      </div>
+    );
+  }
+
   return (
     <div
-      className={CN(className, { '-is-stared': isStared })}
+      className={CN(className, '-normal-mode', { '-is-stared': isStared })}
       onClick={openInNewTab(url)}
     >
       <div className={'__item-header'}>
         <Image
-          className={CN('__item-logo')}
           height={'100%'}
           src={icon || logoMap.default as string}
           width={'100%'}
@@ -106,12 +163,15 @@ function Component (props: Props): React.ReactElement<Props> {
 
 const DAppItem = styled(Component)<Props>(({ theme: { token } }: Props) => {
   return {
-    padding: token.padding,
     overflow: 'hidden',
-    backgroundColor: token.colorBgSecondary,
-    borderRadius: token.borderRadiusLG,
     cursor: 'pointer',
 
+    '&.-normal-mode': {
+      padding: token.padding,
+      backgroundColor: token.colorBgSecondary,
+      borderRadius: token.borderRadiusLG
+    },
+
     '.__item-header': {
       display: 'flex',
       overflow: 'hidden',
@@ -154,6 +214,13 @@ const DAppItem = styled(Component)<Props>(({ theme: { token } }: Props) => {
       overflow: 'hidden',
       marginBottom: token.marginSM
     },
+    '.__item-tags-area': {
+      display: 'flex',
+      gap: token.sizeXS
+    },
+    '.__item-tag': {
+      marginRight: 0
+    },
     '.__item-footer': {
       display: 'flex',
       justifyContent: 'space-between',
@@ -168,8 +235,29 @@ const DAppItem = styled(Component)<Props>(({ theme: { token } }: Props) => {
       }
     },
 
-    '&:hover': {
+    '&.-normal-mode:hover': {
       backgroundColor: token.colorBgInput
+    },
+
+    // compact
+
+    '&.-compact-mode': {
+      display: 'flex',
+      overflow: 'hidden',
+      gap: token.sizeXS,
+      alignItems: 'center',
+
+      '.ant-image': {
+        width: 44,
+        height: 44,
+        minWidth: 44
+      },
+
+      '.__item-title-wrapper': {
+        display: 'flex',
+        alignItems: 'center',
+        gap: token.sizeXXS
+      }
     }
   };
 });

diff --git a/packages/extension-koni-ui/src/Popup/DApps/FeatureDAppItem.tsx b/packages/extension-koni-ui/src/Popup/DApps/FeatureDAppItem.tsx
@@ -12,16 +12,33 @@ import React, { Context, useContext } from 'react';
 import { useTranslation } from 'react-i18next';
 import styled, { ThemeContext } from 'styled-components';
 
-type Props = ThemeProps & DAppInfo;
+type Props = ThemeProps & DAppInfo & {
+  compactMode?: boolean
+};
 
 function Component (props: Props): React.ReactElement<Props> {
-  const { className = '', description, icon, preview_image: previewImage, subtitle,
+  const { className = '', compactMode, description, icon, preview_image: previewImage, subtitle,
     title, url } = props;
 
   const logoMap = useContext<Theme>(ThemeContext as Context<Theme>).logoMap;
 
   const { t } = useTranslation();
 
+  if (compactMode) {
+    return (
+      <div
+        className={CN(className, '-compact-mode')}
+        onClick={openInNewTab(url)}
+      >
+        <div
+          className={'__item-preview-area'}
+          style={{ backgroundImage: previewImage ? `url("${previewImage}")` : undefined }}
+        >
+        </div>
+      </div>
+    );
+  }
+
   return (
     <div
       className={CN(className)}
@@ -82,7 +99,7 @@ const FeatureDAppItem = styled(Component)<Props>(({ theme: { token } }: Props) =
 
     '.__item-preview-area': {
       backgroundSize: 'cover',
-      backgroundPosition: 'top center'
+      backgroundPosition: 'center'
     },
 
     '.__item-overlay': {
@@ -153,6 +170,18 @@ const FeatureDAppItem = styled(Component)<Props>(({ theme: { token } }: Props) =
       '.__item-meta-area': {
         backgroundColor: token.colorBgInput
       }
+    },
+
+    // compact
+
+    '&.-compact-mode': {
+      '.__item-preview-area': {
+        '&:before': {
+          content: '""',
+          display: 'block',
+          paddingTop: `${1 / 3 * 100}%`
+        }
+      }
     }
   };
 });