Quick endorse with median (#3340)

* Tip endorse with median

* Disable quick on median === 0

packages/page-treasury/src/Overview/TipEndorse.tsx

@@ -3,9 +3,9 @@
 // of the Apache-2.0 license. See the LICENSE file for details.
 
 import BN from 'bn.js';
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { Button, InputAddress, InputBalance, Modal, TxButton } from '@polkadot/react-components';
-import { useToggle } from '@polkadot/react-hooks';
+import { useAccounts, useToggle } from '@polkadot/react-hooks';
 
 import { useTranslation } from '../translate';
 
@@ -19,9 +19,17 @@ interface Props {
 function TipEndorse ({ hash, isMember, median, members }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
   const [isOpen, toggleOpen] = useToggle();
+  const { allAccounts } = useAccounts();
   const [accountId, setAccountId] = useState<string | null>(null);
+  const [defaultId, setDefaultId] = useState<string | null>(null);
   const [value, setValue] = useState<BN | undefined>();
 
+  useEffect((): void => {
+    setDefaultId(
+      members.find((memberId) => allAccounts.includes(memberId)) || null
+    );
+  }, [allAccounts, members]);
+
   return (
     <>
       <Button
@@ -30,12 +38,15 @@ function TipEndorse ({ hash, isMember, median, members }: Props): React.ReactEle
         label={t<string>('Endorse')}
         onClick={toggleOpen}
       />
-      {/* <TxButton
+      <TxButton
+        accountId={defaultId}
         icon='fighter-jet'
         isDisabled={!isMember || median.isZero()}
+        isIcon
         params={[hash, median]}
         tx='treasury.tip'
-      /> */}
+        withoutLink
+      />
       {isOpen && (
         <Modal
           header={t<string>('Submit tip endorsement')}

packages/react-components/src/Button/Button.tsx

@@ -10,7 +10,7 @@ import styled from 'styled-components';
 import Icon from '../Icon';
 import Spinner from '../Spinner';
 
-function Button ({ children, className = '', icon, isBasic, isBusy, isCircular, isDisabled, isFull, isIcon, isSelected, label, onClick, onMouseEnter, onMouseLeave, tabIndex }: ButtonProps): React.ReactElement<ButtonProps> {
+function Button ({ children, className = '', icon, isBasic, isBusy, isCircular, isDisabled, isFull, isIcon, isSelected, label, onClick, onMouseEnter, onMouseLeave, tabIndex, withoutLink }: ButtonProps): React.ReactElement<ButtonProps> {
   const _onClick = useCallback(
     () => !(isBusy || isDisabled) && onClick && onClick(),
     [isBusy, isDisabled, onClick]
@@ -18,7 +18,7 @@ function Button ({ children, className = '', icon, isBasic, isBusy, isCircular,
 
   return (
     <button
-      className={`ui--Button${label ? ' hasLabel' : ''}${isBasic ? ' isBasic' : ''}${isCircular ? ' isCircular' : ''}${isFull ? ' isFull' : ''}${isIcon ? ' isIcon' : ''}${(isBusy || isDisabled) ? ' isDisabled' : ''}${isBusy ? ' isBusy' : ''}${!onClick ? ' isReadOnly' : ''}${isSelected ? ' isSelected' : ''} ${className}`}
+      className={`ui--Button${label ? ' hasLabel' : ''}${isBasic ? ' isBasic' : ''}${isCircular ? ' isCircular' : ''}${isFull ? ' isFull' : ''}${isIcon ? ' isIcon' : ''}${(isBusy || isDisabled) ? ' isDisabled' : ''}${isBusy ? ' isBusy' : ''}${!onClick ? ' isReadOnly' : ''}${isSelected ? ' isSelected' : ''}${withoutLink ? ' withoutLink' : ''} ${className}`}
       onClick={_onClick}
       onMouseEnter={onMouseEnter}
       onMouseLeave={onMouseLeave}

packages/react-components/src/Button/types.ts

@@ -24,6 +24,7 @@ export interface ButtonProps {
   onMouseLeave?: Button$Callback;
   tabIndex?: number;
   tooltip?: React.ReactNode;
+  withoutLink?: boolean;
 }
 
 export type DividerProps = BareProps;

packages/react-components/src/TxButton.tsx

@@ -14,7 +14,7 @@ import Button from './Button';
 import { StatusContext } from './Status';
 import { useTranslation } from './translate';
 
-function TxButton ({ accountId, className = '', extrinsic: propsExtrinsic, icon, isBasic, isBusy, isDisabled, isIcon, isUnsigned, label, onClick, onFailed, onSendRef, onStart, onSuccess, onUpdate, params, tooltip, tx, withSpinner }: Props): React.ReactElement<Props> {
+function TxButton ({ accountId, className = '', extrinsic: propsExtrinsic, icon, isBasic, isBusy, isDisabled, isIcon, isUnsigned, label, onClick, onFailed, onSendRef, onStart, onSuccess, onUpdate, params, tooltip, tx, withSpinner, withoutLink }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
   const { api } = useApi();
   const { queueExtrinsic } = useContext(StatusContext);
@@ -93,6 +93,7 @@ function TxButton ({ accountId, className = '', extrinsic: propsExtrinsic, icon,
       label={label || (isIcon ? '' : t<string>('Submit'))}
       onClick={_onSend}
       tooltip={tooltip}
+      withoutLink={withoutLink}
     />
   );
 }

packages/react-components/src/styles/index.ts

@@ -70,7 +70,8 @@ export default createGlobalStyle<Props>`
   }
 
   .ui--Button {
-    &:not(.isDisabled):not(.isIcon):not(.isBasic) {
+    &:not(.isDisabled):not(.isIcon):not(.isBasic),
+    &.withoutLink:not(.isDisabled) {
       .ui--Icon {
         background: ${getHighlight};
         color: #f5f5f4;
@@ -97,7 +98,8 @@ export default createGlobalStyle<Props>`
       color: #f5f5f4;
       text-shadow: none;
 
-      &:not(.isIcon) {
+      &:not(.isIcon),
+      &.withoutLink {
         .ui--Icon {
           color: inherit;
         }
@@ -106,7 +108,8 @@ export default createGlobalStyle<Props>`
   }
 
   .ui--Table td .ui--Button {
-    &:not(.isDisabled):not(.isIcon) {
+    &:not(.isDisabled):not(.isIcon),
+    &.withoutLink:not(.isDisabled) {
       .ui--Icon {
         background: transparent;
         color: ${getHighlight};

packages/react-components/src/styles/theme.ts

@@ -36,7 +36,7 @@ export default css`
         filter: brightness(110%);
       }
 
-      &.isIcon:not(.isDisabled):not(:hover) {
+      &.isIcon:not(.isDisabled):not(.withoutLink):not(:hover) {
         .ui--Icon {
           color: ${colorLink};
         }

packages/react-components/src/types.ts

@@ -69,6 +69,7 @@ export interface TxButtonProps extends TxProps {
   onSuccess?: TxCallback;
   onUpdate?: TxCallback;
   tooltip?: string;
+  withoutLink?: boolean;
   withSpinner?: boolean;
 }