<script>import { onMount } from "svelte";
import { formatAddress } from "@requestnetwork/shared-utils/index";
export let web3Modal;
export let isConnected = false;
let address = "";
onMount(() => {
  if (web3Modal) {
    address = web3Modal.getAddress() || "";
    isConnected = web3Modal.getIsConnected();
  }
});
function disconnectWallet() {
  if (web3Modal) {
    web3Modal.disconnect();
    isConnected = false;
    address = "";
  }
}
</script>

<div class="wallet-info">
  {#if isConnected}
    <span class="address">{formatAddress(address, 6, 8)}</span>
    <button class="disconnect-btn" on:click={disconnectWallet}
      >Disconnect</button
    >
  {/if}
</div>

<style>.wallet-info {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  margin-bottom: 15px;
  font-size: 14px;
}
.wallet-info .address {
  background-color: #f5f5f5;
  padding: 4px 8px;
  border-radius: 4px;
  color: #666;
}
.wallet-info .disconnect-btn {
  background: none;
  border: none;
  color: #0bb489;
  cursor: pointer;
  font-weight: 500;
  padding: 4px 8px;
  transition: color 0.3s ease;
}
.wallet-info .disconnect-btn:hover {
  color: #088464;
}</style>
