<template>
  <div v-if="isHeaderShow">
    <div class="header header-top">
      <div class="header-left">
        <div class="header-logo" @click="handlHome">
          <img src="../../assets/img/home/game_logo01.png" alt="" />
        </div>
        <div class="nav">
          <a
            v-for="(nav, i) in navList"
            :class="i === activeIndex ? 'active-nav-item' : 'nav-item'"
            :key="i"
            @click="handNavCurent(nav)"
          >
            {{ nav.name }}
            <div class="dropdown">
              <ul>
                <li v-for="(item, index) in nav.submenu" :key="index">
                  <div
                    class="link-content"
                  >
                  <!-- @click="openThirdPartyLink(item.link)" -->
                    <a
                      class="link-name"
                      :href="item.link"
                      target="_blank"
                      rel="noopener noreferrer"
                      >{{ item.label }}</a
                    >
                  </div>
                </li>
              </ul>
            </div>
          </a>
        </div>
      </div>

      <div class="header-right" v-if="loginShowMenu">
        <div class="immutable-cart" v-if="isCart" @click="myCart">
          <div class="immutable-cart-img">
            <img src="@/assets/img/marketplace/Add_shopping_cart02.png" alt="">
          </div>
          <div v-if="localWalletStore.address" class="immutable-cart-amount">
            <span v-if="marketplaceStore.getCartList">{{ marketplaceStore.getCartList.data?.length || 0 }}</span>
            <span v-else>0</span>
          </div>
        </div>
        <div class="metaMask-login" v-if="!localWalletStore.address" @click="immuTableLogin">Login</div>
        <div class="metaMask-login-active" v-else @click="showMenu = !showMenu">
          <div class="metamask">
            <div class="title">{{ localWalletStore.showAddress }}</div>
            <svg @click="handleCopy" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
              <path stroke-linecap="round" stroke-linejoin="round" d="M11.35 3.836c-.065.21-.1.433-.1.664 0 .414.336.75.75.75h4.5a.75.75 0 0 0 .75-.75 2.25 2.25 0 0 0-.1-.664m-5.8 0A2.251 2.251 0 0 1 13.5 2.25H15c1.012 0 1.867.668 2.15 1.586m-5.8 0c-.376.023-.75.05-1.124.08C9.095 4.01 8.25 4.973 8.25 6.108V8.25m8.9-4.414c.376.023.75.05 1.124.08 1.131.094 1.976 1.057 1.976 2.192V16.5A2.25 2.25 0 0 1 18 18.75h-2.25m-7.5-10.5H4.875c-.621 0-1.125.504-1.125 1.125v11.25c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V18.75m-7.5-10.5h6.375c.621 0 1.125.504 1.125 1.125v9.375m-8.25-3 1.5 1.5 3-3.75" />
            </svg>
          </div>
          <div class="menu" v-show="showMenu">
            <div class="menu-item-icon" >
              <div class="circle-btn" @click="showWalletWidget">
                <svg viewBox="0 0 20 20" focusable="false" class="chakra-icon css-1vwkdri" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path fill="currentColor" d="M16.25 5.831a3.544 3.544 0 013.537 3.328l.007.216v6.25a3.544 3.544 0 01-3.328 3.537l-.216.007H3.75A3.544 3.544 0 01.213 15.84l-.007-.216V4.6c.002-.074 0-.15 0-.225A3.544 3.544 0 013.534.838L3.75.83h12.5a1.044 1.044 0 01.13 2.08l-.13.008H3.75a1.456 1.456 0 00-.159 2.904l.159.008h12.5z"></path></svg>
              </div>
              <div class="circle-btn" @click="showSwapWidget">
                <svg viewBox="0 0 18 20" focusable="false" class="chakra-icon css-1vwkdri" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 1L1 5l4 4M1 5h16m-4 14l4-4-4-4m4 4H1"></path></svg>
              </div>
              <div class="circle-btn" @click="showBridgeWidget">
                <svg viewBox="0 0 20 18" focusable="false" class="chakra-icon css-1vwkdri" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 13l4 4 4-4m-4 4V1m14 4l-4-4-4 4m4-4v16"></path></svg>
              </div>
              <div class="circle-btn" @click="showOnrampWidget">
                <svg viewBox="0 0 12 12" focusable="false" class="chakra-icon css-1vwkdri" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path fill="currentColor" fill-rule="evenodd" d="M5.907.365c.48 0 .87.39.87.87l-.001 3.99 3.992.001a.87.87 0 010 1.74H6.776v3.991a.87.87 0 01-1.74 0V6.965h-3.99a.87.87 0 010-1.739h3.99V1.235c0-.48.39-.87.87-.87z" clip-rule="evenodd"></path></svg>
              </div>
              
            </div>
            <div class="menu-item" @click="immuTableLogout">Logout</div>
          </div>
        </div>
      </div>
      <div class="header-right" v-else>
        <div class="metaMask-login-active" v-if="address" @click="showMenu = !showMenu">
          <div class="metamask">
            <div class="title">{{ `${address.slice(0, 6)}...${address.slice(-4)}`}}</div>
            <svg @click="handleCopy" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
              <path stroke-linecap="round" stroke-linejoin="round" d="M11.35 3.836c-.065.21-.1.433-.1.664 0 .414.336.75.75.75h4.5a.75.75 0 0 0 .75-.75 2.25 2.25 0 0 0-.1-.664m-5.8 0A2.251 2.251 0 0 1 13.5 2.25H15c1.012 0 1.867.668 2.15 1.586m-5.8 0c-.376.023-.75.05-1.124.08C9.095 4.01 8.25 4.973 8.25 6.108V8.25m8.9-4.414c.376.023.75.05 1.124.08 1.131.094 1.976 1.057 1.976 2.192V16.5A2.25 2.25 0 0 1 18 18.75h-2.25m-7.5-10.5H4.875c-.621 0-1.125.504-1.125 1.125v11.25c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V18.75m-7.5-10.5h6.375c.621 0 1.125.504 1.125 1.125v9.375m-8.25-3 1.5 1.5 3-3.75" />
            </svg>
          </div>
          <div class="menu" v-show="showMenu">
            <div class="menu-item-icon" >
              <div class="circle-btn" @click="showWalletWidget">
                <svg viewBox="0 0 20 20" focusable="false" class="chakra-icon css-1vwkdri" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path fill="currentColor" d="M16.25 5.831a3.544 3.544 0 013.537 3.328l.007.216v6.25a3.544 3.544 0 01-3.328 3.537l-.216.007H3.75A3.544 3.544 0 01.213 15.84l-.007-.216V4.6c.002-.074 0-.15 0-.225A3.544 3.544 0 013.534.838L3.75.83h12.5a1.044 1.044 0 01.13 2.08l-.13.008H3.75a1.456 1.456 0 00-.159 2.904l.159.008h12.5z"></path></svg>
              </div>
              <div class="circle-btn" @click="showSwapWidget">
                <svg viewBox="0 0 18 20" focusable="false" class="chakra-icon css-1vwkdri" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 1L1 5l4 4M1 5h16m-4 14l4-4-4-4m4 4H1"></path></svg>
              </div>
              <div class="circle-btn" @click="showBridgeWidget">
                <svg viewBox="0 0 20 18" focusable="false" class="chakra-icon css-1vwkdri" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 13l4 4 4-4m-4 4V1m14 4l-4-4-4 4m4-4v16"></path></svg>
              </div>
              <div class="circle-btn" @click="showOnrampWidget">
                <svg viewBox="0 0 12 12" focusable="false" class="chakra-icon css-1vwkdri" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path fill="currentColor" fill-rule="evenodd" d="M5.907.365c.48 0 .87.39.87.87l-.001 3.99 3.992.001a.87.87 0 010 1.74H6.776v3.991a.87.87 0 01-1.74 0V6.965h-3.99a.87.87 0 010-1.739h3.99V1.235c0-.48.39-.87.87-.87z" clip-rule="evenodd"></path></svg>
              </div>
              
            </div>
            <div class="menu-item" @click="cecClaimLogout">Logout</div>
          </div>
        </div>
        <div class="metaMask-login" v-else @click="cecClaimLogin">Login</div>
      </div>
    </div>
    <div id="wallet" class="wallet-widget"></div>
    <Cart v-if="cartShow" @closeCart="closeCartBox" class="cart-con" />
  </div>
</template>

<script setup>
import { ref, toRaw, reactive, onMounted, computed, onUnmounted, watchEffect, getCurrentInstance, watch, inject } from "vue";
const message = inject('$message')
const { proxy } = getCurrentInstance();
import { useAppStore } from "@/store/app";
import { hasMetamask } from "@/utils/chain.util";
import { useRouter, useRoute } from "vue-router";
import { useCopyToClipboard } from "./../../hooks/useCopyToClipboard";
import { useMarketplaceStore } from "@/store/marketplace"

import Cart from "@/components/cart/index.vue"
import { BlockChain } from "@/components/chain/BlockChain"
import {walletStore} from "@/store/wallet";

const localWalletStore = walletStore()
const marketplaceStore = useMarketplaceStore()
const AppModule = useAppStore();
const router = useRouter();
const route = useRoute();
const app = useAppStore();
const showMenu = ref(false);
const loginShowMenu = ref(true);
const dropdownVisible = ref(false);
const isCart = ref(false)
const cartShow = ref(false)
const activeIndex = ref(0);
const navList = reactive([
  { id: 0, name: "ABOUT", path: "/about" },
  // { id: 1, name: "ASSETS", path: "https://pledge.kingsome.cn/" },
  // { id: 1, name: "planet", path: "https://planet.kingsome.cn/" },
  
  // {
  //   id: 3,
  //   name: "hashrate",
  //   path: "https://pledge.kingsome.cn",
  // },

  {
    id: 1,
    name: "COMMUNITY",
    path: "/stake",
    submenu: [
      { label: "Twitter", link: "https://x.com/playCounterFire" },
      {
        label: "Youtube",
        link: "https://youtube.com/c/CryptoElitesBattlegrounds",
      },
      {
        label: "Facebook",
        link: "https://www.facebook.com/profile.php?id=100090965821157&mibextid=LQQJ4d",
      },
      { label: "Medium", link: "https://medium.com/@CounterFire" },

      { label: "Discord", link: "https://discord.gg/counterfire" },
    ],
  },
  {
    id: 2,
    name: "MARKETPLACE",
    path: "/marketplace",
  },
  {
    id: 3,
    name: "ASSETS",
    path: "/assets",
    submenu: [
      { label: "Before 2024", link: "https://pledge.counterfire.games" },
      {
        label: "After 2024",
        path: "/assets",
      },
    ],
  },
  {
    id: 4,
    name: "NOTICE",
    path: "/notice",
  },
  {
    id: 5,
    name: "GACHA",
    path: "https://gacha.counterfire.games/view",
  },
  // {
  //   id: 5,
  //   name: "EVENT",
  //   path: "/contact",
  //   submenu: [
  //     { label: "Badge", link: "https://badge.counterfire.games/" },
  //     {
  //       label: "Gacha",
  //       link: "https://gacha.counterfire.games/",
  //     },
  //   ],
  // },
  {
    id: 6,
    name: "EVENT",
    path: "/cecActivity",
  },
  {
    id: 7,
    name: "CLAIM",
    path: "/claim",
  },
]);
function click(event) {
  router.push(event.key);
}

//const { copied, copyToClipboard } = useCopyToClipboard(AppModule.accountId);
const { copied, error, reset, copyToClipboard } = useCopyToClipboard();

// const message = copied.value
//   ? "Text copied!"
//   : "Click the button to copy text.";



const handlHome = () => {
  router.push("/home");
};

function handNavCurent(nav) {
  // console.log(nav)
  // return
  activeIndex.value = nav.id;
  // if (nav.id == 1) {
  //   window.open(nav.path, "_blank");
  // } else 
  if(nav.id == 0) {
    router.push(nav.path);
  } else if(nav.id == 2) {
    router.push(nav.path);
  } else if(nav.id == 3) {
    if(nav.submenu[1]?.path) {
      router.push(nav.submenu[1]?.path)
    }
  } else if(nav.id == 4) {
    router.push(nav.path);
  // } else if(nav.id == 6) {
  //   window.open(nav.path, "_blank");
  } else if(nav.id == 5) {
    window.open(nav.path, "_blank")
  } else if(nav.id == 6) {
    window.open(`${location.origin}${nav.path}`, "_blank")
  } else if(nav.id == 7) {
    // window.open(`${location.origin}${nav.path}`, "_blank")
    router.push(nav.path);
  }
  // if (nav.id == 1 || nav.id == 2 || nav.id == 3) {
  //   window.open(nav.path, "_blank");
  // } else if (nav.id == 5 || nav.id == 6) {
  //   dropdownVisible.value = true;
  // } else {
  //   router.push(nav.path);
  // }
}
function openThirdPartyLink(url) {
  window.open(url, "_blank");
}
const handleCopy = (e) => {
  e.stopPropagation();
  const accountId = localWalletStore.address || marketplaceStore.fireAddress
  reset();
  copyToClipboard(accountId).then(() => {
    if (copied.value) {
      message.success("address copied");
    }
  });
};
watchEffect(() => {
  const index = navList.findIndex(
    (navItem) => route.path.slice(0, 5) === navItem.path.slice(0, 5)
  );
  activeIndex.value = index !== -1 ? index : "";
});

const showWalletWidget = () => {
  new BlockChain().widgets.showWallet();
};
const showSwapWidget = () => {
  new BlockChain().widgets.showSwap();
};
const showOnrampWidget = () => {
  new BlockChain().widgets.showOnramp();
};
const showBridgeWidget = () => {
  new BlockChain().widgets.showBridge();
};
onUnmounted(() => {
  new BlockChain().widgets.removeAll();
});

//  --------------------------------
const immuTableLogin = async () => {
  let res = await new BlockChain().connect()
  console.log(res)
  // try{
  //     const walletLogin = await new PassportWallet().connect()
  //     immutableStore.accessToken = walletLogin.accessToken
  //     immutableStore.accounts = walletLogin.accounts[0]
  //     localStorage.setItem('assessToken', walletLogin.accessToken)
  //     localStorage.setItem('assessAddress', walletLogin.accounts[0])
  //     // console.log(walletLogin)
  //     /*
  //       accessToken
  //       accounts
  //       profile:

  //     */
  //     // loginShowMenu.value = !loginShowMenu.value;
  //     // const list = await new PassportWallet().beginSellERC721({
  //     //   contractAddress: '',
  //     //   tokenId: ''
  //     // });
  //     // console.log(list)
  // } catch (e) {
  //   console.log(e);
  // }
}

const address = ref()
const cecClaimLogin = async () => {
  await new BlockChain().cecLogin()
  address.value = localWalletStore.address || marketplaceStore.fireAddress
}

//TODO::
const immuTableLogout = async () => {
  try {
    await new BlockChain().logout()
    // localStorage.removeItem('assessToken')
    // localStorage.removeItem('assessAddress')
    // immutableStore.accessToken = ''
    // immutableStore.accounts = ''
    // await new PassportWallet().logout()
    location.reload()
  } catch (e) {
    console.log(e)
  }
}

const cecClaimLogout = async () => {
  try {
    // if(marketplaceStore.fireAddress) {
      marketplaceStore.fireAddress = ''
      marketplaceStore.fireToken = ''
      location.reload()
    // } else {
      await new BlockChain().logout()
    // }
  } catch (e) {
    console.log(e)
  }
}


// 购物车
const myCart = async () => {
  if(localWalletStore.address) {
    cartShow.value = true
  } else {
    immuTableLogin()
  }
}

const closeCartBox = () => {
  cartShow.value = false
}

const isHeaderShow = ref(true)
watch(() => [route.path, localWalletStore.address, marketplaceStore.fireAddress],([preTest1,preTest2,preTest3], [oldTest1, oldTest2, oldTest3]) => {
  let routerPath = preTest1.split('/')
  // if(routerPath[1] == 'marketplace' || routerPath[1] == 'detail') {
    if(routerPath[1] == 'marketplace') {
    isCart.value = true
  }else if(routerPath[1] == 'cecActivity') {
    isHeaderShow.value = false
  }else if(routerPath[1] == 'claim' || routerPath[1] == '') {
    loginShowMenu.value = false
  } else {
    loginShowMenu.value = true
    isHeaderShow.value = true
    isCart.value = false
  }
  address.value = preTest2 || preTest3
})

onMounted( async () => {
  address.value = localWalletStore.address || marketplaceStore.fireAddress
  // if( immutableStore.accessToken) {
  //   await new PassportWallet().connect()
  // }
})

</script>

<style lang="scss" scoped>
.header {
  position: fixed;
  z-index: 19;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.6);
  // opacity: .6;
  width: 100%;
  height: 84px;
  display: flex;
  align-items: center;
  padding-right: 11px;
  justify-content: space-between;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -2px rgba(0, 0, 0, 0.1);
  .header-left {
    display: flex;
    align-items: center;
  }
  .header-logo {
    margin-left: 64px;
    width: 194px;
    cursor: pointer;
    height: 62px;
    img {
      width: 100%;
    }
  }

  .nav {
    padding-left: 83px;
    display: flex;
    justify-content: space-between;
    // width: 830px;
    a {
      padding-top: 27px;
      padding-bottom: 27px;
    }

    .nav-item {
      font-size: 32px;
      position: relative;
      padding-left: 21px;
      padding-right: 21px;
      transition-property: color;
      transition-duration: 0.15s;
      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
      font-family: "Anton";
      line-height: 30px;
      color: #bb7fff !important;
      cursor: pointer;
      &:hover {
        transition-property: color;
        transition-duration: 0.15s;
        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
        font-family: "Anton";
        background-color: #bb7fff;
        border-radius: 42px;
        color: #000000 !important;
          .dropdown {
          display: block;
        }
      }
    }
    .active-nav-item {
      font-size: 32px;
      font-family: "Anton";
      position: relative;
      padding-left: 21px;
      padding-right: 21px;
      line-height: 30px;
      background-color: #bb7fff;
      border-radius: 42px;
      transition-property: color;
      transition-duration: 0.3s;
      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
      color: #000000 !important;
      &:hover {
        .dropdown {
          display: block;
        }
      }
    }
    .dropdown {
      position: absolute;
      top: 84px;
      left: 50%;
      width: 100%;
      background: rgba(0, 0, 0, 0.84);
      border-radius: 0px 0px 12px 12px;
      z-index: 1;
      transform: translate(-50%, 0%);
      display: none;
      transition: all 0.3s ease-out;
      ul {
        list-style: none;
        margin: 0;
        padding: 0;
        li {
          padding-left: 20px;
          padding-right: 20px;
          cursor: pointer;
          .link-content {
            display: flex;
            text-align: center;
            align-items: center;
            justify-content: space-between;
            a {
              font-size: 16px;
              font-family: Arial;
              font-weight: 400;
              color: #ffffff;
              padding-top: 10px;
              padding-bottom: 10px;
              text-align: center; /* ensure text is centered */
              width: 100%; /* make it span the full width */
              cursor: pointer;
            }
          }
        }
      }
    }
  }
}

.header-right {
  // width: 228px;
  // position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  // right: 11px;
  margin-right: 50px;

  .metaMask-logo {
    width: 60px;
    height: 60px;
    margin-left: 10px;
    margin-right: 30px;
    // padding-right:10px;
  }
  .metaMask-login {
    width: 205px;
    height: 68px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #BB7FFF;
    cursor: pointer;
    background: #2d2738;
    font-size: 24px;
    font-family: "Poppins";
    font-weight: 400;
    border: 2px solid #A767FF;
    position: relative;
    border-radius: 34px;
    .menu {
      position: absolute;
      top: 75px;
      right: 0px;
      width: 218px;
      z-index: 1;
      text-align: center;
      padding: 5px 0;
      background-color: #252636;
      border-radius: 30px;
      box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
      list-style: none;
      border: 2px solid #A767FF;
      transition: all 0.3s ease-out;
    }
    li {
      margin: 5px 0;
    }

    .menu-item {
      padding-left: 8px;
      padding-top: 10px;
      padding-bottom: 10px;
      color: #f5f5f5;
      display: flex;
      font-size: 18px;
      font-weight: 400;
      .login-icon {
        width: 28px;
        margin-right: 3px;
        height: 28px;
      }
      .title {
        margin-right: 10px;
      }
    }
    a:hover {
      background-color: #f5f5f5;
    }
  }
  .metaMask-login-active {
    width: 218px;
    height: 68px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    cursor: pointer;
    background: #2d2738;
    font-size: 20px;
    font-family: "Poppins";
    font-weight: 400;
    color: #BB7FFF;
    border: 2px solid #A767FF;
    border-radius: 34px;
    .menu {
      position: absolute;
      top: 75px;
      right: 0px;
      width: 218px;
      z-index: 1;
      text-align: center;
      padding: 10px 0;
      background-color: #252636;
      border-radius: 30px;
      box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
      border: 2px solid #A767FF;
      list-style: none;

      transition: all 0.3s ease-out;
    }
    li {
      margin: 5px 0;
     
    }
    .menu-item-icon {
      height: 60px;
      border-bottom: #bb7fff 1px solid;
      margin: 5px 20px;
      display: flex;
      justify-content: space-between;
      .circle-btn{
        width: 40px;
        height: 40px;
        border-radius: 50%;
        border: 2px solid #bb7fff;
        display: flex;
        justify-content: center;
        align-items: center;
        svg {
          width: 20px;
          height: 20px;
        }
      }
    }
    .menu-item {
      padding: 5px 15px;
      color: #f5f5f5;
      display: flex;
      font-size: 18px;
      font-weight: 400;
      // padding-top: 10px;
      justify-content: center;
      height: 40px;
      margin: 10px auto;
      .title {
        margin-right: 10px;
      }
    }
    a:hover {
      background-color: #f5f5f5;
    }
    .metamask{
      display: flex;
      svg {
        width: 24px;
        height: 24px;
        margin-left: 6px;
      }
    }
  }
  .immutable-cart {
    color: #fff;
    position: relative;
    margin-right: 10px;
    cursor: pointer;
    .immutable-cart-img {
      width: 53px;
      height: 49px;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .immutable-cart-amount {
      position: absolute;
      top: 0;
      right: 0;
      width: 25px;
      height: 25px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: red;
      border-radius: 50%;
      font-size: 18px;
    }
  }
  .immutable-login {
    width: 120px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    background: #bb7fff;
    border-radius: 26px;
  }
}

.link-name {
  position: relative;
  .link-img {
    position: absolute;
    top: 24px;
    right: -18px;
  }
}
.cart-con {
  position: fixed;
  right: 0;
  top: 84px;
  background: #1e1b23;
  z-index: 999;
}
.wallet-widget {
  position: fixed;
  top: 84px;
  right: 0;
  z-index: 10000;
}
</style>
