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>
-              <Text fontSize="32px" fontWeight="500">
-                0
-              </Text>
+              <Skeleton isLoaded={ !referralsQuery.isLoading }>
+                <Text fontSize="32px" fontWeight="500">
+                  { 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,29 +8,32 @@ 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 }>
-      <InputGroup>
-        <Input
-          readOnly
-          fontWeight="500"
-          value={ value }
-          overflow="hidden"
-          textOverflow="ellipsis"
-          pr="40px !important"
-          bgColor={ bgColor }
-          borderColor={ bgColor }
-          borderRadius="12px !important"
-        />
-        <InputPlaceholder text={ label } bgColor={ bgColor }/>
-        <InputRightElement w="40px" display="flex" justifyContent="flex-end" pr={ 2 }>
-          <CopyToClipboard text={ value }/>
-        </InputRightElement>
-      </InputGroup>
+      <Skeleton isLoaded={ !isLoading }>
+        <InputGroup>
+          <Input
+            readOnly
+            fontWeight="500"
+            value={ value }
+            overflow="hidden"
+            textOverflow="ellipsis"
+            pr="40px !important"
+            bgColor={ bgColor }
+            borderColor={ bgColor }
+            borderRadius="12px !important"
+          />
+          <InputPlaceholder text={ label } bgColor={ bgColor }/>
+          <InputRightElement w="40px" display="flex" justifyContent="flex-end" pr={ 2 }>
+            <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 }`,
+      },
+    },
+  });
+}