Merge pull request #302 from axone-protocol/fix/safari-fonts

app/[locale]/dashboard/_components/filter-by-range.tsx

@@ -24,39 +24,39 @@ const FilterByRange: FC<FilterByRangeProps> = ({ range, selectRange }) => {
         onClick={handleRangeChange(TimeFrameEnum.ALL)}
         className={
           cn('cursor-pointer  hover:text-white mb-0 mx-2 text-axone-khaki',
-            { 'text-axone-orange font-bold': range === TimeFrameEnum.ALL })}
+            { 'text-axone-orange': range === TimeFrameEnum.ALL })}
       >
         {t('Chart.Filter.All')}
       </Text>
       <Text
         onClick={handleRangeChange(TimeFrameEnum.DAY)}
         className={
           cn('cursor-pointer  hover:text-white mb-0 mx-2 text-axone-khaki',
-            { 'text-axone-orange font-bold': range === TimeFrameEnum.DAY })}
+            { 'text-axone-orange': range === TimeFrameEnum.DAY })}
       >
         {t('Chart.Filter.Day')}
       </Text>
       <Text
         onClick={handleRangeChange(TimeFrameEnum.WEEK)}
         className={
           cn('cursor-pointer  hover:text-white mb-0 mx-2 text-axone-khaki',
-            { 'text-axone-orange font-bold': range === TimeFrameEnum.WEEK })}
+            { 'text-axone-orange': range === TimeFrameEnum.WEEK })}
       >
         {t('Chart.Filter.Week')}
       </Text>
       <Text
         onClick={handleRangeChange(TimeFrameEnum.MONTH)}
         className={
           cn('cursor-pointer  hover:text-white mb-0 mx-2 text-axone-khaki',
-            { 'text-axone-orange font-bold': range === TimeFrameEnum.MONTH })}
+            { 'text-axone-orange': range === TimeFrameEnum.MONTH })}
       >
         {t('Chart.Filter.Month')}
       </Text>
       <Text
         onClick={handleRangeChange(TimeFrameEnum.YEAR)}
         className={
           cn('cursor-pointer  hover:text-white mb-0 mx-2 text-axone-khaki',
-            { 'text-axone-orange font-bold': range === TimeFrameEnum.YEAR })}
+            { 'text-axone-orange': range === TimeFrameEnum.YEAR })}
       >
         {t('Chart.Filter.Year')}
       </Text>

app/[locale]/dashboard/_components/governance-block.tsx

@@ -29,7 +29,7 @@ export default function GovernanceBlock () {
       <Button
         onClick={navigateToGovernance}
         variant={'rounded'}
-        className='mt-5 mr-2 text-base font-bold w-full lg:w-64'
+        className='mt-5 mr-2 text-base w-full lg:w-64'
       >
         {t('OpenGovernance')}
       </Button>

app/[locale]/dashboard/_components/staking-rewards.tsx

@@ -43,12 +43,12 @@ export default function StakingRewardsBlock () {
       <div className='flex flex-col lg:flex-row lg:w-full'>
         <Button
           variant={'rounded'}
-          className='mt-5 mr-2 text-base font-bold'
+          className='mt-5 mr-2 text-base'
           onClick={navigateToStaking}
         >
           {t('DelegateNow')}
         </Button>
-        <ButtonWithIcon onClick={openRewardsCalculatorModal} variant={'link'} className='mt-5 text-axone-orange text-base font-bold z-8'>
+        <ButtonWithIcon onClick={openRewardsCalculatorModal} variant={'link'} className='mt-5 text-axone-orange text-base z-8'>
           {t('CalculateRewards')}
         </ButtonWithIcon>
       </div>

app/[locale]/dashboard/_components/supply-rate-block.tsx

@@ -1,16 +1,25 @@
 'use client';
-import { useTranslations } from 'next-intl';
-import { memo } from 'react';
+import { formatDistanceToNow } from 'date-fns';
+import { useLocale, useTranslations } from 'next-intl';
+import { memo, useMemo } from 'react';
 import { Text } from '@/components/typography';
 import { Box, BoxInner } from '@/components/ui/boxes';
 import SupplyRateChart from '@/components/ui/charts/supply-rate-chart';
 import Row from '@/components/ui/row';
 import { TimeFrameSelect } from '@/components/ui/selects';
 import Spinner from '@/components/ui/spinner';
+import { useSupplyChange } from '@/hooks/use-supply-change';
 import { useSupplyRateChart } from '@/hooks/use-supply-rate-chart';
+import { getLocaleForTime } from '@/lib/utils';
 
 const SupplyRateBlock = () => {
   const { data, isError, isLoadingError, isLoading, isFetching } = useSupplyRateChart();
+  const { query: { data: supplyChange } } = useSupplyChange();
+  const lang = useLocale();
+  const locale = getLocaleForTime(lang);
+
+  const updatedDate = useMemo(() => new Date(supplyChange?.time ? supplyChange?.time : Date.now()), [supplyChange?.time]);
+  const timeAgo = useMemo(() => formatDistanceToNow(updatedDate, { addSuffix: true, locale: locale }), [locale, updatedDate]);
   const t = useTranslations('Dashboard');
 
   return (
@@ -29,7 +38,7 @@ const SupplyRateBlock = () => {
       </BoxInner>
 
       <Row className='justify-between w-full mt-6'>
-        <Text className='text-axone-grey tracking-tighter uppercase mb-0'>{t('Updated')} 34 seconds ago</Text>
+        <Text className='text-axone-grey tracking-tighter uppercase mb-0'>{t('Updated') + ' ' + timeAgo}</Text>
         <div className='flex'>
           <div className='w-4 h-4 rounded-full bg-axone-orange'></div>
           <Text className='text-axone-grey tracking-tighter uppercase mb-0 ml-2'>AXONE</Text>

app/[locale]/dashboard/_components/three-bars-block.tsx

@@ -12,18 +12,6 @@ import { useSupplyBarCharts } from '@/hooks/use-supply-bar-charts';
 import { useTokenInfo } from '@/hooks/use-token-info';
 import { cn, formatNumber } from '@/lib/utils';
 
-const issuanceMock: MockDataType = {
-  min: 600,
-  current: 920,
-  max: 1000,
-};
-
-const burnMock: MockDataType = {
-  min: 800,
-  current: 1030,
-  max: 1200,
-};
-
 const returnGrowthChartData = (current: string | number): MockDataType => {
   return ({
     min: 0,
@@ -48,11 +36,23 @@ const ThreeBarsBlock = (): JSX.Element => {
     setSelectedCurrency(currency);
   };
 
-  const issuanceInAxone = formatNumber(Number(data?.issuance.issuance)/1000000 || 0);
-  const burntInAxone = formatNumber(Number(data?.issuance.burnt)/1000000 || 0);
-  const issuanceInUSD = formatNumber(Number(data?.issuance.issuance) * Number(tokenInfo?.price.value) || 0);
-  const burntInUSD = formatNumber(Number(data?.issuance.burnt) * Number(tokenInfo?.price.value) || 0);
+  const issuanceInAxone = formatNumber(Number(data?.issuance) || 0);
+  const burntInAxone = formatNumber(Number(data?.burnt) || 0);
+  const issuanceInUSD = formatNumber(Number(data?.issuance) * Number(tokenInfo?.price.value) || 0);
+  const burntInUSD = formatNumber(Number(data?.burnt) * Number(tokenInfo?.price.value) || 0);
+  const burntData = {
+    min: Number(data?.burnt) * 0.7 || 0,
+    current: Number(data?.burnt) || 0,
+    max: Number(data?.burnt) * 1.1 || 0,
+  };
+
+  const issuanceData = {
+    min: Number(data?.issuance) * 0.7 || 0,
+    current: Number(data?.issuance) || 0,
+    max: Number(data?.issuance) * 1.1 || 0,
+  };
 
+  console.log(issuanceData, data?.issuance, issuanceInAxone);
   return(
     <Box className='w-full m-0 h-[50%] mobile:w-full'>
       <Row>
@@ -68,31 +68,31 @@ const ThreeBarsBlock = (): JSX.Element => {
       {/* Charts are here */}
       <div className='flex flex-col lg:flex-row justify-center items-center lg:justify-around lg:items-start'>
 
-        <div className='my-6 lg:my-0 flex flex-col items-center'>
+        <div className='lg:w-[180px] my-6 lg:my-0 flex flex-col items-center'>
           <Text className='text-axone-grey tracking-tighter uppercase mb-6'>
             {t('Issuance')}
           </Text>
-          <OneBarChart data={issuanceMock} />
+          <OneBarChart data={issuanceData} />
           <span className='text-white text-40 tracking-tighter uppercase mt-6'>
             {selectedCurrency === CurrencyEnum.AXONE ? issuanceInAxone : issuanceInUSD}
           </span>
           <Text className='text-axone-grey tracking-tighter uppercase mt-4'>{selectedCurrency}/{t('Year')}</Text>
           <Image className='mt-3' src={'/icons/water-drop.svg'} alt='Refresh' width={20} height={20} />
         </div>
 
-        <div className='my-6 lg:my-0 flex flex-col items-center'>
+        <div className='lg:w-[180px] my-6 lg:my-0 flex flex-col items-center'>
           <Text className='text-axone-grey tracking-tighter uppercase mb-6'>
             {t('SupplyBurn')}
           </Text>
-          <OneBarChart data={burnMock} />
+          <OneBarChart data={burntData} />
           <span className='text-white text-40 tracking-tighter uppercase mt-6'>
             {selectedCurrency === CurrencyEnum.AXONE ? burntInAxone : burntInUSD}
           </span>
           <Text className='text-axone-grey tracking-tighter uppercase mt-4'>{selectedCurrency}/{t('Year')}</Text>
           <Image className='mt-3' src={'/icons/fire.svg'} alt='Refresh' width={20} height={20} />
         </div>
 
-        <div className='my-6 lg:my-0 flex flex-col items-center'>
+        <div className='lg:w-[180px] my-6 lg:my-0 flex flex-col items-center'>
           <Text className='text-axone-grey tracking-tighter uppercase mb-6'>
             {t('SupplyGrowth')}
           </Text>

app/[locale]/faq/data.ts

@@ -133,7 +133,7 @@ export const FAQ_EN: FAQDataType[] = [
   {
     id: 14,
     question: 'What is the unbonding process, and how long does it take?',
-    answer: 'A7: The unbonding process involves the transition period after you initiate the unstaking of your Axone tokens. During this period, your tokens are locked and not eligible for rewards or transactions. The unbonding period can vary in length, so please check the Axone Hub for specific details on the duration.',
+    answer: 'The unbonding process involves the transition period after you initiate the unstaking of your Axone tokens. During this period, your tokens are locked and not eligible for rewards or transactions. The unbonding period can vary in length, so please check the Axone Hub for specific details on the duration.',
     category: EN_CATEGORIES_ENUM.STAKING,
     categoryBgColor: COLORS_ENUM.ORANGE,
     categoryTextColor: COLORS_ENUM.DARK_BLUE

app/[locale]/staking/validator/[address]/_components/validator-datails-block.tsx

@@ -57,7 +57,7 @@ const ValidatorDetailsBlock = () => {
       </Row>
       <div className='flex flex-col lg:flex-row lg:justify-between lg:items-center lg:mt-6 lg:mb-10'>
         <div className='flex flex-row items-center gap-4 w-full lg:w-1/4 my-4 lg:my-0'>
-          <div className='relative border rounded-full w-[60px] h-[60px] p-2'>
+          <div className='relative border rounded-full w-[60px] h-[60px] p-2' style={{ width: 60 }}>
             <div className='relative w-full h-full p-[5px]'>
               <Image src={validatorData?.logo || '/icons/wallets/ninji.svg'} className='rounded-full' fill={true} alt='AXONE' />
             </div>

components/ui/button.tsx

@@ -5,13 +5,13 @@ import { forwardRef } from 'react';
 import { cn } from '@/lib/utils';
 
 const buttonVariants = cva(
-  'inline-flex items-center justify-center whitespace-nowrap rounded-md text-16 font-medium ring-offset-white transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-zinc-950 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 dark:ring-offset-zinc-950 dark:focus-visible:ring-zinc-300',
+  'inline-flex items-center justify-center whitespace-nowrap rounded-md text-16 ring-offset-white transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-zinc-950 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 dark:ring-offset-zinc-950 dark:focus-visible:ring-zinc-300',
   {
     variants: {
       variant: {
-        default: 'tracking-tight bg-axone-dark-blue border border-axone-orange text-[700] text-axone-orange hover:bg-axone-orange hover:text-axone-dark-blue',
-        rounded: 'tracking-tight rounded-lg bg-axone-dark-blue border border-axone-orange text-bold text-axone-orange hover:bg-axone-orange hover:text-axone-dark-blue',
-        noBorder: 'tracking-tight bg-axone-dark-blue text-[700] text-axone-orange hover:bg-axone-orange hover:text-axone-dark-blue',
+        default: 'tracking-tight bg-axone-dark-blue border border-axone-orange text-axone-orange hover:bg-axone-orange hover:text-axone-dark-blue',
+        rounded: 'tracking-tight rounded-lg bg-axone-dark-blue border border-axone-orange text-axone-orange hover:bg-axone-orange hover:text-axone-dark-blue',
+        noBorder: 'tracking-tight bg-axone-dark-blue text-axone-orange hover:bg-axone-orange hover:text-axone-dark-blue',
         link: 'tracking-tight hover:text-underlined hover:underline',
       },
       size: {

components/ui/charts/one-bar-chart.tsx

@@ -2,6 +2,7 @@
 import { FC } from 'react';
 import { Text } from '@/components/typography';
 import { BoxInner } from '@/components/ui/boxes';
+import { formatNumber } from '@/lib/utils';
 
 type MockDataType = {
   min: number;
@@ -17,12 +18,13 @@ type OneBarChartProps = {
 };
 
 type ChartLineProps = {
-  value?: number;
+  value?: string | number;
   position?: 'top' | 'middle' | 'bottom';
   postFix?: string;
+  customRight?: string;
 };
 
-const ChartLine: FC<ChartLineProps> = ({ value = 0, position = 'top', postFix = '' }) => {
+const ChartLine: FC<ChartLineProps> = ({ value = '0', position = 'top', postFix = '', customRight = '' }) => {
   const getClassByPosition = () => {
     if (position === 'top') {
       return '-top-[5px]';
@@ -33,7 +35,10 @@ const ChartLine: FC<ChartLineProps> = ({ value = 0, position = 'top', postFix =
     return 'top-[80px]';
   };
   return (
-    <div className={`flex absolute ${getClassByPosition()} -right-[60px] items-center justify-between`}>
+    <div
+      className={`flex absolute ${getClassByPosition()} items-center justify-between`}
+      style={{ right: `${customRight ? customRight : value.toString().length <= 4 ? '-60%' : '-90%'}` }}
+    >
       <Text className='mb-0 text-axone-khaki'>{value}{postFix}</Text>
       <div className='w-[140px] border-t border-dashed border-axone-khaki my-4 mx-2'></div>
       <Text className='mb-0 text-axone-khaki'>{value}{postFix}</Text>
@@ -44,12 +49,25 @@ const ChartLine: FC<ChartLineProps> = ({ value = 0, position = 'top', postFix =
 const OneBarChart: FC<OneBarChartProps> = ({ width = 100, height = 200, data }) => {
   const percentage: number = ((data.current - data.min) / (data.max - data.min)) * 100;
   const barHeight: number = (height * percentage) / 100;
+  console.log('asd', percentage, height, data.min + data.max, (data.min + data.max)/2, formatNumber((data.min + data.max)/2), data.current);
 
   return (
     <BoxInner style={{ width, height }} className={'relative rounded-lg flex-col justify-end'}>
-      <ChartLine position='top' value={data.max} postFix={data.postFix || ''} />
-      <ChartLine position='middle' value={(data.min + data.max)/2} postFix={data.postFix || ''} />
-      <ChartLine position='bottom' value={data.min} postFix={data.postFix || ''} />
+      <ChartLine
+        position='top'
+        value={data.postFix ? data.max : formatNumber(data.max)} postFix={data.postFix || ''}
+        customRight={data.postFix ? '-60%' : ''}
+      />
+      <ChartLine
+        position='middle'
+        value={data.postFix ? (data.min + data.max)/2 : formatNumber((data.min + data.max)/2)} postFix={data.postFix || ''}
+        customRight={data.postFix ? '-50%' : ''}
+      />
+      <ChartLine
+        position='bottom'
+        value={data.postFix ? data.min : formatNumber(data.min)} postFix={data.postFix || ''}
+        customRight={data.postFix ? '-45%' : ''}
+      />
       <div style={{ height: barHeight }} className={'bg-gradient-to-b from-axone-blue to-transparent w-auto m-2 rounded-lg'}></div>
     </BoxInner>
   );

components/ui/dialog.tsx

@@ -87,7 +87,7 @@ const DialogTitle = React.forwardRef<
   <DialogPrimitive.Title
     ref={ref}
     className={cn(
-      'text-lg line-height-7 font-bold mb-5 leading-none tracking-tight',
+      'text-lg line-height-7 mb-5 leading-none tracking-tight',
       className
     )}
     {...props}

components/ui/header/connect-wallet.tsx

@@ -99,7 +99,7 @@ const ConnectWallet: FC<ConnectWalletProps> = ({ openMobileMenu = () => null })
   if (isWalletDisconnected || isWalletRejected) {
     return (
       <>
-        <Button onClick={openConnectWalletModal} variant='rounded' className='hidden lg:flex px-10 font-bold'>
+        <Button onClick={openConnectWalletModal} variant='rounded' className='hidden lg:flex px-10'>
           {t('Connect')}
         </Button>
         <div className='lg:hidden flex'>

components/ui/header/mobile-menu/mobile-menu.tsx

@@ -150,7 +150,7 @@ const MobileMenuModal: FC<MobileMenuModalProps> = ({ isOpen,close }) => {
 
         <div className='px-5'>
           <Button
-            className='w-full font-bold'
+            className='w-full'
             variant={'rounded'}
             onClick={openInNewTab(EXPLORE_URL)}
           >

components/ui/sidebar-welcome-box.tsx

@@ -22,7 +22,7 @@ const SidebarWelcomeAxoneBox: FC<SidebarWelcomeAxoneBoxProps> = ({ handleClick }
       <Title className='mb-0 z-10 cursor-pointer'>{t('Ecosystem')}!</Title>
       <ButtonWithIcon
         variant={'link'}
-        className='uppercase font-bold px-0 pb-0 justify-start z-10 text-axone-dark-blue-2'
+        className='uppercase px-0 pb-0 justify-start z-10 text-axone-dark-blue-2'
         iconClassName='text-axone-dark-blue-2 w-5 h-5'
         onClick={handleClick}
       >

components/ui/sidebar.tsx

@@ -38,7 +38,7 @@ const Sidebar = () => {
 
         <div className='px-5'>
           <Button
-            className='w-full font-bold'
+            className='w-full'
             variant={'rounded'}
             onClick={openInNewTab(EXPLORE_URL)}
           >

hooks/dto/supply-charts.dto.ts

@@ -1,10 +1,5 @@
 type SupplyChartsDTO = {
-  issuance: {
-    time: string;
-    change: number;
-    burnt: number;
-    issuance: number;
-  };
+  issuance: number;
   burnt: number;
   growth: number;
 }

hooks/use-supply-bar-charts.tsx

@@ -4,10 +4,18 @@ import { useEnvironment } from '@/context/environment-context';
 import { SupplyChartsDTO } from './dto/supply-charts.dto';
 import { TimeFrameEnum, useTimeFrameStore } from './timeframe/use-timeframe-store';
 
+const KNOW_EXP = 1000000;
+
 const getSupplyBarChartsDataFn = async (range: TimeFrameEnum = TimeFrameEnum.DAY, baseUrl: string | undefined) => {
   const { data } = await axios.get<SupplyChartsDTO>(baseUrl + '/supply/charts', { params: { range } });
 
-  return data;
+  const formattedData = {
+    issuance: data.issuance/KNOW_EXP,
+    burnt: data.burnt/KNOW_EXP,
+    growth: data.growth,
+  };
+
+  return formattedData;
 };
 
 export const useSupplyBarChartsQueryKey = ['supply-bar-charts'];

hooks/use-supply-rate-chart.tsx

@@ -12,7 +12,7 @@ const getSupplyRateChartDataFn = async (range: TimeFrameEnum = TimeFrameEnum.DAY
     percentChange: item.percentChange === '0' ? '0.00' : item.percentChange,
   }));
 
-  return formatted.reverse();
+  return formatted;
 };
 
 export const useSupplyRateChartQueryKey = ['supply-rate-chart'];