Moralis.initPlugins() React question

So I’m React’ing to Ivan’s latest demo video and…

  const handlePress = async () => {
    await Moralis.initialize(appId);
    Moralis.serverURL = serverUrl;

    // Am I missing something here?  
    console.groupCollapsed("FiatBridgeButton");
    console.log("Moralis:", Moralis);
    console.groupEnd();

    // ...yes actually.  initPlugins() is not a member of Moralis.
    await Moralis.initPlugins();
    Moralis.Plugins.fiat.buy();
  };

All I get back from await Moralis.initPlugins() is:

So…is Moralis.Plugins released yet or have I just snarled the syntax?

Did you install the plugin before that?
You also need the latest Moralis SDK version (0.0.44).

I have updated my server version to the latest and installed the plug-in. That was my first step.

SDK? I’m using ReactJS. How do I get there from
import { useMoralis } from "react-moralis";
?

It may not work yet in react, I tested it with vanila js with latest Moralis SDK version.

Use latest SDK and latest server and let us know

Waiting for it to roll out in the ReactJS API.

It should work if you use latest Moralis version

react-moralis does not provide you any SDK, you have to provide it yourself as dependency. You probably have installed it when you setup your project, as we have it as a peer-dependency. So check your packages and make sure the moralis package is the latest version.

Ok um…
image
Warning repeats when I hit the button. It doesn’t go further than that.

From that warning it looks like it doesn’t find walletconnect, I heard that you have to include walletconnect separately.

1 Like

Aye. And so I did. That seems to be working…at least it’s not complaining about THAT now. The newer version played a bit of havoc with the whole “Moralis.Web3API” update…fixing that now before any of it runs…

The problem was solved?

Nope. Just the missing includes were resolved. Now it doesn’t complain at all…
…or do anything useful either.
I get zero pop-ups out of it. I’m going to build the iFrame version and see if that works.

How do you import Moralis object? From useMoralis() hook?

It’s a work in progress, but thus far it goes a bit like this (specific keys abbreviated for security):

mport { Button } from "@chakra-ui/react";
import { useMoralis } from "react-moralis";

const appId = "UeA..Aud";
const serverUrl = "https://q...w.bigmoralis.com:2053/server";

export const FiatBridgeButton = () => {
  const { Moralis } = useMoralis();

  const handlePress = async () => {
    await Moralis.initialize(appId);
    Moralis.serverURL = serverUrl;

    // Am I missing something here?
    console.groupCollapsed("FiatBridgeButton");
    console.log("Moralis:", Moralis);
    console.log("Moralis.initPlugins()...");
    await Moralis.initPlugins();
    console.log("Moralis.Plugins.fiat.buy()...");
    Moralis.Plugins.fiat.buy();
    console.log("...end of process?...");
    console.groupEnd();
  };

  return (
    <>
      <Button
        mr={2}
        mt={-2}
        className="BuyButton"
        boxShadow="dark-lg"
        onClick={handlePress}
      >
        Buy/Sell Crypto
      </Button>

Currently Plugins functionality is not ready for react-moralis as I know. So you need to import Moralis this way:

import {Moralis} from "moralis";

instead of importing it from the hook

Tried that. Same result. No errors, no warnings…no action. Just blankly calls through…

Just trying to confirm, were there any issues installing the plugins on the dashboard?

I got this working somehow:

import "./styles.css";

import { useMoralisWeb3Api } from "react-moralis";
import { Moralis } from "moralis";

const { useMoralis } = require("react-moralis");


const appId = "ID";
const serverUrl = "SERVER";

Moralis.initialize(appId);
Moralis.serverURL = serverUrl;

const handleBuy = async () => {
  console.log("before initPlugins");
  await Moralis.initPlugins();
  console.log("before fiat.buy");
  Moralis.Plugins.fiat.buy();
  console.log("after fiat.buy();");
};

const handlePress = async () => {
  // Am I missing something here?
  console.log("FiatBridgeButton");
  console.log("Moralis:", Moralis);
  console.log("Moralis.initPlugins()...");
  await Moralis.initPlugins();
  console.log("Moralis.Plugins.fiat.buy()...");
  //Moralis.Plugins.fiat.buy();
  let result = await Moralis.Plugins.fiat.buy(undefined, {
    disableTriggers: true
  });
  document.getElementById("myIframe").style.display = "block";
  console.log(result);
  document.getElementById("myIframe").src = result.data;

  console.log("...end of process?...");
};

export default function App() {
  return (
    <div className="App">
      <button onClick={handleBuy}>Start buy plugin in new window</button>
      <button onClick={handlePress}>Start buy plugin in iframe</button>
      <br />
      <iframe id="myIframe" src="" width="350" height="650"></iframe>
    </div>
  );
}

it looks like handleBuy doesn’t do anything on latest Moralis SDK version (0.0.50), it works fine with 0.0.44
but in a iframe something still works on latest SDK

It could be a problem related to your Moralis server version. You should update to the latest Moralis server in case that you don’t have the latest Moralis server version.