bitshares / bitshares/bitshares-ui

Style Guide Replacement Tracker

Open
#2,382 0 comments 0 reactions 0 assignees View on GitHub
[1a] Epic [3] Enhancement [6] Style Guide
Dominant language
JavaScript
Stars
520
Forks
575
Avg merge
12h 7m
Merged PRs (30d)
5

Description

This issue is to track progress of the current style-guide implementation.
All components that can be replaced by bitshares-style-guide should be replaced.

### Phase 1 - JSX files to check of
Please check of files as they are completed.
Hours should be tracked in a separate task issue.

- [ ] ./Login/DecryptBackup.jsx
- [ ] ./Login/Login.jsx
- [ ] ./Login/AccountLogin.jsx
- [ ] ./Login/WalletLogin.jsx
- [ ] ./LoadingIndicator.jsx
- [ ] ./SyncError.jsx
- [ ] ./Forms/AccountSelect.jsx
- [ ] ./Forms/AccountNameInputStyleGuide.jsx
- [ ] ./Forms/PasswordInputStyleGuide.jsx
- [ ] ./Forms/PubKeyInput.jsx
- [ ] ./Forms/MyAccounts.jsx
- [ ] ./Forms/PasswordInput.jsx
- [ ] ./Forms/RefcodeInput.jsx
- [ ] ./Forms/AccountNameInput.jsx
- [ ] ./Account/AccountBalance.jsx
- [ ] ./Account/WorkerApproval.jsx
- [ ] ./Account/SignedMessage.jsx
- [ ] ./Account/AccountInfo.jsx
- [ ] ./Account/Statistics.jsx
- [ ] ./Account/CreateWorker.jsx
- [ ] ./Account/AccountSelector.jsx
- [ ] ./Account/AccountVotingProxy.jsx
- [ ] ./Account/AccountVoting.jsx
- [ ] ./Account/AccountOrders.jsx
- [ ] ./Account/AccountBrowsingMode.jsx
- [ ] ./Account/AccountInputStyleGuide.jsx
- [ ] ./Account/AccountVesting.jsx
- [ ] ./Account/Identicon.jsx
- [ ] ./Account/AccountPermissions.jsx
- [ ] ./Account/AccountAssets.jsx
- [ ] ./Account/AccountPermissionsMigrate.jsx
- [ ] ./Account/AccountPage.jsx
- [ ] ./Account/AccountSignedMessages.jsx
- [ ] ./Account/RecentTransactions.jsx
- [ ] ./Account/Connections.jsx
- [ ] ./Account/FeePoolOperation.jsx
- [ ] ./Account/AccountOverview.jsx
- [ ] ./Account/AccountPermissionsList.jsx
- [ ] ./Account/AccountSelectorAnt.jsx
- [ ] ./Account/Proposals.jsx
- [ ] ./Account/MarginPosition.jsx
- [ ] ./Account/BalanceWrapper.jsx
- [ ] ./Account/AccountWhitelist.jsx
- [ ] ./Account/CreateAccountPassword.jsx
- [ ] ./Account/AccountImage.jsx
- [ ] ./Account/CreateAccount.jsx
- [ ] ./Account/AssetWhitelist.jsx
- [ ] ./Account/NestedApprovalState.jsx
- [ ] ./Account/AccountMembership.jsx
- [ ] ./Account/AccountPortfolioList.jsx
- [ ] ./Account/AccountDepositWithdraw.jsx
- [ ] ./Account/AccountAssetCreate.jsx
- [ ] ./Account/VotingAccountsList.jsx
- [ ] ./Account/NestedApprovalStateLib.jsx
- [ ] ./Account/MarginPositionsTable.jsx
- [ ] ./Account/AccountTreemap.jsx
- [ ] ./Account/AccountAssetUpdate.jsx
- [ ] ./Account/AssetFeedProducers.jsx
- [ ] ./InitError.jsx
- [ ] ./Transfer/Transfer.jsx
- [ ] ./Console/Console.jsx
- [ ] ./Notifier/Notifier.jsx
- [ ] ./Notifier/NotifierContainer.jsx
- [ ] ./Dashboard/MarketsRow.jsx
- [ ] ./Dashboard/Markets.jsx
- [ ] ./Dashboard/AccountCard.jsx
- [ ] ./Dashboard/DashboardList.jsx
- [ ] ./Dashboard/SimpleDepositBlocktradesBridge.jsx
- [ ] ./Dashboard/MarketsTable.jsx
- [ ] ./Dashboard/DashboardAccountsOnly.jsx
- [ ] ./Dashboard/DashboardPage.jsx
- [ ] ./Dashboard/SimpleDepositWithdraw.jsx
- [ ] ./Showcases/Showcase.jsx
- [ ] ./Showcases/ShowcaseGrid.jsx
- [ ] ./News.jsx
- [ ] ./Exchange/MarketRow.jsx
- [ ] ./Exchange/DepthHighChart.jsx
- [ ] ./Exchange/OpenSettleOrders.jsx
- [ ] ./Exchange/ExchangeContainer.jsx
- [ ] ./Exchange/ExchangeHeader.jsx
- [ ] ./Exchange/Markets.jsx
- [ ] ./Exchange/BuySell.jsx
- [ ] ./Exchange/MarketHistory.jsx
- [ ] ./Exchange/OrderBook.jsx
- [ ] ./Exchange/PriceAlert.jsx
- [ ] ./Exchange/MarketPicker.jsx
- [ ] ./Exchange/PriceStatWithLabel.jsx
- [ ] ./Exchange/TradingViewPriceChart.jsx
- [ ] ./Exchange/Personalize.jsx
- [ ] ./Exchange/MarketsContainer.jsx
- [ ] ./Exchange/MyMarkets.jsx
- [ ] ./Exchange/ExchangeHeaderCollateral.jsx
- [ ] ./Exchange/MyOpenOrders.jsx
- [ ] ./Exchange/Exchange.jsx
- [ ] ./Exchange/ExchangeInput.jsx
- [ ] ./Exchange/ConfirmOrderModal.jsx
- [ ] ./Exchange/PriceStat.jsx
- [ ] ./Exchange/QuoteSelectionModal.jsx
- [ ] ./Modal/SettleModal.jsx
- [ ] ./Modal/BaseModal.jsx
- [ ] ./Modal/QrcodeModal.jsx
- [ ] ./Modal/BrowserSupportModal.jsx
- [ ] ./Modal/SendModal.jsx
- [ ] ./Modal/ProposalModal.jsx
- [ ] ./Modal/IssueModal.jsx
- [ ] ./Modal/ReportModal.jsx
- [ ] ./Modal/BorrowModal.jsx
- [ ] ./Modal/DepositModal.jsx
- [ ] ./Modal/WithdrawModalNew.jsx
- [ ] ./Modal/ReserveAssetModal.jsx
- [ ] ./Layout/Header.jsx
- [ ] ./Layout/Incognito.jsx
- [ ] ./Layout/HeaderDropdown.jsx
- [ ] ./Layout/Footer.jsx
- [ ] ./LoginSelector.jsx
- [ ] ./Page404/Page404.jsx
- [ ] ./PrivateKeyView.jsx
- [ ] ./Help.jsx
- [ ] ./Registration/WalletRegistrationConfirm.jsx
- [ ] ./Registration/AccountHeaderSelection.jsx
- [ ] ./Registration/WalletHeaderSelection.jsx
- [ ] ./Registration/WalletBlockSelection.jsx
- [ ] ./Registration/RegistrationSelector.jsx
- [ ] ./Registration/WalletRegistration.jsx
- [ ] ./Registration/AccountRegistrationForm.jsx
- [ ] ./Registration/AccountRegistration.jsx
- [ ] ./Registration/AccountRegistrationConfirm.jsx
- [ ] ./Registration/WalletRegistrationForm.jsx
- [ ] ./Registration/AccountBlockSelection.jsx
- [ ] ./Blockchain/AssetPublishFeed.jsx
- [ ] ./Blockchain/FeesContainer.jsx
- [ ] ./Blockchain/Operation.jsx
- [ ] ./Blockchain/AssetOwnerUpdate.jsx
- [ ] ./Blockchain/Fees.jsx
- [ ] ./Blockchain/TransactionConfirm.jsx
- [ ] ./Blockchain/BlockContainer.jsx
- [ ] ./Blockchain/ProposedOperation.jsx
- [ ] ./Blockchain/Block.jsx
- [ ] ./Blockchain/MemoText.jsx
- [ ] ./Blockchain/BidCollateralOperation.jsx
- [ ] ./Blockchain/Transaction.jsx
- [ ] ./Blockchain/BlockTime.jsx
- [ ] ./Blockchain/Asset.jsx
- [ ] ./Settings/AccountsSettings.jsx
- [ ] ./Settings/ResetSettings.jsx
- [ ] ./Settings/WebsocketAddModal.jsx
- [ ] ./Settings/BackupFavorites.jsx
- [ ] ./Settings/RestoreSettings.jsx
- [ ] ./Settings/SettingsContainer.jsx
- [ ] ./Settings/RestoreFavorites.jsx
- [ ] ./Settings/SettingsEntry.jsx
- [ ] ./Settings/BackupSettings.jsx
- [ ] ./Settings/WalletSettings.jsx
- [ ] ./Settings/AccessSettings.jsx
- [ ] ./Settings/PasswordSettings.jsx
- [ ] ./Settings/Settings.jsx
- [ ] ./Icon/Icon.jsx
- [ ] ./Wallet/ExistingAccount.jsx
- [ ] ./Wallet/WalletCreate.jsx
- [ ] ./Wallet/PasswordConfirm.jsx
- [ ] ./Wallet/BalanceClaimAssetTotal.jsx
- [ ] ./Wallet/Backup.jsx
- [ ] ./Wallet/WalletChangePassword.jsx
- [ ] ./Wallet/Brainkey.jsx
- [ ] ./Wallet/WalletManager.jsx
- [ ] ./Wallet/BalanceClaimSelector.jsx
- [ ] ./Wallet/LoginTypeSelector.jsx
- [ ] ./Wallet/ImportKeys.jsx
- [ ] ./Wallet/WalletUnlockModal.jsx
- [ ] ./Wallet/WalletUnlockModalLib.jsx
- [ ] ./Wallet/BalanceClaimActive.jsx
- [ ] ./Wallet/BrainkeyInput.jsx
- [ ] ./Wallet/BalanceClaimByAsset.jsx
- [ ] ./Wallet/BackupBrainkey.jsx
- [ ] ./Utility/PriceText.jsx
- [ ] ./Utility/AssetSelector.jsx
- [ ] ./Utility/CryptoLinkFormatter.jsx
- [ ] ./Utility/EquivalentPrice.jsx
- [ ] ./Utility/FloatingDropdown.jsx
- [ ] ./Utility/FormattedFee.jsx
- [ ] ./Utility/AmountSelectorStyleGuide.jsx
- [ ] ./Utility/CopyButton.jsx
- [ ] ./Utility/Pulsate.jsx
- [ ] ./Utility/Tabs.jsx
- [ ] ./Utility/LinkToAssetById.jsx
- [ ] ./Utility/LinkToWitnessById.jsx
- [ ] ./Utility/FormattedPrice.jsx
- [ ] ./Utility/MarketChangeComponent.jsx
- [ ] ./Utility/BalanceComponent.jsx
- [ ] ./Utility/TimeAgo.jsx
- [ ] ./Utility/PriceInput.jsx
- [ ] ./Utility/FormattedTime.jsx
- [ ] ./Utility/TransitionWrapper.jsx
- [ ] ./Utility/ChainResolveComponents.jsx
- [ ] ./Utility/AccountName.jsx
- [ ] ./Utility/VestingBalance.jsx
- [ ] ./Utility/AssetSelect.jsx
- [ ] ./Utility/LoadingButton.jsx
- [ ] ./Utility/PaginatedList.jsx
- [ ] ./Utility/withWorthLessSettlementFlag.jsx
- [ ] ./Utility/AmountSelector.jsx
- [ ] ./Utility/BlockDate.jsx
- [ ] ./Utility/HelpContent.jsx
- [ ] ./Utility/MarketPrice.jsx
- [ ] ./Utility/AssetWrapper.jsx
- [ ] ./Utility/TranslateWithLinks.jsx
- [ ] ./Utility/AssetName.jsx
- [ ] ./Utility/FormattedAsset.jsx
- [ ] ./Utility/MarketLink.jsx
- [ ] ./Utility/LinkToAccountById.jsx
- [ ] ./Utility/DecimalChecker.jsx
- [ ] ./Utility/EquivalentValueComponent.jsx
- [ ] ./Utility/AssetInput.jsx
- [ ] ./Utility/MarketStatsCheck.jsx
- [ ] ./Utility/TotalBalanceValue.jsx
- [ ] ./Utility/BindToChainState.jsx
- [ ] ./DepositWithdraw/xbtsx/XbtsxGatewayDepositRequest.jsx
- [ ] ./DepositWithdraw/xbtsx/XbtsxWithdrawModal.jsx
- [ ] ./DepositWithdraw/xbtsx/XbtsxGateway.jsx
- [ ] ./DepositWithdraw/BitKapital.jsx
- [ ] ./DepositWithdraw/WithdrawModal.jsx
- [ ] ./DepositWithdraw/rudex/RuDexWithdrawModal.jsx
- [ ] ./DepositWithdraw/rudex/RuDexGateway.jsx
- [ ] ./DepositWithdraw/rudex/RuDexGatewayDepositRequest.jsx
- [ ] ./DepositWithdraw/OpenledgerGateway.jsx
- [ ] ./DepositWithdraw/gdex/GdexGatewayInfo.jsx
- [ ] ./DepositWithdraw/gdex/GdexAgreementModal.jsx
- [ ] ./DepositWithdraw/gdex/GdexGateway.jsx
- [ ] ./DepositWithdraw/gdex/GdexHistory.jsx
- [ ] ./DepositWithdraw/gdex/GdexWithdrawModal.jsx
- [ ] ./DepositWithdraw/citadel/CitadelGateway.jsx
- [ ] ./DepositWithdraw/citadel/WithdrawModalCitadel.jsx
- [ ] ./DepositWithdraw/citadel/CitadelBridgeDepositRequest.jsx
- [ ] ./DepositWithdraw/citadel/CitadelGatewayDepositRequest.jsx
- [ ] ./DepositWithdraw/blocktrades/WithdrawModalBlocktrades.jsx
- [ ] ./DepositWithdraw/blocktrades/OpenledgerGatewayDepositRequest.jsx
- [ ] ./DepositWithdraw/blocktrades/BlockTradesBridgeDepositRequest.jsx
- [ ] ./DepositWithdraw/winex/WinexGateway.jsx
- [ ] ./DepositWithdraw/winex/WinexGatewayRequest.jsx
- [ ] ./DepositWithdraw/winex/WinexWithdrawModal.jsx
- [ ] ./DepositWithdraw/winex/WinexRecentTransactions.jsx
- [ ] ./DepositWithdraw/openledger/WithdrawFiatOpenLedger.jsx
- [ ] ./DepositWithdraw/openledger/DepositFiatOpenLedger.jsx
- [ ] ./DepositWithdraw/openledger/OpenLedgerFiatDepositWithdrawal.jsx
- [ ] ./DepositWithdraw/openledger/OpenLedgerFiatTransactionHistory.jsx
- [ ] ./DepositWithdraw/bitspark/BitsparkGateway.jsx
- [ ] ./DepositWithdraw/bitspark/BitsparkGatewayDepositRequest.jsx
- [ ] ./DepositWithdraw/bitspark/BitsparkWithdrawModal.jsx
- [ ] ./Explorer/CommitteeMembers.jsx
- [ ] ./Explorer/AccountsContainer.jsx
- [ ] ./Explorer/Explorer.jsx
- [ ] ./Explorer/BlocktimeChart.jsx
- [ ] ./Explorer/Assets.jsx
- [ ] ./Explorer/TransactionChart.jsx
- [ ] ./Explorer/AssetsContainer.jsx
- [ ] ./Explorer/BlocksContainer.jsx
- [ ] ./Explorer/Accounts.jsx
- [ ] ./Explorer/Blocks.jsx
- [ ] ./Explorer/Witnesses.jsx
- [ ] ./BrowserNotifications/BrowserNotificationsContainer.jsx
- [ ] ./BrowserNotifications/BrowserNotifications.jsx
- [ ] ./PriceAlertNotifications.jsx
- [ ] ./QRAddressScanner.jsx

Contributor guide

Open the contributing guide

Research direction

Start by reviewing the listed JSX files, beginning with a small area such as Login or LoadingIndicator, and compare their current components with bitshares-style-guide usage. Track completed files in this issue; done means all listed components that can be replaced have been updated and checked off, with hours recorded separately.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, react
Domain
design, frontend
Issue type
Refactor
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.