display iframe under existing profiles with urls

app/components/FunderProfilesTable.jsx

@@ -3,6 +3,7 @@ import MaterialTable from 'material-table'
 import LiquidPledging from 'Embark/contracts/LiquidPledging'
 import withObservables from '@nozbe/with-observables'
 import { withDatabase } from '@nozbe/watermelondb/DatabaseProvider'
+import ProfileUrlViewer from './image/ProfileUrlViewer'
 import { FundingContext } from '../context'
 
 const { cancelProject } = LiquidPledging.methods
@@ -47,6 +48,7 @@ const FunderProfilesTable = ({ profiles }) => (
               }
             })
           ]}
+          detailPanel={rowData => <ProfileUrlViewer url={rowData.url} />}
         />
       </Fragment>
     }

app/components/image/ProfileUrlViewer.jsx

@@ -0,0 +1,37 @@
+import React, { PureComponent } from 'react'
+import { isIpfs, getFromIpfs } from '../../utils/ipfs'
+
+export default class ProfileUrlViewer extends PureComponent {
+  state = { url: null }
+  componentDidMount() {
+    this.getSource()
+  }
+
+  async getSource() {
+    const { url } = this.props
+    if (isIpfs(url)) {
+      const res = await getFromIpfs(url)
+      this.setState({ url: res.img })
+    } else {
+      this.setState({ url })
+    }
+  }
+
+  render() {
+    const { url } = this.state
+    const height = `${window.visualViewport.height * 0.75}px`
+    return (
+      <div>
+        {url &&
+         <iframe
+           width="100%"
+           height={height}
+           src={url}
+           allowFullScreen
+         />
+        }
+      </div>
+
+    )
+  }
+}

app/utils/ipfs.js

@@ -3,7 +3,7 @@ import fileReaderPullStream from 'pull-file-reader'
 import { Matcher } from '@areknawo/rex'
 import { getImageType } from './images'
 
-const ipfsMatcher = new Matcher().begin().find('/ipfs/')
+const ipfsMatcher = new Matcher().begin().find('ipfs/')
 const ipfs = new IPFS()
 
 export const isIpfs = str => ipfsMatcher.test(str)
@@ -36,18 +36,24 @@ const saveToIpfs = (file, cb, imgCb) => {
 }
 
 export const getImageFromIpfs = async (hash, cb) => {
+  const res = await getFromIpfs(hash)
+  cb(res)
+};
+
+export const getFromIpfs = async hash => {
   const files = await getFile(hash)
   const file = files.slice(-1)[0]
   const { content } = file
   const arrayBufferView = new Uint8Array(content)
   const blob = new Blob([ arrayBufferView ], { type: getImageType(file) })
   const img = URL.createObjectURL(blob)
-  cb({ ...file, img })
-};
+  return { ...file, img }
+}
 
 export const getFile = CID => {
+  const clean = CID.split('/').slice(-1)[0]
   return new Promise(function(resolve, reject) {
-    ipfs.get(CID, function (err, files) {
+    ipfs.get(clean, function (err, files) {
       if (err) reject(err)
       else resolve(files)
     })

config/blockchain.js

@@ -107,12 +107,9 @@ module.exports = {
   rinkeby: {
     networkType: "rinkeby",
     syncMode: "light",
-    accounts: [
-      {
-        nodeAccounts: true,
-        password: "config/testnet/password"
-      }
-    ]
+    account: {
+      password: "config/testnet/password"
+    }
   },
 
   // merges with the settings in default