WOW3 Portfolio Widget for Svelte

Introduction

Welcome to the WOW3 Portfolio Widget integration guide! This document provides a step-by-step guide on how to integrate the WOW3 Portfolio Widget into your Svelte application, enabling you to showcase WOW3 portfolio seamlessly.

Installation

npm install @wow3labs/svelte-portfolio-widget

pnpm install @wow3labs/svelte-portfolio-widget

Core Concept

We leverage Svelte's component composition model to deliver a customizable Widget component, which supports multiple child components for enhanced flexibility. All future updates and additional features will be seamlessly integrated into the Widget component, ensuring a cohesive and streamlined development experience.

<Widget address="0x8F78B2057410aFcC6e0cBa6DeAF3a7825537d087" let:C>
  <C.NetWorth />
  <C.Days />
  <C.NFTCount />
  <C.Chart />
  <C.Rns />
  <C.Address/>
  <C.Button />
</Widget>

Quick Start

📌 Note: The portfolio widget requires an API key for activation. Please reach out to our team here to obtain your API key.

Setup

Wrap your application with the WidgetProvider and include your API key in the configuration.

<!-- src/routes/+layout.svelte -->
<script>
  import { WidgetProvider } from "@wow3labs/svelte-portfolio-widget";

  const config = {
    apiKey: "YOUR_API_KEY_HERE",
    utmSource: "testing",
  };
</script>

<WidgetProvider {config}>
  <slot />
</WidgetProvider>

Styling

We have defined class names for you to customize according to the BEM methodology.

<script>
  import { Widget } from "@wow3labs/svelte-portfolio-widget";
</script>

<Widget address="0x8F78B2057410aFcC6e0cBa6DeAF3a7825537d087" let:C>
  <div class="flex items-center justify-between">
    <C.NetWorth />
    <div class="flex flex-col items-end gap-1">
      <C.Days>
        <div slot="loading" class="w-10 h-10 bg-green-300"></div>
      </C.Days>
      <C.NFTCount />
    </div>
  </div>
  <C.Chart isShowLegend={false} />
  <div class="flex items-center flex-col justify-between">
    <div class="flex flex-col items-center">
      <C.Rns />
      <C.Address isShort={false} />
    </div>
    <C.Button />
  </div>
</Widget>

<style lang="scss">
  :global(.wow3-portfolio-widget) {
    width: 350px;
  }
  :global(.wow3-portfolio-networth--value) {
    color: red;
  }
</style>

Usage

Basic Usage with WidgetFull

The WidgetFull component is a ready-to-use template for instant integration.

<!-- Use anywhere in your app -->

<script>
  import { WidgetFull } from "@wow3labs/svelte-portfolio-widget";
</script>

<div class="bg-slate-50 rounded-xl p-4 w-[350px]">
  <WidgetFull address="0x8f78b2057410afcc6e0cba6deaf3a7825537d087" />
</div>

Advance Usage

• We provide an option to refetch the data when it becomes obsolete using the refetch function

<script lang="ts">
  import { useQueryWidgetData, WidgetFull } from "@wow3labs/svelte-portfolio-widget";

  const { refetch } = useQueryWidgetData(
    "0x8F78B2057410aFcC6e0cBa6DeAF3a7825537d087"
  );
</script>

<button on:click={() => refetch?.()}>Refetch</button>

<WidgetFull address="0x8F78B2057410aFcC6e0cBa6DeAF3a7825537d087" />

Support

If you encounter any issues or have questions, please reach out to our support team here.

License

MIT