Adding UI - Wallet Essentials - (Unreal Engine module)

Last updated on July 28, 2025

Game setup

Byte Wars includes two types of in-game currencies that are preconfigured in the game. These configurations can be found in Source/AccelByteWars/Core/UI/MainMenu/Store/StoreItemModel.h. The following items are set up in the StoreItemModel file:

• Currency type enumeration:

UENUM(BlueprintType)
enum class ECurrencyType : uint8
{
	NONE = 0,
	COIN,
	GEM
};

• Function to retrieve a currency code based on its type:

class FPreConfigCurrency
{
public:
	static FString GetCodeFromType(const ECurrencyType CurrencyType)
// ...
};

• Function to retrieve a currency type based on its code:

class FPreConfigCurrency
{
public:
// ...
	static ECurrencyType GetTypeFromCode(const FString& CurrencyCode)
// ...
};

You can override the default currency codes used for each type by adding the following values to the Config/DefaultEngine.ini file:

[CurrencyCode]
Coin=<coin_currency_code>
Gem=<gem_currency_code>

What's on the menu

In this section, you will learn how to prepare widgets that display the player's wallet information. The relevant files can be found in the Resources section.

Wallet balance widget entry

• WalletBalanceWidgetEntry: A C++ class used to display item details. You won't need to modify this menu, as it’s provided as a ready-to-use component.
  • Header file: Source/AccelByteWars/TutorialModules/Monetization/WalletEssentials/UI/Components/WalletBalanceWidgetEntry.h
  • CPP file: Source/AccelByteWars/TutorialModules/Monetization/WalletEssentials/UI/Components/WalletBalanceWidgetEntry.cpp
  • Blueprint widget: Content/TutorialModules/Monetization/WalletEssentials/UI/Components/W_WalletBalanceEntry.uasset

The WalletBalanceWidgetEntry is a display-only widget that shows the player’s balance for a specific currency. It does not contain logic for retrieving or updating balance data, only to present the data passed into it. You will use this widget inside another container widget.

Here’s a preview of the WalletBalanceWidgetEntry Blueprint widget:

The components used in this widget are defined in its header file:

private:
	UPROPERTY(EditDefaultsOnly)
	FSlateBrush Brush_Coin;

	UPROPERTY(EditDefaultsOnly)
	FSlateBrush Brush_Gem;

	UPROPERTY(BlueprintReadOnly, meta = (BindWidget, BlueprintProtected = true, AllowPrivateAccess = true))
	UTextBlock* Tb_Balance;

	UPROPERTY(BlueprintReadOnly, meta = (BindWidget, BlueprintProtected = true, AllowPrivateAccess = true))
	UImage* I_CurrencySymbol;

To initialize the widget, use the Setup() function. This updates the UI based on the input text and currency type:

public:
	void Setup(const FText& Balance, const ECurrencyType CurrencyType) const;

Wallet balance widget

• WalletBalanceWidget_Starter: A C++ class used to display item details. You won't need to modify this menu, as it’s provided as a ready-to-use component.
  • Header file: Source/AccelByteWars/TutorialModules/Monetization/WalletEssentials/UI/WalletBalanceWidget_Starter.h
  • CPP file: Source/AccelByteWars/TutorialModules/Monetization/WalletEssentials/UI/WalletBalanceWidget_Starter.cpp
  • Blueprint widget: Content/TutorialModules/Monetization/WalletEssentials/UI/W_WalletBalance_Starter.uasset

By default, this widget is an empty container. You will populate it by adding instances of WalletBalanceWidgetEntry. The components used in this widget are declared in the header file:

private:
// ...
	UPROPERTY(BlueprintReadOnly, meta = (BindWidget, BlueprintProtected = true, AllowPrivateAccess = true))
	UPanelWidget* W_Root;

This widget includes pre-configured variables and helper functions tailored for Byte Wars integration.

• Reference to the subsystem that handles the wallet logic:

private:
// ...
	UPROPERTY()
	UWalletEssentialsSubsystem_Starter* WalletSubsystem;

void UWalletBalanceWidget_Starter::NativeOnActivated()
{
// ...
	WalletSubsystem = GetGameInstance()->GetSubsystem<UWalletEssentialsSubsystem_Starter>();
	ensure(WalletSubsystem);
// ...
}

• Variable to store the WalletBalanceWidgetEntry instances by the currency type it displayed:

private:
	TMap<FString, UWalletBalanceWidgetEntry*> CurrencyBalanceEntryMap;

• Class reference to the WalletBalanceWidgetEntry Blueprint widget:

private:
// ...
	UPROPERTY(EditAnywhere)
	TSubclassOf<UWalletBalanceWidgetEntry> CurrencyBalanceClass;

Ready the menu

1. Open the WalletBalanceWidget_Starter header file and add the following function declarations.

   private:
   	void ShowBalance(bool bWasSuccessful, const FAccelByteModelsWalletInfo& Response) const;
   
   	void UpdateBalance(const ECurrencyType CurrencyType);

2. Open the WalletBalanceWidget_Starter CPP file and implement the ShowBalance() function. This function displays the player's wallet info based on the response received.

   void UWalletBalanceWidget_Starter::ShowBalance(bool bWasSuccessful, const FAccelByteModelsWalletInfo& Response) const
   {
   	if (!bWasSuccessful)
   	{
   		// If failed, set all balance text to error.
   		for (const TTuple<FString, UWalletBalanceWidgetEntry*>& CurrencyBalance : CurrencyBalanceEntryMap)
   		{
   			if (!CurrencyBalance.Value || CurrencyBalance.Key.IsEmpty())
   			{
   				continue;
   			}
   
   			CurrencyBalance.Value->Setup(TEXT_BALANCE_ERROR, FPreConfigCurrency::GetTypeFromCode(CurrencyBalance.Key));
   		}
   		return;
   	}
   
   	if (const UWalletBalanceWidgetEntry* Entry = *CurrencyBalanceEntryMap.Find(Response.CurrencyCode.ToUpper()))
   	{
   		Entry->Setup(
   			FText::FromString(FString::FromInt(Response.Balance)),
   			FPreConfigCurrency::GetTypeFromCode(Response.CurrencyCode));
   	}
   }

3. Still in the CPP file, implement the UpdateBalance() function. This function creates and sets up WalletBalanceWidgetEntry instances for each currency type and adds them to the WalletBalanceWidget_Starter widget.

   void UWalletBalanceWidget_Starter::UpdateBalance(const ECurrencyType CurrencyType)
   {
   	const FString CurrencyCode = FPreConfigCurrency::GetCodeFromType(CurrencyType);
   
   	UWalletBalanceWidgetEntry* Entry = CreateWidget<UWalletBalanceWidgetEntry>(this, CurrencyBalanceClass);
   	ensure(Entry);
   
   	Entry->Setup(FText::FromString("..."), CurrencyType);
   	W_Root->AddChild(Entry);
   	CurrencyBalanceEntryMap.Add(CurrencyCode, Entry);
   // ...
   }

4. In the WalletBalanceWidget_Starter CPP file, find the NativeOnActivated() function and add the following highlighted lines. These lines reset the WalletBalanceWidgetEntry instances.

   void UWalletBalanceWidget_Starter::NativeOnActivated()
   {
   	Super::NativeOnActivated();
   // ...
   	// Update balance.
   	W_Root->ClearChildren();
   	CurrencyBalanceEntryMap.Empty();
   
   	UpdateBalance(ECurrencyType::COIN);
   	UpdateBalance(ECurrencyType::GEM);
   }

5. Build the project and open it with the Unreal Editor once it's done.

6. Open Content/TutorialModules/Monetization/WalletEssentials/DA_WalletEssentials.uasset and enable the Is Starter Mode Active. Save the Data Asset.

   

7. Click Play in the editor and navigate to Store > Item Shop. You'll see the wallet widget in the top right corner of the menu.

Resources

• The files used in this tutorial section are available in the Byte Wars GitHub repository.
  • AccelByteWars/Source/AccelByteWars/TutorialModules/Monetization/WalletEssentials/UI/WalletBalanceWidget_Starter.h
  • AccelByteWars/Source/AccelByteWars/TutorialModules/Monetization/WalletEssentials/UI/WalletBalanceWidget_Starter.cpp
  • AccelByteWars/Content/TutorialModules/Monetization/WalletEssentials/UI/W_WalletBalance_Starter.uasset
  • AccelByteWars/Content/TutorialModules/Monetization/WalletEssentials/DA_WalletEssentials.uasset