Staking UI Not Functioning Correctly

[0xTan1319]

Issue Title: ### Staking UI is Not Allowing Users to Stake Tokens

Description: The staking user interface (UI) is currently experiencing issues that prevent users from successfully staking their tokens. Users are encountering error messages or blank screens when attempting to complete the staking process.

Steps to Reproduce:

1. Navigate to the staking section of the application.
2. Connect a wallet (e.g., MetaMask).
3. Select the token to be staked from the available options.
4. Enter the desired amount of tokens to stake.
5. Click on the "Stake" button.
6. Observe the response from the UI.

Expected Result:

Users should be able to stake their selected tokens without any issues.
A confirmation message should appear indicating the successful fulfillment of the staking transaction.

Actual Result:

Users receive an error message saying, "Transaction failed: Please try again later."
Alternatively, the UI may hang and display a loading spinner indefinitely without completing the transaction.
Additional Information:

Browser: Chrome (Version 95.0.x)

1. OS: Windows 10
2. Wallet Extension: MetaMask (Version 10.0.x)
3. Network: Mainnet / Testnet (specify which one is affected)
4. Error Logs:
5. [Include any console logs or error messages if applicable]
6. Example: "TypeError: Cannot read property 'toString' of undefined" at stake.js:45
7. Screenshots: Staking UI Error

Priority: High - This issue is affecting multiple users and is critical to staking functionalities.

Suggested Fix/Improvement:

Investigate the transaction handling in the staking component.
Ensure that the smart contract interaction is correctly set up.
Add user-friendly error handling to inform users of specific issues (e.g., insufficient funds, network errors).