Revert "Merge pull request #314 from inevitable-changes/develop"

This reverts commit 1bfdea6, reversing
changes made to b627170.

packages/bento-common/utils/safer-promises.ts

@@ -1,7 +1,6 @@
 export const safePromiseAll = async <T extends any>(promises: Promise<T>[]) =>
-  (await Promise.allSettled(promises)).reduce(
-    (acc, res) => (res.status === 'fulfilled' ? [...acc, res.value] : acc),
-    [] as T[],
+  (await Promise.allSettled(promises)).flatMap((res) =>
+    res.status === 'fulfilled' ? res.value : [],
   );
 
 /**

packages/bento-web/pages/_app.tsx

@@ -16,7 +16,6 @@ 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();
@@ -66,24 +65,22 @@ const App = ({ Component, pageProps }: AppProps) => {
       <ToastProvider />
 
       <SessionManager />
-      <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>
+      <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>
     </React.Fragment>
   );
 };

packages/bento-web/public/locales/ko/dashboard.json

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

packages/bento-web/src/dashboard/DashboardMain.tsx

@@ -6,15 +6,14 @@ import React, { useEffect, useMemo, useState } from 'react';
 import styled from 'styled-components';
 
 import { AnimatedTab } from '@/components/AnimatedTab';
-import { Checkbox, Skeleton } from '@/components/system';
+import { Badge, 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';
@@ -58,9 +57,7 @@ export const DashboardMain: React.FC<DashboardMainProps> = ({
   setTokenDetailModalVisible,
   setTokenDetailModalParams,
 }) => {
-  const { t, i18n } = useTranslation('dashboard');
-  const currentLanguage = i18n.resolvedLanguage || i18n.language || 'en';
-
+  const { t } = useTranslation('dashboard');
   const { profile, revalidateProfile } = useProfile({ type: 'MY_PROFILE' });
   const { balances: walletBalances, jsonKey: walletBalancesJSONKey } =
     useWalletBalances({ wallets });
@@ -154,19 +151,6 @@ 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 }} />
@@ -298,32 +282,23 @@ export const DashboardMain: React.FC<DashboardMainProps> = ({
                     {defis.length > 0 ? (
                       <Collapse>
                         {Object.entries(defiStakesByProtocol).map(
-                          ([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>
-                            );
-                          },
+                          ([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>
+                          ),
                         )}
                       </Collapse>
                     ) : (

packages/bento-web/src/dashboard/components/CollapsePanel.tsx

@@ -1,52 +1,32 @@
 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: false,
+    defaultExpanded: true,
   });
 
   return (
     <Container>
       <Header {...getToggleProps()}>
-        <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>
+        <span>{title}</span>
+        {typeof count !== 'undefined' && (
+          <InlineBadge>{count.toLocaleString()}</InlineBadge>
+        )}
       </Header>
       <Content {...getCollapseProps()}>{children}</Content>
     </Container>
@@ -61,50 +41,19 @@ const Container = styled.div`
   background: ${Colors.gray800};
   border: 1px solid ${Colors.gray600};
   border-radius: 8px;
-  overflow: hidden;
 `;
 
-const Header = styled.div`
+const Header = styled.button`
   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;
-  justify-content: space-between;
+  gap: 2px;
 
   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};
@@ -115,10 +64,3 @@ 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};
-`;