# Pages and Content

This part of the documentation describes the sections of the frontend and admin pages.

The application structure and user roles are as follows:

  1. Frontend Pages (available for all guest and authorized users)

  2. Admin Pages (available only for admin user role)

  3. Project Theme Files (located at resources/js/Themes/default)

Please note that all site pages except for the admin dashboard have two basic themes (Dark/Light).

By default, the system uses Dark Mode, you can change this behavior from the Admin Dashboard.

Please check the Site Settings section (see our demo (opens new window))

# 1. Project Theme Editing

CEX allows you to edit template and stylesheet files directly from the server. You need to SSH to the server and open the site directory.

As we mentioned above, the CEX Theme files are located at resources/js/Themes/default. It uses Vue/Html Template syntax.

The stylesheet files are located at resources/saas/Themes/default.

After each content or stylesheet files are edited, you need to run npm run production to build and publish new assets. If the system throws an exception during the compilation process, check the warning message. Most probably you did a syntax error while editing template or stylesheet files.

Usually, the system hints at the error line in the file, so you can easily find/trace the issue.

If you want to change the home page images, all images/assets are located at public/images.

# 2. Content/Translations

CEX is a multilingual script, so all language files are located separately for each language. All strings in the frontend part are fully translatable and editable.

The language directory is located at resources/lang/ folder.

Let's give an example of how to change the content from the language file.

  1. Create new language from Admin Dashboard -> Languages -> New Language
  2. Navigate to resources/lang/ directory
  3. Open newly created language file. For example, it is 'es.json' file for Spanish language.
  4. Open "es.json" file.
  5. Let's say we want to change the following text on the homepage:

Get started with the easiest and most secure platform to buy, sell, trade, and earn cryptocurrencies.

  1. Find this content from the language file:
{
"Get Access": "Get Access",
"Get started with the easiest and most secure platform": "Get started with the easiest and most secure platform to buy, sell, trade, and earn cryptocurrencies.",
"IBAN": "IBAN",
}

Here, the left side before : char are keys of the translated strings. You need to change the content on the right side, after : char.

{
"Get Access": "Get Access",
"Get started with the easiest and most secure platform": "New content here",
"IBAN": "IBAN",
}
  1. If you want to add new translations, or some keys are missing, you can append new lines in key:value format:
{
"Get Access": "Get Access",
"Get started with the easiest and most secure platform": "New content here",
"IBAN": "IBAN",
"NEW_CONTENT_KEY": "NEW_CONTENT_VALUE"
}

After you can use this translated value in the template file as:

{{ $t('NEW_CONTENT_KEY') }}

The site will display it as NEW_CONTENT_VALUE.

Don't forget to run rebuild assets after each template file update. For just Language file changes you don't need to rebuild assets (only if you added new string keys and updated template files).

# 3. Home Page

The Home Page contains the following section:

  1. Header
  2. Markets Slider
  3. Market List
  4. Features
  5. Footer

You can edit the content from this template file resources/js/Themes/default/Web/Pages/Dashboard.template

# 4. Markets

This section displays all available and tradable markets. The table displays filtered records by their pair name.

You can find the markets page template file following this path resources/js/Themes/default/Web/Pages/Market/Markets.template

You can create/edit markets from the admin page (opens new window).

Market Form Fields:

  1. Base Currency (the first currency appearing in a currency pair quotation, e.g. BTC-USDT, here BTC is a base currency)
  2. Quote Currency (the second currency appearing in a currency pair quotation, e.g. BTC-USDT, here USDT is a quote currency)
  3. Name (the name of the market, e.g. BTC-USDT, allowed formats are: BTC-USDT, BTC_USDT, BTCUSDT, no empty spaces and slash chars are not allowed e.g. BTC USDT, BTC/USDT.)
  4. Market Price (default market price of the pair)

- Trading Rules

  1. Base Currency Precision (sets decimal places per currency after the dot, e.g. in BTC-USDT market, if you set the base precision to 4, the format of the currency will be 4.0001 BTC. If the precision was set to 2, then the format is 4.05 BTC)
  2. Quote Currency Precision (same as base currency precision, in BTC-USDT market, for the precision value 2, the format of the quote currency will be 100.05 USDT)
  3. Minimum Trade Amount (sets min trade amount in base currency, in BTC-USDT market, you set the min trade amount for BTC)
  4. Maximum Trade Amount (sets max trade amount in base currency, in BTC-USDT market, you set the max trade amount for BTC)
  5. Minimum Order Size (sets min order size in quote currency, in BTC-USDT market, you set the order size for USDT)
  6. Maximum Order Size (sets min order size in quote currency, in BTC-USDT market, you set the order size for USDT)
  7. Minimum Amount Movement (sets the ticker size in base currency, so that when placing an order, the quantity should be divided by this value with no remainder, e.g. for 0.001 ticker size, the accepted quantity formats are 0.50, 0.005, 0.1, all of them can be divided 0.001 with no remainder)
  8. Minimum Price Movement (sets the ticker size in quote currency, so that when placing an order, the price should be divided by this value with no remainder, e.g. for 0.001 ticker size, the accepted price formats are 0.50, 0.005, 0.1, all of them can be divided 0.001 with no remainder)
  9. Ask Spread (in percentage 0-99%) (sets extra prices for the order given by liquidity provider, e.g. in BTC-USDT market, if you set Ask Spread 10%, the orders parsed from the liquidity provider will show X price with 10% appended)
  10. Bid Spread (in percentage 0-99%) (sets extra prices for the order given by liquidity provider, e.g. in BTC-USDT market, if you set Bid Spread 10%, the orders parsed from the liquidity provider will show X price with 10% appended)
  11. Chart Type
  • Internal (based on local trades)
  • From Liquidity Provider (based on liquidity provider's chart)
  • External Custom Market (Tradingview Database)
  1. Chart Switch Allowed (allowing your users to switch the source of the chart)

  2. - Market Status

  3. Market Visibility (coin or fiat)

  4. Market Trade Allowed (allow/disallow trading operations per market)

  5. Market Buy Orders Allowed (allow/disallow buy order operations per market)

  6. Market Sell Orders Allowed (allow/disallow sell order operations per market)

  7. Market Cancel Orders Allowed (allow/disallow cancel order operations per market)

  8. Has Futures Option (enables Futures for this market)

  9. Has Binary Option (enables Binary Option for this market)

  10. Minimum Option Position amount (set the minimum order size)

  11. Maximum Option Position amount (set the maximum order size)

  12. Market Pair Type (Is Meme?, Is Layer 1? etc...)

If you use liquidity from Binance, kindly match the rules according to the Binance's trading rules. You can check the following page to refer:

https://www.binance.com/en/trade-rule

E.g. Base Currency Precision, Quote Currency Precision field you can set by following Binance Market page.

https://www.binance.com/en/trade/BTC_USDT?type=spot

If you check the market for BTC-USDT, you can see that Binance uses 5 decimals format for BTC and 2 decimal points for USDT by default.

# 5. Currencies

CEX supports many cryptocurrencies using Coinpayments API, ETH/ERC, BNB/BEP Networks as well as any fiat currencies using Stripe and manual Bank Transfer. You can check the list of supported coins from the following list (opens new window)

You can create/edit currencies from the admin page (opens new window).

Currency Form Fields:

- General Fields:

  1. Name (full name of the currency e.g. Bitcoin)
  2. Symbol (symbol of the currency e.g. BTC)
  3. Decimals (decimals of the currency e.g. 8)

- Currency Status

  1. Currency Visibility (sets visibility for users)
  2. Deposits Allowed (sets Deposit status per currency, if disabled users can not initiate deposit)
  3. Withdrawals Allowed (sets Withdrawals status per currency, if disabled users can not initiate withdrawals)
  4. Is Stable Coin? (set if the currency if a stable coin, e.g. USDT, USDC etc...)

- Networks

  1. Type (coin or fiat)
  2. Network (set a network from the available list)

Example: If you add Ethereum, set ETH API, or if you add token on Ethereum Network, you need to choose ERC-20

Notes:

  • If currency defined Coinpayments API as a network, you need to attach currency from the list available by Coinpayments API. If the list of coins is empty, make sure you set both proper Coinpayments Credentials and click on Sync Currencies button from the settings page.

  • If currency defined ETH/ERC or BNB/BEP as a network, you need to fill the following fields:

    • The Contract (the contract name on the Blockchain, it starts from 0x and total length of the contract is 42 chars)
    • Decimals (usually 18 decimals is fairly common for tokens, but not all tokens have 18 decimals, e.g USDT has 6 decimals)
    • Token SYMBOL

Deposit & Withdrawal Rules

  1. Minimum Deposit Amount (sets minimum deposit amount per currency)
  2. Minimum Withdraw Amount (sets minimum withdraw amount per currency)
  3. Maximum Withdraw Amount (sets maximum withdraw amount per currency)
  4. Deposit Network Confirmation (sets minimum deposit confirmation from the network, e.g. if you set 2 confirmations for Bitcoin, if your incoming transaction confirmed 1 time from the Blockchain, it will be in pending state, until it reaches 2 confirmations)

Deposit & Withdrawal Fees

  1. Deposit Fee (%): (If fee set in floating (%) form, Deposit Fixed Fee will be ignored)
  2. Deposit Fee Fixed: (If floating (%) fee is 0, fixed fee will be used)

The same rule was applied to withdrawal fees.

P2P

  1. Available in P2P (check if you want this currency is available in P2P)

Currency Logo

  1. Allowed types: jpg, png. Max filesize: 1MB (it can be changed from PHP/NGINX settings)

# 6. Wallets

This section displays all wallets belong to user with a full report of available balance, the amount in orders, and withdrawals for both crypto and fiat currencies.

You can find the wallet page template file following this path resources/js/Themes/default/Web/Pages/Wallet/Wallets.template

If you want to change the user balance manually, you need to open a section from the Admin Dashboard Users -> Choose user -> Wallets -> Fund button :

If you enter the amount with a negative sign, the system will decrease the balance to the specified amount accordingly.

For example, user has a balance of 100 USDT, if you add -30, user's total balance would be 70 USDT.

  1. Get access to ETH/BNB/ERC/BEP wallets:

php artisan wallets:retrieve-wallet-access ADDRESS

This command retrieves the private key of the specified wallet.

# Ethereum & Binance Smart Chain Deposit / Withdrawal Workflow

As both Ethereum and Binance Smart Chain use the same Network with different chain id, the structural and logical processes are the same.

First, you need to define system wallets for both Networks from Admin Dashboard. Your system wallets should have BNB and ETH to pay for transaction hash.

Kindly check the full workflow of deposits and withdrawals:

For Deposits ETH/BNB:

1. System generates wallet address per user
2. User sends deposit in ETH/BNB
3. System updates user’s balance on database field
4. System transfers deposited ETH/BNB from user’s wallet to the system wallet (that you set
   from Admin Dashboard Settings page), so all deposits will be collected in one single wallet
5. On ETH/BNB transfers, you don’t need to pay a transaction fee.

For Deposits ERC/BEP:

1. System generates wallet address per user
2. User sends deposit in ERC/BEP
3. System updates user’s balance on database field
4. System sends ETH/BNB to deposited user’s wallet, so it can pay gas fee for sending
    ERC/BEP deposit to the system wallet
5. After the user's wallet receives ETH/BNB, the system sends ERC/BEP to the system wallet
    and pays the received amount in ETH/BNB for gas usage.
    For Withdrawals ETH/BNB:
6. User sends withdrawal request in ETH/BNB
7. Admin approves the request
8. The system sends ETH/BNB to the requested wallet address from the system wallet balance
9. As soon as it has transaction hash, the system updates hash field of withdrawal request

For Withdrawals ERC/BEP:

1. User sends withdrawal request in ERC/BEP
2. Admin approves the request
3. The system sends ERC/BEP to the requested wallet address from the system wallet balance
4. As soon as it has transaction hash, the system updates hash field of withdrawal request

Tron Wallet transfers in our system is manual as it has different structure comparing with BEP20,ERC20,MATIC20 transfers. As all user wallets need to be activated manually, once you have deposit notification, you have to open each deposit wallet of users from Tronlink and send it to the hot wallet.

# GAS CALCULATION

The Node scripts calculate the fee based on average price from the Ethereum/BCS Network automatically. You don’t need to do it manually. All you need is having sufficient balance for transfers ERC/BEP to the system wallet. If you don’t have balance in the system wallet in ETH/BNB, the system won’t transfer ERC/BEP from the user's balance to the system wallet, and it should be done manually using Metamask.

# 7. Transactions

This report section displays various types of records: Trade/Order History, Deposit and Withdrawal requests/history for both fiat and cryptocurrencies, Referral Transactions and other types.

You can find the reports page template files following this folder path resources/js/Themes/default/Web/Pages/Reports

# 8. Profile

Users can edit/update their profile information, such as Email, 2FA, Password, Browser Sessions. Also, CEX follows GDPR rules and allows users to delete their accounts.

# 9. Admin Dashboard

The Admin Dashboard is the section where admin user can control the exchange rules and settings. Admin users can set markets, trade rules, add currencies, approve/reject KYC Documents, and deposit/withdrawals, get access to Finances in Reports section. See our demo (opens new window) to check the functionality of the Admin Dashboard.