VEFramework.VEBlazor 0.4.3

.NET 6.0 
dotnet add package VEFramework.VEBlazor --version 0.4.3
NuGet\Install-Package VEFramework.VEBlazor -Version 0.4.3
This command is intended to be used within the Package Manager Console in Visual Studio, as it uses the NuGet module's version of Install-Package. 
<PackageReference Include="VEFramework.VEBlazor" Version="0.4.3" />
For projects that support PackageReference, copy this XML node into the project file to reference the package. 
paket add VEFramework.VEBlazor --version 0.4.3
#r "nuget: VEFramework.VEBlazor, 0.4.3"
#r directive can be used in F# Interactive and Polyglot Notebooks. Copy this into the interactive tool or source code of the script to reference the package. 
// Install VEFramework.VEBlazor as a Cake Addin
#addin nuget:?package=VEFramework.VEBlazor&version=0.4.3

// Install VEFramework.VEBlazor as a Cake Tool
#tool nuget:?package=VEFramework.VEBlazor&version=0.4.3

VEBlazor

VEBlazor is the UI component library for .NET Blazor framework.

It uses the VEDriversLite library for the most "backend" work. It is kind of the demo how you can wrap the VEDriversLite into UI components.

Here you can find the VEBlazor Nuget package

The library is now as "preview". We are still working hard on the refactoring. Same as this readme.

The library is based on the great component library Blazorise. Thanks to Mladen Macanovic for help with first steps with Blazorise library 😃

Live Demo

You can test live demo here

<p align="center"> <img width="400" alt="Main Page" src="https://ve-framework.com/ipfs/QmdmkGUG5nGsFUmXpNvs9APPHhqevium3HGuLjiXinR23B" /> </p>

<p align="center"> <img width="400" alt="Image Gallery" src="https://ve-framework.com/ipfs/QmQsRizVtG2vWjr7a6Xyb6V8RwQVypkm56AbxurjK2kcUp" /> </p>

<p align="center"> <img width="400" alt="Minting Page Images" src="https://ve-framework.com/ipfs/QmYJ1Wtdhz5W5wHXtUUaqpMrSZqtb4sVVctTmFf3o25Xs7" /> </p>

<p align="center"> <img width="400" alt="Minting Page Data" src="https://ve-framework.com/ipfs/QmRzXJrdrBJB1XPGx8JVtEVGjddar6ijGhs4GqwS51sYqb" /> </p>

If you would like to participate on development and testing please contact us here.

Compatibility

  • .NET 6.0
  • .NET 7.0

First steps

  • Create Empty Blazor Project (can be Server or WebAssembly)
  • Add VEBlazor project reference or VEBlazor Nuget package
  • Add necessary css and js dependencies in MyApp/wwwroot/index.html

Here is the Example:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>VEBlazor.Demo.EventsAndTickets</title>
    <base href="/" />
    <link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />

    <link href='https://fonts.googleapis.com/css?family=Manrope' rel='stylesheet'>

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css">

    <link href="_content/Blazorise/blazorise.css" rel="stylesheet" />
    <link href="_content/Blazorise.Bootstrap/blazorise.bootstrap.css" rel="stylesheet" />
    <link href="_content/Blazorise.Snackbar/blazorise.snackbar.css" rel="stylesheet" />
    <link href="https://unpkg.com/easymde/dist/easymde.min.css" rel="stylesheet" />

    <link href="VEBlazor.Demo.EventsAndTickets.styles.css" rel="stylesheet" />
    <link href="css/app.css" rel="stylesheet" />
    <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>

</head>

<body>

    <div id="app">
        <div style="position:absolute; top:30vh; width:100%; text-align:center">
            <img src="images/main-bw-big.png" style="max-height:250px; max-width: 250px;" />
            <p></p>
            <hr />
            <p></p>
            <p><i class="oi oi-reload"></i> The MyApp Web App is loading...</p>
            <p>First load of the App can take a while. Next time the load will be much faster.</p>
        </div>
    </div>

    <script src="_content/VEFramework.VEBlazor/jquery.slim.min.js"></script>
    <script src="_content/VEFramework.VEBlazor/bootstrap.min.js"></script>
    <script src="_content/VEFramework.VEBlazor/popper.min.js"></script>
    <script src="_content/VEFramework.VEBlazor/easymde.min.js"></script>
    <script src="_content/VEFramework.VEBlazor/highlight.min.js"></script>
    <script src="_content/BlazorPanzoom/panzoom.min.js"></script>
    <script src="_content/BlazorPanzoom/blazorpanzoom.js"></script>
    <script src="_content/Texnomic.Blazor.JsonViewer/scripts/JsonViewer.js"></script>
    <script src="_content/VEFramework.VEBlazor/AudioRecorder.js"></script>
    <script src="_content/TG.Blazor.IndexedDB/indexedDb.Blazor.js"></script>
    <script src="_content/VEFramework.VEBlazor/veblazor.js"></script>

    <div id="blazor-error-ui">
        An unhandled error has occurred.
        <a href="" class="reload">Reload</a>
        <a class="dismiss">🗙</a>
    </div>
    <script src="_framework/blazor.webassembly.js"></script>
</body>

</html>
  • Add default images in the folder MyApp/wwwroot/images

There are three main images and you can override them with your logos:

  • main-bw-small.png
  • main-bw-big.png
  • main-bw-long.png

Please check the demos for the details.

  • Add the references to the _Imports.razor:
@using System.Net.Http
@using System.Net.Http.Json
@using Microsoft.AspNetCore.Components.Forms
@using Microsoft.AspNetCore.Components.Routing
@using Microsoft.AspNetCore.Components.Web
@using Microsoft.AspNetCore.Components.Web.Virtualization
@using Microsoft.AspNetCore.Components.WebAssembly.Http
@using Microsoft.JSInterop
@using VEBlazor.Demo.EventsAndTickets
@using VEBlazor
@using VEBlazor.Pages
@using VEBlazor.Layouts
@using VEBlazor.Menu
@using Blazorise

Based on the components what you need to use please add another usings, for example VEBlazor.Components.AI

  • Add services to Program.cs:
using Microsoft.AspNetCore.Components.Web;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using VEBlazor.Demo.EventsAndTickets;
using Blazorise;
using Blazorise.Bootstrap;
using Blazorise.Icons.FontAwesome;
using Blazored.LocalStorage;
using BlazorPanzoom;
using IndexedDB.Blazor;

var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("#app");
builder.RootComponents.Add<HeadOutlet>("head::after");

builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });

builder.Services
    .AddBlazorise(options =>
    {
        options.Immediate = true;
    })
    .AddBootstrapProviders()
    .AddFontAwesomeIcons();

builder.Services.AddScoped<AppData>();
builder.Services.AddScoped<TransactionsService>();
builder.Services.AddSingleton<IIndexedDbFactory, IndexedDbFactory>();
builder.Services.AddBlazoredLocalStorage();
builder.Services.AddBlazorPanzoomServices();

await builder.Build().RunAsync();
  • Add template setting into the App.razor:
@using VEDriversLite.NFT
@using VEDriversLite.NFT.Dto
@inject AppData AppData

<Blazorise.ThemeProvider Theme="@theme">
    <Router AppAssembly="@typeof(App).Assembly">
        <Found Context="routeData">
            <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
            <FocusOnNavigate RouteData="@routeData" Selector="h1" />
        </Found>
        <NotFound>
            <PageTitle>Not found</PageTitle>
            <LayoutView Layout="@typeof(MainLayout)">
                <p role="alert">Sorry, there's nothing at this address.</p>
            </LayoutView>
        </NotFound>
    </Router>

    <VEBlazor.Components.VEBlazorServicesComponents />
</Blazorise.ThemeProvider>

@code {
    // Main app theme. You can load own theme. It includes colors, etc.
    Theme theme = VEBlazor.Models.Themes.DefaultTheme.GetDefaultTheme();

    protected override async Task OnInitializedAsync()
    {
        // Longer name of the App
        AppData.AppName = "Dogeft";
        // Nick of the App. Displayed in breadcrumbs, etc.
        AppData.AppNick = "DOGEFT";
        // main app website with help, info about project, etc.
        // This is link in menu "About" under the login item
        AppData.AppHomeWebsiteUrl = "https://dogeft.com/";
        // App url for sharing NFTs
        AppData.AppShareNFTUrl = "https://dogeft.ve-nft.com/";
        // Allow Work tabs with NFT image editor
        AppData.AllowWorkTabs = false;
        // Allow sending of NFT in your app
        AppData.AllowSend = true;
        // Allow Destroy (or recycle is better for this) of NFT
        AppData.AllowDestroy = true;
        // If you use the Markdown getting started page set this
        AppData.DisplayGettingStartedMenuItem = true;
        // If you use the Markdown getting started page define location
        AppData.GettingStartedPageName = "gettingstarted";
        // Define ID of your Token. 
        // You can use some defaults or create own on Neblio blockchain
        AppData.AppTokenId = NFTHelpers.BDPTokenId;

        VEDriversLite.StorageDriver.Helpers.IPFSHelpers.GatewayURL = "https://ve-framework.com/ipfs/"; //veframework public gateway

        var res = await VEDLDataContext.Storage.AddDriver(new VEDriversLite.StorageDriver.StorageDrivers.Dto.StorageDriverConfigDto()   
            {
                Type = "IPFS",
                Name = "BDP",
                Location = "Cloud",
                ID = "BDP",
                IsPublicGateway = true,
                IsLocal = false,
                ConnectionParams = new StorageDriverConnectionParams()
                {
                    APIUrl = "https://ve-framework.com/",
                    APIPort = 443,
                    Secured = false,
                    GatewayURL = "https://ve-framework.com/ipfs/",
                    GatewayPort = 443,
                }
            });

        // Define minting tabs
        // Each of them must have also page added in Pages Foler
        if ( AppData.MintingTabsData.TryGetValue( "default", out var tab ) )
        {
            tab.MintingNFTType = NFTTypes.Ticket;
            tab.HeaderLabel = "Add New Ticket";
            tab.MenuButonLabel = "New Ticket";
            tab.TabPageLocationName = "addnew";
            tab.NFT = new TicketNFT( "" );
        }
        AppData.MintingTabsData.TryAdd( "eventminting", new MintingTabData()
            {
                MintingNFTType = NFTTypes.Event,
                HeaderLabel = "Add New Event",
                MenuButonLabel = "New Event",
                TabPageLocationName = "addnewevent",
                NFT = new EventNFT( "" ),
            } );
        AppData.MintingTabsData.TryAdd( "postminting", new MintingTabData()
            {
                MintingNFTType = NFTTypes.Post,
                HeaderLabel = "Add New Post",
                MenuButonLabel = "New Post",
                TabPageLocationName = "addnewpost",
                NFT = new PostNFT( "" ),
            } );

        // you can allow just specific types of the NFTs to display
        AppData.AllowedNFTTypes = new List<NFTTypes>()
        {
            VEDriversLite.NFT.NFTTypes.Profile,
            VEDriversLite.NFT.NFTTypes.Image,
            VEDriversLite.NFT.NFTTypes.Post,
            VEDriversLite.NFT.NFTTypes.Event,
            VEDriversLite.NFT.NFTTypes.Ticket
        };

        // Define custom tags which will be displayed as Fast option
        AppData.DefaultTags.Add("MyAppTag", new VEDriversLite.NFT.Tags.Tag()
        {
            Name = "MyAppTag",
            Color = "success",
            UseAsFastButton = true
        });
        AppData.DefaultTags.Add("MySecondTag", new VEDriversLite.NFT.Tags.Tag()
        {
            Name = "MySecondTag",
            Color = "secondary",
            UseAsFastButton = true
        });
    }
}
  • Add Pages

If you use the basic layout you should add at least pages:

  • My Account
  • Gallery
  • Add New

Example of gallery page with default template:

@inject AppData AppData
@page "/gallery"

@*Add Default Title and Header*@
<PageTitle>@AppData.AppName - Gallery</PageTitle>
<VEBlazor.Components.PageHeader Title="Tickets Gallery" BreadcrumbItems="@(new string[] { AppData.AppName, "Gallery" })" />

@*Add Default Theme*@
<VEBlazor.Pages.Gallery @ref="galleryComponent" />

@code {
    VEBlazor.Pages.Gallery? galleryComponent;

    // Load the parameters from URL
    [Parameter]
    [SupplyParameterFromQuery( Name = "utxo" )]
    public string[]? InUtxos { get; set; }
    // Load the parameters from URL
    [Parameter]
    [SupplyParameterFromQuery( Name = "addr" )]
    public string[]? InAddresses { get; set; }

    protected override async Task OnAfterRenderAsync( bool firstRender )
    {
        await base.OnAfterRenderAsync( firstRender );
        // Load the parameters from URL
        if ( galleryComponent == null )
            return;
        if ( InUtxos != null && InUtxos.Length > 0 )
            await galleryComponent.OpenInUtxoInTab( InUtxos );
        if ( InAddresses != null && InAddresses.Length > 0 )
            await galleryComponent.OpenInAddressesInTab( InAddresses );
    }
}

Other pages demo you can find in the Demo projects.

Demos

We have created multiple demos. Please search these projects:

Main Components

Most of the components inherits from the NFTComponentBase or similar base classes in this file.

Services

Layout

Do not forget to override the default one when you will create empty Blazor project. It is reffered in the App.razor file.

Models - Themes

In the Themes you can define your own color scheme. We have one default scheme. Soon we will add Dark mode, etc.

Pages

All of these pages templates must be placed as component in page in the MyApp/Pages folder. As it was showed upper in "First Steps" on example Gallery page.

  • My Account
  • Gallery
  • Add New
  • BuyNFT
    • Buy NFT page will load the account without NFTs. It is fast load just for do the transaction to buy NFT.
  • Readme
    • Readme page loads the Readme.md file placed in the MyApp/wwwroot/

Main Layout automatically switches the menus from the Side (on Tablet and biggers) to Top Menu (on phones).

Tabs

  • Gallery Tab Content
    • Gallery tab is opened when you are opening new address just to search it. It load the ActiveTab.cs class with (default) 40 newest NFTs.
  • Work Tab Content
    • Work tab is used in the BDP App. It is opened for change of the properties or other functions in future. You can forbid this function like this. It will hide all buttons/labels in other related components around automatically.

AI

Audio

Account

Transaction

Send Neblio Transaction component offers multiple different transactions:

  • Classic Neblio or Token transactions - send to some address coins or tokens
    • Example: 10 NEBL or 100 VENFT tokens, etc.
  • Split Neblio or Token transaction - send to yourself or some address coins or tokens changed in smaller multiple lots
    • Example: 10 x 1 NEBL or 5 x 20 VENFT tokens, etc.
  • Airdrop transaction
    • Example: 1 NEBL and 100 VENFT tokens in one transaction

Bookmarks

Display

NFTs

Data Upload

Upload of the data allows to upload single or multiple files. You can setup this option in UploadData component.

UploadData component is the main which contains two steps: FileUpload (to the browser environment) and then IPFSUpload which upload file to the IPFS node and return the IPFS Hash of the file.

The UploadData component display the preview of the files, allow to remove them and allow to select which one will be the main.

You can upload different files now:

  • Images: *.bmp, *.png, *.jpg/jpeg, *.gif, *.jfif
  • AVMedia: *.mp3, *.wav, *.ogg, *.mp4, *.avi, *.mpeg, *.mov
  • JSON: *.json
  • HTML: *.html
  • PDF: *.pdf

The upload now contains the option to create images or Mermaid with AI. Go to AI section to see the available components.

Minting

Minting forms contains lots of usefull components for the input.

For example Tags input with Autocomplete, Markdown editor, etc. Most of these components are wrapped components from the Blazorise library. I recommend to browse all Blazorise components in their demo here to check all possibilities.

NFT Actions

NFT Actions are used in the NFT Details. You can use them separately on any page. It takes the NFT refference and then send it and inform with EventCallback about sent.

NFT Display

Common

The NFT Details can be injected with your specific NFT Details Form. Check the OpenNFTDetailsFactory as example how to build some simple logic to feed the NFT Details with own specific form.

Lists
Verification

  • This code is unique for 60 seconds. It is refreshed after this time with new digital signature.

  • Ownership QR Code

Events And Tickets
Imaging - X-Ray
Payments
Profile

Profile in the MyAccount is NFT also. These components display it and allows to create/edit it.

Tags

Tags displayed on the NFT Card and in NFT Details Basic Info

Blockchains
NFTs
Product Compatible and additional computed target framework versions.
.NET net6.0 is compatible.  net6.0-android was computed.  net6.0-ios was computed.  net6.0-maccatalyst was computed.  net6.0-macos was computed.  net6.0-tvos was computed.  net6.0-windows was computed.  net7.0 is compatible.  net7.0-android was computed.  net7.0-ios was computed.  net7.0-maccatalyst was computed.  net7.0-macos was computed.  net7.0-tvos was computed.  net7.0-windows was computed.  net8.0 was computed.  net8.0-android was computed.  net8.0-browser was computed.  net8.0-ios was computed.  net8.0-maccatalyst was computed.  net8.0-macos was computed.  net8.0-tvos was computed.  net8.0-windows was computed. 
Compatible target framework(s)
Included target framework(s) (in package)
Learn more about Target Frameworks and .NET Standard.

NuGet packages

This package is not used by any NuGet packages.

GitHub repositories

This package is not used by any popular GitHub repositories.

Version Downloads Last updated
0.4.3 144 9/28/2023
0.4.2 94 9/22/2023
0.4.1 137 8/16/2023
0.4.0 140 8/16/2023
0.3.42 167 4/17/2023
0.3.41 172 4/9/2023
0.3.31 218 3/17/2023
0.3.21 420 6/27/2022
0.3.3 240 2/9/2023
0.3.2 406 5/27/2022
0.3.1 376 5/1/2022
0.3.0 396 5/1/2022

- Update of VEDriversLite.Common