'React button Solana candy machine inside an iframe does not connect to Phantom wallet browser extension

Embedding the candy-machine-ui v2 in a HTML iframe makes the button not work properly.

https://github.com/metaplex-foundation/metaplex/tree/master/js/packages/candy-machine-ui

You can click it, and it will pop up asking which wallet to connect to, but then nothing happens. There does not appear to be any relevant errors or warnings in the console.

I feel like this is something to do with React/JS not connecting through the iframe to the browser extension (i.e. phantom wallet or whatever).

I have tried adding various "allows" to the iframe with no luck.

Is there some greater understanding I am missing here, or what do I need to do to make my button work?

Working button HTML hosted at https://lorex.com.au/site/:

<html>
    <body>
        <div id="root"></div>
        <script src="./static/js/main.ba6e3380.js"></script>
    </body>
</html>

Page with non-working button in an iframe https://lorex.com.au/site_example/:

<html>
    <body>
        <iframe src="https://lorex.com.au/site"></iframe>
    </body>
</html>
htmlreactjsiframesolanametaplexapiaws-lambdasaas


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions