Walletium DigitalWalletdocumentation.

Step 01

Welcome to Walletium

Walletium is a cutting-edge digital mobile wallet solution designed to revolutionize how you manage your finances. With a comprehensive suite of features, Walletium empowers users to add, send, withdraw, and exchange money seamlessly, all within a secure and intuitive platform.

Core features of Walletium

Step 02

Before You Start

You do not need to be a coding expert to run this template. Just make sure the following free software is installed on your computer.

Required Software

Step 03

Project Folder Overview

After extracting the ZIP file you downloaded, you will see the following folder structure. Understanding what each folder contains makes customization much easier.

walletium-next
├── messages/            # site languages static data (en, ar, es, hi, fr)
├── public/              # images, logo, favicon, static files
├── designs/             # design references / extracted templates
├── src/                 # main source code
│   ├── app/             # website pages (App Router)
│   │   ├── [locale]/    # locale-prefixed routes (landing + dashboard)
│   │   └── api/         # route handlers
│   ├── components/      # reusable sections/components
│   │   ├── layout/      # navbar, footer, shells
│   │   ├── sections/    # landing page sections
│   │   ├── partials/    # small shared widgets
│   │   ├── ui/          # base UI + form fields
│   │   ├── charts/      # chart components
│   │   ├── providers/   # context/provider wrappers
│   │   └── integrations/# third-party integrations
│   ├── redux/           # Redux store, slices, RTK Query apis
│   │   ├── api/         # RTK Query endpoint modules
│   │   ├── features/    # slices (auth, etc.)
│   │   └── store.js     # store config + persist
│   ├── lib/             # axios, token, toast, auth helpers
│   │   └── api/         # endpoints + fetchers
│   ├── utils/           # error/success extract, image url, formatters
│   ├── contexts/        # theme, auth, dashboard providers
│   ├── hooks/           # reusable hook functions
│   ├── i18n/            # next-intl routing, request, navigation
│   ├── config/          # env export root
│   ├── data/            # static content (faq, terms, testimonials)
│   └── middleware.js    # locale + auth middleware
├── package.json         # project dependencies info
├── next.config.mjs      # Next.js settings
├── .env                 # API URL configuration
└── jsconfig.json        # path alias (@/ -> src/)

Important folders explained

Step 04

Opening Project in VS Code

Follow these steps to open the downloaded project inside VS Code.

• 01

  Extract the downloaded ZIP file to a location like Desktop.

• 02

  Open the VS Code application.

• 03

  From the top menu, click File → Open Folder.

• 04

  Select the extracted walletium-next-template folder.

• 05

  Click the “Open” button to load the project.

Step 05

Install Project Dependencies

Before you can run the project, you need to install the required packages. This only needs to be done once.

Open the terminal

In VS Code, click Terminal → New Terminal from the top menu. A terminal window will open at the bottom.

Run the install command

Paste the following command into the terminal and press Enter:

npm install

Step 06

Run the Project

Once installation is complete, it is time to run the project locally. Paste the following command into the terminal:

npm run dev

After a few seconds, the terminal will display a message like:

✓ Ready in 2.3s
- Local: http://localhost:3000

Now open your browser and go to:

http://localhost:3000

Step 07

Change Website Logo

Replace the default logo with your own business logo by following the steps below.

Logo location

In the VS Code file explorer, navigate to the following folder:

\public\images\logo\logo.png

Replace steps

• 01

  Open the public/logo/ folder.

• 02

  You will see the existing logo file (e.g. logo.png).

• 03

  Save your own logo with the same file name (logo.png) and replace it.

• 04

  Refresh the browser — your new logo will appear instantly.

Step 08

Change Business Name

Replace every occurrence of “Walletium” across the website with your own business name. The visible text lives in the language files, and the SEO metadata is set in the layout file.

Configuration file

/messages/(ar.json, en.json, es.json, fr.json, hi.json, fe.json)

Edit steps

• 01

  Open the language file you want to edit inside /messages/ (e.g. en.json).

• 02

  Find the Metadata block shown below.

• 03

  Replace “Walletium” with your own business name.

• 04

  Save the file (Ctrl + S or Cmd + S).

Metadata block

"Metadata": {
  "title": "Walletium - Your Ultimate Digital Mobile Wallet Solution",
  "description": "It is a cutting-edge digital mobile wallet solution.",
  "keywords": "Walletium, digital wallet, mobile wallet, online payments",
  "ogImageAlt": "Walletium - Digital Mobile Wallet"
},

Meta config set

src/app/[locale]/layout.js

const SITE_URL = process.env.NEXT_PUBLIC_SITE_URL || "https://walletium.com";
const OG_IMAGE = "/images/logo/logo.png";

export async function generateMetadata({ params }) {
  return {
    openGraph: {
      siteName: "Walletium",
      images: [
        {
          url: OG_IMAGE,
          width: 1200,
          height: 630,
        },
      ],
    },
    twitter: {
      card: "summary_large_image",
      images: [OG_IMAGE],
    },
  };
}

Step 09

Change Website Content

Customize the default language, homepage sections, and all on-page text from a single, organized location.

Default language change

src/i18n/routing.js

export const routing = defineRouting({
  defaultLocale: "en",
});

Content files location

src/app/[locale]/(public)/page.js

The homepage is composed of the following sections — add, remove, or reorder them to match your needs:

<main>
  <Navbar />
  <HeroSection />
  <PartnerSection />
  <FeaturesSection />
  <WhyChooseUsSection />
  <SecuritySection />
  <TestimonialsSection />
  <AppDownloadSection />
  <NewsletterSection />
  <Footer />
</main>

Step 10

Change Images & Graphics

Update banner images, feature icons, and section graphics to match your own brand identity.

Images folder location

public/images/

Replace process

• 01

  Navigate to the public/images/ folder.

• 02

  Note the file name of the image you want to change.

• 03

  Save your new image using exactly the same file name.

• 04

  Delete or rename the old image, then paste the new image in.

• 05

  Refresh the browser to see the new image.

Image guidelines

Step 11

Configure Admin Panel API

The Walletium website fetches data from your existing Walletium Admin Panel through its API. You need to point the website to the correct API URL.

Configuration file

.env

Edit steps

• 01

  Open the .env file in VS Code.

• 02

  Find the API URL line shown below.

• 03

  Replace the example URL with your admin panel domain (including https://).

• 04

  Save the file.

• 05

  In the terminal, press Ctrl + C to stop the server, then run npm run dev again.

Example configuration

NEXT_PUBLIC_API_URL=https://yourdomain.com/api
NEXT_PUBLIC_SITE_URL=https://yourdomain.com

Step 12

Connect Existing Admin Panel

If you already have a Walletium Admin Panel installed, this website will connect to it directly and pull live data.

How it works

Example setup

Step 13

SEO & Website Settings

Configure browser tab title, favicon, and meta description so your website appears correctly in Google search results.

SEO configuration file

src/config/seo.js

Editable fields

title: "Your Business — Tagline",
description: "Short description of your business (160 chars)",
keywords: "payment, business, secure, online",
ogImage: "/images/og-image.png",

Change the favicon

To change the browser tab icon (favicon):

• 01

  Go to the public/ folder.

• 02

  Replace the favicon.ico file (32×32 or 64×64 pixels).

• 03

  Clear browser cache and refresh the page.

Step 14

Common Beginner Mistakes

The most frequent mistakes new users make — and how to avoid them.

Step 15

Troubleshooting Guide

Solutions to the most common problems you may run into during setup.

Problem: white screen or blank page

• Open the browser console (press F12).

• Check the Console tab for any error messages.

• In the terminal, press Ctrl + C and run npm run dev again.

Problem: “npm command not found”

Node.js is not installed, or the installation did not complete properly.

• Download the LTS version from nodejs.org.

• Restart your computer after installation completes.

• Run node -v in the terminal to verify the version.

Problem: website not loading

• Check that the terminal shows a “Ready” message.

• Verify the URL: http://localhost:3000.

• Make sure no other program is using port 3000.

Problem: API not connecting

• Verify the API URL inside your .env file.

• Open the admin panel domain in a browser and confirm it works.

• Always restart the dev server after editing .env.

• Using HTTP instead of HTTPS may block the connection.

Problem: images not changing

• Confirm the file name matches the original exactly.

• Clear browser cache (Ctrl + Shift + Delete).

• Do a hard refresh (Ctrl + Shift + R).

Step 16

Support & Assistance

Our team is here to help. If you run into any issue, contact us through one of the channels below.

Support channels

What to include in your support request

For the fastest possible response, please share the following: