feat: add sharing statistics on the homepage

public/locales/en/status.json

@@ -10,6 +10,7 @@
   "countMore": "...and {count} more",
   "StatusConnected": {
     "repoSize": "Hosting {repoSize} of data",
+    "shareSize": "Downloaded {downloadedSize} and Shared {sharedSize} ({ratio})",
     "peersCount": "{peersCount, plural, one {Discovered 1 peer} other {Discovered {peersCount} peers}}"
   },
   "customApiConfig": "Custom JSON configuration",

src/bundles/bitswap-stats.js

@@ -0,0 +1,45 @@
+import { createAsyncResourceBundle, createSelector } from 'redux-bundler'
+
+const bundle = createAsyncResourceBundle({
+  name: 'bitswapStats',
+  getPromise: async ({ getIpfs }) => {
+    const rawData = await getIpfs().stats.bitswap()
+    // early gc, dont keep arround the peer list
+    return { downloadedSize: rawData.dataReceived, sharedSize: rawData.dataSent }
+  },
+  staleAfter: 60000,
+  persist: false,
+  checkIfOnline: false
+})
+
+bundle.selectDownloadedSize = createSelector(
+  'selectBitswapStats',
+  (bitswapStats) => {
+    if (bitswapStats && bitswapStats.downloadedSize) {
+      return bitswapStats.downloadedSize.toString()
+    }
+  }
+)
+
+bundle.selectSharedSize = createSelector(
+  'selectBitswapStats',
+  (bitswapStats) => {
+    console.log(bitswapStats)
+    if (bitswapStats && bitswapStats.sharedSize) {
+      return bitswapStats.sharedSize.toString()
+    }
+  }
+)
+
+// Fetch the config if we don't have it or it's more than `staleAfter` ms old
+bundle.reactBitswapStatsFetch = createSelector(
+  'selectBitswapStatsShouldUpdate',
+  'selectIpfsReady',
+  (shouldUpdate, ipfsReady) => {
+    if (shouldUpdate && ipfsReady) {
+      return { actionCreator: 'doFetchBitswapStats' }
+    }
+  }
+)
+
+export default bundle

src/bundles/index.js

@@ -20,6 +20,7 @@ import identityBundle from './identity'
 import bundleCache from '../lib/bundle-cache'
 import ipfsDesktop from './ipfs-desktop'
 import repoStats from './repo-stats'
+import bitswapStats from './bitswap-stats'
 import createAnalyticsBundle from './analytics'
 import experimentsBundle from './experiments'
 import cliTutorModeBundle from './cli-tutor-mode'
@@ -51,6 +52,7 @@ export default composeBundles(
   experimentsBundle,
   ipfsDesktop,
   repoStats,
+  bitswapStats,
   cliTutorModeBundle,
   createAnalyticsBundle({})
 )

src/status/StatusConnected.js

@@ -3,8 +3,22 @@ import { withTranslation, Trans } from 'react-i18next'
 import { connect } from 'redux-bundler-react'
 import { humanSize } from '../lib/files'
 
-export const StatusConnected = ({ t, peersCount, repoSize }) => {
+export const StatusConnected = ({ t, peersCount, repoSize, downloadedSize, sharedSize }) => {
   const humanRepoSize = humanSize(repoSize || 0)
+  downloadedSize = downloadedSize || 0
+  const humanDownloadSize = humanSize(downloadedSize)
+  sharedSize = sharedSize || 0
+  const humanSharedSize = humanSize(sharedSize)
+  let shareRatio = sharedSize / downloadedSize
+  if (isNaN(shareRatio)) {
+    shareRatio = Infinity
+  }
+  if (shareRatio < 10) {
+    // round to 1 decimal place if that bellow 10
+    shareRatio = Math.round(shareRatio * 10) / 10
+  } else {
+    shareRatio = Math.round(shareRatio)
+  }
   return (
     <header>
       <h1 className='montserrat fw2 f3 charcoal ma0 pt0 pb2'>
@@ -17,6 +31,10 @@ export const StatusConnected = ({ t, peersCount, repoSize }) => {
           </a>
         </span>
         <span className='dn di-ns gray'> — </span>
+        <span className='db mt1 mt0-ns dib-ns'>
+          {t('StatusConnected.shareSize', { downloadedSize: humanDownloadSize, sharedSize: humanSharedSize, ratio: shareRatio })}
+        </span>
+        <span className='dn di-ns gray'> — </span>
         <span className='db mt1 mt0-ns dib-ns'>
           <a className='link blue' href='#/peers'>
             {t('StatusConnected.peersCount', { peersCount: peersCount.toString() })}
@@ -32,5 +50,7 @@ export const TranslatedStatusConnected = withTranslation('status')(StatusConnect
 export default connect(
   'selectPeersCount',
   'selectRepoSize',
+  'selectDownloadedSize',
+  'selectSharedSize',
   TranslatedStatusConnected
 )

src/status/StatusConnected.stories.js

@@ -9,5 +9,5 @@ storiesOf('StatusConnected', module)
   .addDecorator(i18n)
   .addDecorator(checkA11y)
   .add('Default', () => (
-    <StatusConnected peersCount={1001} repoSize={123123912321312} />
+    <StatusConnected peersCount={1001} repoSize={123123912321312} downloadSize={123123912321312 / 2} sharedSize={123123912321312 * 2.3333}/>
   ))