added countdown page

.env.development

@@ -9,7 +9,6 @@ VITE_TRSRY_ADDR=7L53bUTBopuwFt3mKUfmkzgGLayYa1Yvn1hAg9v5UMrQzTfh
 VITE_WC_PROJECT_ID=265a3fea03b46c14a46a201fbd6c552e
 VITE_HDX_CAIP_ID=polkadot:afdc188f45c71dacbaa0b62e16a91f72
 VITE_STABLECOIN_ASSET_ID=10
-VITE_FF_MONEY_MARKET_ENABLED=true
 VITE_FF_DISPLAY_ASSET_ENABLED=true
 VITE_FF_ADD_TOKEN=true
 VITE_REFERENDUM_LINK=https://hydradx.subsquare.io/democracy/referendum

.env.production

@@ -9,7 +9,6 @@ VITE_TRSRY_ADDR=7L53bUTBopuwFt3mKUfmkzgGLayYa1Yvn1hAg9v5UMrQzTfh
 VITE_WC_PROJECT_ID=265a3fea03b46c14a46a201fbd6c552e
 VITE_HDX_CAIP_ID=polkadot:afdc188f45c71dacbaa0b62e16a91f72
 VITE_STABLECOIN_ASSET_ID=10
-VITE_FF_MONEY_MARKET_ENABLED=false
 VITE_FF_DISPLAY_ASSET_ENABLED=false
 VITE_FF_ADD_TOKEN=true
 VITE_REFERENDUM_LINK=https://hydradx.subsquare.io/democracy/referendum

.env.rococo

@@ -9,7 +9,6 @@ VITE_TRSRY_ADDR=7L53bUTBopuwFt3mKUfmkzgGLayYa1Yvn1hAg9v5UMrQzTfh
 VITE_WC_PROJECT_ID=265a3fea03b46c14a46a201fbd6c552e
 VITE_HDX_CAIP_ID=polkadot:afdc188f45c71dacbaa0b62e16a91f72
 VITE_STABLECOIN_ASSET_ID=10
-VITE_FF_MONEY_MARKET_ENABLED=false
 VITE_FF_DISPLAY_ASSET_ENABLED=false
 VITE_FF_ADD_TOKEN=false
 VITE_REFERENDUM_LINK=https://hydradx.subsquare.io/democracy/referendum

src/api/evm.ts

@@ -1,10 +1,14 @@
 import { ApiPromise } from "@polkadot/api"
-import { useQuery } from "@tanstack/react-query"
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query"
 import { useRpcProvider } from "providers/rpcProvider"
 import { QUERY_KEYS } from "utils/queryKeys"
 import { DISPATCH_ADDRESS, H160, isEvmAccount, isEvmAddress } from "utils/evm"
 import BigNumber from "bignumber.js"
 import { undefinedNoop } from "utils/helpers"
+import { useStore } from "state/store"
+import { createToastMessages } from "state/toasts"
+import { useAccount } from "sections/web3-connect/Web3Connect.utils"
+import { useTranslation } from "react-i18next"
 
 const getIsEvmAccountBound = (api: ApiPromise, address: string) => {
   return async () => {
@@ -65,3 +69,30 @@ export const useEvmPaymentFee = (txHex: string, address?: string) => {
     },
   )
 }
+
+export const useEvmAccountBind = () => {
+  const { t } = useTranslation()
+  const { account } = useAccount()
+  const { api } = useRpcProvider()
+  const { createTransaction } = useStore()
+  const queryClient = useQueryClient()
+  return useMutation(() => {
+    return createTransaction(
+      {
+        tx: api.tx.evmAccounts.bindEvmAddress(),
+      },
+      {
+        toast: createToastMessages("lending.bind.toast", {
+          t,
+        }),
+        onSuccess: () => {
+          if (account) {
+            queryClient.refetchQueries(
+              QUERY_KEYS.evmAccountBinding(H160.fromSS58(account.address)),
+            )
+          }
+        },
+      },
+    )
+  })
+}

src/api/provider.ts

@@ -21,6 +21,7 @@ import { undefinedNoop } from "utils/helpers"
 import { ExternalAssetCursor } from "@galacticcouncil/apps"
 import { getPendulumAssetIdFromGeneralKey } from "utils/externalAssets"
 import { pendulum } from "./external/pendulum"
+import { AaveV3Hydration } from "sections/lending/ui-config/addresses"
 
 export type TEnv = "testnet" | "mainnet"
 export type ProviderProps = {
@@ -35,6 +36,7 @@ export type ProviderProps = {
 export type TFeatureFlags = {
   referrals: boolean
   dispatchPermit: boolean
+  moneyMarket: boolean
 }
 
 export const PROVIDERS: ProviderProps[] = [
@@ -258,9 +260,14 @@ export const useProviderData = () => {
 
       await poolService.syncRegistry(externalTokens[dataEnv])
 
-      const [isReferralsEnabled, isDispatchPermitEnabled] = await Promise.all([
+      const [
+        isReferralsEnabled,
+        isDispatchPermitEnabled,
+        moneyMarketPoolContract,
+      ] = await Promise.all([
         api.query.referrals,
         api.tx.multiTransactionPayment.dispatchPermit,
+        api.query.evmAccounts.approvedContract(AaveV3Hydration.POOL),
         tradeRouter.getPools(),
       ])
 
@@ -274,6 +281,7 @@ export const useProviderData = () => {
         featureFlags: {
           referrals: !!isReferralsEnabled,
           dispatchPermit: !!isDispatchPermitEnabled,
+          moneyMarket: !moneyMarketPoolContract.isEmpty,
         } as TFeatureFlags,
       }
     },

src/components/Layout/Page/Page.tsx

@@ -23,6 +23,7 @@ import {
 } from "./Page.styled"
 import { useControlScroll } from "./Page.utils"
 import { usePreviousUrl } from "hooks/usePreviousUrl"
+import { useRpcProvider } from "providers/rpcProvider"
 
 type Props = {
   className?: string
@@ -50,6 +51,7 @@ const useSubheaderComponent = () => {
   const matchRoute = useMatchRoute()
   const search = useSearch()
   const isDesktop = useMedia(theme.viewport.gte.sm)
+  const { featureFlags } = useRpcProvider()
 
   const prevUrl = usePreviousUrl()
 
@@ -78,13 +80,17 @@ const useSubheaderComponent = () => {
   }
 
   if (
-    matchRoute({ to: LINKS.borrow }) ||
-    matchRoute({ to: LINKS.borrowMarkets })
+    featureFlags.moneyMarket &&
+    (matchRoute({ to: LINKS.borrow }) ||
+      matchRoute({ to: LINKS.borrowMarkets }))
   ) {
     return <LendingNavigation />
   }
 
-  if (matchRoute({ to: LINKS.borrowMarkets, fuzzy: true })) {
+  if (
+    featureFlags.moneyMarket &&
+    matchRoute({ to: LINKS.borrowMarkets, fuzzy: true })
+  ) {
     return prevUrl === LINKS.borrowMarkets ? (
       <BackSubHeader
         label={t("lending.navigation.markets.back")}

src/i18n/locales/en/translations.json

@@ -1029,6 +1029,9 @@
   "lending.navigation.dashboard.back": "Back to dashboard",
   "lending.navigation.markets": "Markets",
   "lending.navigation.markets.back": "Back to markets",
+  "lending.countdown.title": "Your acces to MoneyMarket is coming soon.",
+  "lending.countdown.description": "Short explanation here what is happening now and why it could take so long or something like that.",
+  "lending.countdown.button": "Check referendum",
   "lending.cap.range": "{{ valueA, compact }} of {{ valueB, compact }}",
   "lending.cap.range.usd": "${{ valueA, compact }} of ${{ valueB, compact }}",
   "lending.tooltip.apy": "The weighted average of APY for all supplied assets, including incentives.",

src/providers/rpcProvider.tsx

@@ -96,6 +96,7 @@ export const RpcProvider = ({ children }: { children: ReactNode }) => {
       featureFlags: {
         referrals: true,
         dispatchPermit: true,
+        moneyMarket: false,
       } as TProviderContext["featureFlags"],
       poolService: {} as TProviderContext["poolService"],
     }

src/sections/lending/LendingPage.tsx

@@ -1,8 +1,20 @@
 import { Outlet } from "@tanstack/react-location"
+import { useRpcProvider } from "providers/rpcProvider"
 
 import { LendingPageProviders } from "sections/lending/providers/LendingPageProviders"
+import { LendingDashboardSkeleton } from "sections/lending/skeleton/LendingDashboardSkeleton"
+import { MoneyMarketCountdown } from "sections/lending/ui/money-market/MoneyMarketCountdown"
 
 export const LendingPage = () => {
+  const { featureFlags, isLoaded } = useRpcProvider()
+
+  if (!isLoaded) {
+    return <LendingDashboardSkeleton />
+  }
+
+  if (!featureFlags.moneyMarket) {
+    return <MoneyMarketCountdown />
+  }
   return (
     <LendingPageProviders>
       <Outlet />

src/sections/lending/ui-config/addresses.ts

@@ -0,0 +1,28 @@
+const AaveV3HydrationTestnet = {
+  POOL_ADDRESSES_PROVIDER: "0x82db570265c37bE24caf5bc943428a6848c3e9a6",
+  POOL: "0xf550bCd9B766843D72fC4C809a839633fD09b643",
+  WETH_GATEWAY: "",
+  FAUCET: "",
+  WALLET_BALANCE_PROVIDER: "0x98C63E4299fF188572Fffdc471f23B39a30342b4",
+  UI_POOL_DATA_PROVIDER: "0x5a21aFD0fF9E5D76F58BEd8aE34AABE0c41e65bc",
+  UI_INCENTIVE_DATA_PROVIDER: "0xc7A1dB5Aa56a5F07E758D8d8804B17B4cA7c889B",
+  GHO_TOKEN_ADDRESS: "",
+  GHO_UI_DATA_PROVIDER: "",
+}
+
+const AaveV3HydrationMainnet = {
+  POOL_ADDRESSES_PROVIDER: "",
+  POOL: "",
+  WETH_GATEWAY: "",
+  FAUCET: "",
+  WALLET_BALANCE_PROVIDER: "",
+  UI_POOL_DATA_PROVIDER: "",
+  UI_INCENTIVE_DATA_PROVIDER: "",
+  GHO_TOKEN_ADDRESS: "",
+  GHO_UI_DATA_PROVIDER: "",
+}
+
+export const AaveV3Hydration =
+  import.meta.env.VITE_ENV === "production"
+    ? AaveV3HydrationMainnet
+    : AaveV3HydrationTestnet

src/sections/lending/ui-config/marketsConfig.tsx

@@ -5,18 +5,7 @@ import {
   AaveV3Sepolia,
 } from "@bgd-labs/aave-address-book"
 import { ReactNode } from "react"
-
-const AaveV3Hydration = {
-  POOL_ADDRESSES_PROVIDER: "0x82db570265c37bE24caf5bc943428a6848c3e9a6",
-  POOL: "0xf550bCd9B766843D72fC4C809a839633fD09b643",
-  WETH_GATEWAY: "",
-  FAUCET: "",
-  WALLET_BALANCE_PROVIDER: "0x98C63E4299fF188572Fffdc471f23B39a30342b4",
-  UI_POOL_DATA_PROVIDER: "0x5a21aFD0fF9E5D76F58BEd8aE34AABE0c41e65bc",
-  UI_INCENTIVE_DATA_PROVIDER: "0xc7A1dB5Aa56a5F07E758D8d8804B17B4cA7c889B",
-  GHO_TOKEN_ADDRESS: "",
-  GHO_UI_DATA_PROVIDER: "",
-}
+import { AaveV3Hydration } from "sections/lending/ui-config/addresses"
 
 // Enable for premissioned market
 // import { PermissionView } from 'sections/lending/components/transactions/FlowCommons/PermissionView';

src/sections/lending/ui/money-market/MoneyMarketBanner.styled.ts

@@ -2,6 +2,7 @@ import styled from "@emotion/styled"
 import { theme } from "theme"
 
 import LinesSvg from "sections/lending/ui/hollar/hollar-banner/assets/lines.svg"
+import { Button } from "components/Button/Button"
 
 export const SContainer = styled.div`
   container-type: inline-size;
@@ -28,7 +29,8 @@ export const SInnerContainer = styled.div`
 
   background: linear-gradient(
     90deg,
-    rgba(0, 87, 159, 0.66) 25%,
+    rgba(0, 87, 159, 0.66) 15%,
+    rgba(110, 42, 255, 0.33) 50%,
     rgba(110, 42, 255, 0) 100%
   );
 
@@ -105,3 +107,10 @@ export const SValuesContainer = styled.div`
     margin-top: 0;
   }
 `
+
+export const SBoundButton = styled(Button)`
+  border-color: transparent;
+  color: ${theme.colors.green400};
+  background-color: rgba(${theme.rgbColors.green100}, 0.1);
+  pointer-events: none;
+`

src/sections/lending/ui/money-market/MoneyMarketBanner.tsx

@@ -1,19 +1,17 @@
+import { useEvmAccountBind } from "api/evm"
+import CheckIcon from "assets/icons/CheckIcon.svg?react"
 import { Button } from "components/Button/Button"
 import { Text } from "components/Typography/Text/Text"
 import { FC } from "react"
+import { Trans, useTranslation } from "react-i18next"
+import { useEvmAccount } from "sections/web3-connect/Web3Connect.utils"
 import {
+  SBoundButton,
   SContainer,
   SContent,
   SInnerContainer,
 } from "./MoneyMarketBanner.styled"
-import { useStore } from "state/store"
-import { useRpcProvider } from "providers/rpcProvider"
-import { useTranslation, Trans } from "react-i18next"
-import { useQueryClient } from "@tanstack/react-query"
-import { useAccount } from "sections/web3-connect/Web3Connect.utils"
-import { QUERY_KEYS } from "utils/queryKeys"
-import { H160 } from "utils/evm"
-import { createToastMessages } from "state/toasts"
+import { Web3ConnectModalButton } from "sections/web3-connect/modal/Web3ConnectModalButton"
 
 type MoneyMarketBannerProps = {
   className?: string
@@ -23,30 +21,9 @@ export const MoneyMarketBanner: FC<MoneyMarketBannerProps> = ({
   className,
 }) => {
   const { t } = useTranslation()
-  const { api } = useRpcProvider()
-  const { createTransaction } = useStore()
-  const { account } = useAccount()
-  const queryClient = useQueryClient()
+  const { account, isBound } = useEvmAccount()
 
-  const onBind = () => {
-    createTransaction(
-      {
-        tx: api.tx.evmAccounts.bindEvmAddress(),
-      },
-      {
-        toast: createToastMessages("lending.bind.toast", {
-          t,
-        }),
-        onSuccess: () => {
-          if (account) {
-            queryClient.refetchQueries(
-              QUERY_KEYS.evmAccountBinding(H160.fromSS58(account.address)),
-            )
-          }
-        },
-      },
-    )
-  }
+  const { mutate: onBind } = useEvmAccountBind()
 
   return (
     <SContainer className={className}>
@@ -61,15 +38,19 @@ export const MoneyMarketBanner: FC<MoneyMarketBannerProps> = ({
               <Trans t={t} i18nKey="lending.bind.banner.description" />
             </Text>
           </div>
-          <Button
-            variant="primary"
-            size="small"
-            sx={{ ml: "auto" }}
-            css={{ position: "relative", zIndex: 1 }}
-            onClick={onBind}
-          >
-            {t("lending.bind.banner.button")}
-          </Button>
+          <div sx={{ ml: "auto" }} css={{ position: "relative", zIndex: 1 }}>
+            {!account ? (
+              <Web3ConnectModalButton size="small" />
+            ) : isBound ? (
+              <SBoundButton size="small">
+                <CheckIcon width={14} height={14} /> Account bound
+              </SBoundButton>
+            ) : (
+              <Button variant="primary" size="small" onClick={() => onBind()}>
+                {t("lending.bind.banner.button")}
+              </Button>
+            )}
+          </div>
         </SContent>
       </SInnerContainer>
     </SContainer>

src/sections/lending/ui/money-market/MoneyMarketCountdown.styled.ts

@@ -0,0 +1,18 @@
+import styled from "@emotion/styled"
+import { theme } from "theme"
+
+export const SContent = styled.div`
+  --border-color: rgba(152, 176, 214, 0.27);
+
+  position: relative;
+
+  padding: 20px;
+  color: white;
+
+  background: ${theme.colors.darkBlue700};
+
+  border: 1px solid var(--border-color);
+  border-radius: ${theme.borderRadius.medium}px;
+
+  text-align: center;
+`