Update encryption methods

package.json

@@ -17,7 +17,7 @@
   "dependencies": {
     "@reduxjs/toolkit": "^1.4.0",
     "@rsksmart/ethr-did": "^1.1.1-beta.1",
-    "@rsksmart/ipfs-cpinner-client": "0.1.1-beta.9",
+    "@rsksmart/ipfs-cpinner-client": "0.1.1-beta.12",
     "@rsksmart/rlogin": "0.1.1",
     "@rsksmart/rsk-contract-metadata": "^1.0.4",
     "@rsksmart/rsk-testnet-contract-metadata": "^1.0.3",

src/app/DataVault/DataVaultComponent.tsx

@@ -7,7 +7,6 @@ import { Web3ProviderContext } from '../../providerContext'
 import CredentialDisplay from './panels/CredentialDisplay'
 import DownloadBackup from './panels/DownloadBackup'
 import { createPresentation } from '../../features/credentials'
-import { getProviderName } from '../../ethrpc'
 
 interface DataVaultComponentProps {
   declarativeDetails: DataVaultKey
@@ -46,7 +45,6 @@ const DataVaultComponent: React.FC<DataVaultComponentProps> = ({
         <div className="column">
           <AddDeclarativeDetails
             addDeclarativeDetail={handleAdd}
-            providerName={getProviderName(context.provider)}
           />
         </div>
       </div>

src/app/DataVault/panels/AddDeclarativeDetails.test.tsx

@@ -1,17 +1,16 @@
 import React from 'react'
 import { shallow, mount } from 'enzyme'
 import AddDeclarativeDetails from './AddDeclarativeDetails'
-import { PROVIDERS } from '../../../ethrpc'
 
 describe('Component: AddDeclarativeDetails', () => {
   it('renders the component', () => {
-    const wrapper = shallow(<AddDeclarativeDetails addDeclarativeDetail={jest.fn()} providerName={PROVIDERS.METAMASK} />)
+    const wrapper = shallow(<AddDeclarativeDetails addDeclarativeDetail={jest.fn()} />)
     expect(wrapper).toBeDefined()
   })
 
   it('adds handles errors if type and content is empty', () => {
     const submitData = jest.fn()
-    const wrapper = mount(<AddDeclarativeDetails addDeclarativeDetail={submitData} providerName={PROVIDERS.METAMASK} />)
+    const wrapper = mount(<AddDeclarativeDetails addDeclarativeDetail={submitData} />)
     const button = wrapper.find('button.submit')
     button.simulate('click')
     expect(submitData).toBeCalledTimes(0)
@@ -22,9 +21,4 @@ describe('Component: AddDeclarativeDetails', () => {
     button.simulate('click')
     expect(submitData).toBeCalledTimes(0)
   })
-
-  it('shows a warning message if not metamask', () => {
-    const wrapper = mount(<AddDeclarativeDetails addDeclarativeDetail={jest.fn()} providerName={PROVIDERS.NIFTY} />)
-    expect(wrapper.find('.alert.warning').find('h2').text()).toBe('Warning!')
-  })
 })

src/app/DataVault/panels/AddDeclarativeDetails.tsx

@@ -3,14 +3,12 @@ import { BaseButton } from '../../../components/Buttons'
 import Panel from '../../../components/Panel/Panel'
 import uploadIcon from '../../../assets/images/icons/upload.svg'
 import LoadingComponent from '../../../components/Loading/LoadingComponent'
-import { PROVIDERS } from '../../../ethrpc'
 
 interface AddDeclarativeDetailsInterface {
   addDeclarativeDetail: (key: string, content: string) => Promise<any>
-  providerName?: PROVIDERS
 }
 
-const AddDeclarativeDetails: React.FC<AddDeclarativeDetailsInterface> = ({ addDeclarativeDetail, providerName }) => {
+const AddDeclarativeDetails: React.FC<AddDeclarativeDetailsInterface> = ({ addDeclarativeDetail }) => {
   const [type, setType] = useState('')
   const [content, setContent] = useState('')
   const [isLoading, setIsLoading] = useState<boolean>(false)
@@ -41,12 +39,6 @@ const AddDeclarativeDetails: React.FC<AddDeclarativeDetailsInterface> = ({ addDe
 
   return (
     <Panel title={title} className="add-declarative">
-      {providerName !== PROVIDERS.METAMASK && (
-        <div className="alert warning">
-          <h2>Warning!</h2>
-          <p>Your wallet does not support encrypted content in your data vault. You can still add content, but it will be saved as plaintext.</p>
-        </div>
-      )}
       <div className="container">
         <div className="column">
           <p className="title">Type</p>

src/app/state/operations/datavault.ts

@@ -1,11 +1,12 @@
 import { Dispatch } from 'react'
-import DataVaultWebClient, { AuthManager, EncryptionManager } from '@rsksmart/ipfs-cpinner-client'
+import DataVaultWebClient, { AuthManager, AsymmetricEncryptionManager, SignerEncryptionManager } from '@rsksmart/ipfs-cpinner-client'
 
 import { createDidFormat } from '../../../formatters'
 import { addContentToKey, DataVaultContent, receiveKeyData, removeContentfromKey, swapContentById, receiveStorageInformation, DataVaultStorageState, DataVaultKey, receiveKeys } from '../reducers/datavault'
 import { getDataVault } from '../../../config/getConfig'
 import { Backup, CreateContentResponse } from '@rsksmart/ipfs-cpinner-client/lib/types'
 import { getProviderName, PROVIDERS } from '../../../ethrpc'
+import { IEncryptionManager } from '@rsksmart/ipfs-cpinner-client/lib/encryption-manager/types'
 
 /**
  * Create DataVault Clinet
@@ -16,21 +17,24 @@ import { getProviderName, PROVIDERS } from '../../../ethrpc'
 export const createClient = (provider: any, address: string, chainId: number) => {
   const serviceUrl = getDataVault()
   const did = createDidFormat(address, chainId).toLowerCase()
-
   const personalSign = (data: string) => provider.request({ method: 'personal_sign', params: [data, address] })
-  const decrypt = (hexCypher: string) => provider.request({ method: 'eth_decrypt', params: [hexCypher, address] })
-  const getEncryptionPublicKey = () => provider.request({ method: 'eth_getEncryptionPublicKey', params: [address] })
-  const mockDecrypt = (_hexCypher: string) => Promise.reject(new Error('Content could not be decrypted by your wallet.'))
-
-  const encryptionManager = getProviderName(provider) === PROVIDERS.METAMASK
-    ? new EncryptionManager({ getEncryptionPublicKey, decrypt })
-    : new EncryptionManager({ getEncryptionPublicKey: undefined, decrypt: mockDecrypt })
-
-  return new DataVaultWebClient({
-    serviceUrl,
-    authManager: new AuthManager({ did, serviceUrl, personalSign }),
-    encryptionManager
-  })
+  const authManager = new AuthManager({ did, serviceUrl, personalSign })
+
+  if (getProviderName(provider) === PROVIDERS.METAMASK) {
+    return Promise.resolve(new DataVaultWebClient({
+      serviceUrl,
+      authManager,
+      encryptionManager: new AsymmetricEncryptionManager(provider)
+    }))
+  }
+
+  return SignerEncryptionManager.fromWeb3Provider(provider)
+    .then((encryptionManager: IEncryptionManager) =>
+      new DataVaultWebClient({
+        serviceUrl,
+        authManager,
+        encryptionManager
+      }))
 }
 
 /**
@@ -122,13 +126,14 @@ export const modifyMultipleItems = (client: DataVaultWebClient, values: DataVaul
 export const dataVaultStart = (provider: any, address: string, chainId: number, callback?: any) => (dispatch: Dispatch<any>) => {
   const client = createClient(provider, address, chainId)
 
-  client.getStorageInformation()
+  client.then((client: DataVaultWebClient) => client.getStorageInformation()
     .then((storage: DataVaultStorageState) => {
       dispatch(receiveStorageInformation({ storage }))
       dispatch(getDataVaultKeys(client))
       callback(client)
     })
     .catch((err: any) => callback(null, err))
+  )
 }
 
 /**