Moved CMC attribution to navbar

Author: Thomas Alvarenga

webapp/app/[locale]/_components/navbar/_components/cmcAttribution.tsx

@@ -0,0 +1,19 @@
+import { ExternalLink } from 'components/externalLink'
+import { useTranslations } from 'next-intl'
+
+const cssLink = 'text-orange-500 hover:text-orange-700'
+
+export const CmcAttribution = function () {
+  const t = useTranslations('navbar')
+  return (
+    <p className="font-base mx-auto pt-4 text-center text-xs text-neutral-400 md:w-full md:text-left">
+      {t.rich('data-attribution', {
+        link: (chunk: string) => (
+          <ExternalLink className={cssLink} href="https://coinmarketcap.com/">
+            {chunk}
+          </ExternalLink>
+        ),
+      })}
+    </p>
+  )
+}

webapp/app/[locale]/_components/navbar/index.tsx

@@ -23,6 +23,7 @@ import { HemiLogoFull } from './_components/hemiLogo'
 import { ItemLink, ItemWithSubmenu, NetworkSwitch } from './_components/navItem'
 import { SocialLinks } from './_components/socialLinks'
 import { TermsAndConditions } from './_components/termsAndConditions'
+import { CmcAttribution } from './_components/cmcAttribution'
 
 const ActionableOperations = dynamic(
   () =>
@@ -157,10 +158,13 @@ export const Navbar = function () {
         <li className="order-16 md:order-14">
           <SocialLinks />
         </li>
-        <li className="order-16 md:hidden">
+        <li className="order-16 md:order-15">
+          <CmcAttribution />
+        </li>
+        <li className="order-17 md:order-16">
           <Separator />
         </li>
-        <li className="order-17 md:order-15">
+        <li className="order-18 md:order-17">
           <TermsAndConditions />
         </li>
       </ul>

webapp/app/[locale]/stake/_components/cmcAttribution.tsx

@@ -3,8 +3,6 @@
 import { PageTitle } from 'components/pageTitle'
 import { useTranslations } from 'next-intl'
 
-import { CmcAttribution } from '../_components/cmcAttribution'
-
 import { StakeAssetsTable } from './_components/stakeAssetsTable'
 import {
   EarnedPoints,
@@ -29,9 +27,6 @@ const Page = function () {
       <div className="mt-6 md:mt-8">
         <StakeAssetsTable />
       </div>
-      <div className="mt-6">
-        <CmcAttribution />
-      </div>
     </div>
   )
 }

webapp/app/[locale]/stake/dashboard/page.tsx

@@ -2,7 +2,6 @@
 
 import { useStakeTokens } from 'hooks/useStakeTokens'
 
-import { CmcAttribution } from './_components/cmcAttribution'
 import { StakeGraph } from './_components/icons/stakeGraph'
 import { StakeAndEarn } from './_components/stakeAndEarn'
 import { StakeStrategyTable } from './_components/stakeStrategyTable'
@@ -39,9 +38,6 @@ export default function Page() {
       <PageBackground />
       <div className="relative z-20 -translate-y-60 md:-translate-y-48">
         <StakeStrategyTable data={stakeTokens} loading={false} />
-        <div className="mt-6">
-          <CmcAttribution />
-        </div>
       </div>
     </div>
   )

webapp/app/[locale]/stake/page.tsx

@@ -13,7 +13,6 @@
     "connect-your-wallet": "Connect your Wallet",
     "copied": "Copied",
     "copy": "Copy",
-    "data-attribution": "Data provided by",
     "erc20-approve-10x-deposits": "Approve 10x the amount of this deposit",
     "erc20-approve-10x-detailed-description": "By activating 10x approval we automatically add 10x the amount of this transaction as allowance for future ones, saving you money on gas fees and time.",
     "erc20-extra-approval": "Approve 10x deposits",
@@ -183,6 +182,7 @@
   "navbar": {
     "agree-to-terms-and-policy": "By using this application, you agree to the <terms>Terms of Use</terms> and <policy>Privacy Policy</policy>",
     "bitcoinkit": "Hemi Bitcoin Kit",
+    "data-attribution": "Data provided by <link>CoinMarketCap.com</link>",
     "demos": "Demos",
     "explorer": "Explorer",
     "get-started": "Get Started",

webapp/messages/en.json

@@ -13,7 +13,6 @@
     "connect-your-wallet": "Conecte su Billetera",
     "copied": "Copiado",
     "copy": "Copiar",
-    "data-attribution": "Datos proporcionados por",
     "erc20-approve-10x-deposits": "Aprobar 10x el monto de este depósito",
     "erc20-approve-10x-detailed-description": "Al activar la aprobación 10x, automáticamente agregamos 10 veces el monto de esta transacción como monto autorizado para otras futuras, lo que le permite ahorrar dinero en tarifas de gas y tiempo.",
     "erc20-extra-approval": "Aprobar 10x este depósito",
@@ -183,6 +182,7 @@
   "navbar": {
     "agree-to-terms-and-policy": "Al usar esta aplicación, usted acepta los <terms>Términos de Uso</terms> y la <policy>Política de Privacidad</policy>",
     "bitcoinkit": "Kit de Hemi Bitcoin",
+    "data-attribution": "Datos proporcionados por <link>CoinMarketCap.com</link>",
     "demos": "Demos",
     "explorer": "Explorador",
     "get-started": "Comenzar",