Render fallback functions better

2 files changed, 9 insertions, 4 deletions

diff --git a/packages/react-docs/src/components/signature.tsx b/packages/react-docs/src/components/signature.tsx
index a690a1f03..aa174042c 100644
--- a/packages/react-docs/src/components/signature.tsx
+++ b/packages/react-docs/src/components/signature.tsx
@@ -19,12 +19,14 @@ export interface SignatureProps {
     callPath?: string;
     docsInfo: DocsInfo;
     isInPopover: boolean;
+    isFallback?: boolean;
 }
 
 const defaultProps = {
     shouldHideMethodName: false,
     shouldUseArrowSyntax: false,
     callPath: '',
+    isFallback: false,
 };
 
 export const Signature: React.SFC<SignatureProps> = (props: SignatureProps) => {
@@ -75,7 +77,7 @@ export const Signature: React.SFC<SignatureProps> = (props: SignatureProps) => {
     return (
         <span style={{ fontSize: 15 }}>
             {props.callPath}
-            {methodName}
+            {props.isFallback ? '' : methodName}
             {typeParameterIfExists}({hasMoreThenTwoParams && <br />}
             {paramStringArray})
             {props.returnType && (
diff --git a/packages/react-docs/src/components/signature_block.tsx b/packages/react-docs/src/components/signature_block.tsx
index 1ea0ea28c..fc4db10ad 100644
--- a/packages/react-docs/src/components/signature_block.tsx
+++ b/packages/react-docs/src/components/signature_block.tsx
@@ -50,6 +50,7 @@ export class SignatureBlock extends React.Component<SignatureBlockProps, Signatu
     public render(): React.ReactNode {
         const method = this.props.method;
 
+        const isFallback = (method as SolidityMethod).isFallback;
         return (
             <div
                 id={`${this.props.sectionName}-${method.name}`}
@@ -63,10 +64,11 @@ export class SignatureBlock extends React.Component<SignatureBlockProps, Signatu
                         {(method as TypescriptMethod).isStatic && this._renderChip('Static')}
                         {(method as SolidityMethod).isConstant && this._renderChip('Constant')}
                         {(method as SolidityMethod).isPayable && this._renderChip('Payable')}
+                        {isFallback && this._renderChip('Fallback', colors.lightGreenA700)}
                         <div style={{ lineHeight: 1.3 }}>
                             <AnchorTitle
                                 headerSize={HeaderSizes.H3}
-                                title={method.name}
+                                title={isFallback ? '' : method.name}
                                 id={`${this.props.sectionName}-${method.name}`}
                                 shouldShowAnchor={this.state.shouldShowAnchor}
                             />
@@ -84,6 +86,7 @@ export class SignatureBlock extends React.Component<SignatureBlockProps, Signatu
                         typeDefinitionByName={this.props.typeDefinitionByName}
                         docsInfo={this.props.docsInfo}
                         isInPopover={false}
+                        isFallback={isFallback}
                     />
                 </code>
                 {(method as TypescriptMethod).source && (
@@ -114,9 +117,9 @@ export class SignatureBlock extends React.Component<SignatureBlockProps, Signatu
             </div>
         );
     }
-    private _renderChip(text: string): React.ReactNode {
+    private _renderChip(text: string, backgroundColor: string = colors.lightBlueA700): React.ReactNode {
         return (
-            <div className="p1 mr1" style={styles.chip}>
+            <div className="p1 mr1" style={{ ...styles.chip, backgroundColor }}>
                 {text}
             </div>
         );