ui/component/appStorageVisualization/view.jsx

@@ -1,5 +1,6 @@
 // @flow
 import * as React from 'react';
+import I18nMessage from 'component/i18nMessage';
 
 type Props = {
   // --- select ---
@@ -18,7 +19,7 @@ function StorageViz(props: Props) {
     return (
       <div className={'storage__wrapper'}>
         <div className={'storage__bar'}>
-          <div className="help">Cannot get disk space information.</div>
+          <div className="help">{__('Cannot get disk space information.')}</div>
         </div>
       </div>
     );
@@ -64,29 +65,57 @@ function StorageViz(props: Props) {
         <div className={'storage__legend-item'}>
           <div className={'storage__legend-item-swatch storage__legend-item-swatch--private'} />
           <div className={'storage__legend-item-label'}>
-            <label>Publishes</label>
+            <label>{__('Publishes --[legend, storage category]--')}</label>
             <div className={'help'}>{`${getGB(privateBlobSpace)} GB`}</div>
           </div>
         </div>
         <div className={'storage__legend-item'}>
           <div className={'storage__legend-item-swatch storage__legend-item-swatch--auto'} />
           <div className={'storage__legend-item-label'}>
-            <label>Auto Hosting</label>
+            <label>{__('Auto Hosting --[legend, storage category]--')}</label>
             <div className={'help'}>
-              {autoHostingLimit === 0 ? __('Disabled') : `${getGB(autoBlobSpace)} of ${getGB(autoHostingLimit)} GB`}
+              {autoHostingLimit === 0 ? (
+                __('Disabled')
+              ) : (
+                <I18nMessage
+                  tokens={{
+                    spaceUsed: getGB(autoBlobSpace),
+                    limit: getGB(autoHostingLimit),
+                  }}
+                >
+                  %spaceUsed% of %limit% GB
+                </I18nMessage>
+              )}
+              {
+                <I18nMessage
+                  tokens={{
+                    spaceUsed: getGB(viewBlobSpace),
+                    limit: viewHostingLimit !== 0 ? getGB(viewHostingLimit) : getGB(viewFree),
+                  }}
+                >
+                  %spaceUsed% of %limit% Free GB
+                </I18nMessage>
+              }
             </div>
           </div>
         </div>
         <div className={'storage__legend-item'}>
           <div className={'storage__legend-item-swatch storage__legend-item-swatch--viewed'} />
           <div className={'storage__legend-item-label'}>
-            <label>View Hosting</label>
+            <label>{__('View Hosting --[legend, storage category]--')}</label>
             <div className={'help'}>
-              {viewHostingLimit === 1
+              {viewHostingLimit === 1 ? (
-                ? __('Disabled')
+                __('Disabled')
-                : `${getGB(viewBlobSpace)} of ${
+              ) : (
-                    viewHostingLimit !== 0 ? getGB(viewHostingLimit) : `${getGB(viewFree)} Free`
+                <I18nMessage
-                  } GB`}
+                  tokens={{
+                    spaceUsed: getGB(viewBlobSpace),
+                    limit: viewHostingLimit !== 0 ? getGB(viewHostingLimit) : getGB(viewFree),
+                  }}
+                >
+                  %spaceUsed% of %limit% Free GB
+                </I18nMessage>
+              )}
             </div>
           </div>
         </div>
@@ -94,7 +123,7 @@ function StorageViz(props: Props) {
           <div className={'storage__legend-item'}>
             <div className={'storage__legend-item-swatch storage__legend-item-swatch--free'} />
             <div className={'storage__legend-item-label'}>
-              <label>Free</label>
+              <label>{__('Free --[legend, unused disk space]--')}</label>
               <div className={'help'}>{`${getGB(unallocFree)} GB`}</div>
             </div>
           </div>

ui/component/hostingSplashCustom/view.jsx

@@ -13,15 +13,11 @@ type Props = {
 function HostingSplashCustom(props: Props) {
   const { handleNextPage, handleGoBack } = props;
 
-  function handleSubmit() {
-    handleNextPage();
-  }
-
   return (
     <section className="main--contained">
       <div className={'first-run__wrapper'}>
         <SettingStorage isWelcome />
-        <Form onSubmit={handleSubmit} className="section__body">
+        <Form onSubmit={handleNextPage} className="section__body">
           <div className={'card__actions'}>
             <Button button="primary" label={__(`Let's go`)} type="submit" />
             <Button button="link" label={__(`Go back`)} onClick={handleGoBack} />

ui/component/settingStorage/view.jsx

@@ -53,7 +53,7 @@ export default function SettingStorage(props: Props) {
               title={__('Enable Data Hosting')}
               subtitle={
                 <React.Fragment>
-                  {__('Help improve the P2P data network (and make LBRY happy) by hosting data.')}{' '}
+                  {__('Help improve the P2P data network (and make LBRY users happy) by hosting data.')}
                 </React.Fragment>
               }
               footer={<AppStorageViz />}
@@ -66,7 +66,7 @@ export default function SettingStorage(props: Props) {
               disabled={!saveBlobs}
               subtitle={
                 <React.Fragment>
-                  {__("View History Hosting lets you choose how much storage to use helping content you've consumed.")}{' '}
+                  {__("View History Hosting lets you choose how much storage to use hosting content you've consumed.")}{' '}
                   <Button button="link" label={__('Learn more')} href="https://lbry.com/faq/host-content" />
                 </React.Fragment>
               }
@@ -79,7 +79,7 @@ export default function SettingStorage(props: Props) {
               disabled={!saveBlobs}
               subtitle={
                 <React.Fragment>
-                  {__('Automatic Hosting downloads a small slice of content currently active on the network.')}{' '}
+                  {__('Automatic Hosting downloads a small portion of content active on the network.')}{' '}
                   <Button button="link" label={__('Learn more')} href="https://lbry.com/faq/host-content" />
                 </React.Fragment>
               }

ui/component/settingViewHosting/view.jsx

@@ -24,6 +24,10 @@ type Props = {
   diskSpace: DiskSpace,
 };
 
+const TWENTY_PERCENT = 0.2;
+const TEN_PERCENT = 0.1;
+const MINIMUM_VIEW_SETTING = '0.01';
+
 function SettingViewHosting(props: Props) {
   const {
     diskSpace,
@@ -41,8 +45,8 @@ function SettingViewHosting(props: Props) {
   const freeMB = diskSpace && Math.floor(Number(diskSpace.free) / 1024);
   const getGB = (val) => (Number(val) / 1024).toFixed(2);
   const recommendedSpace =
-    freeMB > totalMB * 0.2 // plenty of space?
+    freeMB > totalMB * TWENTY_PERCENT // plenty of space?
-      ? Math.ceil(Number(getGB(totalMB * 0.1))) // 10% of total
+      ? Math.ceil(Number(getGB(totalMB * TEN_PERCENT))) // 10% of total
       : Math.ceil(Number(getGB(viewBlobSpace))); // current amount to avoid deleting
   // daemon settings come in as 'number', but we manage them as 'String'.
   const [contentBlobSpaceLimitGB, setContentBlobSpaceLimit] = React.useState(
@@ -55,7 +59,7 @@ function SettingViewHosting(props: Props) {
     if (gb === '') {
       setContentBlobSpaceLimit('');
     } else if (gb === '0') {
-      setContentBlobSpaceLimit('0.01'); // setting 0 means unlimited.
+      setContentBlobSpaceLimit(MINIMUM_VIEW_SETTING); // setting 0 means unlimited.
     } else {
       if (isTrulyANumber(Number(gb))) {
         setContentBlobSpaceLimit(gb);
@@ -69,7 +73,7 @@ function SettingViewHosting(props: Props) {
     } else {
       await setDaemonSetting(
         DAEMON_SETTINGS.BLOB_STORAGE_LIMIT_MB,
-        String(contentBlobSpaceLimitGB === '0.01' ? '1' : convertGbToMbStr(contentBlobSpaceLimitGB))
+        contentBlobSpaceLimitGB === MINIMUM_VIEW_SETTING ? '1' : convertGbToMbStr(contentBlobSpaceLimitGB)
       );
     }
     await cleanBlobs();
@@ -152,7 +156,7 @@ function SettingViewHosting(props: Props) {
           onWheel={(e) => e.preventDefault()}
           label={__(`View Hosting Limit (GB)`)}
           onChange={(e) => handleContentLimitChange(e.target.value)}
-          value={Number(contentBlobSpaceLimitGB) <= Number('0.01') ? '0' : contentBlobSpaceLimitGB}
+          value={Number(contentBlobSpaceLimitGB) <= Number(MINIMUM_VIEW_SETTING) ? '0' : contentBlobSpaceLimitGB}
         />
       </div>
     </>