UI: added caution message for trader mode

[aum-deriv]

Summary by Sourcery

New Features:

• Display a caution message in trader mode settings to warn users that disabling trader mode will drop all active copiers without notification.

[sourcery-ai]

Reviewer's Guide by Sourcery

This PR adds a caution message to the trader mode setting in the Settings component to warn users that disabling trader mode will drop all active copiers without notification.

Sequence diagram for trader mode disable flow

sequenceDiagram
    actor User
    participant Settings
    participant System
    User->>Settings: Views trader mode settings
    Settings->>User: Shows caution message
    User->>Settings: Disables trader mode
    Settings->>System: Update trader settings
    System->>System: Drop all active copiers

Loading

Class diagram for updated Settings component

classDiagram
    class Settings {
        +Object settings
        +Function updateSettings
        +Function onChangeSettings
        -Boolean allowCopiers
        +render()
    }
    class SectionMessage {
        +String message
        +String size
        +String status
        +String title
    }
    Settings --> SectionMessage
    note for Settings "Added caution message
using SectionMessage
component"

Loading

File-Level Changes

Change	Details	Files
Added a caution message for disabling trader mode	A caution message is displayed below the trader mode toggle switch. The message warns users that disabling trader mode will drop all active copiers without notification. The message uses the SectionMessage component from @deriv-com/quill-ui with status "danger" and title "Caution".	src/components/Settings.jsx

---

Tips and commands

Interacting with Sourcery

• Trigger a new review: Comment @sourcery-ai review on the pull request.
• Continue discussions: Reply directly to Sourcery's review comments.
• Generate a GitHub issue from a review comment: Ask Sourcery to create an
  issue from a review comment by replying to it.
• Generate a pull request title: Write @sourcery-ai anywhere in the pull
  request title to generate a title at any time.
• Generate a pull request summary: Write @sourcery-ai summary anywhere in
  the pull request body to generate a PR summary at any time. You can also use
  this command to specify where the summary should be inserted.

Customizing Your Experience

Access your dashboard to:

• Enable or disable review features such as the Sourcery-generated pull request
  summary, the reviewer's guide, and others.
• Change the review language.
• Add, remove or edit custom review instructions.
• Adjust other review settings.

Getting Help

• Contact our support team for questions or feedback.
• Visit our documentation for detailed guides and information.
• Keep in touch with the Sourcery team by following us on X/Twitter, LinkedIn or GitHub.

[vercel]

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

Name	Status	Preview	Updated (UTC)
copy-trading	✅ Ready (Inspect)	Visit Preview	Jan 9, 2025 1:48pm

[review-deriv]

AI Code Review

⚠️ IMPORTANT: This review is AI-generated and should be validated by human reviewers
🔴 BUGS & LOGICAL ISSUES:
• Undefined or null “settings” risk:
If the “settings” prop is ever null or undefined, accessing “settings.allow_copiers” will throw an error.
Potential impacts: Components will fail to render, resulting in runtime crashes.
Reproduction scenarios: Passing a null or incorrectly structured “settings” object from a parent component.
Fix implementation: Provide a default value or add defensive checks. For example:

Settings.propTypes = {
settings: PropTypes.shape({
allow_copiers: PropTypes.bool
})
};

const Settings = ({ settings = { allow_copiers: false }, updateSettings, onChangeSettings }) => {
const [allowCopiers, setAllowCopiers] = useState(settings.allow_copiers);

// ...

};

• Mismatch between warning message and actual state update:
The SectionMessage informs users that disabling “allow_copiers” will drop active copiers, but the diff does not show any actual cleanup or confirmation code.
Potential impacts: Users may assume copiers are removed without a server call or that a confirmation step occurs, leading to incorrect user expectations.
Reproduction scenarios: Disabling the toggle from true to false without a backend call or an on-screen confirmation.
Fix implementation: Ensure that updateSettings or onChangeSettings performs the necessary backend call or provides a confirm dialog:

const handleAllowCopiersChange = (e) => {
if (!e.target.checked) {
if (!window.confirm("Are you sure you want to drop all active copiers?")) {
return;
}
// Fire server call / dispatch action here
}
setAllowCopiers(e.target.checked);
updateSettings({ allow_copiers: e.target.checked });
onChangeSettings?.({ allow_copiers: e.target.checked });
};

🟡 RELIABILITY CONCERNS:
• Potential failure when dropping copiers:
If an external API or server call is needed to remove active copiers, there is no retry or error-handling mechanism in place.
Potential failure scenarios: Network timeouts or server errors could leave the UI out of sync.
Mitigation steps: Implement a retry mechanism or error boundary to handle server failures:

const dropActiveCopiers = async () => {
try {
// call server
} catch (error) {
// show notification / log error
// consider retry or revert toggle
}
};

• Lack of fallback if toggling fails:
If “allow_copiers” cannot be updated server-side, the UI won’t reflect reality.
Mitigation steps: Revert the toggle state if the update fails, and inform the user with an error message:

const handleAllowCopiersChange = async (e) => {
const newValue = e.target.checked;
setAllowCopiers(newValue);

try {
  await updateSettings({ allow_copiers: newValue });
  onChangeSettings?.({ allow_copiers: newValue });
} catch (error) {
  setAllowCopiers(!newValue);
  alert("Failed to update copier settings. Reverting...");
}

};

💡 ROBUSTNESS IMPROVEMENTS:
• Add confirmation dialog before destructive changes:
Since disabling copiers is a destructive action, confirm intent:

if (!window.confirm("Disabling will drop all active copiers. Proceed?")) {
return;
}

• Enhance error handling in SectionMessage:
Provide a more detailed error or fallback in the UI if the disable action does not complete successfully:

<SectionMessage
message={errorMessage || "Upon disabling, all your active copiers will be dropped without any notification."}
size="sm"
status={errorMessage ? "warning" : "danger"}
title={errorMessage ? "Warning" : "Caution"}
/>

• Validate “allow_copiers” before using it in state:
Ensure it’s always a boolean:

const allowCopiersInitial = typeof settings.allow_copiers === "boolean"
? settings.allow_copiers
: false;

const [allowCopiers, setAllowCopiers] = useState(allowCopiersInitial);

These changes collectively safeguard against undefined props, align the user’s expectation with the destructive action, and improve reliability in cases of server or network failures.

[sourcery-ai]

Hey @aum-deriv - I've reviewed your changes and they look great!

Here's what I looked at during the review

• 🟡 General issues: 1 issue found
• 🟢 Security: all looks good
• 🟢 Testing: all looks good
• 🟢 Complexity: all looks good
• 🟢 Documentation: all looks good

---

Sourcery is free for open source - if you like our reviews please consider sharing them ✨

• X
• Mastodon
• LinkedIn
• Facebook

_{Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.}

[sourcery-ai]

suggestion: Consider connecting the warning message to the toggle switch using aria-describedby

This would improve accessibility by explicitly associating the warning message with the toggle control.

Suggested implementation:

                    <ToggleSwitch
                        size="lg"
                        aria-describedby="copiers-warning"

                    <SectionMessage
                        id="copiers-warning"
                        message="Upon disabling, all your active copiers will be dropped without any notification."
                        size="sm"
                        status="danger"
                        title="Caution"