diff --git a/landing/src/views/HomeViewMixed.vue b/landing/src/views/HomeViewMixed.vue index c37a057..a4f5d19 100644 --- a/landing/src/views/HomeViewMixed.vue +++ b/landing/src/views/HomeViewMixed.vue @@ -14,6 +14,7 @@
+
@@ -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'; diff --git a/landing/src/views/HomeViewOffensive.vue b/landing/src/views/HomeViewOffensive.vue index 6303259..2ba4fa7 100644 --- a/landing/src/views/HomeViewOffensive.vue +++ b/landing/src/views/HomeViewOffensive.vue @@ -14,6 +14,7 @@
+
@@ -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'; diff --git a/web-app/src/views/GetKrkView.vue b/web-app/src/views/GetKrkView.vue index 03fe4da..c73029f 100644 --- a/web-app/src/views/GetKrkView.vue +++ b/web-app/src/views/GetKrkView.vue @@ -2,7 +2,7 @@

Get $KRK Tokens

- +
Your KRK Balance
{{ formattedBalance }} $KRK
@@ -12,13 +12,8 @@

Swap ETH for $KRK on Uniswap, then stake your position to earn rewards.

- - + + 🔄 Swap on Uniswap → @@ -36,10 +31,21 @@
+ +
+

🔧 Local Development

+

You're on a local chain. Use the Cheat Console to swap ETH for KRK directly.

+ + Open Cheat Console + → + +
+

Next Steps

    -
  1. Click the button above to open Uniswap
  2. +
  3. Use the Cheat Console to swap ETH for $KRK
  4. +
  5. Click the button above to open Uniswap
  6. Swap ETH for $KRK tokens
  7. Return here and navigate to the Stake page
  8. Stake your $KRK to start earning
  9. @@ -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}`; }); @@ -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