Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix For loading buttons #46

Merged
merged 3 commits into from
Feb 20, 2025
Merged

Fix For loading buttons #46

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
a2c9ebc
fix the loading buttons
ahmadtaimoor-deriv Feb 20, 2025
bff165f
remove console
ahmadtaimoor-deriv Feb 20, 2025
c079765
merge master with account fixes
ahmadtaimoor-deriv Feb 20, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
48 changes: 27 additions & 21 deletions src/components/AccountSwitcher/AccountInfo.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,25 +1,25 @@
import React from "react";
import { useClientStore } from "@/stores/clientStore";
import { LogOut } from "lucide-react";
import { useAccount } from "@/hooks/useAccount";
import { CurrencyIcon } from "@/components/Currency/CurrencyIcon";
import { useLogout } from "@/hooks/useLogout";
import * as Popover from "@radix-ui/react-popover";
import React from "react"
import { useClientStore } from "@/stores/clientStore"
import { LogOut } from "lucide-react"
import { useAccount } from "@/hooks/useAccount"
import { CurrencyIcon } from "@/components/Currency/CurrencyIcon"
import { useLogout } from "@/hooks/useLogout"
import * as Popover from "@radix-ui/react-popover"

interface AccountInfoProps {
onSelect: () => void;
onSelect: () => void
}

export const AccountInfo: React.FC<AccountInfoProps> = ({ onSelect }) => {
const { balance, currency, setBalance } = useClientStore();
const { balance, currency, setBalance } = useClientStore()
const {
accountType,
selectedAccountId,
switchAccountType,
selectAccount,
getAvailableAccounts,
} = useAccount();
const logout = useLogout();
} = useAccount()
const logout = useLogout()

return (
<div className="w-full min-w-[280px]">
Expand Down Expand Up @@ -57,12 +57,15 @@ export const AccountInfo: React.FC<AccountInfoProps> = ({ onSelect }) => {
selectedAccountId === account.id ? "bg-gray-200" : ""
}`}
onClick={() => {
selectAccount(account.id);
onSelect();
selectAccount(account.id)
onSelect()
}}
>
<div className="w-8 h-8 flex items-center justify-center mr-2">
<CurrencyIcon currency={account.id} isVirtual={account.isDemo} />
<CurrencyIcon
currency={account.id}
isVirtual={account.isDemo}
/>
</div>
<div className="flex-1 text-left">
<p className="text-sm font-semibold">
Expand All @@ -74,17 +77,20 @@ export const AccountInfo: React.FC<AccountInfoProps> = ({ onSelect }) => {
</div>
<div className="flex items-center gap-2">
{selectedAccountId === account.id && account.isDemo ? (
<button
<button
className="px-2 py-1 text-xs border border-gray-400 rounded hover:bg-gray-300"
onClick={(e) => {
e.stopPropagation();
setBalance("10000", "USD");
e.stopPropagation()
setBalance("10000", "USD")
}}
>
Reset balance
</button>
) : (
<p className="text-sm">{balance} {account.currency}</p>
<p className="text-sm">
{accountType === "demo" ? "10,000" : balance}{" "}
{account.currency}
</p>
)}
</div>
</button>
Expand All @@ -97,7 +103,7 @@ export const AccountInfo: React.FC<AccountInfoProps> = ({ onSelect }) => {
<div className="flex items-center gap-2 justify-between pb-2">
<p className="text-sm text-gray-500">Total assets</p>
<p className="text-sm">
{balance} {currency}
{accountType === "demo" ? "10,000" : balance} {currency}
</p>
</div>
<p className="text-xs text-gray-400">
Expand All @@ -118,5 +124,5 @@ export const AccountInfo: React.FC<AccountInfoProps> = ({ onSelect }) => {
</div>
</div>
</div>
);
};
)
}
67 changes: 44 additions & 23 deletions src/components/AccountSwitcher/AccountSwitcher.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,48 +1,69 @@
import React, { useState } from 'react';
import { ChevronDown, ChevronUp } from 'lucide-react';
import { useClientStore } from '@/stores/clientStore';
import { useAccount } from '@/hooks/useAccount';
import { AccountPopover, AccountPopoverContent, AccountPopoverTrigger } from '@/components/ui/account-popover';
import { AccountInfo } from './AccountInfo';
import { useOrientationStore } from '@/stores/orientationStore';
import React, { useState } from "react"
import { ChevronDown, ChevronUp } from "lucide-react"
import { useClientStore } from "@/stores/clientStore"
import { useAccount } from "@/hooks/useAccount"
import {
AccountPopover,
AccountPopoverContent,
AccountPopoverTrigger,
} from "@/components/ui/account-popover"
import { AccountInfo } from "./AccountInfo"
import { useOrientationStore } from "@/stores/orientationStore"

export const AccountSwitcher: React.FC = () => {
const { balance } = useClientStore();
const { selectedAccount } = useAccount();
const { isLandscape } = useOrientationStore();
const [isOpen, setIsOpen] = useState(false);
const { balance } = useClientStore()
const { selectedAccount } = useAccount()
const { isLandscape } = useOrientationStore()
const [isOpen, setIsOpen] = useState(false)

return (
<AccountPopover onOpenChange={setIsOpen}>
<AccountPopoverTrigger asChild>
<button
data-testid="balance-display"
className={`flex flex-col relative ${
isLandscape ? 'items-end' : 'items-start'
isLandscape ? "items-end" : "items-start"
}`}
>
<div className="flex items-center gap-1">
<span className={`text-sm font-semibold ${selectedAccount?.isDemo ? 'text-orange-500' : 'text-color-solid-glacier-700'}`}>
{selectedAccount?.isDemo ? 'Demo' : 'Real'}
<span
className={`text-sm font-semibold ${
selectedAccount?.isDemo
? "text-orange-500"
: "text-color-solid-glacier-700"
}`}
>
{selectedAccount?.isDemo ? "Demo" : "Real"}
</span>
{isOpen ? (
<ChevronUp className={`h-4 w-4 ${selectedAccount?.isDemo ? 'text-orange-500' : 'text-color-solid-glacier-700'}`} />
<ChevronUp
className={`h-4 w-4 ${
selectedAccount?.isDemo
? "text-orange-500"
: "text-color-solid-glacier-700"
}`}
/>
) : (
<ChevronDown className={`h-4 w-4 ${selectedAccount?.isDemo ? 'text-orange-500' : 'text-color-solid-glacier-700'}`} />
<ChevronDown
className={`h-4 w-4 ${
selectedAccount?.isDemo
? "text-orange-500"
: "text-color-solid-glacier-700"
}`}
/>
)}
</div>
<span className="text-sm font-semibold align-start">
{balance} {selectedAccount?.currency || 'USD'}
{selectedAccount?.isDemo ? "10,000" : balance}{" "}
{selectedAccount?.currency || "USD"}
</span>
</button>
</AccountPopoverTrigger>
<AccountPopoverContent
align={isLandscape ? "end" : "start"}
>
<AccountPopoverContent align={isLandscape ? "end" : "start"}>
<AccountInfo onSelect={() => setIsOpen(false)} />
</AccountPopoverContent>
</AccountPopover>
);
};
)
}

export default AccountSwitcher;
export default AccountSwitcher
34 changes: 19 additions & 15 deletions src/screens/TradePage/components/TradeFormController.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -158,7 +158,7 @@ export const TradeFormController: React.FC<TradeFormControllerProps> = ({
const initialStates: ButtonStates = {}
tradeTypeConfigs[trade_type].buttons.forEach((button) => {
initialStates[button.actionName] = {
loading: true,
loading: false,
error: null,
payout: buttonStates[button.actionName]?.payout || 0,
reconnecting: false,
Expand Down Expand Up @@ -192,10 +192,7 @@ export const TradeFormController: React.FC<TradeFormControllerProps> = ({
: ""
}`}
>
<div
className={isLandscape ? "py-2" : "pt-1 px-4"}
id="how-to-trade"
>
<div className={isLandscape ? "py-2" : "pt-1 px-4"} id="how-to-trade">
<HowToTrade />
</div>
{isLandscape ? (
Expand Down Expand Up @@ -277,17 +274,20 @@ export const TradeFormController: React.FC<TradeFormControllerProps> = ({
buttonStates[button.actionName]?.loading
? "Loading..."
: `${
buttonStates[button.actionName]?.payout || 0
// added for demo proposes will change it to 0 once api is connected
buttonStates[button.actionName]?.payout || 10
Comment on lines +277 to +278
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

suggestion (bug_risk): Use of hardcoded demo fallback for payout value.

While the demo value is acceptable temporarily, consider isolating demo-specific logic (perhaps via a feature flag or config flag) to ensure it doesn't inadvertently make it to production.

Suggested implementation:

import React from 'react';
// other existing imports

// new code to check the demo mode flag (assuming using env variable for simplicity)
const isDemoMode = process.env.REACT_APP_DEMO_MODE === "true";
const fallbackPayout = isDemoMode ? 10 : 0;
                          buttonStates[button.actionName]?.payout || fallbackPayout

If your project has a centralized configuration or feature flag system, consider importing the demo mode flag from that module instead of reading from process.env directly. Replace the custom logic accordingly if a config flag is already defined in your codebase.

} ${currency}`
}
title_position={button.position}
disabled={
buttonStates[button.actionName]?.loading ||
buttonStates[button.actionName]?.error !== null
buttonStates[button.actionName]?.loading
// Commenting it as api is not working we'll enable it once api is working
// buttonStates[button.actionName]?.error !== null
}
loading={
buttonStates[button.actionName]?.loading ||
buttonStates[button.actionName]?.reconnecting
buttonStates[button.actionName]?.loading
// Commenting it as api is not working we'll enable it once api is working
// buttonStates[button.actionName]?.reconnecting
}
error={buttonStates[button.actionName]?.error}
onClick={() => {
Expand Down Expand Up @@ -367,17 +367,21 @@ export const TradeFormController: React.FC<TradeFormControllerProps> = ({
buttonStates[button.actionName]?.loading
? "Loading..."
: `${
buttonStates[button.actionName]?.payout || 0
buttonStates[button.actionName]?.payout || 10
} ${currency}`
}
title_position={button.position}
disabled={
buttonStates[button.actionName]?.loading ||
buttonStates[button.actionName]?.error !== null
buttonStates[button.actionName]?.loading
// ||
// Commenting it as api is not working we'll enable it once api is working
// buttonStates[button.actionName]?.error !== null
}
loading={
buttonStates[button.actionName]?.loading ||
buttonStates[button.actionName]?.reconnecting
buttonStates[button.actionName]?.loading
// ||
// Commenting it as api is not working we'll enable it once api is working
// buttonStates[button.actionName]?.reconnecting
}
error={buttonStates[button.actionName]?.error}
onClick={() => {
Expand Down