johba/harb
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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

Browse source
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
Download patch file Download diff file Expand all files Collapse all files

2
landing/src/views/HomeViewMixed.vue
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';

2
landing/src/views/HomeViewOffensive.vue
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';

71
web-app/src/views/GetKrkView.vue
View file

@ -2,7 +2,7 @@
<div class="get-krk-view">
<div class="get-krk-container">
<h1 class="get-krk-title">Get $KRK Tokens</h1>
<div class="balance-card">
<div class="balance-label">Your KRK Balance</div>
<div class="balance-amount">{{ formattedBalance }} $KRK</div>
@ -12,13 +12,8 @@
<div class="swap-explanation">
<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,11 +90,13 @@ const networkName = computed(() => {
}
});
const isLocalChain = computed(() => currentChainId.value === 31337);
// Build Uniswap URL with proper chain and token
const uniswapUrl = computed(() => {
const chainId = currentChainId.value;
const tokenAddress = chainData.value?.harb || '0xff196f1e3a895404d073b8611252cf97388773a7';
// Map chainId to Uniswap chain identifier
let chainName = 'base_sepolia';
if (chainId === 8453) {
@ -96,7 +104,7 @@ const uniswapUrl = computed(() => {
} else if (chainId === 84532) {
chainName = 'base_sepolia';
}
return `https://app.uniswap.org/swap?chain=${chainName}&outputCurrency=${tokenAddress}`;
});
</script>
@ -108,7 +116,7 @@ const uniswapUrl = computed(() => {
display: flex
justify-content: center
align-items: center
@media (min-width: 768px)
padding: 48px
@ -125,7 +133,7 @@ const uniswapUrl = computed(() => {
text-align: center
margin: 0
color: #ffffff
@media (min-width: 768px)
font-size: 40px
@ -147,7 +155,7 @@ const uniswapUrl = computed(() => {
font-size: 36px
font-weight: 700
color: #60a5fa
@media (min-width: 768px)
font-size: 48px
@ -162,7 +170,7 @@ const uniswapUrl = computed(() => {
.swap-explanation
text-align: center
p
margin: 0
font-size: 16px
@ -183,7 +191,7 @@ const uniswapUrl = computed(() => {
text-decoration: none
transition: all 0.3s ease
box-shadow: 0 4px 12px rgba(96, 165, 250, 0.3)
&:hover
transform: translateY(-2px)
box-shadow: 0 6px 16px rgba(96, 165, 250, 0.4)
@ -216,24 +224,49 @@ 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
border-radius: 16px
padding: 32px
h3
margin: 0 0 16px 0
font-size: 20px
color: #ffffff
ol
margin: 0
padding-left: 24px
display: flex
flex-direction: column
gap: 12px
li
color: #d4d4d4
line-height: 1.6