title: ExecutionError: Exceeded the prepaid gas -- when called from front end
body: <p>The <code>transfer()</code> function works perfectly fine when testing and through the CLI. However, when I try to call it from the front end, it returns</p>
  <blockquote>
  <p>Uncaught (in promise) Error: {&quot;index&quot;:0,&quot;kind&quot;:{&quot;ExecutionError&quot;:&quot;Exceeded the prepaid gas.&quot;}}</p>
  </blockquote>
  <p>It is not a complex call and only involves just 1. transferring tokens 2. updating a value in storage. Can anyone give me pointers as to why this might be happening?</p>
  <pre class="lang-js prettyprint-override"><code>document.querySelector('#transfer-to-owner').onclick = () =&gt; {
      console.log(&quot;Transfer about to begin&quot;)
      
      try {
           window.contract.transfer({})
       } catch (e) {
           'Something went wrong! ' +
           'Check your browser console for more info.'
       } 
  }
  </code></pre>
  <p>contract from <a href="https://github.com/Learn-NEAR/sample--thanks/tree/main/src/thanks" rel="nofollow noreferrer">this repo</a></p>
  <pre class="lang-js prettyprint-override"><code>  const XCC_GAS: Gas = 20_000_000_000_000;
  
    transfer(): void {
      this.assert_owner()
  
      assert(this.contributions.received &gt; u128.Zero, &quot;No received (pending) funds to be transferred&quot;)
  
      const to_self = Context.contractName
      const to_owner = ContractPromiseBatch.create(this.owner)
  
      // transfer earnings to owner then confirm transfer complete
      const promise = to_owner.transfer(this.contributions.received)
      promise.then(to_self).function_call(&quot;on_transfer_complete&quot;, '{}', u128.Zero, XCC_GAS)
    }
  
    @mutateState()
    on_transfer_complete(): void {
      assert_self()
      assert_single_promise_success()
  
      logging.log(&quot;transfer complete&quot;)
      // reset contribution tracker
      this.contributions.record_transfer()
    }
  </code></pre>