React js function not found in package

Question

When using ElvWalletClient.Item({"x":"1","y":"2"}) from import { ElvWalletClient } from "@eluvio/elv-wallet-client";

I receive the following error

eluvio_elv_wallet_client__WEBPACK_IMPORTED_MODULE_1_.ElvWalletClient.Item is not a function

When looking into the source code I do see the method (line 338)

exports.Item = async function ({contractAddress, tokenId}) {
  Assert("Item", "Contract address", contractAddress);
  Assert("Item", "Token ID", tokenId);

  return await this.SendMessage({
    action: "item",
    params: {
      contractAddress,
      tokenId: tokenId.toString()
    }
  });
};

Code

import React, { useEffect, useState } from 'react'
import { ElvWalletClient } from "@eluvio/elv-wallet-client";

const Methods = ({client, userProfile}) => {
    const [itemData, setItemData] = useState(undefined);
    const popupClient = ElvWalletClient.Item({contractAddress: "0x48341be85e735322862d654a3f3c69854a16ccaf",itemId: "407"})
    .then(data => {
        itemData(data)

      })
      .catch(error => console.error(error));

    return (
        <div>
            <div>{itemData}</div>
        </div>
    )
}

export default Methods

Initialize Wallet

ElvWalletClient.InitializeFrame({
      walletAppUrl: "https://wallet.contentfabric.io",
      target: element,
      requestor: "WWE Moonsault",
      loginOnly: true,
      darkMode: true,
      // NOTE: This should be changed to tenant slug + marketplace slug when the marketplace is published
      marketplaceId: "iq__2zMYXQ6SwRFhjAc73ppcn4RP5KX3"
    })
      .then(client => {
        SetClient(client)

        // If previously used client is present, ensure it is destroyed
        if(previousClient) {
          previousClient.Destroy();
        }
      })
      .catch(error => console.error(error));

Package.json

{
  "name": "elv-wallet-client-demo",
  "version": "0.1.0",
  "private": true,
  "homepage": "./",
  "dependencies": {
    "@eluvio/elv-wallet-client": "^1.0.1",
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/react": "^13.1.1",
    "@testing-library/user-event": "^13.5.0",
    "axios": "^0.27.2",
    "react": "^18.0.0",
    "react-dom": "^18.0.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "reactSnap": {
    "inlineCss": true
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

Answer 1

Have you initialized the wallet before attempting to call that function? From your included code, it doesn't seem so.

According to the source code of this package, you shouldn't use the default constructor, but one of:

1. InitializeFrame: to initialize the media wallet in a new iframe
2. InitializePopup: to initialize the media wallet in a new window

Try one of these:

import { ElvWalletClient } from "@eluvio/elv-wallet-client";

// Initialize in iframe at target element
const walletClient = await ElvWalletClient.InitializeFrame({
  requestor: "My App",
  walletAppUrl: "https://wallet.contentfabric.io",
  target: document.getElementById("#wallet-target")
});
    
// Or initialize in a popup
const walletClient = await ElvWalletClient.InitializePopup({
  requestor: "My App",
  walletAppUrl: "https://wallet.contentfabric.io",
});

If you have initialized the wallet already and it is the value you're passing to Method as a prop, try calling Item() on client:

const Methods = ({client, userProfile}) => {
    const [itemData, setItemData] = useState(undefined)

    // Change this to const popupClient = client.Item({...})
    const popupClient = ElvWalletClient.Item({contractAddress: "0x48341be85e735322862d654a3f3c69854a16ccaf",itemId: "407"})
    
    ...
}

Just as a side note, since the InitializeFrame and InitializePopup methods are async, it may be beneficial to check whether or not the promise has resolved before attempting to call additional methods on client.