search

Hu-Fi / Mr.Market

Mr. Market is the exchange oracle of HuFi, and a CeFi crypto bot on Mixin Messenger
https://mr-market-one.vercel.app
GNU Affero General Public License v3.0
1 stars 6 forks source link

Fix ios input #159

Closed zed-wong closed 2 months ago

zed-wong commented 2 months ago

Type

enhancement, bug_fix

Description

Changes walkthrough

Relevant files
Enhancement
constants.ts
Refine Environment Variable Parsing for Boolean                   
interface/src/lib/helpers/constants.ts
  • Changed the evaluation of SHOW_BAR to strictly check for the string
    "true" to determine its boolean value.
    		• +1/-1     
    MixinMenu.svelte
    Adjust Menu Component Structure                                                   
    interface/src/lib/components/common/MixinMenu.svelte
  • Wrapped existing elements inside a new div to possibly fix layout
    issues.
    		• +17/-17 
    exchanges.svelte
    Change Input Type for Better Usability                                     
    interface/src/lib/components/grow/arbitrage/new/easy/exchanges.svelte - Changed input type from "tel" to "text" for better input handling.
    		+1/-1     
    amount.svelte
    Modify Input Type for AutoInvest Amount                                   
    interface/src/lib/components/grow/autoInvest/new/amount.svelte - Changed input type from "tel" to "text" to allow non-numeric input.
    		+1/-1     
    amount.svelte
    Update Input Type for Market Making Amounts                           
    interface/src/lib/components/grow/marketMaking/new/easy/amount.svelte
  • Changed input type from "tel" to "text" for both input fields to
    support more diverse input.
    		• +2/-2     
    inputs.svelte
    Enhance Input Fields in Spot Bids                                               
    interface/src/lib/components/spot/bids/inputs.svelte
  • Changed input type from "tel" to "text" across multiple fields to
    enhance input flexibility.
    		• +4/-4     
    input.svelte
    Adjust Input Type for Swap Input                                                 
    interface/src/lib/components/swap/input.svelte
  • Changed input type from "tel" to "text" to allow more general input.
    		• +1/-1     
    output.svelte
    Modify Input Type for Swap Output                                               
    interface/src/lib/components/swap/output.svelte
  • Changed input type from "tel" to "text" to support a broader range of
    input.
    		• +1/-1     

    ✨ 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 Updated (UTC)
    mr-market ✅ Ready (Inspect) Visit Preview Apr 17, 2024 9:45am
    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 🚅

    github-actions[bot] commented 2 months ago

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

    github-actions[bot] commented 2 months ago

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

    github-actions[bot] commented 2 months ago

    PR Review

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

    ⏱️ Estimated effort to review [1-5] 2, because the changes are straightforward and localized to specific files with clear purposes. The modifications are mainly about type changes and boolean evaluations, which are not complex.
    🧪 Relevant tests No
    🔍 Possible issues Possible Bug: The change from `type="tel"` to `type="text"` in input fields may affect the mobile keyboard layout that users see, potentially impacting user experience negatively if numeric input was intended.
    🔒 Security concerns No
    Code feedback:
    relevant fileinterface/src/lib/helpers/constants.ts
    suggestion       Consider using a more robust method to parse environment variables. Using a utility function can handle various cases and trim spaces, which improves reliability and maintainability. [important]
    relevant lineexport const SHOW_BAR = env.PUBLIC_SHOW_BAR === "true" ? true : false;
    relevant fileinterface/src/lib/components/common/MixinMenu.svelte
    suggestion       Ensure that the new div structure does not introduce any accessibility issues, such as missing ARIA roles or labels, especially since it wraps interactive elements like buttons. [important]
    relevant line
    relevant fileinterface/src/lib/components/grow/arbitrage/new/easy/exchanges.svelte
    suggestion       Verify that changing the input type to "text" does not interfere with any validation or formatting mechanisms, especially since `inputmode="decimal"` is used, which is typically for numerical inputs. [medium]
    relevant linetype="text"
    relevant fileinterface/src/lib/components/spot/bids/inputs.svelte
    suggestion       Review the impact of changing input type on form behavior and user input patterns in this trading context. It might be necessary to adjust JavaScript handling or validation accordingly. [medium]
    relevant linetype="text"
    ✨ 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

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

    github-actions[bot] commented 2 months ago

    PR Code Suggestions

    CategorySuggestions                                                                                                                                                       
    Enhancement
    Simplify the conversion of a string to a boolean using Boolean(). ___ **Consider using a more concise and readable ternary operation for the SHOW_BAR constant.
    You can directly convert the string to a boolean using Boolean() which is more idiomatic
    in JavaScript/TypeScript.** [interface/src/lib/helpers/constants.ts [7]](https://github.com/Hu-Fi/Mr.Market/pull/159/files#diff-1d9500711f0f58654b9e0e95aa0e7fdc798a0b74f1c2310b09e52123e52d6bf2R7-R7) ```diff -export const SHOW_BAR = env.PUBLIC_SHOW_BAR === "true" ? true : false; +export const SHOW_BAR = Boolean(env.PUBLIC_SHOW_BAR); ```
    Add input validation for decimal values to improve data accuracy. ___ **To enhance user experience and accuracy, consider implementing input validation for
    decimal values. This can prevent users from entering invalid data, which could lead to
    errors or unexpected behavior.** [interface/src/lib/components/spot/bids/inputs.svelte [199]](https://github.com/Hu-Fi/Mr.Market/pull/159/files#diff-12445a9b778b968349e9b5aa908c04ef41c20d7fa6f232d972fb3e936a93bfd0R199-R199) ```diff
    Accessibility
    Improve accessibility by adding aria-label attributes to interactive elements. ___ **Add an aria-label attribute to the buttons for better accessibility. This helps screen
    readers and other assistive technologies understand the purpose of the buttons.** [interface/src/lib/components/common/MixinMenu.svelte [7-11]](https://github.com/Hu-Fi/Mr.Market/pull/159/files#diff-206da0d85f120c307c7dc645200364b4343eeebb074fa1a4118a6c1207dea535R7-R11) ```diff - ```
    Best practice
    Change input type to number for fields expecting numeric values. ___ **Ensure that the input type is appropriate for the expected user input. If the field is
    meant to accept numeric values, consider changing the type from text to number to bring up
    a numeric keypad on mobile devices.** [interface/src/lib/components/grow/arbitrage/new/easy/exchanges.svelte [232]](https://github.com/Hu-Fi/Mr.Market/pull/159/files#diff-76a6a96298f7905c2da1e23483669b1951f5de3e0b25f37df050d78eb0878233R232-R232) ```diff
    Maintainability
    Ensure input type consistency across components. ___ **For consistency and to prevent potential layout issues, ensure that all similar input
    fields across different components have the same type. If other components use number for
    similar inputs, consider aligning this one as well.** [interface/src/lib/components/grow/autoInvest/new/amount.svelte [81]](https://github.com/Hu-Fi/Mr.Market/pull/159/files#diff-52cd2eec4f1b20ecfa176cb57b513ed94df46f3f05a4cef785921459ca10ba87R81-R81) ```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

    CategorySuggestions                                                                                                                                                       
    Enhancement
    Simplify the conversion of a string to a boolean. ___ **Consider using a more concise and readable way to convert the environment variable to a
    boolean. Using Boolean constructor with double negation is a common pattern.** [interface/src/lib/helpers/constants.ts [7]](https://github.com/Hu-Fi/Mr.Market/pull/159/files#diff-1d9500711f0f58654b9e0e95aa0e7fdc798a0b74f1c2310b09e52123e52d6bf2R7-R7) ```diff -export const SHOW_BAR = env.PUBLIC_SHOW_BAR === "true" ? true : false; +export const SHOW_BAR = Boolean(env.PUBLIC_SHOW_BAR); ```
    Improve mobile user experience by adjusting the keyboard input mode. ___ **Ensure that the inputmode attribute is set to "numeric" instead of "decimal" for better
    mobile keyboard support when entering numbers.** [interface/src/lib/components/grow/arbitrage/new/easy/exchanges.svelte [232]](https://github.com/Hu-Fi/Mr.Market/pull/159/files#diff-76a6a96298f7905c2da1e23483669b1951f5de3e0b25f37df050d78eb0878233R232-R232) ```diff
    Prevent unwanted auto-completion in input fields. ___ **Add autocomplete="off" to the input element to prevent browsers from auto-completing
    values based on previous inputs, which might not be desired in a financial application.** [interface/src/lib/components/grow/autoInvest/new/amount.svelte [81]](https://github.com/Hu-Fi/Mr.Market/pull/159/files#diff-52cd2eec4f1b20ecfa176cb57b513ed94df46f3f05a4cef785921459ca10ba87R81-R81) ```diff - + ```
    Best practice
    Prevent buttons from submitting forms unintentionally. ___ **Add type="button" to the ```
    Accessibility
    Enhance accessibility by providing descriptive labels for screen readers. ___ **Add aria-label attributes to input elements to improve accessibility for screen readers.** [interface/src/lib/components/spot/bids/inputs.svelte [199]](https://github.com/Hu-Fi/Mr.Market/pull/159/files#diff-12445a9b778b968349e9b5aa908c04ef41c20d7fa6f232d972fb3e936a93bfd0R199-R199) ```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.