kodadot · yangwao · Aug 2, 2023 · Jul 19, 2023 · Jul 21, 2023 · Jul 21, 2023
@@ -17,7 +17,7 @@ Before you being:
 - We utilize [**Node.js**](https://nodejs.org) as a development tool. To avoid potential compatibility issues, check if you're on the version of **Node.js we support.**
 - Make sure that you use [**pnpm**](https://pnpm.io/installation) as the package manager.
 - Please have a read the [code of conduct](CODE_OF_CONDUCT.md)
-- [Learn how to set up your environment for the first time](FIRST_TIME.md)
+- [Learn how to set up your environment for the first time](/content/blog/first-time.md)
 - Get familiar with our [coding conventions & recommendations](STYLE_GUIDE.md)
 - Read up on our [tech stack](https://medium.com/kodadot/the-tech-stack-at-kodadot-8a83880f8624) to get a better picture of the infrastructure we rely on
 - Familiarise yourself with our [contributor culture](https://medium.com/kodadot/contributor-culture-at-kodadot-665243d3d6a6) to better understand the dynamics by which we operate

@@ -8,7 +8,7 @@
 
 ![image](https://user-images.githubusercontent.com/5887929/217076362-464e1293-8a2d-43ee-829f-fba17408e4c3.png)
 
-#### Is this your first time contributing? Set up your local environment [here](FIRST_TIME.md)
+#### Is this your first time contributing? Set up your local environment [here](./content/blog/first-time.md)
 
 Before submitting your pull request, read up on our [documentation](https://developers.kodadot.xyz) and make sure it follows:
 

@@ -38,9 +38,9 @@
                 ref="mobilSearchRef"
                 hide-filter
                 class="is-flex-grow-1 mt-3" />
-              <b-button class="cancel-btn" @click="hideMobileSearchBar">
+              <button class="cancel-btn p-3" @click="hideMobileSearchBar">
                 {{ $t('cancel') }}
-              </b-button>
+              </button>
             </div>
           </div>
         </div>

@@ -227,6 +227,11 @@ const menuKodadot: Menu[] = [
     url: 'https://github.com/kodadot/kodadot-presskit/tree/main/v3',
     external: true,
   },
+  {
+    name: $i18n.t('blog'),
+    url: '/blog',
+    external: false,
+  },
 ]
 
 const socials = [

@@ -66,16 +66,33 @@ useNuxt2Meta({
     margin-bottom: 0;
   }
 
+  h1,
+  h2,
+  h3,
+  h4,
+  p {
+    margin: 1rem 0;
+  }
+
   h1 {
     font-size: 3rem;
+    line-height: 3.5rem;
     font-weight: 700;
-    margin: 1rem 0;
   }
 
   h2 {
     font-size: 1.5rem;
     font-weight: bold;
-    margin-bottom: 1rem;
+  }
+
+  h3 {
+    font-size: 1.2rem;
+    font-weight: bold;
+  }
+
+  h4 {
+    font-size: 1rem;
+    font-weight: bold;
   }
 
   img {
@@ -86,7 +103,6 @@ useNuxt2Meta({
   p {
     font-size: 20px;
     line-height: 30px;
-    margin-bottom: 1rem;
   }
 
   @include ktheme() {
@@ -112,6 +128,13 @@ useNuxt2Meta({
     p {
       font-size: 1rem;
     }
+
+    h3 {
+      font-size: 0.9rem;
+    }
+    h4 {
+      font-size: 0.8rem;
+    }
   }
 }
 </style>
@@ -1,7 +1,8 @@
 <template>
   <div
     v-if="isUnlockableLandingTagVisible"
-    class="unlockable-landing-tag is-flex border is-justify-content-space-between px-4 mt-6 mx-4">
+    class="unlockable-landing-tag is-flex border is-justify-content-space-between is-align-items-center px-4 mt-6"
+    :class="{ 'small-size': smallWidth }">
     <div class="is-flex is-align-items-center">
       <svg
         width="42"
@@ -35,25 +36,32 @@
         </defs>
       </svg>
 
-      <span> {{ $t('mint.unlockable.mintLive') }} </span>
-      <NeoIcon
-        icon="horizontal-rule"
-        pack="fa-sharp"
-        size="small"
-        class="separator mx-2" />
+      <span> {{ mintLiveText }} </span>
     </div>
-
+    <div class="separator mx-2" />
     <nuxt-link
-      class="is-flex is-align-items-center has-text-weight-bold"
+      class="is-flex is-align-items-center has-text-weight-bold my-2"
       to="/stmn/drops/free-drop">
       {{ $t('mint.unlockable.takeMe') }}
     </nuxt-link>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { NeoIcon } from '@kodadot1/brick'
 const isUnlockableLandingTagVisible = true
+const { $i18n } = useNuxtApp()
+
+const { width } = useWindowSize()
+
+const smallWidth = computed(() => width.value < 502)
+
+const mintLiveText = computed(() =>
+  $i18n.t(
+    smallWidth.value
+      ? 'mint.unlockable.mintLiveSmall'
+      : 'mint.unlockable.mintLive'
+  )
+)
 </script>
 
 <style lang="scss" scoped>
@@ -62,12 +70,19 @@ const isUnlockableLandingTagVisible = true
   border-radius: 2rem;
   @include ktheme() {
     background-color: theme('background-color');
+    .separator {
+      background: theme('separator-line-color');
+      width: 15px;
+      height: 1px;
+    }
   }
-  .separator {
-    color: $placeholder-color;
-    width: 15px;
-    height: 2px;
-    overflow: hidden;
+
+  &.small-size {
+    flex-direction: column;
+    border-radius: 1rem;
+    .separator {
+      width: 100%;
+    }
   }
 }
 </style>
@@ -1,12 +1,6 @@
 <template>
   <div class="wallet-modal-container is-flex is-flex-direction-column">
     <header class="modal-card-head">
-      <b-button
-        v-show="hasSelectedWalletProvider"
-        type="is-text"
-        class="mr-2 is-no-border"
-        icon-left="chevron-left"
-        @click="hasSelectedWalletProvider = !hasSelectedWalletProvider" />
       <span class="modal-card-title is-size-6 has-text-weight-bold">
         {{
           showAccount
@@ -94,7 +88,6 @@ import WalletAsset from '@/components/common/ConnectWallet/WalletAsset.vue'
 
 const { $i18n } = useNuxtApp()
 const selectedWalletProvider = ref<BaseDotsamaWallet>()
-const hasSelectedWalletProvider = ref(false)
 const forceWalletSelect = ref(false)
 const identityStore = useIdentityStore()
 const { urlPrefix } = usePrefix()

@@ -1,28 +1,28 @@
 <template>
   <div class="wallet-menu-item">
-    <b-button
-      size="is-medium"
-      expanded
-      class="my-0 is-flex is-justify-content-space-between is-align-items-center"
+    <button
+      class="button my-0 is-flex is-justify-content-space-between is-align-items-center"
       @click="onClickWallet(wallet)">
-      <div
-        class="is-flex is-justify-content-space-between is-align-items-center">
-        <span>
-          <img
-            :src="wallet.img"
-            :alt="wallet.extensionName"
-            width="32"
-            style="vertical-align: middle" />
-          <span class="is-size-6 ml-2 is-capitalized">{{ wallet.name }}</span>
-        </span>
+      <span>
+        <div
+          class="is-flex is-justify-content-space-between is-align-items-center">
+          <span>
+            <img
+              :src="wallet.img"
+              :alt="wallet.extensionName"
+              width="32"
+              style="vertical-align: middle" />
+            <span class="is-size-6 ml-2 is-capitalized">{{ wallet.name }}</span>
+          </span>
 
-        <NeoIcon v-if="!wallet.installed" icon="download" />
+          <NeoIcon v-if="!wallet.installed" icon="download" />
 
-        <NeoIcon v-else-if="showAccountList" icon="chevron-down" />
+          <NeoIcon v-else-if="showAccountList" icon="chevron-down" />
 
-        <NeoIcon v-else icon="chevron-right" />
-      </div>
-    </b-button>
+          <NeoIcon v-else icon="chevron-right" />
+        </div>
+      </span>
+    </button>
     <div
       v-if="isAuth && walletAccounts.length === 0"
       class="pl-5 pt-2 pb-2 is-flex is-align-items-center auth-tip">

@@ -6,53 +6,71 @@
       ref="root"
       title="Price"
       :price="nftPrice">
-      <GalleryItemActionSlides
-        v-if="Number(nftPrice)"
-        ref="actionRef"
-        :active="active"
-        :class="{ 'gallery-item-slides-entry': !active }"
-        :disabled="disabled">
-        <template #entry>
-          <NeoTooltip
-            v-if="!active"
-            :active="disabled"
-            :label="$t('tooltip.notEnoughBalance')"
-            append-to-body
-            multiline>
-            <NeoButton
-              :label="label"
-              size="large"
-              class="full-width-action-button"
-              variant="k-accent"
-              :disabled="disabled"
-              no-shadow
-              data-cy="item-buy"
-              @click.native="onClick" />
-          </NeoTooltip>
-        </template>
+      <div v-if="disabled" class="gallery-item-disabled">
+        <NeoTooltip
+          :active="disabled"
+          content-class="buy-tooltip"
+          :position="isMobileDevice ? 'top' : 'left'"
+          :auto-close="!isMobileDevice ? ['outside', 'escape'] : []"
+          multiline>
+          <template #content>
+            <div class="is-size-6">
+              {{
+                $t('tooltip.notEnoughBalanceChain', {
+                  chain: chainNames[urlPrefix],
+                })
+              }}
+              <div>
+                {{ $t('tip') }}:
+                <nuxt-link :to="`/${urlPrefix}/teleport`" target="_blank">
+                  {{ $t('useTeleport') }}</nuxt-link
+                >
 
-        <template #action>
+                {{ $t('or') }}
+
+                <a @click="showRampSDK"> {{ $t('addFunds') }}</a>
+              </div>
+            </div>
+          </template>
           <NeoButton
             :label="label"
             size="large"
-            fixed-width
             variant="k-accent"
             :disabled="disabled"
             no-shadow
             data-cy="item-buy"
             @click.native="onClick" />
-        </template>
-
-        <template #content>
-          <div class="has-text-centered">
-            {{ $t('nft.buyNFTOn') }}
-            <span class="has-text-weight-bold is-uppercase">{{
-              urlPrefix
-            }}</span>
-          </div>
-        </template>
-      </GalleryItemActionSlides>
-      <div v-else>{{ $t('nft.notListed') }}</div>
+        </NeoTooltip>
+      </div>
+      <div v-else>
+        <GalleryItemActionSlides
+          v-if="Number(nftPrice)"
+          ref="actionRef"
+          :active="active"
+          :class="{ 'gallery-item-slides-entry': !active }"
+          :disabled="disabled">
+          <template #action>
+            <NeoButton
+              :label="label"
+              size="large"
+              fixed-width
+              variant="k-accent"
+              no-shadow
+              data-cy="item-buy"
+              @click.native="onClick" />
+          </template>
+
+          <template #content>
+            <div class="has-text-centered">
+              {{ $t('nft.buyNFTOn') }}
+              <span class="has-text-weight-bold is-uppercase">{{
+                urlPrefix
+              }}</span>
+            </div>
+          </template>
+        </GalleryItemActionSlides>
+        <div v-else>{{ $t('nft.notListed') }}</div>
+      </div>
     </GalleryItemPriceSection>
   </div>
 </template>
@@ -74,8 +92,10 @@ import { ShoppingActions } from '@/utils/shoppingActions'
 import { ConnectWalletModalConfig } from '@/components/common/ConnectWallet/useConnectWallet'
 import { useIdentityStore } from '@/stores/identity'
 import { usePreferencesStore } from '@/stores/preferences'
+import { RampInstantSDK } from '@ramp-network/ramp-instant-sdk'
 
 import Vue from 'vue'
+import { chainNames } from '@/libs/static/src/chains'
 
 const props = withDefaults(
   defineProps<{
@@ -95,6 +115,7 @@ const props = withDefaults(
     recipient: '',
   }
 )
+const isMobileDevice = ref(window.innerWidth < 1024)
 
 const { urlPrefix, client } = usePrefix()
 const { accountId } = useAuth()
@@ -117,6 +138,17 @@ const label = computed(() =>
       )
 )
 
+const showRampSDK = () => {
+  new RampInstantSDK({
+    defaultAsset: 'KSM',
+    userAddress: accountId.value,
+    hostAppName: 'KodaDot',
+    hostApiKey: 'a99bfvomhhbvzy6thaycxbawz7d3pssuz2a8hsrc', // env
+    hostLogoUrl: 'https://kodadot.xyz/apple-touch-icon.png',
+    variant: 'desktop',
+  }).show()
+}
+
 const balance = computed<string>(() => {
   switch (urlPrefix.value) {
     case 'rmrk':