V2 Transaction Input Card

[AtelyPham]

Summary of changes

• Adding V2 Transaction Input Card
• Fix the UI issue on the TextField component
• Modify the placeholder for the TokenSelector

Proposed area of change

Put an x in the boxes that apply.

• apps/bridge-dapp
• apps/hubble-stats
• apps/stats-dapp
• apps/webbsite
• apps/faucet
• apps/tangle-website
• libs/webb-ui-components

Reference issue to close (if applicable)

Specify any issues that can be closed from these changes (e.g. Closes #233).

• Closes [TASK] Implement Transaction Input Card component #1405

Screen Recording

If possible provide a screen recording of proposed change.

CleanShot.2023-08-17.at.04.34.51.mp4

---

Code Checklist

Please be sure to add .stories documentation if any additions are made to libs/webb-ui-components.

• I have added tests that prove my fix is effective or that my feature works
• I have added necessary documentation (if appropriate)

[vutuanlinh2k2]

LGTM 😊

[AtelyPham]

The new component Storybook for UI review. cc @monaiuu.

[monaiuu]

Comments from me:

• Remove hover state for amount field

• Apply hover state to the entire Transaction Input Card by updating background clolor (dark default:2B2F40; hover: 2E3244/ light default: F7F8F7CC (80% opacity); hover: F7F8F7)
  

[devpavan04]

Do we need to use use client inwebb-ui-components?

[AtelyPham]

Indeed, since some components will be utilized in the Next app, it is beneficial to identify whether a new component is for the server or the client. Additionally, we need to address the task of reviewing the web-ui-kit and labeling which components are server components and which are client components.