sane-web3-fallback-strategy.js

/*

This is a slightly improved web3 detect and fallback pattern

Used for the experience here: https://ddx-demo.optimum.network (view in incognito window or something)

Pros: 
 * web3 users do not have to wait for window.load event to be fired before loading application script
 * non-web3 users will not have to load your app script, which may (like mine) fail completely without global web3
 * customizable to whatever user experience you need

Usage: detectWeb3OrFallback(function: web3SuccessfullyDetected, {
    fallbackWeb3Url: YOUR FALLBACK HERE
    fallbackProviderUrl: YOUR_ETHEREUM_NODE (Dont bleed your infura key!)
    onFallback: A function that happens when web3 gets loaded
})

Author: Brian Wheeler
License: MIT

NO WARRANTY EXPRESSED, IMPLIED, IMAGINED, ETC.
*/


// Best put this in a script tag in you index.html, but you do you
// <script>
(function detectWeb3OrFallback(callback, options) {
    // MetaMask sometimes defines it immediately, before page load
    // Adding a check here shaves some ms on the UX
    if (typeof web3 !== 'undefined') {
        callback();
    } else {
        window.addEventListener('load', checkForInjectedWeb3)
    }

    // Check
    function checkForInjectedWeb3() {
        // Checking if Web3 has been injected by the browser (Mist/MetaMask)
        if (typeof web3 !== 'undefined') {
            callback();
        } else {
            var loading = _loadScript(options.fallbackWeb3Url);
            loading.addEventListener('load', useFallbackWeb3);
        }
    }

    function useFallbackWeb3() {        
        // fallback - use your fallback strategy (local node / hosted node + in-dapp id mgmt / fail)

        window.web3 = new Web3(
            new Web3.providers.HttpProvider(options.fallbackProviderUrl)
        );
        options.onFallback();
    }
})(function() {
    // We found an injected web3, lets load the application script
    // _loadScript('/index.js')
}, {
    fallbackProviderUrl: "MY_HOSTED_WEB3_NODE_PLZ_DONT_DDOS_IT_IF_YOU_SEE_IT",
    fallbackWeb3Url: '/PUT_YOUR_WEB3_LOAD_PATH_OR_ORL_HERE',
    onFallback: function() {
        // This is what I do personally
        // Take the user to a page allowing them to
        // Download metamask, or say "fuckit" and continue
        // with a fallback web3
        // My app is an SPA, so react eventually parses the history when it loads
                
        // window.history.pushState({}, null, '/no-web3')
        // window.usingFallbackWeb3 = true;
        // _loadScript('/index.js');
    }
})

function _loadScript(src) {
    var appScript = document.createElement("script");
    appScript.async = true;
    appScript.src = src;
    document.body.appendChild(appScript);
    return appScript
}
// </script>