resolved conflicts

package.json

@@ -31,15 +31,15 @@
     "@emotion/styled": "^11.10.4",
     "@ethersproject/address": "^5.7.0",
     "@ethersproject/providers": "^5.7.2",
-    "@galacticcouncil/apps": "^4.0.0",
+    "@galacticcouncil/apps": "^4.1.0",
     "@galacticcouncil/math-lbp": "^1.0.0",
     "@galacticcouncil/math-liquidity-mining": "^1.0.0",
     "@galacticcouncil/math-omnipool": "^1.0.0",
     "@galacticcouncil/math-stableswap": "^1.0.0",
     "@galacticcouncil/math-staking": "^1.0.0",
     "@galacticcouncil/math-xyk": "^1.0.0",
     "@galacticcouncil/sdk": "^3.0.1",
-    "@galacticcouncil/ui": "^4.0.0",
+    "@galacticcouncil/ui": "^4.0.3",
     "@galacticcouncil/xcm-cfg": "^2.5.0",
     "@galacticcouncil/xcm-core": "^1.4.0",
     "@galacticcouncil/xcm-sdk": "^3.3.0",

src/api/era.tsx

@@ -4,7 +4,9 @@ import { ExtrinsicEra } from "@polkadot/types/interfaces/extrinsics"
 import { bnToBn } from "@polkadot/util"
 import { useTimestamp } from "./timestamp"
 import { useMemo } from "react"
-import { BLOCK_TIME } from "utils/constants"
+import { PARACHAIN_BLOCK_TIME } from "utils/constants"
+
+const DEFAULT_PERIOD = 900
 
 export const useEra = (
   era: ExtrinsicEra,
@@ -14,21 +16,27 @@ export const useEra = (
   const blockNumber = bnToBn(hexBlockNumber)
 
   const mortal = useMemo(() => {
+    if (blockNumber.isZero()) return null
     if (era.isMortalEra) {
       const mortal = era.asMortalEra
       const period = new BN(mortal.period.toHex()) // Blocks validity
 
-      if (!blockNumber.isZero()) {
-        const birth = new BN(mortal.birth(blockNumber))
-        const death = new BN(mortal.death(blockNumber))
-        return {
-          birth,
-          death,
-          period,
-        }
+      const birth = new BN(mortal.birth(blockNumber))
+      const death = new BN(mortal.death(blockNumber))
+      return {
+        birth,
+        death,
+        period,
       }
     }
-    return null
+
+    const birth = new BN(blockNumber.toString())
+    const period = new BN(DEFAULT_PERIOD)
+    return {
+      birth,
+      death: birth.plus(period),
+      period,
+    }
   }, [era, blockNumber])
 
   const timestamp = useTimestamp(mortal?.birth, enabled)
@@ -38,14 +46,21 @@ export const useEra = (
       const birthDate = new Date(timestamp.data)
       const deathDate = addSeconds(
         birthDate,
-        mortal.period.times(BLOCK_TIME).toNumber(),
+        mortal.period.times(PARACHAIN_BLOCK_TIME).toNumber(),
       )
       return {
         birthDate,
         deathDate,
+        period: mortal.period,
+        isLoading: false,
       }
     }
 
-    return null
-  }, [timestamp.data, mortal?.period])
+    return {
+      birthDate: null,
+      deathDate: null,
+      period: null,
+      isLoading: timestamp.isLoading,
+    }
+  }, [timestamp.data, timestamp.isLoading, mortal?.period])
 }

src/api/farms.ts

@@ -20,6 +20,8 @@ import request, { gql } from "graphql-request"
 import { AccountId32 } from "@polkadot/types/interfaces"
 import { useMemo } from "react"
 import { scale } from "utils/balance"
+import { getAccountResolver } from "utils/farms/claiming/accountResolver"
+import { useAccountBalances, useAccountsBalances } from "./accountBalances"
 
 const NEW_YIELD_FARMS_BLOCKS = (48 * 60 * 60) / PARACHAIN_BLOCK_TIME.toNumber() // 48 hours
 
@@ -34,6 +36,7 @@ type FarmAprs = ReturnType<typeof useFarmAprs>
 export interface Farm {
   globalFarm: PalletLiquidityMiningGlobalFarmData
   yieldFarm: PalletLiquidityMiningYieldFarmData
+  globalFarmPotAddress: string
   poolId: string
 }
 
@@ -161,6 +164,7 @@ const getGlobalFarm =
   }
 
 export const useFarms = (poolIds: Array<string>) => {
+  const { api } = useRpcProvider()
   const activeYieldFarmsQuery = useActiveYieldFarms(poolIds)
 
   const farmIds = activeYieldFarmsQuery
@@ -170,6 +174,15 @@ export const useFarms = (poolIds: Array<string>) => {
     }, [])
     .flat(2)
 
+  const accountResolver = getAccountResolver(api.registry)
+  const globalFarmPotAddresses = farmIds?.map((farm) => {
+    const potAddresss = accountResolver(Number(farm.globalFarmId)).toString()
+    return {
+      globalFarmId: farm.globalFarmId.toString(),
+      potAddresss,
+    }
+  })
+
   const globalFarms = useGlobalFarms(farmIds)
   const yieldFarms = useYieldFarms(farmIds)
 
@@ -191,6 +204,10 @@ export const useFarms = (poolIds: Array<string>) => {
           )
         })?.data?.farm
 
+        const globalFarmPotAddress = globalFarmPotAddresses.find(
+          (farm) => farm.globalFarmId === globalFarm?.id.toString(),
+        )?.potAddresss
+
         const yieldFarm = yieldFarms.find((yieldFarm) => {
           const data = yieldFarm.data
 
@@ -202,10 +219,15 @@ export const useFarms = (poolIds: Array<string>) => {
 
         if (!globalFarm || !yieldFarm) return undefined
 
-        return { globalFarm, yieldFarm, poolId: farmId.poolId }
+        return {
+          globalFarm,
+          yieldFarm,
+          globalFarmPotAddress,
+          poolId: farmId.poolId,
+        }
       })
       .filter((x): x is Farm => x != null)
-  }, [farmIds, globalFarms, yieldFarms])
+  }, [farmIds, globalFarms, yieldFarms, globalFarmPotAddresses])
 
   return { data, isLoading }
 }
@@ -247,6 +269,7 @@ function getFarmApr(
   },
   farm: Farm,
   priceAdjustment: BigNumber,
+  potBalance?: BigNumber,
 ) {
   const { globalFarm, yieldFarm } = farm
   const { rewardCurrency, incentivizedAsset } = globalFarm
@@ -330,11 +353,16 @@ function getFarmApr(
 
   const minApr = loyaltyFactor ? apr.times(loyaltyFactor) : null
 
+  const potMaxRewards = potBalance
+    ? distributedRewards.plus(potBalance)
+    : undefined
+
   return {
     apr,
     minApr,
     distributedRewards,
     maxRewards,
+    potMaxRewards,
     fullness,
     estimatedEndBlock: estimatedEndBlock,
     assetId: globalFarm.rewardCurrency,
@@ -347,43 +375,48 @@ function getFarmApr(
   }
 }
 
-export const useFarmApr = (farm: {
-  globalFarm: PalletLiquidityMiningGlobalFarmData
-  yieldFarm: PalletLiquidityMiningYieldFarmData
-  poolId: string
-}) => {
+export const useFarmApr = (farm: Farm) => {
+  const { assets } = useRpcProvider()
   const bestNumber = useBestNumber()
   const rewardCurrency = farm.globalFarm.rewardCurrency.toString()
   const incentivizedAsset = farm.globalFarm.incentivizedAsset.toString()
 
+  const accountBalance = useAccountBalances(farm.globalFarmPotAddress)
   const oraclePrice = useOraclePrice(rewardCurrency, incentivizedAsset)
 
   return useQueryReduce(
     [bestNumber, oraclePrice] as const,
     (bestNumber, oraclePrice) => {
+      const rewardCurrency = farm.globalFarm.rewardCurrency.toString()
+      const potBalance =
+        rewardCurrency === assets.native.id
+          ? accountBalance.data?.native.freeBalance
+          : accountBalance.data?.balances.find(
+              (balance) => balance.id.toString() === rewardCurrency,
+            )?.freeBalance
+
       return getFarmApr(
         bestNumber,
         farm,
         oraclePrice?.oraclePrice ??
           farm.globalFarm.priceAdjustment.toBigNumber(),
+        potBalance,
       )
     },
   )
 }
 
-export const useFarmAprs = (
-  farms: {
-    globalFarm: PalletLiquidityMiningGlobalFarmData
-    yieldFarm: PalletLiquidityMiningYieldFarmData
-    poolId: string
-  }[],
-) => {
+export const useFarmAprs = (farms: Farm[]) => {
+  const { assets } = useRpcProvider()
   const bestNumber = useBestNumber()
   const ids = farms.map((farm) => ({
     rewardCurrency: farm.globalFarm.rewardCurrency.toString(),
     incentivizedAsset: farm.globalFarm.incentivizedAsset.toString(),
   }))
   const oraclePrices = useOraclePrices(ids)
+  const accountsBalances = useAccountsBalances(
+    farms.map((farm) => farm.globalFarmPotAddress),
+  )
 
   return useQueryReduce([bestNumber] as const, (bestNumber) => {
     return farms.map((farm) => {
@@ -394,11 +427,24 @@ export const useFarmAprs = (
           oraclePrice.data?.id.incentivizedAsset === incentivizedAsset &&
           oraclePrice.data?.id.rewardCurrency === rewardCurrency,
       )
+      const accountBalance = accountsBalances.data?.find(
+        (balance) => balance.accountId.toString() === farm.globalFarmPotAddress,
+      )
+
+      const potBalance = accountBalance
+        ? rewardCurrency === assets.native.id
+          ? accountBalance.native.freeBalance
+          : accountBalance.balances.find(
+              (balance) => balance.id.toString() === rewardCurrency,
+            )?.freeBalance
+        : undefined
+
       return getFarmApr(
         bestNumber,
         farm,
         oraclePrice?.data?.oraclePrice ??
           farm.globalFarm.priceAdjustment.toBigNumber(),
+        potBalance,
       )
     })
   })

src/api/timestamp.ts

@@ -11,12 +11,13 @@ export function useTimestamp(
   enabled = true,
 ) {
   const { api } = useRpcProvider()
+  const queryEnabled = !!blockNumber && enabled
+
   return useQuery(
     QUERY_KEYS.timestamp(blockNumber),
-    () =>
-      blockNumber !== null ? getTimestamp(api, blockNumber) : undefinedNoop(),
+    () => (queryEnabled ? getTimestamp(api, blockNumber) : undefinedNoop()),
     {
-      enabled: !!blockNumber && enabled,
+      enabled: queryEnabled,
     },
   )
 }
@@ -25,7 +26,7 @@ export async function getTimestamp(
   api: ApiPromise,
   blockNumber?: u32 | BigNumber,
 ) {
-  if (blockNumber != null) {
+  if (blockNumber) {
     const blockHash = await api.rpc.chain.getBlockHash(blockNumber.toString())
     const apiAt = await api.at(blockHash)
     const now = await apiAt.query.timestamp.now()

src/components/AppProviders/AppProviders.tsx

@@ -10,9 +10,9 @@ import * as Apps from "@galacticcouncil/apps"
 import { createComponent } from "@lit-labs/react"
 import { MigrationProvider } from "sections/migration/MigrationProvider"
 
-const AppsPersistenceProvider = createComponent({
-  tagName: "gc-database-provider",
-  elementClass: Apps.DatabaseProvider,
+const AppsContextProvider = createComponent({
+  tagName: "gc-context-provider",
+  elementClass: Apps.ContextProvider,
   react: React,
 })
 
@@ -28,7 +28,7 @@ export const AppProviders: FC<PropsWithChildren> = ({ children }) => {
                 highlightColor={`rgba(${theme.rgbColors.white}, 0.24)`}
                 borderRadius={4}
               >
-                <AppsPersistenceProvider>{children}</AppsPersistenceProvider>
+                <AppsContextProvider>{children}</AppsContextProvider>
               </SkeletonTheme>
             </ToastProvider>
           </InvalidateOnBlock>

src/components/AssetIcon/AssetIcon.tsx

@@ -15,9 +15,6 @@ import { AnyParachain } from "@galacticcouncil/xcm-core"
 import { isAnyParachain } from "utils/helpers"
 import { MetadataStore } from "@galacticcouncil/ui"
 
-const EXTERNAL_ASSETS_WHITELIST =
-  MetadataStore.getInstance().externalWhitelist()
-
 const chains = Array.from(chainsMap.values())
 
 export const UigcAssetPlaceholder = createComponent({
@@ -48,6 +45,11 @@ export const AssetLogo = ({ id }: { id?: string }) => {
   const { t } = useTranslation()
   const { assets } = useRpcProvider()
 
+  const externalAssetsWhitelist = useMemo(
+    () => MetadataStore.getInstance().externalWhitelist(),
+    [],
+  )
+
   const asset = useMemo(() => {
     const assetDetails = id ? assets.getAsset(id) : undefined
 
@@ -58,7 +60,7 @@ export const AssetLogo = ({ id }: { id?: string }) => {
     ) as AnyParachain
 
     const isWhitelisted = assetDetails
-      ? EXTERNAL_ASSETS_WHITELIST.includes(assetDetails.id)
+      ? externalAssetsWhitelist.includes(assetDetails.id)
       : false
 
     const badgeVariant: "warning" | "danger" | "" = assetDetails?.isExternal
@@ -72,7 +74,7 @@ export const AssetLogo = ({ id }: { id?: string }) => {
       symbol: assetDetails?.symbol,
       badgeVariant,
     }
-  }, [assets, id])
+  }, [assets, externalAssetsWhitelist, id])
 
   if (asset.chain || asset.symbol)
     return (

src/components/Layout/Header/Header.tsx

@@ -42,7 +42,13 @@ export const Header = () => {
             <Link to={LINKS.swap} search={resetSearchParams(search)}>
               <Icon
                 sx={{ color: "white" }}
-                icon={!isMediumMedia ? <HydraLogoFull /> : <HydraLogo />}
+                icon={
+                  !isMediumMedia ? (
+                    <HydraLogoFull />
+                  ) : (
+                    <Icon size={24} icon={<HydraLogo />} />
+                  )
+                }
               />
             </Link>
             <Suspense>

src/components/Modal/Modal.styled.ts

@@ -58,7 +58,7 @@ export const SContainer = styled(Content)`
   --modal-header-padding-x: 12px;
   --modal-header-btn-size: 34px;
   --modal-header-height: calc(
-    var(--modal-header-btn-size) + var(--modal-header-padding-y) * 2
+    var(--modal-header-btn-size) + var(--modal-header-padding-y) * 1.5
   );
 
   --modal-content-padding: 12px;

src/i18n/i18n.ts

@@ -93,7 +93,7 @@ i18n
           if (num == null) return null
           return formatNum(
             num.toFixed(),
-            { notation: "compact" },
+            { notation: "compact", maximumSignificantDigits: 2 },
             lng,
           )?.replaceAll(
             getFormatSeparators(lng).group ?? ",",