So here I have tried to integrate TON wallet into my program so that it can be accessed and used by a user to login to their account. However I definitely understand there are several flaws, for which I need some input from people on how to proceed and what they are. I also want to know if I am on the right track or so because I am pretty lost and tried to do it as best as I can.

type here// Import TonClient and required modules
import { TonClient } from '@tonclient/core';
import { libWeb } from '@tonclient/lib-web';

// Initialize TonClient with the web library
TonClient.useBinaryLibrary(libWeb);

// Initialize TonClient instance
const client = new TonClient({
    network: {
        server_address: 'https://main.ton.dev', // Ton Dev network URL
    },
});

let signer; // Declare signer variable
const gweiTotalScoreElem = document.querySelector('[data-wei-total-score]'); // Select the DOM element

// Function to connect TonClient
async function connectTonClient() {
    try {
        // Check if the Ton Wallet extension is installed
        if (typeof window.ton === 'undefined') {
            alert('Ton Wallet extension not installed!');
            return;
        }

        // Request user's Ton Wallet authorization
        const response = await window.ton.send('ton_requestAccounts');

        if (response && response.accounts) {
            const address = response.accounts[0];
            console.log("Connected to TON wallet. Address:", address);

            // Set signer address
            signer = address;

            // Show the "Claim Tokens" button upon successful connection
            showClaimTokensButton();
        } else {
            console.error('No accounts found.');
        }
    } catch (error) {
        console.error('Error connecting TonClient:', error);
    }
}

// Function to claim tokens
async function claimTokens() {
    try {
        // Contract details (replace with your contract address and ABI)
        const runTokenContractAddress = "EQD3bEAaF964Ce87DE9A811388B08cA7a8F07F2945"; // Placeholder
        const runTokenContractAbi = {
            "ABI version": 2,
            "functions": [
                {
                    "name": "mintTokens",
                    "inputs": [
                        {"name":"account", "type":"address"},
                        {"name":"amount", "type":"uint256"}
                    ],
                    "outputs": []
                }
            ],
            "events": [],
            "data": []
        };

        // Initialize the contract instance
        const runTokenContract = new client.Contract({
            address: runTokenContractAddress,
            abi: runTokenContractAbi
        });

        // Get the amount to claim from the display element
        const gweiTotalScoreText = gweiTotalScoreElem.textContent;
        const amountString = gweiTotalScoreText.split(' ')[2];
        let amountToClaim = parseInt(amountString, 10) * 1e9; // Convert to nanoTON

        // Check if the amount to claim is valid and greater than 0
        if (amountToClaim <= 0 || isNaN(amountString)) {
            console.error('No tokens to claim or invalid amount.');
            return;
        }

        // Mint tokens
        await runTokenContract.methods.mintTokens({
            account: signer,
            amount: amountToClaim.toString(),
        }).send({
            signer,
            amount: 1000000000, // 1 TON for gas fees (example)
        });

        // Reset gweiTotalScoreElem and update the display
        gweiTotalScoreElem.textContent = 'Unclaimed Tokens: 0';

    } catch (error) {
        console.error('Error claiming tokens:', error);
    }
}

// Function to show the claim tokens button
function showClaimTokensButton() {
    const claimTokensButton = document.querySelector('.button2');
    claimTokensButton.classList.remove('hide');
}