Moralis.initPlugins() React question

Moralis General
#1

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:

image
image693Ɨ191 15.9 KB

Soā€¦is Moralis.Plugins released yet or have I just snarled the syntax?

[SOLVED] Fiat Onramp: (Function Moralis.initPlugins not working)
#2

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

#3

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";
?

#4

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

#5

Use latest SDK and latest server and let us know

#6

Waiting for it to roll out in the ReactJS API.

#7

It should work if you use latest Moralis version

#8

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.

#9

Ok umā€¦
image
Warning repeats when I hit the button. It doesnā€™t go further than that.

#10

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

1 Like
#11

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ā€¦

#12

The problem was solved?

#13

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.

image
image1067Ɨ277 79.1 KB

#14

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

#15

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>
#16

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

#17

Tried that. Same result. No errors, no warningsā€¦no action. Just blankly calls throughā€¦

#18

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

#19

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

#20

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.