add referrals query

ui/pages/RewardsDashboard.tsx

-import { Button, Flex, Text, useColorModeValue } from '@chakra-ui/react';
+import { Button, Flex, Skeleton, Text, useColorModeValue } from '@chakra-ui/react';
 import { useRouter } from 'next/router';
 import React from 'react';
 
 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 IconSvg from 'ui/shared/IconSvg';
 import LinkExternal from 'ui/shared/links/LinkExternal';
 import PageTitle from 'ui/shared/Page/PageTitle';
@@ -12,6 +13,7 @@ import PageTitle from 'ui/shared/Page/PageTitle';
 const RewardsDashboard = () => {
   const router = useRouter();
   const { balances, dailyReward, isLogedIn } = useRewardsContext();
+  const referralsQuery = useReferrals();
 
   if (!isLogedIn) {
     router.replace({ pathname: '/' }, undefined, { shallow: true });
@@ -76,8 +78,8 @@ const RewardsDashboard = () => {
             px={ 6 }
             flexShrink={ 0 }
           >
-            <CopyField label="Referral link" value="blockscout.com/ref/0x789a9201d10029139101"/>
-            <CopyField label="Referral code" value="CODE10"/>
+            <CopyField label="Referral link" value={ referralsQuery.data?.link || '' } isLoading={ referralsQuery.isLoading }/>
+            <CopyField label="Referral code" value={ referralsQuery.data?.code || '' } isLoading={ referralsQuery.isLoading }/>
             <Flex flexDirection="column">
               <Flex alignItems="center" gap={ 1 } w="120px">
                 <IconSvg name="info" boxSize={ 5 } color="gray.500"/>
@@ -85,9 +87,11 @@ const RewardsDashboard = () => {
                   Referrals
                 </Text>
               </Flex>
+              <Skeleton isLoaded={ !referralsQuery.isLoading }>
                 <Text fontSize="32px" fontWeight="500">
-                0
+                  { referralsQuery.data?.referrals || 0 }
                 </Text>
+              </Skeleton>
             </Flex>
           </Flex>
         </Flex>

ui/rewards/CopyField.tsx

-import { FormControl, Input, InputGroup, InputRightElement, chakra, useColorModeValue } from '@chakra-ui/react';
+import { FormControl, Input, InputGroup, InputRightElement, Skeleton, chakra, useColorModeValue } from '@chakra-ui/react';
 import React from 'react';
 
 import CopyToClipboard from 'ui/shared/CopyToClipboard';
@@ -8,12 +8,14 @@ type Props = {
   label: string;
   value: string;
   className?: string;
+  isLoading?: boolean;
 };
 
-const CopyField = ({ label, value, className }: Props) => {
+const CopyField = ({ label, value, className, isLoading }: Props) => {
   const bgColor = ` ${ useColorModeValue('gray.200', 'blackAlpha.900') } !important`;
   return (
     <FormControl variant="floating" id={ label } className={ className }>
+      <Skeleton isLoaded={ !isLoading }>
         <InputGroup>
           <Input
             readOnly
@@ -31,6 +33,7 @@ const CopyField = ({ label, value, className }: Props) => {
             <CopyToClipboard text={ value }/>
           </InputRightElement>
         </InputGroup>
+      </Skeleton>
     </FormControl>
   );
 };

ui/rewards/steps/CongratsStepContent.tsx

@@ -7,8 +7,10 @@ import IconSvg from 'ui/shared/IconSvg';
 
 import AvailableSoonLabel from '../AvailableSoonLabel';
 import CopyField from '../CopyField';
+import useReferrals from '../useReferrals';
 
 const CongratsStepContent = () => {
+  const referralsQuery = useReferrals();
   return (
     <>
       <Flex
@@ -53,8 +55,13 @@ const CongratsStepContent = () => {
         <Text fontSize="md" mt={ 2 }>
           Receive a 10% bonus on all merits earned by your referrals
         </Text>
-        <CopyField label="Code" value="Test value" mt={ 3 }/>
-        <Button mt={ 6 }>
+        <CopyField
+          label="Referral link"
+          value={ referralsQuery.data?.link || '' }
+          isLoading={ referralsQuery.isLoading }
+          mt={ 3 }
+        />
+        <Button mt={ 6 } isLoading={ referralsQuery.isLoading }>
           Share on <IconSvg name="social/twitter" boxSize={ 6 } ml={ 1 }/>
         </Button>
       </Flex>

ui/rewards/useReferrals.tsx

+import config from 'configs/app';
+import useApiQuery from 'lib/api/useApiQuery';
+import * as cookies from 'lib/cookies';
+
+export default function useReferrals() {
+  const apiToken = cookies.get(cookies.NAMES.REWARDS_API_TOKEN);
+  return useApiQuery('rewards_user_referrals', {
+    queryOptions: {
+      enabled: Boolean(apiToken) && config.features.rewards.isEnabled,
+    },
+    fetchParams: {
+      headers: {
+        Authorization: `Bearer ${ apiToken }`,
+      },
+    },
+  });
+}