fix ios input decimal bug

zed-wong commented 2 months ago

Type

bug_fix, enhancement

Description

Added inputmode="decimal" attribute to various input fields across multiple components to fix and enhance numeric input handling on iOS devices.
This change affects components used in arbitrage, market making, spot bids, and swap functionalities.

Changes walkthrough

Relevant files

Enhancement

exchanges.svelte `Enhance Numeric Input for iOS in Arbitrage Exchanges Component` interface/src/lib/components/grow/arbitrage/new/easy/exchanges.svelte Added `inputmode="decimal"` to the input field to enhance numeric input on iOS devices.	+1/-0
amount.svelte `Enhance Numeric Input for iOS in Market Making Amount Component` interface/src/lib/components/grow/marketMaking/new/easy/amount.svelte Added `inputmode="decimal"` to two input fields to ensure proper numeric input on iOS.	+2/-2
inputs.svelte `Enhance Numeric Input for iOS in Spot Bids Inputs Component` interface/src/lib/components/spot/bids/inputs.svelte Added `inputmode="decimal"` to multiple input fields to improve numeric input handling on iOS.	+4/-0
input.svelte `Enhance Numeric Input for iOS in Swap Input Component` interface/src/lib/components/swap/input.svelte Added `inputmode="decimal"` to the input field to facilitate numeric input on iOS.	+1/-0
output.svelte `Enhance Numeric Input for iOS in Swap Output Component` interface/src/lib/components/swap/output.svelte Added `inputmode="decimal"` to the output field to improve numeric input on iOS.	+1/-0

✨ PR-Agent usage: Comment /help on the PR to get a list of all available PR-Agent tools and their descriptions

vercel[bot] commented 2 months ago

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
mr-market	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Apr 17, 2024 9:16am

railway-app[bot] commented 2 months ago

This PR is being deployed to Railway 🚅

railway-app[bot] commented 2 months ago

This PR is being deployed to Railway 🚅

Mr.Market: ◻️ REMOVED

github-actions[bot] commented 2 months ago

PR Description updated to latest commit (https://github.com/Hu-Fi/Mr.Market/commit/7d14c549cab27cd243e396e87ff52e360ef2dff8)

github-actions[bot] commented 2 months ago

PR Review

(Review updated until commit https://github.com/Hu-Fi/Mr.Market/commit/7d14c549cab27cd243e396e87ff52e360ef2dff8)

⏱️ Estimated effort to review [1-5]	2, because the changes are straightforward and limited to adding an attribute to input fields across several files. The logic and structure of the code remain unchanged, making it easier to review.
🧪 Relevant tests	No
🔍 Possible issues	Inconsistent Attribute Order: In some files, the `inputmode="decimal"` attribute is added before the `type="tel"` attribute, while in others, it is added after. Consistency in attribute order can improve readability and maintainability.
🔒 Security concerns	No

Code feedback:

relevant file	interface/src/lib/components/grow/arbitrage/new/easy/exchanges.svelte
suggestion	Consider maintaining a consistent order of attributes in your HTML tags for better readability. For instance, always place `inputmode` after `type`. [medium]
relevant line	inputmode="decimal"

relevant file	interface/src/lib/components/grow/marketMaking/new/easy/amount.svelte
suggestion	Ensure that all attributes are consistently ordered across all input elements to enhance code uniformity and maintainability. [medium]
relevant line

✨ Review tool usage guide:

**Overview:** The `review` tool scans the PR code changes, and generates a PR review which includes several types of feedbacks, such as possible PR issues, security threats and relevant test in the PR. More feedbacks can be [added](https://pr-agent-docs.codium.ai/tools/review/#general-configurations) by configuring the tool. The tool can be triggered [automatically](https://pr-agent-docs.codium.ai/usage-guide/automations_and_usage/#github-app-automatic-tools-when-a-new-pr-is-opened) every time a new PR is opened, or can be invoked manually by commenting on any PR. - When commenting, to edit [configurations](https://github.com/Codium-ai/pr-agent/blob/main/pr_agent/settings/configuration.toml#L23) related to the review tool (`pr_reviewer` section), use the following template: ``` /review --pr_reviewer.some_config1=... --pr_reviewer.some_config2=... ``` - With a [configuration file](https://pr-agent-docs.codium.ai/usage-guide/configuration_options/), use the following template: ``` [pr_reviewer] some_config1=... some_config2=... ``` See the review [usage page](https://pr-agent-docs.codium.ai/tools/review/) for a comprehensive guide on using this tool.

github-actions[bot] commented 2 months ago

PR Description updated to latest commit (https://github.com/Hu-Fi/Mr.Market/commit/7d14c549cab27cd243e396e87ff52e360ef2dff8)

github-actions[bot] commented 2 months ago

Persistent review updated to latest commit https://github.com/Hu-Fi/Mr.Market/commit/7d14c549cab27cd243e396e87ff52e360ef2dff8

github-actions[bot] commented 2 months ago

PR Code Suggestions

Category	Suggestions
Best practice	Add input validation to ensure correct decimal values. ___ Consider adding error handling or validation for the input fields to ensure that the values entered are within expected ranges or formats, especially since the input mode is set to decimal. [interface/src/lib/components/grow/marketMaking/new/easy/amount.svelte [35]](https://github.com/Hu-Fi/Mr.Market/pull/158/files#diff-459a25a5ea5b96b0229135f3d0cef5dfc4bb8b073efd3be20b13d92890eade55R35-R35) ```diff - + ```
Best practice	Ensure that the input mask configuration supports decimal formatting. ___ Since the input mode is set to decimal, ensure that the cleave.js configuration (`maskOption`) properly handles decimal inputs, including appropriate decimal separators and number formatting. [interface/src/lib/components/swap/input.svelte [83-87]](https://github.com/Hu-Fi/Mr.Market/pull/158/files#diff-3ebcc855afc26c1448e6d2669f19afae0350fd0aa75f427f7be8dc6478622973R83-R87) ```diff
Accessibility	Improve accessibility by adding aria-labels to inputs. ___ To improve accessibility and user experience, consider adding labels or aria-labels to inputs, especially when changing input modes to support screen readers and assistive technologies. [interface/src/lib/components/spot/bids/inputs.svelte [199-203]](https://github.com/Hu-Fi/Mr.Market/pull/158/files#diff-12445a9b778b968349e9b5aa908c04ef41c20d7fa6f232d972fb3e936a93bfd0R199-R203) ```diff
Enhancement	Implement rounding/formatting of output values to enhance data integrity. ___ To prevent potential user errors and enhance data integrity, consider implementing a mechanism to round or format the output values to a specified number of decimal places. [interface/src/lib/components/swap/output.svelte [83-87]](https://github.com/Hu-Fi/Mr.Market/pull/158/files#diff-9ddd5334cd6d09b1881f372f5c1a41de1af7fa031abbbe1eb6a429f977037b35R83-R87) ```diff

✨ Improve tool usage guide:

**Overview:** The `improve` tool scans the PR code changes, and automatically generates suggestions for improving the PR code. The tool can be triggered [automatically](https://pr-agent-docs.codium.ai/usage-guide/automations_and_usage/#github-app-automatic-tools-when-a-new-pr-is-opened) every time a new PR is opened, or can be invoked manually by commenting on a PR. - When commenting, to edit [configurations](https://github.com/Codium-ai/pr-agent/blob/main/pr_agent/settings/configuration.toml#L78) related to the improve tool (`pr_code_suggestions` section), use the following template: ``` /improve --pr_code_suggestions.some_config1=... --pr_code_suggestions.some_config2=... ``` - With a [configuration file](https://pr-agent-docs.codium.ai/usage-guide/configuration_options/), use the following template: ``` [pr_code_suggestions] some_config1=... some_config2=... ``` See the improve [usage page](https://pr-agent-docs.codium.ai/tools/improve/) for a comprehensive guide on using this tool.

github-actions[bot] commented 2 months ago

PR Code Suggestions

Category	Suggestions
Best practice	Add validation for decimal inputs to ensure data integrity. ___ Consider adding error handling or validation for the input fields where `inputmode="decimal"` is used, to ensure that the input is correctly formatted and valid before processing. [interface/src/lib/components/spot/bids/inputs.svelte [199-203]](https://github.com/Hu-Fi/Mr.Market/pull/158/files#diff-12445a9b778b968349e9b5aa908c04ef41c20d7fa6f232d972fb3e936a93bfd0R199-R203) ```diff
Accessibility	Improve accessibility by adding descriptive labels to inputs. ___ To enhance accessibility, consider adding `aria-label` or `aria-labelledby` attributes to inputs with `inputmode="decimal"` to provide a clear description of the input's purpose for screen readers. [interface/src/lib/components/swap/input.svelte [82-87]](https://github.com/Hu-Fi/Mr.Market/pull/158/files#diff-3ebcc855afc26c1448e6d2669f19afae0350fd0aa75f427f7be8dc6478622973R82-R87) ```diff
Maintainability	Enhance responsiveness of input elements across devices. ___ To prevent potential layout issues on different devices, consider adding responsive CSS classes or styles to the input elements to ensure they render correctly across all screen sizes. [interface/src/lib/components/swap/output.svelte [82-87]](https://github.com/Hu-Fi/Mr.Market/pull/158/files#diff-9ddd5334cd6d09b1881f372f5c1a41de1af7fa031abbbe1eb6a429f977037b35R82-R87) ```diff
Security	Add user confirmation for critical financial inputs. ___ Since the input fields are critical for financial transactions, consider implementing a confirmation step or additional user verification before processing the input to enhance security. [interface/src/lib/components/grow/marketMaking/new/easy/amount.svelte [34-35]](https://github.com/Hu-Fi/Mr.Market/pull/158/files#diff-459a25a5ea5b96b0229135f3d0cef5dfc4bb8b073efd3be20b13d92890eade55R34-R35) ```diff

✨ Improve tool usage guide:

**Overview:** The `improve` tool scans the PR code changes, and automatically generates suggestions for improving the PR code. The tool can be triggered [automatically](https://pr-agent-docs.codium.ai/usage-guide/automations_and_usage/#github-app-automatic-tools-when-a-new-pr-is-opened) every time a new PR is opened, or can be invoked manually by commenting on a PR. - When commenting, to edit [configurations](https://github.com/Codium-ai/pr-agent/blob/main/pr_agent/settings/configuration.toml#L78) related to the improve tool (`pr_code_suggestions` section), use the following template: ``` /improve --pr_code_suggestions.some_config1=... --pr_code_suggestions.some_config2=... ``` - With a [configuration file](https://pr-agent-docs.codium.ai/usage-guide/configuration_options/), use the following template: ``` [pr_code_suggestions] some_config1=... some_config2=... ``` See the improve [usage page](https://pr-agent-docs.codium.ai/tools/improve/) for a comprehensive guide on using this tool.

Hu-Fi / Mr.Market