Components

Introduction

Breeze SDK offers two base components for wallets, both totally customizables, the DropdownWallet and the ConnectWallet components.

The DropdownWallet component is a button that opens a dropdown with the available wallets to connect, while the ConnectWallet component is a button that opens a modal with the available wallets to connect.

  • The Modal/Dropdown button is a optional component in the Breeze SDK that allows users to connect their wallets to your application, if you're looking to building your button yourself, check $list and connect.

    • How the Modal/Dropdown Button Works

    Under the hood

    The button is highly customizable and can be easily integrated into any Svelte application. The button is built using Svelte's reactive store, transitions, event handling, reactivity, and props to manage the state, appearance, and behavior of the button and dropdown. The button is designed to be flexible and easy to use, making it ideal for developers looking to integrate Cardano wallets into their applications.

    Modal Button

    The ModalWallet is a Svelte component designed to interact with a Cardano wallet. It provides functionality to list, connect, check connection status, and disconnect from the wallet. It also allows you to select a wallet and display its balance, the wallet automatically display a $handle for the wallet if the connected wallet has one.

    Prop Type Description Default
    buttonClass String A string that defines the CSS classes for the button. A gray, rounded button with hover and focus styles.
    dropdownClass String A string that defines the CSS classes for the dropdown. A white, rounded dropdown with shadow and ring styles.
    itemClass String A string that defines the CSS classes for the items in the dropdown. A gray text with hover styles and flex layout.
    modalClass String A string that defines the CSS classes for the modal. A white, rounded modal with shadow and border styles.
    displayToken Boolean A boolean that determines whether to display the token. false
    policyID String A string that represents the policy ID of the token you want to display. An empty string.
    	+page.svelte

    Customization

    Default tailwind values for the modal customization props are:
    buttonClass = 'border-2 border-gray-300 bg-gray-100 text-gray-800 rounded-md px-4 py-2 hover:bg-gray-200 focus:outline-none'
    dropdownClass = 'origin-top-right absolute right-0 m-2 w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5'
    itemClass = 'px-4 py-2 text-sm text-gray-700 hover:bg-gray-200 hover:text-gray-900 flex gap-2 capitalize text-[16px] items-center'
    modalClass = 'bg-white rounded-lg text-left overflow-hidden shadow-2xl transform transition-all max-w-3xl md:max-w-xl md:w-[25vh] w-full p-6 mx-6 border-gray-400 border '
    by changing them, passing a single one class, you will erase the default values and replace them with the new one.

    When you set displayToken to true and provide the policyID of a fungible token, you'll be able to see the ticker and amount you hold directly within the component.

    	+page.svelte

    Dropdown Button

    The Dropdown Button is a Svelte component designed to interact with a Cardano wallet, the same way as the Modal Button. It provides functionality to list, connect, check connection status, and disconnect from the wallet, but everything is made with a dropdown, here we don't use the modalClass as a prop.

    Prop Type Description Default
    buttonClass String A string that defines the CSS classes for the button. A gray, rounded button with hover and focus styles.
    dropdownClass String A string that defines the CSS classes for the dropdown. A white, rounded dropdown with shadow and ring styles.
    itemClass String A string that defines the CSS classes for the items in the dropdown. A gray text with hover styles and flex layout.
    displayToken Boolean A boolean that determines whether to display the token. false
    policyID String A string that represents the policy ID of the token you want to display. An empty string.
    	+page.svelte

    Customization

    Default tailwind values for the dropdown customization props are:
    buttonClass = 'border-2 border-gray-300 bg-gray-100 text-gray-800 rounded-md px-4 py-2 hover:bg-gray-200 focus:outline-none'
    dropdownClass = 'origin-top-right absolute right-0 m-2 w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5'
    itemClass = 'px-4 py-2 text-sm text-gray-700 hover:bg-gray-200 hover:text-gray-900 flex gap-2 capitalize text-[16px] items-center'
    by changing them, passing a single one class, you will erase the default values and replace them with the new one, the same way as the Modal Button.

    Let's try to modify some of the props and see how the button can be customized.

    	+page.svelte