Use beta3 version of the ipfs pinner

- Implement size operation
- Show sizes on hover as bytes
- Progress bar will show at least 1% if the value is more than 0 but less than 1%. This is visual for the user to at least see a value

Author: jessgusclark

package.json

@@ -28,7 +28,7 @@
     "typescript": "~4.0.5"
   },
   "devDependencies": {
-    "@rsksmart/ipfs-cpinner-client": "^0.1.1-beta.2",
+    "@rsksmart/ipfs-cpinner-client": "^0.1.1-beta.3",
     "@rsksmart/rlogin": "0.0.1-beta.3",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",

src/app/Dashboard/panels/DataVaultSummary.test.tsx

@@ -19,8 +19,8 @@ describe('Component: DataVaultSummary.test', () => {
   })
 
   it('displays numbers in tooltip', () => {
-    const props = { storage: { used: 150, available: 890 }, handleButton: jest.fn() }
+    const props = { storage: { used: 1000, available: 9000 }, handleButton: jest.fn() }
     const wrapper = mount(<DataVaultSummary {...props} />)
-    expect(wrapper.find('.hover-content').first().text()).toBe('150 of 890')
+    expect(wrapper.find('.hover-content').first().text()).toBe('1000 of 10,000 bytes')
   })
 })

src/app/Dashboard/panels/DataVaultSummary.tsx

@@ -15,11 +15,10 @@ const DataVaultSummary: React.FC<DataVaultSummaryInterface> = ({ storage, handle
   storage ? (
     <Panel title={<><img src={datavaultIcon} alt="DataVault" /> DataVault Summary</>} className="dataVault">
       <h2>Storage Usage</h2>
-
       <div className="container">
         <div className="columnDouble">
-          <ToolTip className="tooltip-progress" hoverContent={<p>{storage.used} of {storage.available}</p>}>
-            <ProgressBar total={storage.available} value={storage.used} />
+          <ToolTip className="tooltip-progress" hoverContent={<p>{storage.used} of {(storage.available + storage.used).toLocaleString()} bytes</p>}>
+            <ProgressBar total={(storage.available + storage.used)} value={storage.used} />
           </ToolTip>
         </div>
         <div className="column">

src/app/state/operations/datavault.ts

@@ -1,7 +1,7 @@
 import { Dispatch } from 'react'
 import DataVaultWebClient from '@rsksmart/ipfs-cpinner-client'
 import { createDidFormat } from '../../../formatters'
-import { addContentToKey, DataVaultContent, receiveKeyData, removeContentfromKey, swapContentById, receiveStorageInformation } from '../reducers/datavault'
+import { addContentToKey, DataVaultContent, receiveKeyData, removeContentfromKey, swapContentById, receiveStorageInformation, DataVaultStorageState } from '../reducers/datavault'
 import { getDataVault } from '../../../config/getConfig'
 import { CreateContentResponse } from '@rsksmart/ipfs-cpinner-client/lib/types'
 
@@ -77,6 +77,5 @@ export const swapDataVaultContent = (client: DataVaultWebClient, key: string, co
  * @param client DataVault client
  */
 export const getStorageInformation = (client: DataVaultWebClient) => (dispatch: Dispatch<any>) =>
-  dispatch((receiveStorageInformation({ storage: { used: 10, available: 150 } })))
-//   client.getStorageInformation()
-//    .then((storage: DataVaultStorageState) => dispatch(receiveStorageInformation({ storage })))
+  client.getStorageInformation()
+    .then((storage: DataVaultStorageState) => dispatch(receiveStorageInformation({ storage })))

src/components/ProgressBar/ProgressBar.test.tsx

@@ -17,12 +17,22 @@ describe('Component: ProgressBar.test', () => {
 
     it('26 of 150', () => {
       const wrapper = mount(<ProgressBar value={26} total={150} />)
-      expect(wrapper.find('.progress').first().props().style).toMatchObject({ width: '17%' })
+      expect(wrapper.find('.progress').first().props().style).toMatchObject({ width: '18%' })
     })
   })
 
   it('returns 100% if thge total is higher than the value', () => {
     const wrapper = mount(<ProgressBar value={82} total={40} />)
     expect(wrapper.find('.progress').first().props().style).toMatchObject({ width: '100%' })
   })
+
+  it('returns 0% if the value is 0', () => {
+    const wrapper = mount(<ProgressBar value={0} total={40} />)
+    expect(wrapper.find('.progress').first().props().style).toMatchObject({ width: '0%' })
+  })
+
+  it('shows a visual bar of 1% if the value is less than 1% but not 0', () => {
+    const wrapper = mount(<ProgressBar value={1} total={1000} />)
+    expect(wrapper.find('.progress').first().props().style).toMatchObject({ width: '1%' })
+  })
 })

src/components/ProgressBar/ProgressBar.tsx

@@ -34,7 +34,7 @@ const BarProgress = styled.div`
 `
 
 const ProgressBar: React.FC<ProgressBarInterface> = ({ total, value }) => {
-  const width = value < total ? Math.round((value * 100) / total) : 100
+  const width = value < total ? Math.ceil((value * 100) / total) : 100
   return (
     <BarWrapper className="progress-wrapper">
       <BarProgress className="progress" style={{ width: `${width}%` }}></BarProgress>

src/config/config.testnet.json

@@ -4,6 +4,6 @@
   "tokens": [ "0x19f64674d8a5b4e652319f5e239efd3bc969a1fe" ],
   "dataVault": {
     "serviceDid": "did:ethr:rsk:testnet:0x285B30492a3F444d78f75261A35cB292Fc8F41A6",
-    "serviceUrl": "http://ec2-3-131-142-122.us-east-2.compute.amazonaws.com:5107"
+    "serviceUrl": "https://identity.staging.rifcomputing.net"
   }
 }

yarn.lock

@@ -1589,10 +1589,10 @@
     ethjs-query "^0.3.8"
     ethr-did-resolver "^1.0.2"
 
-"@rsksmart/ipfs-cpinner-client@^0.1.1-beta.2":
-  version "0.1.1-beta.2"
-  resolved "https://registry.yarnpkg.com/@rsksmart/ipfs-cpinner-client/-/ipfs-cpinner-client-0.1.1-beta.2.tgz#666d2e93e9d8f8585d116a380462120534348e36"
-  integrity sha512-H9Yp+xJsRnxGd/6JSh6bLXW3ijixtOTwmZjngYGNxABOZ0AEYkRfo7rMrgFQuVM1oNQeuWetrhO2daWiVVYMpA==
+"@rsksmart/ipfs-cpinner-client@^0.1.1-beta.3":
+  version "0.1.1-beta.3"
+  resolved "https://registry.yarnpkg.com/@rsksmart/ipfs-cpinner-client/-/ipfs-cpinner-client-0.1.1-beta.3.tgz#6cb862a60ffdceb185bd24bab1f3425d9dd1cf83"
+  integrity sha512-Uh59NfVxje2uwATYjRdw9dvRjqXdhGh3GicJt4VRwbAYLVGJcN4ddFwEyxixjqF9IV++Edpy0PYxdCdAgdRWyA==
   dependencies:
     axios "^0.21.0"
     did-jwt "^4.6.2"