Contract: TokenAdminRegistry
diff --git a/src/components/CCIP/TutorialBlockchainSelector/TutorialBlockchainSelector.module.css b/src/components/CCIP/TutorialBlockchainSelector/TutorialBlockchainSelector.module.css
index c02b64a8445..8b7df65bf76 100644
--- a/src/components/CCIP/TutorialBlockchainSelector/TutorialBlockchainSelector.module.css
+++ b/src/components/CCIP/TutorialBlockchainSelector/TutorialBlockchainSelector.module.css
@@ -192,7 +192,6 @@
.arrowContainer {
--touch-target-size: 44px;
--animation-timing: cubic-bezier(0.34, 1.56, 0.64, 1);
- --arrow-rotation: 0deg;
display: flex;
align-items: center;
@@ -202,37 +201,64 @@
margin-inline: auto;
padding-block: 0;
padding-inline: 1rem;
- cursor: default;
position: relative;
- outline: none;
- writing-mode: horizontal-tb;
- text-orientation: mixed;
-
- /* Performance optimizations */
- contain: layout style;
- view-transition-name: arrow;
- transform: translateZ(0);
- backface-visibility: hidden;
- -webkit-font-smoothing: antialiased;
- transition: transform 0.2s var(--animation-timing);
-}
-
-/* RTL and vertical writing mode support */
-[dir="rtl"] .arrowContainer,
-[writing-mode="vertical-rl"] .arrowContainer {
- transform: rotate(var(--arrow-rotation));
+ /* Make it purely decorative */
+ pointer-events: none;
+ user-select: none;
}
.arrow {
color: var(--color-text-secondary);
- transition: all 0.3s var(--animation-timing);
- will-change: transform, opacity;
+ opacity: 0.7;
+ transition: opacity 0.3s var(--animation-timing);
}
.arrowGroup {
transform-origin: center;
- transition: transform 0.6s var(--animation-timing);
+}
+
+/* Subtle animation */
+@media (prefers-reduced-motion: no-preference) {
+ .arrowPath {
+ opacity: 0.7;
+ animation: subtlePulse 3s var(--animation-timing) infinite;
+ }
+
+ .arrowLine {
+ opacity: 0.5;
+ animation: subtlePulse 3s var(--animation-timing) infinite;
+ }
+
+ .arrowPath:first-child {
+ animation-delay: 0s;
+ }
+
+ .arrowPath:last-child {
+ animation-delay: 1.5s;
+ }
+
+ @keyframes subtlePulse {
+ 0%,
+ 100% {
+ opacity: 0.7;
+ transform: translateX(0);
+ }
+ 50% {
+ opacity: 0.9;
+ transform: translateX(1px);
+ }
+ }
+}
+
+/* RTL Support */
+[dir="rtl"] .arrowContainer {
+ transform: scaleX(-1);
+}
+
+/* Vertical writing modes */
+[writing-mode="vertical-rl"] .arrowContainer {
+ transform: rotate(90deg);
}
/* Interactive States */
diff --git a/src/components/CCIP/TutorialBlockchainSelector/TutorialBlockchainSelector.tsx b/src/components/CCIP/TutorialBlockchainSelector/TutorialBlockchainSelector.tsx
index 059154dcacf..36b3832f38c 100644
--- a/src/components/CCIP/TutorialBlockchainSelector/TutorialBlockchainSelector.tsx
+++ b/src/components/CCIP/TutorialBlockchainSelector/TutorialBlockchainSelector.tsx
@@ -145,18 +145,9 @@ export const TutorialBlockchainSelector = () => {
{
- if (e.key === "Enter" || e.key === " ") {
- e.preventDefault()
- // Toggle focus state for visual feedback
- e.currentTarget.classList.toggle(styles.focused)
- }
- }}
+ role="presentation"
+ aria-hidden="true"
+ style={{ pointerEvents: "none" }}
>
{
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
- aria-hidden="true"
>
diff --git a/src/components/QuickLinks/sections/ProductChainTable.tsx b/src/components/QuickLinks/sections/ProductChainTable.tsx
index 06a3b3fd329..5d9bbd3ddbb 100644
--- a/src/components/QuickLinks/sections/ProductChainTable.tsx
+++ b/src/components/QuickLinks/sections/ProductChainTable.tsx
@@ -31,8 +31,8 @@ const handleLinkClick = (productTitle: string, network: string, url: string) =>
window.dataLayer.push({
event: "quick_link_clicked",
product: productTitle,
- network: network,
- url: url,
+ network,
+ url,
})
}