1

My app already exist, built using Next.js and I want to add Safe App functionality to it in order to list on Safe web interface. Referred the docs and added both manifest.json and config-overrides.js files with following contents respectively as per the docs:

{
  "name": "Mesha",
  "description": "Financial stack for Web3 teams",
  "iconPath": "public/images/mesh_icon.svg",
  "Access-Control-Allow-Origin": "*",
  "Access-Control-Allow-Methods": "GET",
  "Access-Control-Allow-Headers": "X-Requested-With, content-type, Authorization"
}
/* config-overrides.js */

module.exports = {
    // The function to use to create a webpack dev server configuration when running the development
    // server with 'npm run start' or 'yarn start'.
    // Example: set the dev server to use a specific certificate in https.
    devServer: function (configFunction) {
        // Return the replacement function for create-react-app to use to generate the Webpack
        // Development Server config. "configFunction" is the function that would normally have
        // been used to generate the Webpack Development server config - you can use it to create
        // a starting configuration to then modify instead of having to create a config from scratch.
        return function (proxy, allowedHost) {
            // Create the default config by calling configFunction with the proxy/allowedHost parameters
            const config = configFunction(proxy, allowedHost);

            config.headers = {
                'Access-Control-Allow-Origin': '*',
                'Access-Control-Allow-Methods': 'GET',
                'Access-Control-Allow-Headers': 'X-Requested-With, content-type, Authorization',
            };

            // Return your customised Webpack Development Server config.
            return config;
        };
    },
    webpack: (config, _env) => {
        return config;
    },
};

Then started my app locally using yarn dev command. Here dev inside package.json file under scripts property defined like this "dev": "next dev". App started on http://localhost:3000. Then I used Ngrok with command ngrok http 3000 to give my app a public url like this https://b630-2406-16c0-101-957-48ef-57a4-f240-c4f6.in.ngrok.io.

Now when I use ngrok url in the Safe's Add custom app input then getting following message in the screenshot. I also tried and referred other safe app repos mentioned here and also installed Safe Apps Provider SDK but no luck. I am currently struggling to make it working and move forward. Any guidance or help is appreciated🙏.

enter image description here

3
  • 1
    Do you see any errors in the console? Such an error will generally be shown if the manifest.json is malformed or can't be fetched. In your case, it seems valid, so I guess it cannot be fetched. For the exact error message, you should check the console/networks tab in your browser.
    – mikheevm
    Apr 26, 2023 at 14:27
  • Checked, so I am getting CORS error. Cross-Origin Resource Sharing error: MissingAllowOriginHeader. I even shifted the manifest.json in public folder but it is still showing CORS error but working when i simply try the url in browser. Browser shows data in manifest.json file. Apr 27, 2023 at 12:16
  • Then it would be best if you looked up how to properly set up CORS on the server you're using
    – mikheevm
    Apr 28, 2023 at 8:52

1 Answer 1

0

Found the solution after getting idea from mikheevm's comment. It is like, steps mentioned in the Safe docs are not applicable for Next.js based apps as they have a dedicated file next.config.js to make it working. So, I did below things.

  1. Added manifest.json file in /public folder with following content:
{
  "name": "<app name>",
  "description": "<app description>",
  "iconPath": "<path to app logo>"
}
  1. Referred this and added headers in the headers array like this:
[
  {
    key: "Access-Control-Allow-Origin",
    value: '*',
  },
  {
    key: "Access-Control-Allow-Methods",
    value: 'GET',
  },
  {
    key: "Access-Control-Allow-Headers",
    value: 'X-Requested-With, content-type, Authorization',
  },
]
  1. Updated Content security policy's frame-ancestors to enable safe url like this:
'self' https://app.safe.global;

I think Safe guys should consider updating documentation as this might be confusing for someone who is not familiar with these things.

Hope this will help others.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.