fix tooltip opacity and add skip steps (#75)

Signed-off-by: JaeBrian <[email protected]>

Author: JaeBrian

src/components/ToolTipGuide.css

@@ -0,0 +1,3 @@
+.force-opacity-1 {
+  opacity: 1 !important;
+}

src/components/TooltipGuide.tsx

@@ -1,5 +1,6 @@
 import { useState, useEffect, type ReactNode } from 'react'
 import { Tooltip } from 'react-tooltip'
+import './ToolTipGuide.css'
 
 export interface TooltipStep {
   id: string
@@ -43,13 +44,24 @@ const TooltipGuide = ({
     }
   }
 
+  const handleSkip = () => {
+    setShowTooltips(false)
+    onComplete?.()
+  }
+
   const renderTooltipContent = (content: string) => {
     return (
       <div className="flex flex-col gap-3">
         <div className="text-base leading-relaxed">
           {content}
         </div>
-        <div className="flex justify-end">
+        <div className="flex justify-between items-center">
+          <button
+            onClick={handleSkip}
+            className="bg-transparent hover:bg-white/10 text-white/70 hover:text-white px-3 py-1.5 rounded-md text-sm transition-all duration-200 font-medium cursor-pointer border border-white/20"
+          >
+            Skip
+          </button>
           <button
             onClick={handleNextStep}
             className="bg-white/20 hover:bg-white/30 text-white px-3 py-1.5 rounded-md text-sm transition-all duration-200 font-medium cursor-pointer"
@@ -64,27 +76,32 @@ const TooltipGuide = ({
   return (
     <>
       {children(showTooltips)}      
-      {showTooltips && steps.map((step, index) => (
-        <Tooltip
-          key={step.id}
-          id={step.id}
-          place={step.placement || 'top'}
-          isOpen={showTooltips && currentStep === index}
-          clickable={true}
-          style={{
-            backgroundColor: '#9400FF',
-            color: 'white',
-            borderRadius: '12px',
-            padding: '16px',
-            fontSize: '20px',
-            maxWidth: '350px',
-            zIndex: showTooltips && currentStep === index ? 10000 : 9999, 
-            boxShadow: '0 10px 25px -5px rgba(0, 0, 0, 0.25), 0 8px 10px -6px rgba(0, 0, 0, 0.1)'
-          }}
-        >
-          {renderTooltipContent(step.content)}
-        </Tooltip>
-      ))}
+      {showTooltips && steps.map((step, index) => {
+        const isCurrentStep = currentStep === index
+        return (
+          <Tooltip
+            key={step.id}
+            id={step.id}
+            place={step.placement || 'top'}
+            isOpen={isCurrentStep}
+            clickable={true}
+            className="force-opacity-1"
+            style={{
+              backgroundColor: '#9400FF',
+              color: 'white',
+              borderRadius: '12px',
+              padding: '16px',
+              fontSize: '20px',
+              maxWidth: '350px',
+              zIndex: isCurrentStep ? 10000 : -1, 
+              boxShadow: '0 10px 25px -5px rgba(0, 0, 0, 0.25), 0 8px 10px -6px rgba(0, 0, 0, 0.1)',
+              opacity: 1,
+            }}
+          >
+            {renderTooltipContent(step.content)}
+          </Tooltip>
+        )
+      })}
     </>
   )
 }

src/stores/walletStore.ts

@@ -71,7 +71,36 @@ export const useWalletStore = create<WalletState>()(
 
           const walletApi = await window.cardano[walletName].enable()
 
-          const stakeAddresses = await walletApi.getRewardAddresses()
+          await new Promise(resolve => setTimeout(resolve, 100))
+          
+          let stakeAddresses: string[] = []
+          let retries = 3
+          
+          while (retries > 0) {
+            try {
+              stakeAddresses = await walletApi.getRewardAddresses()
+              break
+            } catch (error: unknown) {
+              retries--
+              
+              if (error instanceof Error && (error.message.includes('account changed') || error.message.includes('Account changed'))) {
+                console.warn(`Account changed error for ${walletName}, retrying... (${retries} attempts left)`)
+                
+                if (retries > 0) {
+                  await new Promise(resolve => setTimeout(resolve, 500))
+                  continue
+                } else {
+                  const newWalletApi = await window.cardano[walletName].enable()
+                  await new Promise(resolve => setTimeout(resolve, 200))
+                  stakeAddresses = await newWalletApi.getRewardAddresses()
+                  break
+                }
+              } else {
+                throw error
+              }
+            }
+          }
+          
           const stakeAddress = stakeAddresses?.[0] || null
 
           set({