TrifleHub Documentation 👀

Installation

Install the TrifleHub plugin using npm or yarn:

# Using npm
npm install @trifle/trifle-hub

# Using yarn
yarn add @trifle/trifle-hub

This prevents your bundler from including peer dependencies in your build, reducing bundle size and avoiding version conflicts.

Configuration and Setup

Import and register the TrifleHub plugin in your Vue application:

import { createApp } from 'vue'
import App from './App.vue'
import { TrifleHubVuePlugin } from '@trifle/trifle-hub'

const app = createApp(App)

// Configure and install the TrifleHub plugin
app.use(TrifleHubVuePlugin, {
  // Required: ReOWN AppKit configuration
  reownConfig: {
    appId: 'your-app-id'
    // Other ReOWN AppKit configuration options
  },

  connectors: [],

  // Optional: Backend URL (defaults to 'https://bot-staging.trifle.life')
  backendUrl: 'https://bot-staging.trifle.life',

  // Optional: Set the default page to show when the hub is opened for the first time
  defaultPage: 'games' // or any valid page key (e.g., 'welcome', 'account', etc.)

  // Optional: For development use, you can hook into an existing Pinia instance
  devHookPiniaInstance: existingPiniaInstance
})

app.mount('#app')

About defaultPage:

• The defaultPage option allows you to specify which page should be shown the first time a user opens the hub (if no page is set in the route or sessionStorage).
• If not specified, it defaults to 'welcome'.
• Valid values are any of the page keys defined in your hub (e.g., 'games', 'leaderboard', 'account', etc.).

Add the TrifleHub component to your app layout:

<template>
  <div id="app">
    <!-- Your app content -->
    <TrifleHub position="bottom-left" />
  </div>
</template>

<script setup>
// The component is registered globally
</script>

Available Provide/Inject Resources

The TrifleHub plugin provides several resources via Vue's provide/inject system:

Injection Key	Type	Description
'TrifleHub/wagmiConfig'	Object	Wagmi configuration for wallet interactions
'TrifleHub/appKit'	Object	ReOWN AppKit instance
'TrifleHub/store'	Object	Authentication store (Pinia)
'trifleHubInternalPinia'	Object	Internal Pinia instance
'TrifleHub/defaultPage'	String	The default page key for the hub

TrifleHub Component Resources

These are provided by the TrifleHub component when it's mounted:

Injection Key	Type	Description
'hub'	Object	Hub controller with the following properties:
hubOpen	Ref	Reactive state for hub visibility
openHub(page?)	Function	Open the hub, optionally to a specific page
closeHub()	Function	Close the hub
'account'	Object	Account information with the following properties:
address	ComputedRef<string|null>	Current wallet address
chainId	ComputedRef<number|null>	Current chain ID
isConnected	ComputedRef	Whether wallet is connected
isConnecting	ComputedRef	Whether wallet is connecting
'accountModal'	Object	Wallet interaction methods:
disconnect()	Function	Disconnect the wallet
openAccountModal()	Function	Open the wallet connection modal
enforceConnection()	Function	Ensure wallet is connected
signDiscordId(message)	Function	Sign a message for Discord auth

Page Navigation

TrifleHub provides a simple navigation system through the injected hub object. You can use this to open specific pages or close the hub.

Available Pages

The following pages are available for navigation:

• welcome - Welcome page (not shown in menu)
• games - Games page
• leaderboard - Leaderboard page
• earn - Earn page
• account - Account page
• theme - Theme settings (not shown in menu)

Navigating Between Pages

You can navigate between pages using the hub object:

// In a Vue component
import { inject } from 'vue'

export default {
  setup() {
    // Get the hub controller
    const hub = inject('hub')

    // Function to open a specific page
    const openAccountPage = () => {
      hub.openHub('account')
    }

    // Function to close the hub
    const closeHub = () => {
      hub.closeHub()
    }

    return { openAccountPage, closeHub }
  }
}

Auth Store Methods

The authentication store (inject('TrifleHub/store')) provides several methods for managing user authentication:

Method	Description
connectDiscord()	Initiate Discord authentication
connectWallet()	Connect to a wallet
authenticateWithWallet(address)	Authenticate with a connected wallet
disconnect()	Disconnect all authentication methods
updateUsername(newUsername)	Update the user's username
fetchUserStatus()	Get the latest user status from the server

Example Usage

Here's a complete example of a component that interacts with TrifleHub:

<template>
  <div>
    <button @click="openAccountPage">Open Account</button>
    <button @click="openLeaderboard">Open Leaderboard</button>
    <button @click="closeHub">Close Hub</button>
  </div>
</template>

<script>
import { inject } from 'vue'

export default {
  setup() {
    const hub = inject('hub')

    const openAccountPage = () => {
      hub.openHub('account')
    }

    const openLeaderboard = () => {
      hub.openHub('leaderboard')
    }

    const closeHub = () => {
      hub.closeHub()
    }

    return {
      openAccountPage,
      openLeaderboard,
      closeHub
    }
  }
}
</script>