Display camelCase names all-caps properly

3 files changed, 24 insertions, 2 deletions

diff --git a/packages/react-shared/src/components/markdown_section.tsx b/packages/react-shared/src/components/markdown_section.tsx
index 3b65b3075..09b214548 100644
--- a/packages/react-shared/src/components/markdown_section.tsx
+++ b/packages/react-shared/src/components/markdown_section.tsx
@@ -42,7 +42,7 @@ export class MarkdownSection extends React.Component<MarkdownSectionProps, Markd
         const { sectionName, markdownContent, headerSize, githubLink } = this.props as PropsWithDefaults;
 
         const id = utils.getIdFromName(sectionName);
-        const finalSectionName = utils.convertDashesToSpaces(sectionName);
+        const finalSectionName = utils.convertCamelCaseToSpaces(sectionName);
         return (
             <div
                 className="md-px1 sm-px2 overflow-hidden"
diff --git a/packages/react-shared/src/components/nested_sidebar_menu.tsx b/packages/react-shared/src/components/nested_sidebar_menu.tsx
index 4b1c2f365..c8bddb59a 100644
--- a/packages/react-shared/src/components/nested_sidebar_menu.tsx
+++ b/packages/react-shared/src/components/nested_sidebar_menu.tsx
@@ -45,7 +45,7 @@ export class NestedSidebarMenu extends React.Component<NestedSidebarMenuProps, N
     };
     public render(): React.ReactNode {
         const navigation = _.map(this.props.topLevelMenu, (menuItems: string[], sectionName: string) => {
-            const finalSectionName = utils.convertDashesToSpaces(sectionName);
+            const finalSectionName = utils.convertCamelCaseToSpaces(sectionName);
             if (this.props.shouldDisplaySectionHeaders) {
                 // tslint:disable-next-line:no-unused-variable
                 const id = utils.getIdFromName(sectionName);
diff --git a/packages/react-shared/src/utils/utils.ts b/packages/react-shared/src/utils/utils.ts
index 93c7e9f7b..6dd0b9993 100644
--- a/packages/react-shared/src/utils/utils.ts
+++ b/packages/react-shared/src/utils/utils.ts
@@ -33,6 +33,28 @@ export const utils = {
     convertDashesToSpaces(text: string): string {
         return text.replace(/-/g, ' ');
     },
+    convertCamelCaseToSpaces(text: string): string {
+        const charArray = _.map(text, (char, i) => {
+            const isNumber = !_.eq(_.parseInt(char), NaN);
+            const isPrevNumber = i !== 0 && !_.eq(_.parseInt(text[i - 1]), NaN);
+            if (isNumber && (i == 0 || isPrevNumber)) {
+                return char;
+            }
+            if (char === char.toUpperCase() && i !== 0) {
+                return ` ${char}`;
+            }
+            return char;
+        });
+        let finalText = charArray.join('');
+        const exceptions = { 'EIP ': 'E I P', 'ZRX ': 'Z R X', 'ERC ': 'E R C' };
+        _.each(exceptions, (spaced, normal) => {
+            console.log(finalText, spaced, normal);
+            if (_.includes(finalText, spaced)) {
+                finalText = finalText.replace(spaced, normal);
+            }
+        });
+        return finalText;
+    },
     getEtherScanLinkIfExists(
         addressOrTxHash: string,
         networkId: number,