add rewards config query

lib/api/resources.ts

@@ -91,6 +91,7 @@ import type {
 } from 'types/api/optimisticL2';
 import type { RawTracesResponse } from 'types/api/rawTrace';
 import type {
+  RewardsConfigResponse,
   RewardsNonceResponse,
   RewardsCheckUserResponse,
   RewardsLoginResponse,
@@ -329,6 +330,11 @@ export const RESOURCES = {
   },
 
   // REWARDS SERVICE
+  rewards_config: {
+    path: '/api/v1/config',
+    endpoint: getFeaturePayload(config.features.rewards)?.api.endpoint,
+    basePath: getFeaturePayload(config.features.rewards)?.api.basePath,
+  },
   rewards_nonce: {
     path: '/api/v1/auth/nonce',
     endpoint: getFeaturePayload(config.features.rewards)?.api.endpoint,
@@ -1221,6 +1227,7 @@ Q extends 'address_mud_records' ? AddressMudRecords :
 Q extends 'address_mud_record' ? AddressMudRecord :
 Q extends 'withdrawals' ? WithdrawalsResponse :
 Q extends 'withdrawals_counters' ? WithdrawalsCounters :
+Q extends 'rewards_config' ? RewardsConfigResponse :
 Q extends 'rewards_nonce' ? RewardsNonceResponse :
 Q extends 'rewards_check_user' ? RewardsCheckUserResponse :
 Q extends 'rewards_login' ? RewardsLoginResponse :

types/api/rewards.ts

+export type RewardsConfigResponse = {
+  rewards: {
+    registration: string;
+    registration_with_referral: string;
+    daily_claim: string;
+    referral_share: string;
+  };
+};
+
 export type RewardsNonceResponse = {
   nonce: string;
 };

ui/pages/RewardsDashboard.tsx

@@ -6,6 +6,7 @@ import { useRewardsContext } from 'lib/contexts/rewards';
 import CopyField from 'ui/rewards/CopyField';
 import RewardsDashboardCard from 'ui/rewards/RewardsDashboardCard';
 import useReferrals from 'ui/rewards/useReferrals';
+import useRewardsConfig from 'ui/rewards/useRewardsConfig';
 import IconSvg from 'ui/shared/IconSvg';
 import LinkExternal from 'ui/shared/links/LinkExternal';
 import PageTitle from 'ui/shared/Page/PageTitle';
@@ -14,6 +15,7 @@ const RewardsDashboard = () => {
   const router = useRouter();
   const { balances, dailyReward, isLogedIn } = useRewardsContext();
   const referralsQuery = useReferrals();
+  const rewardsConfigQuery = useRewardsConfig();
 
   if (!isLogedIn) {
     router.replace({ pathname: '/' }, undefined, { shallow: true });
@@ -66,7 +68,11 @@ const RewardsDashboard = () => {
               Referral program
             </Text>
             <Text fontSize="sm">
-              Refer friends and boost your merits! You receive a 10% bonus on all merits earned by your referrals.
+              Refer friends and boost your merits! You receive a{ ' ' }
+              <Skeleton display="inline" isLoaded={ !rewardsConfigQuery.isLoading }>
+                { Number(rewardsConfigQuery.data?.rewards.referral_share || 0) * 100 }%
+              </Skeleton>
+              { ' ' }bonus on all merits earned by your referrals.
             </Text>
           </Flex>
           <Flex

ui/rewards/steps/CongratsStepContent.tsx

-import { Text, Box, Flex, useColorModeValue, Button } from '@chakra-ui/react';
+import { Text, Box, Flex, useColorModeValue, Button, Skeleton } from '@chakra-ui/react';
 import React from 'react';
 
 import { route } from 'nextjs-routes';
@@ -8,9 +8,12 @@ import IconSvg from 'ui/shared/IconSvg';
 import AvailableSoonLabel from '../AvailableSoonLabel';
 import CopyField from '../CopyField';
 import useReferrals from '../useReferrals';
+import useRewardsConfig from '../useRewardsConfig';
 
 const CongratsStepContent = () => {
   const referralsQuery = useReferrals();
+  const rewardsConfigQuery = useRewardsConfig();
+
   return (
     <>
       <Flex
@@ -23,9 +26,11 @@ const CongratsStepContent = () => {
       >
         <Flex alignItems="center" pl={ 2 } mb={ 4 }>
           <IconSvg name="merits_colored" boxSize={ 16 }/>
-          <Text fontSize="30px" fontWeight="700" color="blue.700">
-            +250
-          </Text>
+          <Skeleton isLoaded={ !rewardsConfigQuery.isLoading }>
+            <Text fontSize="30px" fontWeight="700" color="blue.700">
+              +{ rewardsConfigQuery.data?.rewards.registration }
+            </Text>
+          </Skeleton>
         </Flex>
         <Flex
           flexDirection="column"
@@ -53,7 +58,11 @@ const CongratsStepContent = () => {
           </Text>
         </Flex>
         <Text fontSize="md" mt={ 2 }>
-          Receive a 10% bonus on all merits earned by your referrals
+          Receive a{ ' ' }
+          <Skeleton display="inline" isLoaded={ !rewardsConfigQuery.isLoading }>
+            { Number(rewardsConfigQuery.data?.rewards.referral_share || 0) * 100 }%
+          </Skeleton>
+          { ' ' }bonus on all merits earned by your referrals
         </Text>
         <CopyField
           label="Referral link"

ui/rewards/useRewardsConfig.tsx

+import config from 'configs/app';
+import useApiQuery from 'lib/api/useApiQuery';
+
+export default function useReferrals() {
+  return useApiQuery('rewards_config', {
+    queryOptions: {
+      enabled: config.features.rewards.isEnabled,
+    },
+  });
+}