Add relevant icons to top-level buttons (#1618)

* Add relevant icons to top-level buttons

* Add some missing icons

* Add some missing icons

* Add missing icons

packages/app-123code/src/Transfer.tsx

@@ -43,6 +43,7 @@ export default class Transfer extends TxComponent<Props, State> {
               <TxButton
                 accountId={accountId}
                 label='make transfer'
+                labelIcon='send'
                 params={[recipientId, amount]}
                 tx='balances.transfer'
                 ref={this.button}

packages/app-accounts/src/Overview.tsx

@@ -54,18 +54,21 @@ function Overview ({ accounts = [], onStatusChange, t }: Props): React.ReactElem
           <Button
             isPrimary
             label={t('Add account')}
+            labelIcon='add'
             onClick={_toggleCreate}
           />
           <Button.Or />
           <Button
             isPrimary
             label={t('Restore JSON')}
+            labelIcon='sync'
             onClick={_toggleImport}
           />
           <Button.Or />
           <Button
             isPrimary
             label={t('Add via Qr')}
+            labelIcon='qrcode'
             onClick={_toggleQr}
           />
           {isLedger() && (
@@ -74,6 +77,7 @@ function Overview ({ accounts = [], onStatusChange, t }: Props): React.ReactElem
               <Button
                 isPrimary
                 label={t('Query Ledger')}
+                labelIcon='question'
                 onClick={queryLedger}
               />
             </>

packages/app-accounts/src/Vanity/index.tsx

@@ -103,6 +103,11 @@ class VanityApp extends TxComponent<Props, State> {
               ? t('Stop generation')
               : t('Start generation')
           }
+          labelIcon={
+            isRunning
+              ? 'stop'
+              : 'sign-in'
+          }
           ref={this.button}
         />
       </Button.Group>

packages/app-accounts/src/modals/Backup.tsx

@@ -54,6 +54,7 @@ class Backup extends TxComponent<Props, State> {
           <Button
             isNegative
             label={t('Cancel')}
+            labelIcon='cancel'
             onClick={onClose}
           />
           <Button.Or />
@@ -61,6 +62,7 @@ class Backup extends TxComponent<Props, State> {
             isDisabled={!isPassValid}
             isPrimary
             label={t('Download')}
+            labelIcon='download'
             onClick={this.doBackup}
             ref={this.button}
           />

packages/app-accounts/src/modals/ChangePass.tsx

@@ -57,6 +57,7 @@ class ChangePass extends TxComponent<Props, State> {
           <Button
             isNegative
             label={t('Cancel')}
+            labelIcon='cancel'
             onClick={onClose}
           />
           <Button.Or />
@@ -64,6 +65,7 @@ class ChangePass extends TxComponent<Props, State> {
             isDisabled={!isNewValid || !isOldValid}
             isPrimary
             label={t('Change')}
+            labelIcon='sign-in'
             onClick={this.doChange}
             ref={this.button}
           />

packages/app-accounts/src/modals/Create.tsx

@@ -135,6 +135,7 @@ class Create extends React.PureComponent<Props, State> {
         <Button.Group>
           <Button
             label={t('Cancel')}
+            labelIcon='cancel'
             onClick={this.onDiscard}
           />
           <Button.Or />
@@ -142,6 +143,7 @@ class Create extends React.PureComponent<Props, State> {
             isDisabled={!isValid}
             isPrimary
             label={t('Save')}
+            labelIcon='save'
             onClick={this.onShowWarning}
           />
         </Button.Group>
@@ -266,12 +268,14 @@ class Create extends React.PureComponent<Props, State> {
             <Button
               isNegative
               label={t('Cancel')}
+              labelIcon='cancel'
               onClick={this.onHideWarning}
             />
             <Button.Or />
             <Button
               isPrimary
               label={t('Create and backup account')}
+              labelIcon='sign-in'
               onClick={this.onCommit}
             />
           </Button.Group>

packages/app-accounts/src/modals/Import.tsx

@@ -49,6 +49,7 @@ class Import extends TxComponent<Props, State> {
           <Button.Group>
             <Button
               label={t('Cancel')}
+              labelIcon='cancel'
               onClick={onClose}
             />
             <Button.Or />
@@ -57,6 +58,7 @@ class Import extends TxComponent<Props, State> {
               isPrimary
               onClick={this.onSave}
               label={t('Restore')}
+              labelIcon='sync'
               ref={this.button}
             />
           </Button.Group>

packages/app-accounts/src/modals/Qr.tsx

@@ -87,6 +87,7 @@ function QrModal ({ className, onClose, onStatusChange, t }: Props): React.React
         <Button.Group>
           <Button
             label={t('Cancel')}
+            labelIcon='cancel'
             onClick={onClose}
           />
           <Button.Or />
@@ -95,6 +96,7 @@ function QrModal ({ className, onClose, onStatusChange, t }: Props): React.React
             isPrimary
             onClick={_onSave}
             label={t('Create')}
+            labelIcon='sign-in'
           />
         </Button.Group>
       </Modal.Actions>

packages/app-accounts/src/modals/Transfer.tsx

@@ -115,6 +115,7 @@ class Transfer extends React.PureComponent<Props, State> {
           <Button
             isNegative
             label={t('Cancel')}
+            labelIcon='cancel'
             onClick={onClose}
           />
           <Button.Or />
@@ -124,6 +125,7 @@ class Transfer extends React.PureComponent<Props, State> {
             isDisabled={!hasAvailable}
             isPrimary
             label={t('Make Transfer')}
+            labelIcon='send'
             onStart={onClose}
             withSpinner={false}
           />

packages/app-address-book/src/Overview.tsx

@@ -40,6 +40,7 @@ class Overview extends React.PureComponent<Props, State> {
             <Button
               isPrimary
               label={t('Add contact')}
+              labelIcon='add'
               onClick={this.toggleCreate}
             />
           </Button.Group>

packages/app-address-book/src/modals/Create.tsx

@@ -61,6 +61,7 @@ class Create extends React.PureComponent<Props, State> {
             isNegative
             onClick={this.onDiscard}
             label={t('Cancel')}
+            labelIcon='cancel'
           />
           <Button.Or />
           <Button
@@ -68,6 +69,7 @@ class Create extends React.PureComponent<Props, State> {
             isPrimary
             onClick={this.onCommit}
             label={t('Save')}
+            labelIcon='save'
           />
         </Button.Group>
       </Modal.Actions>

packages/app-claims/src/index.tsx

@@ -137,6 +137,7 @@ class App extends TxModal<Props, State> {
                     isPrimary
                     onClick={this.setStep(Step.Sign)}
                     label={t('Continue')}
+                    labelIcon='sign-in'
                   />
                 </Button.Group>
               )}
@@ -176,6 +177,7 @@ class App extends TxModal<Props, State> {
                       isPrimary
                       onClick={this.setStep(Step.Claim)}
                       label={t('Confirm claim')}
+                      labelIcon='sign-in'
                     />
                   </Button.Group>
                 )}

packages/app-contracts/src/Codes/Add.tsx

@@ -68,6 +68,7 @@ class Add extends ContractModal<Props, State> {
           isDisabled={!isValid}
           isPrimary
           label={t('Save')}
+          labelIcon='save'
           onClick={this.onSave}
           ref={this.button}
         />

packages/app-contracts/src/Codes/Upload.tsx

@@ -76,6 +76,7 @@ class Upload extends ContractModal<Props, State> {
           isDisabled={!isValid}
           isPrimary
           label={t('Upload')}
+          labelIcon='upload'
           onClick={this.toggleBusy(true)}
           onSuccess={this.onSuccess}
           onFailed={this.toggleBusy(false)}

packages/app-contracts/src/Contracts/Add.tsx

@@ -81,6 +81,7 @@ class Add extends ContractModal<Props, State> {
           isDisabled={!isValid}
           isPrimary
           label={t('Save')}
+          labelIcon='save'
           onClick={this.onAdd}
           ref={this.button}
         />

packages/app-contracts/src/Contracts/Call.tsx

@@ -192,6 +192,7 @@ class Call extends TxComponent<Props, State> {
           isNegative
           onClick={this.onClose}
           label={t('Cancel')}
+          labelIcon='cancel'
         />
         <Button.Or />
         <TxButton
@@ -199,6 +200,7 @@ class Call extends TxComponent<Props, State> {
           isDisabled={!isValid}
           isPrimary
           label={t('Call')}
+          labelIcon='sign-in'
           onClick={this.toggleBusy}
           onFailed={this.toggleBusy}
           onSuccess={this.toggleBusy}

packages/app-contracts/src/Deploy.tsx

@@ -205,6 +205,7 @@ class Deploy extends ContractModal<Props, State> {
           isDisabled={!isValid}
           isPrimary
           label={t('Deploy')}
+          labelIcon='cloud upload'
           onClick={this.toggleBusy(true)}
           onFailed={this.toggleBusy(false)}
           onSuccess={this.onSuccess}

packages/app-contracts/src/Modal.tsx

@@ -172,6 +172,7 @@ class ContractModal<P extends ContractModalProps, S extends ContractModalState>
           isNegative
           onClick={this.onClose}
           label={t('Cancel')}
+          labelIcon='cancel'
         />
         <Button.Or />
       </>

packages/app-contracts/src/RemoveABI.tsx

@@ -46,12 +46,14 @@ function RemoveABI ({ code, onClose, onRemove, t }: Props): React.ReactElement<P
             isNegative
             onClick={onClose}
             label={t('Cancel')}
+            labelIcon='cancel'
           />
           <Button.Or />
           <Button
             isPrimary
             onClick={_onRemove}
             label={t('Remove')}
+            labelIcon='trash'
           />
         </Button.Group>
       </Modal.Actions>

packages/app-democracy/src/Overview/Seconding.tsx

@@ -45,6 +45,7 @@ class Seconding extends React.PureComponent<Props, State> {
           <Button
             isPrimary
             label={t('Second proposal')}
+            labelIcon='toggle off'
             onClick={this.toggleSeconding}
           />
         </div>
@@ -84,6 +85,7 @@ class Seconding extends React.PureComponent<Props, State> {
               isNegative
               onClick={this.toggleSeconding}
               label={t('Cancel')}
+              labelIcon='cancel'
             />
             <Button.Or />
             <TxButton
@@ -91,6 +93,7 @@ class Seconding extends React.PureComponent<Props, State> {
               isDisabled={!accountId || isDepositor}
               isPrimary
               label={t('Second')}
+              labelIcon='sign-in'
               onClick={this.toggleSeconding}
               params={[proposalId]}
               tx='democracy.second'

packages/app-democracy/src/Overview/Voting.tsx

@@ -58,6 +58,7 @@ class Voting extends React.PureComponent<Props, State> {
           <Button
             isPrimary
             label={t('Vote')}
+            labelIcon='check'
             onClick={this.toggleVoting}
           />
         </div>
@@ -102,6 +103,7 @@ class Voting extends React.PureComponent<Props, State> {
               isNegative
               onClick={this.toggleVoting}
               label={t('Cancel')}
+              labelIcon='cancel'
             />
             <Button.Or />
             <TxButton
@@ -109,6 +111,7 @@ class Voting extends React.PureComponent<Props, State> {
               isDisabled={!accountId}
               isPrimary
               label={t('Vote')}
+              labelIcon='check'
               onClick={this.toggleVoting}
               params={[referendumId, voteValue]}
               tx='democracy.vote'

packages/app-democracy/src/Propose.tsx

@@ -66,6 +66,7 @@ class Propose extends TxComponent<Props, State> {
           <TxButton
             accountId={accountId}
             label={t('Submit Proposal')}
+            labelIcon='sign-in'
             tx='democracy.propose'
             isDisabled={!isValid}
             params={[

packages/app-extrinsics/src/Selection.tsx

@@ -79,6 +79,7 @@ class Selection extends TxComponent<Props, State> {
             isDisabled={!isValidUnsigned}
             isUnsigned
             label={t('Submit Unsigned')}
+            labelIcon='sign-in'
             extrinsic={extrinsic}
           />
           <Button.Or />
@@ -87,6 +88,7 @@ class Selection extends TxComponent<Props, State> {
             isDisabled={!isValid}
             isPrimary
             label={t('Submit Transaction')}
+            labelIcon='sign-in'
             extrinsic={extrinsic}
             ref={this.button}
           />

packages/app-generic-asset/src/Assets.tsx

@@ -39,6 +39,7 @@ class Assets extends React.PureComponent<Props, State> {
             <Button
               isPrimary
               label={t('Register Asset')}
+              labelIcon='registered'
               onClick={this.toggleCreate}
             />
           </Button.Group>

packages/app-generic-asset/src/Transfer.tsx

@@ -98,6 +98,7 @@ class Transfer extends React.PureComponent<Props> {
           isDisabled={!hasAvailable}
           isPrimary
           label={t('Make Transfer')}
+          labelIcon='send'
           onStart={onClose}
           withSpinner={false}
         />

packages/app-generic-asset/src/modals/Create.tsx

@@ -57,6 +57,7 @@ class Create extends React.PureComponent<Props, State> {
             isNegative
             onClick={this.onDiscard}
             label={t('Cancel')}
+            labelIcon='cancel'
           />
           <Button.Or />
           <Button
@@ -64,6 +65,7 @@ class Create extends React.PureComponent<Props, State> {
             isPrimary
             onClick={this.onCommit}
             label={t('Register')}
+            labelIcon='registered'
           />
         </Button.Group>
       </Modal.Actions>

packages/app-settings/src/Developer.tsx

@@ -78,6 +78,7 @@ class Developer extends React.PureComponent<Props, State> {
             isNegative
             onClick={this.clearTypes}
             label={t('Reset')}
+            labelIcon='sync'
           />
           <Button.Or />
           <Button
@@ -85,6 +86,7 @@ class Developer extends React.PureComponent<Props, State> {
             isPrimary
             onClick={this.saveDeveloper}
             label={t('Save')}
+            labelIcon='save'
           />
         </Button.Group>
       </div>

packages/app-settings/src/General.tsx

@@ -121,6 +121,7 @@ function General ({ className, t }: Props): React.ReactElement<Props> {
               ? t('Save & Reload')
               : t('Save')
           }
+          labelIcon='save'
         />
       </Button.Group>
     </div>

packages/app-staking/src/Actions/Account/BondExtra.tsx

@@ -76,6 +76,7 @@ class BondExtra extends TxComponent<Props, State> {
               isNegative
               onClick={onClose}
               label={t('Cancel')}
+              labelIcon='cancel'
             />
             <Button.Or />
             <TxButton
@@ -83,6 +84,7 @@ class BondExtra extends TxComponent<Props, State> {
               isDisabled={!canSubmit}
               isPrimary
               label={t('Bond more')}
+              labelIcon='sign-in'
               onClick={onClose}
               extrinsic={extrinsic}
               ref={this.button}

packages/app-staking/src/Actions/Account/Nominate.tsx

@@ -59,6 +59,7 @@ class Nominate extends React.PureComponent<Props, State> {
             isNegative
             onClick={onClose}
             label={t('Cancel')}
+            labelIcon='cancel'
           />
           <Button.Or />
           <TxButton
@@ -68,6 +69,7 @@ class Nominate extends React.PureComponent<Props, State> {
             onClick={onClose}
             params={[nominees]}
             label={t('Nominate')}
+            labelIcon='hand paper outline'
             tx='staking.nominate'
           />
         </Button.Group>

packages/app-staking/src/Actions/Account/SetControllerAccount.tsx

@@ -54,6 +54,7 @@ class SetControllerAccount extends TxComponent<Props, State> {
               isNegative
               onClick={onClose}
               label={t('Cancel')}
+              labelIcon='cancel'
             />
             <Button.Or />
             <TxButton
@@ -61,6 +62,7 @@ class SetControllerAccount extends TxComponent<Props, State> {
               isDisabled={!canSubmit}
               isPrimary
               label={t('Set controller')}
+              labelIcon='sign-in'
               onClick={onClose}
               params={[controllerId]}
               tx='staking.setController'

packages/app-staking/src/Actions/Account/SetRewardDestination.tsx

@@ -49,6 +49,7 @@ class SetRewardDestination extends TxComponent<Props, State> {
               isNegative
               onClick={onClose}
               label={t('Cancel')}
+              labelIcon='cancel'
             />
             <Button.Or />
             <TxButton
@@ -56,6 +57,7 @@ class SetRewardDestination extends TxComponent<Props, State> {
               isDisabled={!canSubmit}
               isPrimary
               label={t('Set reward destination')}
+              labelIcon='sign-in'
               onClick={onClose}
               params={[destination]}
               tx={'staking.setPayee'}

packages/app-staking/src/Actions/Account/SetSessionAccount.tsx

@@ -66,6 +66,7 @@ class SetSessionKey extends React.PureComponent<Props, State> {
               isNegative
               onClick={onClose}
               label={t('Cancel')}
+              labelIcon='cancel'
             />
             <Button.Or />
             <TxButton
@@ -73,6 +74,7 @@ class SetSessionKey extends React.PureComponent<Props, State> {
               isDisabled={hasError}
               isPrimary
               label={t('Set Session Key')}
+              labelIcon='sign-in'
               onClick={onClose}
               params={
                 isSubstrateV2

packages/app-staking/src/Actions/Account/Unbond.tsx

@@ -73,6 +73,7 @@ class Unbond extends TxComponent<Props, State> {
               isNegative
               onClick={onClose}
               label={t('Cancel')}
+              labelIcon='cancel'
             />
             <Button.Or />
             <TxButton
@@ -80,6 +81,7 @@ class Unbond extends TxComponent<Props, State> {
               isDisabled={!canSubmit}
               isPrimary
               label={t('Unbond')}
+              labelIcon='sign-out'
               onClick={onClose}
               params={[maxUnbond]}
               tx='staking.unbond'

packages/app-staking/src/Actions/Account/Validate.tsx

@@ -94,6 +94,7 @@ class Validate extends TxComponent<Props, State> {
           <Button
             isNegative
             label={t('Cancel')}
+            labelIcon='cancel'
             onClick={onClose}
           />
           <Button.Or />
@@ -102,6 +103,7 @@ class Validate extends TxComponent<Props, State> {
             isDisabled={!!unstakeThresholdError}
             isPrimary
             label={t('Validate')}
+            labelIcon='check circle outline'
             onClick={onClose}
             params={[
               isSubstrateV2

packages/app-staking/src/Actions/Account/index.tsx

@@ -365,6 +365,7 @@ class Account extends React.PureComponent<Props, State> {
               ? t('Stop Nominating')
               : t('Stop Validating')
           }
+          labelIcon='stop'
           key='stop'
           tx='staking.chill'
         />
@@ -377,6 +378,7 @@ class Account extends React.PureComponent<Props, State> {
             key='set'
             onClick={this.toggleSetSessionAccount}
             label={t('Set Session Key')}
+            labelIcon='sign-in'
           />
         );
       } else {
@@ -386,6 +388,7 @@ class Account extends React.PureComponent<Props, State> {
             key='validate'
             onClick={this.toggleValidate}
             label={t('Validate')}
+            labelIcon='check circle outline'
           />
         );
       }
@@ -397,6 +400,7 @@ class Account extends React.PureComponent<Props, State> {
           key='nominate'
           onClick={this.toggleNominate}
           label={t('Nominate')}
+          labelIcon='hand paper outline'
         />
       );
     }

packages/app-staking/src/Actions/NewStake.tsx

@@ -66,6 +66,7 @@ class NewStake extends TxComponent<Props, State> {
               isNegative
               onClick={onClose}
               label={t('Cancel')}
+              labelIcon='cancel'
             />
             <Button.Or />
             <TxButton
@@ -73,6 +74,7 @@ class NewStake extends TxComponent<Props, State> {
               isDisabled={!canSubmit}
               isPrimary
               label={t('Bond')}
+              labelIcon='sign-in'
               onClick={onClose}
               extrinsic={extrinsic}
               ref={this.button}

packages/app-sudo/src/SetKey.tsx

@@ -65,6 +65,7 @@ class SetKey extends React.PureComponent<Props, State> {
                   isDisabled={!isMine || sudoKey === selected}
                   isPrimary
                   label={t('Reassign')}
+                  labelIcon='sign-in'
                   params={[selected]}
                   tx='sudo.setKey'
                 />

packages/app-sudo/src/Sudo.tsx

@@ -47,6 +47,7 @@ class Propose extends TxComponent<Props, State> {
             <TxButton
               accountId={sudoKey}
               label={t('Submit Sudo')}
+              labelIcon='sign-in'
               tx='sudo.sudo'
               isDisabled={!method || !isValid}
               params={method ? [createType('Proposal', method)] : []}

packages/app-toolbox/src/Rpc/Selection.tsx

@@ -64,7 +64,9 @@ class Selection extends TxComponent<Props, State> {
             isDisabled={!isValid}
             isPrimary
             onClick={this.onSubmit}
+
             label={t('Submit RPC call')}
+            labelIcon='sign-in'
             ref={this.button}
           />
         </Button.Group>

packages/app-toolbox/src/Sign.tsx

@@ -102,6 +102,7 @@ class Sign extends React.PureComponent<Props, State> {
               isPrimary
               onClick={this.toggleUnlock}
               label={t('Unlock account')}
+              labelIcon='unlock'
             />
           </Button.Group>
         </div>

packages/app-toolbox/src/Unlock.tsx

@@ -66,12 +66,14 @@ class Unlock extends TxComponent<Props, State> {
             isNegative
             onClick={this.onCancel}
             label={t('Cancel')}
+            labelIcon='cancel'
           />
           <Button.Or />
           <Button
             isPrimary
             onClick={this.onUnlock}
             label={t('Unlock')}
+            labelIcon='unlock'
             ref={this.button}
           />
         </Button.Group>

packages/app-treasury/src/Settings.tsx

@@ -117,6 +117,7 @@ class Settings extends TxComponent<Props, State> {
               <TxButton
                 accountId={accountId}
                 label={t('Submit')}
+                labelIcon='sign-in'
                 tx='treasury.configure'
                 params={[
                   proposalBond.toString(),
@@ -144,6 +145,7 @@ class Settings extends TxComponent<Props, State> {
               <TxButton
                 accountId={accountId}
                 label={t('Submit')}
+                labelIcon='sign-in'
                 tx='treasury.setPot'
                 params={[pot]}
               />

packages/react-components/src/Forget.tsx

@@ -114,12 +114,14 @@ function Forget (props: Props): React.ReactElement<Props> {
             isNegative
             onClick={onClose}
             label={t('Cancel')}
+            labelIcon='cancel'
           />
           <Button.Or />
           <Button
             isPrimary
             onClick={onForget}
             label={t('Forget')}
+            labelIcon='trash'
           />
         </Button.Group>
       </Modal.Actions>

packages/react-components/src/Messages.tsx

@@ -52,6 +52,7 @@ function renderMessage (props: Props, index: number): React.ReactNode {
       isDisabled={!onSelectProp}
       onClick={onSelect(props, index)}
       isPrimary={!!onSelectProp}
+      labelIcon='info'
     >
       {name}
       (

packages/react-components/src/TxModal.tsx

@@ -157,6 +157,7 @@ export default class TxModal<P extends TxModalProps, S extends TxModalState> ext
         isDisabled={this.isDisabled()}
         isPrimary
         label={this.submitLabel()}
+        labelIcon='sign-in'
         onClick={this.onSubmit}
         onFailed={this.onFailed}
         onSuccess={this.onSuccess}
@@ -176,6 +177,7 @@ export default class TxModal<P extends TxModalProps, S extends TxModalState> ext
           isNegative
           onClick={this.hideModal}
           label={t('Cancel')}
+          labelIcon='cancel'
         />
         <Button.Or />
       </>

packages/react-params/src/Param/Vector.tsx

@@ -102,12 +102,14 @@ class Vector extends React.PureComponent<Props, State> {
           isPrimary
           onClick={this.rowAdd}
           label={t('Add item')}
+          labelIcon='add'
         />
         <Button
           isDisabled={values.length === 1}
           isNegative
           onClick={this.rowRemove}
           label={t('Remove item')}
+          labelIcon='minus'
         />
       </div>
     );

packages/react-signer/src/Modal.tsx

@@ -156,6 +156,7 @@ class Signer extends React.PureComponent<Props, State> {
             }
             tabIndex={3}
             label={t('Cancel')}
+            labelIcon='cancel'
           />
           {(!isQrVisible || !isQrScanning) && (
             <>
@@ -181,6 +182,15 @@ class Signer extends React.PureComponent<Props, State> {
                           ? t('Sign via Qr')
                           : t('Sign and Submit')
                 }
+                labelIcon={
+                  isQrVisible
+                    ? 'qrcode'
+                    : currentItem.isUnsigned
+                      ? 'sign-in'
+                      : isExternal
+                        ? 'qrcode'
+                        : 'sign-in'
+                }
               />
             </>
           )}