HTML

ocean protocol react sample tutorial

<span class="token keyword">async</span> <span class="token function">componentDidMount</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> ocean <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token keyword">new</span> <span class="token class-name">Ocean <span class="token punctuation">.</span> getInstance</span> <span class="token punctuation">(</span> <span class="token punctuation">{</span>
      web3Provider <span class="token punctuation">:</span> web3 <span class="token punctuation">,</span>
      nodeUri <span class="token punctuation">:</span> <span class="token string">'https://nile.dev-ocean.com'</span> <span class="token punctuation">,</span>
      aquariusUri <span class="token punctuation">:</span> <span class="token string">'https://aquarius.marketplace.dev-ocean.com'</span> <span class="token punctuation">,</span>
      brizoUri <span class="token punctuation">:</span> <span class="token string">'https://brizo.marketplace.dev-ocean.com'</span> <span class="token punctuation">,</span>
      brizoAddress <span class="token punctuation">:</span> <span class="token string">'0x4aaab179035dc57b35e2ce066919048686f82972'</span> <span class="token punctuation">,</span>
      secretStoreUri <span class="token punctuation">:</span> <span class="token string">'https://secret-store.nile.dev-ocean.com'</span> <span class="token punctuation">,</span>
      <span class="token comment">// local Spree connection</span>
      <span class="token comment">// nodeUri: 'http://localhost:8545',</span>
      <span class="token comment">// aquariusUri: 'http://aquarius:5000',</span>
      <span class="token comment">// brizoUri: 'http://localhost:8030',</span>
      <span class="token comment">// brizoAddress: '0x00bd138abd70e2f00903268f3db08f2d25677c9e',</span>
      <span class="token comment">// secretStoreUri: 'http://localhost:12001',</span>
      verbose <span class="token punctuation">:</span> <span class="token boolean">true</span>
    <span class="token punctuation">}</span> <span class="token punctuation">)</span>
    <span class="token keyword">this</span> <span class="token punctuation">.</span> <span class="token function">setState</span> <span class="token punctuation">(</span> <span class="token punctuation">{</span> ocean <span class="token punctuation">}</span> <span class="token punctuation">)</span>
    console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> <span class="token string">'Finished loading contracts.'</span> <span class="token punctuation">)</span>
  <span class="token punctuation">}</span>
 

ocean protocol react sample tutorial

<span class="token function">npm</span> i <span class="token operator">&amp;&amp;</span> <span class="token function">npm</span> run start
 

ocean protocol react sample tutorial

<span class="token keyword">async</span> <span class="token function">registerAsset</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">try</span> <span class="token punctuation">{</span>
      <span class="token keyword">const</span> accounts <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> state <span class="token punctuation">.</span> ocean <span class="token punctuation">.</span> accounts <span class="token punctuation">.</span> <span class="token function">list</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span>
      <span class="token keyword">const</span> ddo <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> state <span class="token punctuation">.</span> ocean <span class="token punctuation">.</span> assets <span class="token punctuation">.</span> <span class="token function">create</span> <span class="token punctuation">(</span> asset <span class="token punctuation">,</span> accounts <span class="token punctuation">[</span> <span class="token number">0</span> <span class="token punctuation">]</span> <span class="token punctuation">)</span>
      console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> <span class="token string">'Asset successfully submitted.'</span> <span class="token punctuation">)</span>
      console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> ddo <span class="token punctuation">)</span>
      <span class="token comment">// keep track of this registered asset for consumption later on</span>
      <span class="token keyword">this</span> <span class="token punctuation">.</span> <span class="token function">setState</span> <span class="token punctuation">(</span> <span class="token punctuation">{</span> ddo <span class="token punctuation">}</span> <span class="token punctuation">)</span>
      <span class="token function">alert</span> <span class="token punctuation">(</span>
        <span class="token string">'Asset successfully submitted. Look into your console to see the response DDO object.'</span>
      <span class="token punctuation">)</span>
    <span class="token punctuation">}</span> <span class="token keyword">catch</span> <span class="token punctuation">(</span> <span class="token class-name">error</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span>
      console <span class="token punctuation">.</span> <span class="token function">error</span> <span class="token punctuation">(</span> error <span class="token punctuation">.</span> message <span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
 

ocean protocol react sample tutorial

<span class="token keyword">const</span> AssetModel <span class="token operator">=</span> <span class="token punctuation">{</span>
  <span class="token comment">// OEP-08 Attributes</span>
  <span class="token comment">// https://github.com/oceanprotocol/OEPs/tree/master/8</span>
  main <span class="token punctuation">:</span> <span class="token punctuation">{</span>
    type <span class="token punctuation">:</span> <span class="token string">'dataset'</span> <span class="token punctuation">,</span>
    name <span class="token punctuation">:</span> <span class="token string">''</span> <span class="token punctuation">,</span>
    dateCreated <span class="token punctuation">:</span> <span class="token string">''</span> <span class="token punctuation">,</span>
    author <span class="token punctuation">:</span> <span class="token string">''</span> <span class="token punctuation">,</span>
    license <span class="token punctuation">:</span> <span class="token string">''</span> <span class="token punctuation">,</span>
    price <span class="token punctuation">:</span> <span class="token string">'0'</span> <span class="token punctuation">,</span>
    files <span class="token punctuation">:</span> <span class="token punctuation">[</span> <span class="token punctuation">]</span>
  <span class="token punctuation">}</span> <span class="token punctuation">,</span>
  additionalInformation <span class="token punctuation">:</span> <span class="token punctuation">{</span>
    description <span class="token punctuation">:</span> <span class="token string">''</span> <span class="token punctuation">,</span>
    copyrightHolder <span class="token punctuation">:</span> <span class="token string">''</span> <span class="token punctuation">,</span>
    categories <span class="token punctuation">:</span> <span class="token punctuation">[</span> <span class="token punctuation">]</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span> <span class="token punctuation">;</span>
 

ocean protocol react sample tutorial

<span class="token keyword">async</span> <span class="token function">searchAssets</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">try</span> <span class="token punctuation">{</span>
      <span class="token keyword">const</span> search <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> state <span class="token punctuation">.</span> ocean <span class="token punctuation">.</span> assets <span class="token punctuation">.</span> <span class="token function">search</span> <span class="token punctuation">(</span>
        <span class="token string">'10 Monkey Species Small'</span>
      <span class="token punctuation">)</span>
      <span class="token keyword">this</span> <span class="token punctuation">.</span> <span class="token function">setState</span> <span class="token punctuation">(</span> <span class="token punctuation">{</span> results <span class="token punctuation">:</span> search <span class="token punctuation">.</span> results <span class="token punctuation">}</span> <span class="token punctuation">)</span>
      console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> search <span class="token punctuation">)</span>
      <span class="token function">alert</span> <span class="token punctuation">(</span>
        <span class="token string">'Asset successfully retrieved. Look into your console to see the search response.'</span>
      <span class="token punctuation">)</span>
    <span class="token punctuation">}</span> <span class="token keyword">catch</span> <span class="token punctuation">(</span> <span class="token class-name">error</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span>
      console <span class="token punctuation">.</span> <span class="token function">error</span> <span class="token punctuation">(</span> error <span class="token punctuation">.</span> message <span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
 

ocean protocol react sample tutorial

<span class="token keyword">async</span> <span class="token function">consumeAsset</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">try</span> <span class="token punctuation">{</span>
      <span class="token comment">// get all accounts</span>
      <span class="token keyword">const</span> accounts <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> state <span class="token punctuation">.</span> ocean <span class="token punctuation">.</span> accounts <span class="token punctuation">.</span> <span class="token function">list</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span>
      <span class="token comment">// get our registered asset</span>
      <span class="token keyword">const</span> consumeAsset <span class="token operator">=</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> state <span class="token punctuation">.</span> ddo
      <span class="token comment">// get service we want to execute</span>
      <span class="token keyword">const</span> service <span class="token operator">=</span> consumeAsset <span class="token punctuation">.</span> <span class="token function">findServiceByType</span> <span class="token punctuation">(</span> <span class="token string">'access'</span> <span class="token punctuation">)</span>
      <span class="token comment">// order service agreement</span>
      <span class="token keyword">const</span> agreement <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> state <span class="token punctuation">.</span> ocean <span class="token punctuation">.</span> assets <span class="token punctuation">.</span> <span class="token function">order</span> <span class="token punctuation">(</span>
        consumeAsset <span class="token punctuation">.</span> id <span class="token punctuation">,</span>
        service <span class="token punctuation">.</span> index <span class="token punctuation">,</span>
        accounts <span class="token punctuation">[</span> <span class="token number">0</span> <span class="token punctuation">]</span>
      <span class="token punctuation">)</span>
      <span class="token comment">// consume it</span>
      <span class="token keyword">await</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> state <span class="token punctuation">.</span> ocean <span class="token punctuation">.</span> assets <span class="token punctuation">.</span> <span class="token function">consume</span> <span class="token punctuation">(</span>
        agreement <span class="token punctuation">,</span>
        consumeAsset <span class="token punctuation">.</span> id <span class="token punctuation">,</span>
        service <span class="token punctuation">.</span> index <span class="token punctuation">,</span>
        accounts <span class="token punctuation">[</span> <span class="token number">0</span> <span class="token punctuation">]</span> <span class="token punctuation">,</span>
        <span class="token string">''</span> <span class="token punctuation">,</span>
        <span class="token number">0</span>
      <span class="token punctuation">)</span>
    <span class="token punctuation">}</span> <span class="token keyword">catch</span> <span class="token punctuation">(</span> <span class="token class-name">error</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span>
      console <span class="token punctuation">.</span> <span class="token function">error</span> <span class="token punctuation">(</span> error <span class="token punctuation">.</span> message <span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>