Improvements to the portfolio page and deploy (#3076)

* Moved all shared lambda types into a single location so it's easier later to refactor it later to some better structure
Added improved error handling to the portfolio page

* Added Check required secrets to the aws staging action
Added new env variables for blog api

---------

Co-authored-by: Marcin Ciarka <marcin@oazoapps.com>

Author: piotrwitek

.github/workflows/aws-staging.yaml

@@ -25,6 +25,17 @@ jobs:
         with:
           node-version: 18.12
 
+      - name: Check required secrets
+        run: |
+          required_secrets=("NOTIFICATIONS_HOST_STAGING" "NOTIFICATIONS_HOST_STAGING_GOERLI" "AJNA_SUBGRAPH_URL_STAGING" "AJNA_SUBGRAPH_URL_GOERLI" "AJNA_SUBGRAPH_V2_URL_STAGING" "AJNA_SUBGRAPH_V2_URL_GOERLI" "MIXPANEL_KEY_STAGING" "ADROLL_ADV_ID_STAGING" "ADROLL_PIX_ID_STAGING" "MAINNET_CACHE_URL_STAGING" "MAILCHIMP_ENDPOINT" "MAILCHIMP_API_KEY" "INFURA_PROJECT_ID_STAGING" "ETHERSCAN_API_KEY" "BLOCKNATIVE_API_KEY_STAGING" "SENTRY_AUTH_TOKEN" "PRODUCT_HUB_KEY" "ONE_INCH_API_KEY_STAGING" "ONE_INCH_API_URL_STAGING" "REFERRAL_SUBGRAPH_URL_STAGING" "AWS_API_GATEWAY_URL" "BLOG_POSTS_API_URL" "BLOG_POSTS_API_KEY")
+          for secret in "${required_secrets[@]}"; do
+            secret_value=$(printenv $secret)
+            if [[ -z "$secret_value" ]]; then
+              echo "::error ::Secret $secret is not set. Failing the workflow."
+              exit 1
+            fi
+          done
+
       - name: Extract commit hash
         id: vars
         shell: bash
@@ -81,6 +92,8 @@ jobs:
           ONE_INCH_API_URL: ${{ secrets.ONE_INCH_API_URL_STAGING }}
           REFERRAL_SUBGRAPH_URL: ${{ secrets.REFERRAL_SUBGRAPH_URL_STAGING }}
           AWS_API_GATEWAY_URL: ${{ secrets.AWS_API_GATEWAY_URL }}
+          BLOG_POSTS_API_URL: ${{ secrets.BLOG_POSTS_API_URL }}
+          BLOG_POSTS_API_KEY: ${{ secrets.BLOG_POSTS_API_KEY }}
         run: yarn build
 
       - name: Configure AWS credentials

components/AutomationIcon.tsx

@@ -5,7 +5,7 @@ import { useTranslation } from 'react-i18next'
 import { auto_buy, auto_sell, stop_loss, take_profit } from 'theme/icons'
 import { Text } from 'theme-ui'
 
-import type { PortfolioPosition } from 'lambdas/src/portfolio-positions/types'
+import type { PortfolioPosition } from 'lambdas/src/shared/domain-types'
 
 const automationIconMap: Record<keyof PortfolioPosition['automations'], typeof stop_loss> = {
   autoBuy: auto_buy,

components/portfolio/PortfolioOverview.tsx

@@ -9,7 +9,7 @@ import React from 'react'
 import { useTranslation } from 'react-i18next'
 import { Flex, Heading, Text } from 'theme-ui'
 
-import type { PortfolioOverviewResponse } from 'lambdas/src/portfolio-overview/types'
+import type { PortfolioOverviewResponse } from 'lambdas/src/shared/domain-types'
 
 export const PortfolioOverview = ({
   address,

components/portfolio/helpers/getPortfolioAccentColor.ts

@@ -1,4 +1,4 @@
-import type { PositionDetail } from 'lambdas/src/portfolio-positions/types'
+import type { PositionDetail } from 'lambdas/src/shared/domain-types'
 
 export function getPortfolioAccentColor(accent: PositionDetail['accent']): string {
   return accent === 'positive' ? 'success100' : 'error100'

components/portfolio/positions/PortfolioPositionAutomationIcons.tsx

@@ -1,7 +1,7 @@
 import { AutomationIcon } from 'components/AutomationIcon'
 import React from 'react'
 
-import type { PortfolioPosition } from 'lambdas/src/portfolio-positions/types'
+import type { PortfolioPosition } from 'lambdas/src/shared/domain-types'
 
 export const PortfolioPositionAutomationIcons = ({
   automations = {},

components/portfolio/positions/PortfolioPositionBlock.tsx

@@ -11,7 +11,7 @@ import React from 'react'
 import { useTranslation } from 'react-i18next'
 import { Box, Flex, Text } from 'theme-ui'
 
-import type { PortfolioPosition } from 'lambdas/src/portfolio-positions/types'
+import type { PortfolioPosition } from 'lambdas/src/shared/domain-types'
 
 export const PortfolioPositionBlock = ({ position }: { position: PortfolioPosition }) => {
   const { t: tPortfolio } = useTranslation('portfolio')

components/portfolio/positions/PortfolioPositionBlockDetail.tsx

@@ -7,7 +7,7 @@ import { useTranslation } from 'react-i18next'
 import { question_o } from 'theme/icons'
 import { Box, Flex, Text } from 'theme-ui'
 
-import type { DetailsType, PositionDetail } from 'lambdas/src/portfolio-positions/types'
+import type { DetailsType, PositionDetail } from 'lambdas/src/shared/domain-types'
 
 export const PortfolioPositionBlockDetail = ({ detail }: { detail: PositionDetail }) => {
   const { t: tPortfolio } = useTranslation('portfolio')

components/portfolio/positions/PortfolioPositionsView.tsx

@@ -13,7 +13,7 @@ import { useTranslation } from 'react-i18next'
 import { question_o } from 'theme/icons'
 import { Box, Flex, Grid, Text } from 'theme-ui'
 
-import type { PortfolioPositionsResponse } from 'lambdas/src/portfolio-positions/types'
+import type { PortfolioPositionsResponse } from 'lambdas/src/shared/domain-types'
 
 type PortfolioPositionsViewFiltersType = {
   showEmptyPositions: boolean

components/portfolio/wallet/PortfolioWalletAssets.tsx

@@ -13,7 +13,7 @@ import { useTranslation } from 'react-i18next'
 import { arrow_decrease, arrow_increase } from 'theme/icons'
 import { Box, Button, Flex, Text } from 'theme-ui'
 
-import type { PortfolioAsset } from 'lambdas/src/portfolio-assets/types'
+import type { PortfolioAsset } from 'lambdas/src/shared/domain-types'
 
 interface PortfolioWalletAssetsProps {
   assets?: PortfolioAsset[]

components/portfolio/wallet/PortfolioWalletSummary.tsx

@@ -7,7 +7,7 @@ import React, { useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Box, Text } from 'theme-ui'
 
-import type { PortfolioAsset } from 'lambdas/src/portfolio-assets/types'
+import type { PortfolioAsset } from 'lambdas/src/shared/domain-types'
 
 interface PortfolioWalletSummaryProps {
   assets?: PortfolioAsset[]

components/portfolio/wallet/PortfolioWalletTopAssets.tsx

@@ -5,7 +5,7 @@ import { formatFiatBalance } from 'helpers/formatters/format'
 import React from 'react'
 import { Flex, Grid, Text } from 'theme-ui'
 
-import type { PortfolioAsset } from 'lambdas/src/portfolio-assets/types'
+import type { PortfolioAsset } from 'lambdas/src/shared/domain-types'
 
 interface PortfolioWalletTopAssetsProps {
   assets?: PortfolioAsset[]

components/portfolio/wallet/PortfolioWalletView.tsx

@@ -8,7 +8,7 @@ import React, { useEffect, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Box, Flex, Grid, Heading } from 'theme-ui'
 
-import type { PortfolioAssetsResponse } from 'lambdas/src/portfolio-assets/types'
+import type { PortfolioAssetsResponse } from 'lambdas/src/shared/domain-types'
 
 export const PortfolioWalletView = ({
   address,

helpers/clients/portfolio-client.ts

@@ -1,8 +1,10 @@
 import { useCallback, useMemo } from 'react'
 
-import type { PortfolioAssetsResponse } from 'lambdas/src/portfolio-assets/types'
-import type { PortfolioOverviewResponse } from 'lambdas/src/portfolio-overview/types'
-import type { PortfolioPositionsResponse } from 'lambdas/src/portfolio-positions/types'
+import type {
+  PortfolioAssetsResponse,
+  PortfolioOverviewResponse,
+  PortfolioPositionsResponse,
+} from 'lambdas/src/shared/domain-types'
 
 /**
  * typed client for fetching portfolio data from aws gateway

lambdas/src/common/domain.ts

@@ -1,12 +1,11 @@
 /* eslint-disable no-relative-import-paths/no-relative-import-paths */
 import type { APIGatewayProxyEventV2, APIGatewayProxyResultV2 } from 'aws-lambda'
 
-import { getDefaultErrorMessage } from '../common/helpers'
-import { ResponseBadRequest, ResponseOk } from '../common/responses'
-import { getAddressFromRequest } from '../common/validators'
-import { PortfolioAssetsResponse, PortfolioAsset } from './types'
-import { DebankNetworkNameToOurs, DebankNetworkNames, DebankToken } from '../common/debank'
-import { NetworkNames } from '../common/domain'
+import { getDefaultErrorMessage } from '../shared/helpers'
+import { ResponseBadRequest, ResponseOk } from '../shared/responses'
+import { getAddressFromRequest } from '../shared/validators'
+import { DebankNetworkNameToOurs, DebankNetworkNames, DebankToken } from '../shared/debank'
+import { NetworkNames, PortfolioAsset, PortfolioAssetsResponse } from '../shared/domain-types'
 
 const {
   DEBANK_API_KEY: debankApiKey,

lambdas/src/portfolio-assets/index.ts

@@ -1,11 +1,11 @@
 /* eslint-disable no-relative-import-paths/no-relative-import-paths */
 import type { APIGatewayProxyEventV2, APIGatewayProxyResultV2 } from 'aws-lambda'
 
-import { getDefaultErrorMessage } from '../common/helpers'
-import { ResponseBadRequest, ResponseInternalServerError, ResponseOk } from '../common/responses'
-import { getAddressFromRequest } from '../common/validators'
-import type { PortfolioOverviewResponse } from './types'
-import { ProtocolAsset, WalletAsset } from '../common/debank'
+import { getDefaultErrorMessage } from '../shared/helpers'
+import { ResponseBadRequest, ResponseInternalServerError, ResponseOk } from '../shared/responses'
+import { getAddressFromRequest } from '../shared/validators'
+import { ProtocolAsset, WalletAsset } from '../shared/debank'
+import { PortfolioOverviewResponse } from '../shared/domain-types'
 
 const SUPPORTED_CHAIN_IDS = ['eth', 'op', 'arb', 'base']
 

lambdas/src/portfolio-assets/types.ts

@@ -1,9 +1,9 @@
 /* eslint-disable no-relative-import-paths/no-relative-import-paths */
 import type { APIGatewayProxyEventV2, APIGatewayProxyResultV2 } from 'aws-lambda'
 
-import { getDefaultErrorMessage } from '../common/helpers'
-import { ResponseBadRequest, ResponseOk } from '../common/responses'
-import { getAddressFromRequest } from '../common/validators'
+import { getDefaultErrorMessage } from '../shared/helpers'
+import { ResponseBadRequest, ResponseOk } from '../shared/responses'
+import { getAddressFromRequest } from '../shared/validators'
 import { mockPositionsResponse } from './mock'
 
 export const handler = async (event: APIGatewayProxyEventV2): Promise<APIGatewayProxyResultV2> => {

lambdas/src/portfolio-overview/index.ts

@@ -1,4 +1,4 @@
-import { LendingProtocol, NetworkNames } from '../common/domain'
+import { LendingProtocol, NetworkNames } from '../shared/domain'
 import { PortfolioPositionsResponse, ProductType, StrategyType } from './types'
 
 export const mockPositionsResponse: {

lambdas/src/portfolio-overview/types.ts

@@ -1,4 +1,4 @@
-import { NetworkNames } from './domain'
+import { NetworkNames } from './domain-types'
 
 export type ProtocolAsset = {
   id: string

lambdas/src/portfolio-positions/index.ts

@@ -1,4 +1,24 @@
-import { LendingProtocol, NetworkNames } from '../common/domain'
+export enum NetworkNames {
+  ethereumMainnet = 'ethereum',
+  ethereumGoerli = 'ethereum_goerli',
+  arbitrumMainnet = 'arbitrum',
+  arbitrumGoerli = 'arbitrum_goerli',
+  polygonMainnet = 'polygon',
+  polygonMumbai = 'polygon_mumbai',
+  optimismMainnet = 'optimism',
+  optimismGoerli = 'optimism_goerli',
+  baseMainnet = 'base',
+  baseGoerli = 'base_goerli',
+}
+
+export enum LendingProtocol {
+  AaveV2 = 'aavev2',
+  AaveV3 = 'aavev3',
+  Ajna = 'ajna',
+  Maker = 'maker',
+  MorphoBlue = 'morphoblue',
+  SparkV3 = 'sparkv3',
+}
 
 export enum ProductType {
   'Multiply' = 'Multiply',
@@ -75,3 +95,27 @@ export type PortfolioPosition = {
 export type PortfolioPositionsResponse = {
   positions: PortfolioPosition[]
 }
+
+export type PortfolioOverviewResponse = {
+  walletBalanceUsdValue: number
+  suppliedUsdValue: number
+  suppliedPercentageChange: number
+  borrowedUsdValue: number
+  borrowedPercentageChange: number
+  totalUsdValue: number
+  totalPercentageChange: number
+}
+
+export type PortfolioAsset = {
+  name: string
+  network: NetworkNames
+  symbol: string
+  priceUSD: number
+  price24hChange?: number
+  balance: number
+  balanceUSD: number
+}
+
+export type PortfolioAssetsResponse = {
+  assets: PortfolioAsset[]
+}

lambdas/src/portfolio-positions/mock.ts

@@ -1,6 +1,6 @@
 import type { APIGatewayProxyResultV2 } from 'aws-lambda'
 
-import type { DefaultErrorResponse } from './types'
+import type { DefaultErrorResponse } from './helper-types'
 
 export function createOkBody(obj: Record<string, any>): string {
   return JSON.stringify(obj)

lambdas/src/common/constants.ts lambdas/src/shared/constants.ts

@@ -7,19 +7,43 @@ import { PortfolioWalletView } from 'components/portfolio/wallet/PortfolioWallet
 import { TabBar } from 'components/TabBar'
 import { usePortfolioClient } from 'helpers/clients/portfolio-client'
 import { useRedirect } from 'helpers/useRedirect'
-import type { GetServerSidePropsContext } from 'next'
+import type { GetServerSidePropsContext, GetServerSidePropsResult } from 'next'
 import { useTranslation } from 'next-i18next'
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
 import React, { useEffect, useState } from 'react'
 import { getAwsInfraHeader, getAwsInfraUrl } from 'server/helpers'
 import { Box } from 'theme-ui'
 
-import type { PortfolioOverviewResponse } from 'lambdas/src/portfolio-overview/types'
+import type { PortfolioOverviewResponse } from 'lambdas/src/shared/domain-types'
 
-export async function getServerSideProps(ctx: GetServerSidePropsContext) {
+type PortfolioViewProps = {
+  address: string
+  awsInfraUrl: string
+  awsInfraHeader: Record<string, string>
+}
+
+export async function getServerSideProps(
+  ctx: GetServerSidePropsContext,
+): Promise<GetServerSidePropsResult<PortfolioViewProps>> {
   const address = ctx.query.address
-  const awsInfraUrl = getAwsInfraUrl()
-  const awsInfraHeader = getAwsInfraHeader()
+  let awsInfraUrl
+  let awsInfraHeader
+
+  try {
+    awsInfraUrl = getAwsInfraUrl()
+    awsInfraHeader = getAwsInfraHeader()
+    if (address == null || Array.isArray(address)) {
+      throw new Error('Address is required')
+    }
+  } catch (e) {
+    console.error(e)
+    return {
+      redirect: {
+        destination: '/not-found',
+        permanent: false,
+      },
+    }
+  }
 
   return {
     props: {
@@ -31,18 +55,12 @@ export async function getServerSideProps(ctx: GetServerSidePropsContext) {
   }
 }
 
-export default function PortfolioView({
-  address,
-  awsInfraUrl,
-  awsInfraHeader,
-}: {
-  address: string
-  awsInfraUrl: string
-  awsInfraHeader: Record<string, string>
-}) {
+export default function PortfolioView(props: PortfolioViewProps) {
   const { t: tPortfolio } = useTranslation('portfolio')
   const { replace } = useRedirect()
 
+  const { address, awsInfraUrl, awsInfraHeader } = props
+
   const portfolioClient = usePortfolioClient(awsInfraUrl, awsInfraHeader)
 
   // fetch data

lambdas/src/common/debank.ts lambdas/src/shared/debank.ts

@@ -30,9 +30,10 @@
     "**/*.tsx",
     "runtimeConfig.js",
     "next-i18next.config.js",
-    "middleware.ts"
+    "middleware.ts",
+    "lambdas/src/shared"
   ],
-  "exclude": ["node_modules", "types", "coverage", "infra"],
+  "exclude": ["node_modules", "types", "coverage", "infra", "lambdas"],
   "ts-node": {
     "compilerOptions": {
       "module": "commonjs"

lambdas/src/portfolio-positions/types.ts lambdas/src/shared/domain-types.ts

@@ -6,5 +6,5 @@
     "lib": ["dom", "dom.iterable", "esnext"],
     "jsx": "react"
   },
-  "exclude": ["node_modules", "types", "coverage", "infra"]
+  "exclude": ["node_modules", "types", "coverage", "infra", "lambdas"]
 }