fix: add link from react router dom and improve typo

JoinColony · Jan 17, 2025 · 29c1854 · 29c1854
1 parent 4e25ccf
commit 29c1854
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 8 deletions.
diff --git a/src/components/frame/v5/pages/StreamingPaymentsPage/StreamingPaymentsPage.tsx b/src/components/frame/v5/pages/StreamingPaymentsPage/StreamingPaymentsPage.tsx
@@ -37,7 +37,7 @@ const StreamingPaymentsPage = () => {
   const isStreamingPaymentsInstalled =
     extensionData && isInstalledExtensionData(extensionData);
 
-  const inStreamingPaymentsDisabled =
+  const isStreamingPaymentsDisabled =
     !!extensionData && !isStreamingPaymentsInstalled;
 
   return (
@@ -52,7 +52,7 @@ const StreamingPaymentsPage = () => {
           suffix={currency}
         />
       </div>
-      {inStreamingPaymentsDisabled && (
+      {isStreamingPaymentsDisabled && (
         <div className="pb-9">
           <NoExtensionBanner />
         </div>

diff --git a/...nts/frame/v5/pages/StreamingPaymentsPage/partials/NoExtensionBanner/NoExtensionBanner.tsx b/...nts/frame/v5/pages/StreamingPaymentsPage/partials/NoExtensionBanner/NoExtensionBanner.tsx
@@ -2,8 +2,9 @@ import { Extension } from '@colony/colony-js';
 import { WarningCircle } from '@phosphor-icons/react';
 import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
+import { Link } from 'react-router-dom';
 
-import { COLONY_EXTENSIONS_ROUTE } from '~routes';
+import { useExtensionItem } from '~common/Extensions/ExtensionItem/hooks.ts';
 import NotificationBanner from '~v5/shared/NotificationBanner/NotificationBanner.tsx';
 
 const displayName = 'v5.pages.StreamingPaymentsPage.partials.NoExtensionBanner';
@@ -22,16 +23,14 @@ const MSG = defineMessages({
 const NoExtensionBanner = () => {
   const { formatMessage } = useIntl();
 
+  const { extensionUrl } = useExtensionItem(Extension.StreamingPayments);
+
   return (
     <div className="pb-9">
       <NotificationBanner
         status="warning"
         icon={WarningCircle}
-        callToAction={
-          <a href={`${COLONY_EXTENSIONS_ROUTE}/${Extension.StreamingPayments}`}>
-            {formatMessage(MSG.link)}
-          </a>
-        }
+        callToAction={<Link to={extensionUrl}>{formatMessage(MSG.link)}</Link>}
       >
         {formatMessage(MSG.bannerInfo)}
       </NotificationBanner>