fix: Get KRK local swap, WalletCard on all variants (#146, #150) (#165)

This commit is contained in:
johba 2026-02-20 09:18:51 +01:00
parent b3b7ab72f9
commit d9b5131101
3 changed files with 56 additions and 19 deletions

View file

@ -14,6 +14,7 @@
</div>
<div class="blur-effect"></div>
</div>
<WalletCard />
<LiveStats />
<div class="k-container">
<section class="how-it-works-section">
@ -88,6 +89,7 @@
import KButton from '@/components/KButton.vue';
import LeftRightComponent from '@/components/LeftRightComponent.vue';
import LiveStats from '@/components/LiveStats.vue';
import WalletCard from '@/components/WalletCard.vue';
import { useMobile } from '@/composables/useMobile';
import { useRouter } from 'vue-router';

View file

@ -14,6 +14,7 @@
</div>
<div class="blur-effect"></div>
</div>
<WalletCard />
<LiveStats />
<div class="k-container">
<section class="how-it-works-section">
@ -88,6 +89,7 @@
import KButton from '@/components/KButton.vue';
import LeftRightComponent from '@/components/LeftRightComponent.vue';
import LiveStats from '@/components/LiveStats.vue';
import WalletCard from '@/components/WalletCard.vue';
import { useMobile } from '@/composables/useMobile';
import { useRouter } from 'vue-router';

View file

@ -13,12 +13,7 @@
<p>Swap ETH for $KRK on Uniswap, then stake your position to earn rewards.</p>
</div>
<a
:href="uniswapUrl"
target="_blank"
rel="noopener noreferrer"
class="swap-button"
>
<a :href="uniswapUrl" target="_blank" rel="noopener noreferrer" class="swap-button">
<span class="swap-button-icon">🔄</span>
<span>Swap on Uniswap</span>
<span class="swap-button-arrow"></span>
@ -36,10 +31,21 @@
</div>
</div>
<!-- Local/testnet: link to cheats page for swapping -->
<div v-if="isLocalChain" class="local-swap-card">
<h3>🔧 Local Development</h3>
<p>You're on a local chain. Use the Cheat Console to swap ETH for KRK directly.</p>
<router-link to="/cheats" class="swap-button local">
<span>Open Cheat Console</span>
<span class="swap-button-arrow"></span>
</router-link>
</div>
<div class="next-steps">
<h3>Next Steps</h3>
<ol>
<li>Click the button above to open Uniswap</li>
<li v-if="isLocalChain">Use the Cheat Console to swap ETH for $KRK</li>
<li v-else>Click the button above to open Uniswap</li>
<li>Swap ETH for $KRK tokens</li>
<li>Return here and navigate to the Stake page</li>
<li>Stake your $KRK to start earning</li>
@ -84,6 +90,8 @@ const networkName = computed(() => {
}
});
const isLocalChain = computed(() => currentChainId.value === 31337);
// Build Uniswap URL with proper chain and token
const uniswapUrl = computed(() => {
const chainId = currentChainId.value;
@ -216,6 +224,31 @@ const uniswapUrl = computed(() => {
color: #ffffff
font-weight: 500
.local-swap-card
background: linear-gradient(135deg, rgba(117, 80, 174, 0.15) 0%, rgba(117, 80, 174, 0.05) 100%)
border: 1px solid rgba(117, 80, 174, 0.3)
border-radius: 16px
padding: 32px
text-align: center
display: flex
flex-direction: column
gap: 16px
h3
margin: 0
color: #ffffff
p
margin: 0
color: #9A9898
.swap-button.local
background: linear-gradient(135deg, #7550AE 0%, #5a3d8a 100%)
box-shadow: 0 4px 12px rgba(117, 80, 174, 0.3)
&:hover
background: linear-gradient(135deg, #5a3d8a 0%, #4a2d7a 100%)
.next-steps
background: #1a1a1a
border: 1px solid #3a3a3a