Merge pull request #290 from inevitable-changes/develop

[web] Bump version to 1.3.27

packages/bento-web/.env.debug

@@ -1 +1,2 @@
 ENVIRONMENT=debug
+MAIN_API_BASE_URL=

packages/bento-web/.env.development

@@ -1 +1,2 @@
 ENVIRONMENT=development
+MAIN_API_BASE_URL=

packages/bento-web/@types/compressed-json.d.ts

@@ -0,0 +1,8 @@
+declare module 'compressed-json' {
+  export module compress {
+    export function toString<T extends any>(obj: T): string;
+  }
+  export module decompress {
+    export function fromString<T extends any>(obj: string): T;
+  }
+}

packages/bento-web/next.config.js

@@ -28,7 +28,10 @@ module.exports = withPlugins(
       externalDir: false,
     },
     i18n,
-    publicRuntimeConfig: pick(process.env, ['ENVIRONMENT']),
+    publicRuntimeConfig: pick(process.env, [
+      'ENVIRONMENT',
+      'MAIN_API_BASE_URL',
+    ]),
     webpack: (config) => {
       config.resolve.fallback = {
         ...config.resolve.fallback,

packages/bento-web/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bento/web",
-  "version": "1.3.26",
+  "version": "1.3.27",
   "private": true,
   "scripts": {
     "dev": "env-cmd -f .env.debug.local next dev",
@@ -30,6 +30,7 @@
     "caver-js": "^1.9.0",
     "clsx": "^1.2.1",
     "cobe": "^0.6.2",
+    "compressed-json": "^1.0.16",
     "date-fns": "^2.29.3",
     "dedent": "^0.7.0",
     "framer-motion": "^7.5.1",

packages/bento-web/pages/api/defis/klaytn/[walletAddress].ts

@@ -1,7 +1,10 @@
 import { safeAsyncFlatMap, safePromiseAll } from '@bento/common';
 import { getTokenBalancesFromCovalent } from '@bento/core';
+import { getAddress, isAddress } from '@ethersproject/address';
+import CompressedJSON from 'compressed-json';
 import { NextApiRequest, NextApiResponse } from 'next';
 
+import { createRedisClient } from '@/utils/Redis';
 import { withCORS } from '@/utils/middlewares/withCORS';
 
 import {
@@ -13,6 +16,7 @@ import {
 import { KlayStation } from '@/defi/klaystation';
 import { KlaySwap } from '@/defi/klayswap';
 import { KokonutSwap } from '@/defi/kokonutswap';
+import { DeFiStaking } from '@/defi/types/staking';
 
 interface APIRequest extends NextApiRequest {
   query: {
@@ -37,11 +41,108 @@ const isSameAddress = (a: string, b: string): boolean => {
   }
 };
 
+const isEthereumAddress = (addr: string): boolean => {
+  if (!addr.startsWith('0x')) {
+    return false;
+  }
+  try {
+    const addressWithChecksum = getAddress(addr);
+    if (isAddress(addressWithChecksum)) {
+      return true;
+    }
+    return false;
+  } catch {
+    return false;
+  }
+};
+
+type DeFiStakingCacheDTO = {
+  t: number;
+  v: DeFiStaking[];
+};
+const getCached = async <T extends any>(
+  __key: string,
+  __redisClient: ReturnType<typeof createRedisClient>,
+) => {
+  const cachedRawValue = await __redisClient.get(__key);
+  if (!cachedRawValue) {
+    return null;
+  }
+  return CompressedJSON.decompress.fromString<T>(cachedRawValue);
+};
+
+const MINUTES = 1_000 * 60;
+const CACHED_TIME = 1 * MINUTES;
+
 const handler = async (req: APIRequest, res: NextApiResponse) => {
   const wallets = parseWallets(req.query.walletAddress ?? '');
 
   // TODO: Enumerate for all wallets
   const walletAddress = wallets[0];
+  if (!isEthereumAddress(walletAddress)) {
+    res.status(400).json({ error: 'Invalid wallet address' });
+    return;
+  }
+
+  const redisClient = createRedisClient();
+  await redisClient.connect();
+
+  let hasError: boolean = false;
+  let stakings: DeFiStaking[] = [];
+  let cachedTime = 0;
+
+  const cached = await getCached<DeFiStakingCacheDTO>(
+    `defis:klaytn:${walletAddress}`,
+    redisClient,
+  );
+  if (cached && cached.t >= Date.now() - CACHED_TIME) {
+    // Use cached value if not expired
+    stakings = cached.v;
+    cachedTime = cached.t;
+  } else {
+    try {
+      stakings = await getDeFiStakingsByWalletAddress(walletAddress);
+      cachedTime = new Date().getTime();
+      await redisClient.set(
+        `defis:klaytn:${walletAddress}`,
+        CompressedJSON.compress.toString<DeFiStakingCacheDTO>({
+          v: stakings,
+          t: cachedTime,
+        }),
+      );
+    } catch (err) {
+      console.error(err);
+
+      if (!cached) {
+        hasError = true;
+      } else {
+        // Use cached value if available
+        stakings = cached.v;
+        cachedTime = cached.t;
+      }
+    }
+  }
+
+  await redisClient.disconnect();
+
+  if (hasError) {
+    res.status(500).json({ error: 'Internal server error' });
+    return;
+  }
+
+  res.status(200).json({ stakings, cachedTime });
+};
+
+export default withCORS(handler);
+
+const handleError = (error: any) => {
+  console.error(error);
+  return [];
+};
+
+const getDeFiStakingsByWalletAddress = async (
+  walletAddress: string,
+): Promise<DeFiStaking[]> => {
   const [tokenBalances, dynamicLeveragePools] = await Promise.all([
     getTokenBalancesFromCovalent({
       chainId: klaytnChain.chainId,
@@ -121,12 +222,5 @@ const handler = async (req: APIRequest, res: NextApiResponse) => {
     ])
   ).flat();
 
-  res.status(200).json(stakings);
-};
-
-export default withCORS(handler);
-
-const handleError = (error: any) => {
-  console.error(error);
-  return [];
+  return stakings;
 };

packages/bento-web/pages/api/profile/index.ts

@@ -1,11 +1,11 @@
 import { PostgrestError, PostgrestResponse, User } from '@supabase/supabase-js';
-import axios from 'axios';
 import { format } from 'date-fns';
 import type { NextApiRequest, NextApiResponse } from 'next';
 
 import { withCORS } from '@/utils/middlewares/withCORS';
 
 import { UserProfile } from '@/profile/types/UserProfile';
+import { axios } from '@/utils';
 import { Config, Supabase } from '@/utils';
 
 const MATCH_RULE = /^(?!.*\.\.)(?!.*\.$)[^\W][\w.]{0,37}$/;

packages/bento-web/src/components/WalletConnector/utils/getMessagedToBeSigned.ts

@@ -1,5 +1,4 @@
-import axios from 'axios';
-
+import { axios } from '@/utils';
 import { toast } from '@/utils';
 
 export const getMessagedToBeSigned = async (walletAddress: string) => {

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

@@ -162,7 +162,10 @@ export const DashboardMain: React.FC<DashboardMainProps> = ({
             items={DASHBOARD_TAB_ITEMS}
           />
           <DashboardContent>
-            <AnimatedTab selected={currentTab === DashboardTabType.Crypto}>
+            <AnimatedTab
+              className="tab-crypto"
+              selected={currentTab === DashboardTabType.Crypto}
+            >
               <TopSummaryContainer>
                 <AssetRatioSection
                   netWorthInUSD={netWorthInUSD}
@@ -341,7 +344,6 @@ const DashboardContent = styled.div`
   padding: 27px 33px;
   display: flex;
   flex-direction: column;
-  gap: 32px;
   flex: 1;
 
   background: ${Colors.black};
@@ -352,6 +354,10 @@ const DashboardContent = styled.div`
     padding: 24px 0 0;
     border: 0;
   }
+
+  & .tab-crypto {
+    gap: 32px;
+  }
 `;
 const TopSummaryContainer = styled.div`
   display: flex;

packages/bento-web/src/dashboard/sections/WalletListSection/WalletList.tsx

@@ -1,11 +1,11 @@
 import { Wallet, shortenAddress } from '@bento/common';
-import axios from 'axios';
 import { motion } from 'framer-motion';
 import { useTranslation } from 'next-i18next';
 import React, { useCallback } from 'react';
 import styled, { css } from 'styled-components';
 
 import { Colors } from '@/styles';
+import { axios } from '@/utils';
 import { Analytics, copyToClipboard, toast } from '@/utils';
 
 import { WalletListItem } from './WalletListItem';

packages/bento-web/src/dashboard/utils/useMultipleRequests.ts

@@ -1,7 +1,8 @@
-import axios from 'axios';
 import produce, { Draft } from 'immer';
 import { useCallback, useEffect, useRef } from 'react';
 
+import { axios } from '@/utils';
+
 type RequestKey = string;
 export const useMultipleRequests = <T extends any>(
   requests: (RequestKey | null)[],

packages/bento-web/src/defi/klayswap/single.ts

@@ -1,8 +1,9 @@
 import { ZERO_ADDRESS } from '@bento/core';
 import { KLAYTN_TOKENS } from '@bento/core/lib/tokens';
-import axios from 'axios';
 import BigNumber from 'bn.js';
 
+import { axios } from '@/utils';
+
 import KLAYSwapSingleLeveragePool from '../abis/KLAYSwapSingleLeveragePool.json';
 import { klaytnChain } from '../constants';
 import { DeFiStaking, KlaytnDeFiType } from '../types/staking';

packages/bento-web/src/defi/kokonutswap/governance.ts

@@ -1,4 +1,4 @@
-import axios from 'axios';
+import { axios } from '@/utils';
 
 import { DeFiStaking, KlaytnDeFiType } from '../types/staking';
 import {

packages/bento-web/src/defi/kokonutswap/lp.ts

@@ -1,6 +1,7 @@
 import { EEEE_ADDRESS, TokenInput } from '@bento/core';
 import { KLAYTN_TOKENS } from '@bento/core/lib/tokens';
-import axios from 'axios';
+
+import { axios } from '@/utils';
 
 import { klaytnChain } from '../constants';
 import { DeFiStaking, KlaytnDeFiType, NativeInput } from '../types/staking';

packages/bento-web/src/landing/LandingPage.tsx

@@ -73,6 +73,8 @@ const Container = styled.div`
   flex-direction: column;
   gap: 200px;
 
+  background-color: ${Colors.gray900};
+
   section * {
     &:not(h1, h1 span) {
       transition: all 0.2s ease-in-out;

packages/bento-web/src/landing/sections/FooterSection.tsx

@@ -131,17 +131,28 @@ const Wrapper = styled.div`
     padding: 0 20px 0;
   }
 
-  &:before {
+  &:before,
+  &:after {
     content: '';
     position: absolute;
-    top: 0;
     left: 0;
     right: 0;
     width: 100%;
-    height: 200px;
+  }
+
+  &:before {
+    top: 0;
+    height: 300px;
     background: linear-gradient(180deg, ${Colors.gray900}, rgba(0, 0, 0, 0));
     z-index: 0;
   }
+
+  &:after {
+    bottom: 0;
+    height: 200px;
+    background: linear-gradient(180deg, rgba(0, 0, 0, 0), ${Colors.gray900});
+    z-index: -1;
+  }
 `;
 const Section = styled(TrackedSection)`
   padding-top: 130px;

packages/bento-web/src/landing/sections/HeaderSection.tsx

@@ -96,7 +96,6 @@ export const HeaderSection: React.FC = () => {
 const Header = styled.div`
   width: 100%;
   height: 494px;
-  background: ${Colors.gray900};
 
   display: flex;
   flex-direction: column;

packages/bento-web/src/profile/ProfileDetailPage/components/SyncRSSModal.tsx

@@ -1,9 +1,10 @@
-import axios from 'axios';
 import React, { useCallback, useState } from 'react';
 import styled from 'styled-components';
 
 import { Button, Modal } from '@/components/system';
 
+import { axios } from '@/utils';
+
 import { LinkBlockItem } from '../../blocks/LinkBlockItem';
 import { FieldInput } from '../../components/FieldInput';
 

packages/bento-web/src/utils/Config.ts

@@ -4,11 +4,13 @@ import getNextConfig from 'next/config';
 const { publicRuntimeConfig } = getNextConfig();
 
 const getConfig = () => {
-  const { ENVIRONMENT } = publicRuntimeConfig as {
+  const { ENVIRONMENT, MAIN_API_BASE_URL } = publicRuntimeConfig as {
     ENVIRONMENT: 'debug' | 'development' | 'production';
+    MAIN_API_BASE_URL: string;
   };
   return {
     ENVIRONMENT,
+    MAIN_API_BASE_URL,
     ...BentoConfig,
   };
 };

packages/bento-web/src/utils/axios.ts

@@ -0,0 +1,7 @@
+import Axios from 'axios';
+
+import { Config } from './Config';
+
+export const axios = Axios.create({
+  baseURL: Config.MAIN_API_BASE_URL || undefined,
+});

packages/bento-web/src/utils/index.ts

@@ -1,4 +1,5 @@
 export { Analytics, type AnalyticsEvent } from './analytics';
+export { axios } from './axios';
 export { copyToClipboard } from './clipboard';
 export { Config } from './Config';
 export { FeatureFlags } from './FeatureFlag';