Merge pull request #672 from bobanetwork/fix/update-key-accessibility…

…-improvement updated key and accessibility
bobanetwork · Oct 29, 2024 · da5d3a7 · da5d3a7
2 parents 2553ec7 + dc39e7b
commit da5d3a7
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 6 deletions.
diff --git a/src/containers/Ecosystem/index.tsx b/src/containers/Ecosystem/index.tsx
@@ -25,7 +25,7 @@ const EcosystemCard = ({ name, description, icon, link }) => {
       <PlaceholderImage>
         <img src={iconImage} alt={name} width="100%" />
       </PlaceholderImage>
-      <Title href={link} target="_blank">
+      <Title href={link} target="_blank" rel="noopener noreferrer">
         {name} <ExternalIcon src={externalSvg} />
       </Title>
       <Tooltip title={description}>
@@ -56,11 +56,11 @@ const Ecosystem = () => {
         >
           All
         </OutlineButton>
-        {types.filter(Boolean).map((type, index) => (
+        {types.filter(Boolean).map((type) => (
           <OutlineButton
             className={`${type.toLowerCase() !== selectedType ? '' : 'active'}`}
             onClick={() => setType(type.toLowerCase())}
-            key={index}
+            key={type}
           >
             {type}
           </OutlineButton>
@@ -75,7 +75,9 @@ const Ecosystem = () => {
           )
           .map(
             (item: any, index) =>
-              item.visible && <EcosystemCard key={index} {...item} />
+              item.visible && (
+                <EcosystemCard key={item.name || index} {...item} />
+              )
           )}
       </CardList>
     </PageContainer>

diff --git a/src/containers/Trade/index.tsx b/src/containers/Trade/index.tsx
@@ -24,7 +24,7 @@ const TradeCard = ({ name, description, icon, link }) => {
       <PlaceholderImage>
         <img src={iconImage} alt={name} width="100%" />
       </PlaceholderImage>
-      <Title href={link} target="_blank">
+      <Title href={link} target="_blank" rel="noopener noreferrer">
         {name} <ExternalIcon src={externalSvg} />
       </Title>
       <Tooltip title={description}>
@@ -49,7 +49,13 @@ const Trade = () => {
       <CardList>
         {items.map(
           (item: any, index) =>
-            item.visible && <TradeCard key={index} {...item} />
+            item.visible && (
+              <TradeCard
+                key={`${item.name}-${item.pairName}` || index}
+                {...item}
+                description={item.pairName}
+              />
+            )
         )}
       </CardList>
     </PageContainer>