[WALL] Aizad/WALL-4683/Refactoring Trading App Card

[aizad-deriv]

Changes:

• Replace props with sub components i.e. TradingAppCard.Icon, TradingAppCard.Content & TradingAppCard.Button
• Added new styles and remove unused styles
• Replace all the previous implementations with the new one
• Fix failed test cases

Screenshots:

Previous Implementation:

                <TradingAccountCard
                    key={`added-ctrader-${account.login}`}
                    leading={<div className='wallets-added-ctrader__icon'>{PlatformDetails.ctrader.icon}</div>}
                    onClick={() => show(<MT5TradeModal platform={PlatformDetails.ctrader.platform} />)}
                    trailing={
                        <div className='wallets-added-ctrader__icon'>
                            <LabelPairedChevronRightCaptionRegularIcon width={16} />
                        </div>
                    }
                >
                    <div className='wallets-added-ctrader__details'>
                        <WalletText size='sm'>{PlatformDetails.ctrader.title}</WalletText>
                        <WalletText size='sm' weight='bold'>
                            {account?.display_balance}
                        </WalletText>
                        <WalletText size='xs'>{account.login}</WalletText>
                    </div>
                </TradingAccountCard>

Current implementation:

                <TradingAccountCard
                    key={`added-ctrader-${account.login}`}
                    onClick={() => show(<MT5TradeModal platform={PlatformDetails.ctrader.platform} />)}
                >
                    <TradingAccountCard.Icon>{PlatformDetails.ctrader.icon}</TradingAccountCard.Icon>
                    <TradingAccountCard.Content>
                        <WalletText size='sm'>{PlatformDetails.ctrader.title}</WalletText>
                        <WalletText size='sm' weight='bold'>
                            {account?.display_balance}
                        </WalletText>
                        <WalletText size='xs'>{account.login}</WalletText>
                    </TradingAccountCard.Content>
                    <TradingAccountCard.Button>
                        <LabelPairedChevronRightCaptionRegularIcon width={16} />
                    </TradingAccountCard.Button>
                </TradingAccountCard>

[vercel]

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

Name	Status	Preview	Updated (UTC)
deriv-app	✅ Ready (Inspect)	Visit Preview	Aug 27, 2024 9:32am

[github-actions]

A production App ID was automatically generated for this PR. (log)

• PR: [WALL] Aizad/WALL-4683/Refactoring Trading App Card #16148
• URLs:
  • w/ App ID + Server: https://deriv-app-git-fork-aizad-deriv-aizad-refactor-trading-ap-fa40e9.binary.sx?qa_server=red.derivws.com&app_id=38777
  • Original: https://deriv-app-git-fork-aizad-deriv-aizad-refactor-trading-ap-fa40e9.binary.sx
• App ID: 38777

Click here to copy & paste above information.

- **PR**: [https://github.com/binary-com/deriv-app/pull/16148](https://github.com/binary-com/deriv-app/pull/16148)
- **URLs**:
    - **w/ App ID + Server**: https://deriv-app-git-fork-aizad-deriv-aizad-refactor-trading-ap-fa40e9.binary.sx?qa_server=red.derivws.com&app_id=38777
    - **Original**: https://deriv-app-git-fork-aizad-deriv-aizad-refactor-trading-ap-fa40e9.binary.sx
- **App ID**: `38777`

[github-actions]

🚨 Lighthouse report for the changes in this PR:

Category	Score
🔺 Performance	33
🟧 Accessibility	70
🟢 Best practices	92
🟧 SEO	77
🟧 PWA	78

Lighthouse ran with https://deriv-app-git-fork-aizad-deriv-aizad-refactor-trading-ap-fa40e9.binary.sx/

[coveralls]

coverage: 46.952% (+0.07%) from 46.886%
when pulling c69828f on aizad-deriv:aizad/refactor-trading-app-card-component
into 3a2ab81 on binary-com:master.

[sonarqubecloud]

Quality Gate passed

Issues
2 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarCloud