Merge pull request #314 from inevitable-changes/develop

0xinevitable · Oct 12, 2022 · 1bfdea6 · 1bfdea6 · vercel · Oct 12, 2022
2 parents b627170 + ad59904
commit 1bfdea6
Show file tree

Hide file tree

Showing 20 changed files with 696 additions and 287 deletions.
diff --git a/packages/bento-common/utils/safer-promises.ts b/packages/bento-common/utils/safer-promises.ts
@@ -1,6 +1,7 @@
 export const safePromiseAll = async <T extends any>(promises: Promise<T>[]) =>
-  (await Promise.allSettled(promises)).flatMap((res) =>
-    res.status === 'fulfilled' ? res.value : [],
+  (await Promise.allSettled(promises)).reduce(
+    (acc, res) => (res.status === 'fulfilled' ? [...acc, res.value] : acc),
+    [] as T[],
   );
 
 export const safeAsyncFlatMap = async <T extends any, U extends any>(

diff --git a/packages/bento-web/package.json b/packages/bento-web/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@bento/web",
-  "version": "1.3.31",
+  "version": "1.3.32",
   "private": true,
   "scripts": {
     "dev": "env-cmd -f .env.debug.local next dev",

diff --git a/packages/bento-web/pages/_app.tsx b/packages/bento-web/pages/_app.tsx
@@ -16,6 +16,7 @@ import styled from 'styled-components';
 
 import { LoadingProgress } from '@/components/LoadingProgress';
 import { NavigationBar } from '@/components/NavigationBar';
+import { PricingsProvider } from '@/hooks/pricings';
 import { GlobalStyle } from '@/styles/GlobalStyle';
 
 Analytics.initialize();
@@ -65,22 +66,24 @@ const App = ({ Component, pageProps }: AppProps) => {
       <ToastProvider />
 
       <SessionManager />
-      <WalletsProvider>
-        <Container>
-          <LoadingProgress
-            isRouteChanging={loadingState.isRouteChanging}
-            key={loadingState.loadingKey}
-          />
-          <NavigationBar />
-
-          <Component {...pageProps} />
-        </Container>
-
-        <div id="portal" />
-        <div id="profile-edit" />
-        <div id="mobile-menu" />
-        <div id="landing-background" />
-      </WalletsProvider>
+      <PricingsProvider>
+        <WalletsProvider>
+          <Container>
+            <LoadingProgress
+              isRouteChanging={loadingState.isRouteChanging}
+              key={loadingState.loadingKey}
+            />
+            <NavigationBar />
+
+            <Component {...pageProps} />
+          </Container>
+
+          <div id="portal" />
+          <div id="profile-edit" />
+          <div id="mobile-menu" />
+          <div id="landing-background" />
+        </WalletsProvider>
+      </PricingsProvider>
     </React.Fragment>
   );
 };

diff --git a/packages/bento-web/public/assets/icons/services/klaytn/klaystation.svg b/packages/bento-web/public/assets/icons/services/klaytn/klaystation.svg
diff --git a/packages/bento-web/public/locales/ko/dashboard.json b/packages/bento-web/public/locales/ko/dashboard.json
@@ -18,6 +18,16 @@
 
   "defi-type-scnr_g": "단일 예치",
 
+  "Account": "계정",
+  "Rep Contract": "대표 컨트랙트 주소",
+  "LPs without Farming": "스테이킹 중이 아닌 LP",
+  "Unavailable": "연동 준비중",
+  "Rewards": "수령 가능한 보상",
+  "Staking": "스테이킹 중",
+  "Unstaking": "언스테이킹 중",
+  "Claimable": "바로 수령 가능",
+  "Pending": "대기 중",
+
   "Update your Profile": "프로필을 설정해보세요.",
   "Setup Now": "지금 하기",
   "Edit Profile": "프로필 고치기",

diff --git a/packages/bento-web/src/dashboard/DashboardMain.tsx b/packages/bento-web/src/dashboard/DashboardMain.tsx
@@ -6,14 +6,15 @@ import React, { useEffect, useMemo, useState } from 'react';
 import styled from 'styled-components';
 
 import { AnimatedTab } from '@/components/AnimatedTab';
-import { Badge, Checkbox, Skeleton } from '@/components/system';
+import { Checkbox, Skeleton } from '@/components/system';
 import { useLocalStorage } from '@/hooks/useLocalStorage';
 
 import { DashboardTokenBalance } from '@/dashboard/types/TokenBalance';
 import { WalletBalance } from '@/dashboard/types/WalletBalance';
 import { useDeFis } from '@/dashboard/utils/useDeFis';
 import { useNFTBalances } from '@/dashboard/utils/useNFTBalances';
 import { useWalletBalances } from '@/dashboard/utils/useWalletBalances';
+import { Metadata } from '@/defi/klaytn/constants/metadata';
 import { useProfile } from '@/profile/hooks/useProfile';
 import { Colors } from '@/styles';
 import { Analytics, FeatureFlags } from '@/utils';
@@ -57,7 +58,9 @@ export const DashboardMain: React.FC<DashboardMainProps> = ({
   setTokenDetailModalVisible,
   setTokenDetailModalParams,
 }) => {
-  const { t } = useTranslation('dashboard');
+  const { t, i18n } = useTranslation('dashboard');
+  const currentLanguage = i18n.resolvedLanguage || i18n.language || 'en';
+
   const { profile, revalidateProfile } = useProfile({ type: 'MY_PROFILE' });
   const { balances: walletBalances, jsonKey: walletBalancesJSONKey } =
     useWalletBalances({ wallets });
@@ -151,6 +154,19 @@ export const DashboardMain: React.FC<DashboardMainProps> = ({
     [defisJSONKey],
   );
 
+  const [defiMetadata, setDefiMetadata] = useState<Record<
+    string,
+    Metadata
+  > | null>(null);
+  useEffect(() => {
+    if (!!defiMetadata) {
+      return;
+    }
+    import('../defi/klaytn/constants/metadata').then((v) =>
+      setDefiMetadata(v.KLAYTN_DEFI_METADATA),
+    );
+  }, [defiStakesByProtocol]);
+
   return (
     <React.Fragment>
       <div style={{ width: '100%', height: 32 }} />
@@ -282,23 +298,32 @@ export const DashboardMain: React.FC<DashboardMainProps> = ({
                     {defis.length > 0 ? (
                       <Collapse>
                         {Object.entries(defiStakesByProtocol).map(
-                          ([protocol, defiProtocols]) => (
-                            <CollapsePanel
-                              title={t(`protocol-${protocol}`)}
-                              count={defiProtocols.length}
-                              key={protocol}
-                            >
-                              <ul>
-                                {defiProtocols.map((item) => (
-                                  <DeFiStakingItem
-                                    // FIXME: group stats with different wallets...
-                                    key={`${item.type}-${item.address}-${item.walletAddress}`}
-                                    protocol={item}
-                                  />
-                                ))}
-                              </ul>
-                            </CollapsePanel>
-                          ),
+                          ([protocol, defiProtocols]) => {
+                            const valuation = defiProtocols.reduce(
+                              (acc, v) => acc + v.valuation.total,
+                              0,
+                            );
+                            return (
+                              <CollapsePanel
+                                title={t(`protocol-${protocol}`)}
+                                metadata={defiMetadata?.[protocol]}
+                                count={defiProtocols.length}
+                                key={protocol}
+                                valuation={valuation}
+                                currentLanguage={currentLanguage}
+                              >
+                                <ul>
+                                  {defiProtocols.map((item) => (
+                                    <DeFiStakingItem
+                                      // FIXME: group stats with different wallets...
+                                      key={`${item.type}-${item.address}-${item.walletAddress}`}
+                                      protocol={item}
+                                    />
+                                  ))}
+                                </ul>
+                              </CollapsePanel>
+                            );
+                          },
                         )}
                       </Collapse>
                     ) : (

diff --git a/packages/bento-web/src/dashboard/components/CollapsePanel.tsx b/packages/bento-web/src/dashboard/components/CollapsePanel.tsx
@@ -1,32 +1,52 @@
 import useCollapse from 'react-collapsed';
 import styled from 'styled-components';
 
+import { Metadata } from '@/defi/klaytn/constants/metadata';
 import { Colors } from '@/styles';
 
 import { InlineBadge } from './InlineBadge';
 
 type CollapsePanelProps = {
   title: string;
+  metadata: Metadata | undefined;
   count?: number;
   children?: React.ReactNode;
+  valuation: number;
+  currentLanguage: string;
 };
 
 export const CollapsePanel: React.FC<CollapsePanelProps> = ({
   title,
+  metadata,
   count,
   children,
+  valuation,
+  currentLanguage,
 }) => {
+  const lang = currentLanguage === 'ko' ? 'ko' : 'en';
   const { getCollapseProps, getToggleProps } = useCollapse({
-    defaultExpanded: true,
+    defaultExpanded: false,
   });
 
   return (
     <Container>
       <Header {...getToggleProps()}>
-        <span>{title}</span>
-        {typeof count !== 'undefined' && (
-          <InlineBadge>{count.toLocaleString()}</InlineBadge>
-        )}
+        <HeaderTitleRow>
+          <ProtocolInfo>
+            <ProtocolLogo alt={title} src={metadata?.logo} />
+            <span>{title}</span>
+            {typeof count !== 'undefined' && (
+              <InlineBadge>{count.toLocaleString()}</InlineBadge>
+            )}
+          </ProtocolInfo>
+
+          <Valuation>
+            {`$${valuation.toLocaleString(undefined, {
+              maximumFractionDigits: 6,
+            })}`}
+          </Valuation>
+        </HeaderTitleRow>
+        <Paragraph>{metadata?.description[lang]}</Paragraph>
       </Header>
       <Content {...getCollapseProps()}>{children}</Content>
     </Container>
@@ -41,19 +61,50 @@ const Container = styled.div`
   background: ${Colors.gray800};
   border: 1px solid ${Colors.gray600};
   border-radius: 8px;
+  overflow: hidden;
 `;
 
-const Header = styled.button`
+const Header = styled.div`
   padding: 16px 14px;
 
+  display: flex;
+  flex-direction: column;
+  cursor: pointer;
+  user-select: none;
+  transition: all 0.2s ease-in-out;
+
+  &:hover {
+    background: ${Colors.gray700};
+  }
+`;
+
+const HeaderTitleRow = styled.div`
   display: flex;
   align-items: center;
-  gap: 2px;
+  justify-content: space-between;
 
   font-size: 18px;
   font-weight: bold;
   color: ${Colors.gray100};
 `;
+const ProtocolInfo = styled.span`
+  display: flex;
+  align-items: center;
+`;
+const ProtocolLogo = styled.img`
+  margin-right: 8px;
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  object-fit: cover;
+`;
+const Paragraph = styled.p`
+  margin-top: 8px;
+  font-size: 14px;
+  color: ${Colors.gray400};
+  line-height: 1.2;
+`;
+
 const Content = styled.div`
   padding: 8px 8px 12px;
   border-top: 1px solid ${Colors.gray600};
@@ -64,3 +115,10 @@ const Content = styled.div`
     gap: 6px;
   }
 `;
+const Valuation = styled.span`
+  font-weight: bold;
+  font-size: 22px;
+  line-height: 28px;
+  font-weight: bold;
+  color: ${Colors.gray050};
+`;