user7823: Lucid-Cardano requires me to expose my api key on my client side of my app. How can I go around hiding this. I have tried to call my express backend to make a blockfrost request so that I can keep my api key on the backend. It works for connecting to the wallets but it doesn't work for signing transactions. How can I go around this. I am using express backend and react front end. How can I go about this?
//This is where I try to sign the transaction on my client side

import { Lucid, Blockfrost } from "https://unpkg.com/lucid-cardano@0.7.7/web/mod.js"
import axios from 'axios'



async function connect(){
  const data = await axios.get('http://localhost:4000/blockfrost').then((res) => {
  }).catch((err) => {
    console.log(err)
  })

  const lucid = await Lucid.new(data,
    "Testnet",
   );
  
    const api = await window.cardano.nami.enable();
    lucid.selectWallet(api);

    const tx = await lucid.newTx()
    .payToAddress("addr...", { lovelace: 5000000n })
    .complete();

    const signedTx = await tx.sign().complete();

    const txHash = await signedTx.submit();

    console.log(txHash);

}

//This is where i connect to blockfrost

const axios = require('axios')
require('dotenv').config()

axios.defaults.headers.common = {
    "project_id": process.env.BLOCKFROST_KEY,
  };

async function connect(){
    const data = await axios.get('https://cardano-testnet.blockfrost.io/api/v0')
    return data.data
}

module.exports = {connect}
 

export default connect

//This is the error I get
mod.js:2 Uncaught (in promise) Error: expected instance of u_
    at c (mod.js:2:535)
    at j_.new (mod.js:2:157455)
    at new cn (mod.js:4:35867)
    at ln.newTx (mod.js:4:52734)
    at connect (makeTransaction.js:20:1)


user7049: In the README.md file of lucid, their is a blockfrost proxy example, illustrating how you could implement a proxy api call.

7823: <p>Lucid-Cardano requires me to expose my api key on my client side of my app. How can I go around hiding this. I have tried to call my express backend to make a blockfrost request so that I can keep my api key on the backend. It works for connecting to the wallets but it doesn't work for signing transactions. How can I go around this. I am using express backend and react front end. How can I go about this?</p>
<pre class="lang-js prettyprint-override"><code>//This is where I try to sign the transaction on my client side

import { Lucid, Blockfrost } from &quot;https://unpkg.com/lucid-cardano@0.7.7/web/mod.js&quot;
import axios from 'axios'



async function connect(){
  const data = await axios.get('http://localhost:4000/blockfrost').then((res) =&gt; {
  }).catch((err) =&gt; {
    console.log(err)
  })

  const lucid = await Lucid.new(data,
    &quot;Testnet&quot;,
   );
  
    const api = await window.cardano.nami.enable();
    lucid.selectWallet(api);

    const tx = await lucid.newTx()
    .payToAddress(&quot;addr...&quot;, { lovelace: 5000000n })
    .complete();

    const signedTx = await tx.sign().complete();

    const txHash = await signedTx.submit();

    console.log(txHash);

}

//This is where i connect to blockfrost

const axios = require('axios')
require('dotenv').config()

axios.defaults.headers.common = {
    &quot;project_id&quot;: process.env.BLOCKFROST_KEY,
  };

async function connect(){
    const data = await axios.get('https://cardano-testnet.blockfrost.io/api/v0')
    return data.data
}

module.exports = {connect}
 

export default connect

//This is the error I get
mod.js:2 Uncaught (in promise) Error: expected instance of u_
    at c (mod.js:2:535)
    at j_.new (mod.js:2:157455)
    at new cn (mod.js:4:35867)
    at ln.newTx (mod.js:4:52734)
    at connect (makeTransaction.js:20:1)
</code></pre>
 7049: <p>In the <code>README.md</code> file of <code>lucid</code>, their is a <a href="https://github.com/GGAlanSmithee/cardano-lucid-blockfrost-proxy-example" rel="nofollow noreferrer">blockfrost proxy example</a>, illustrating how you could implement a <a href="https://github.com/spacebudz/lucid/issues/25#issuecomment-1145689280" rel="nofollow noreferrer">proxy api call</a>.</p>
