Shopify MetaMask (or any crypto wallet?) Integration

More details here

Project will consist of 3 parts:

• NextJS frontend:
  • An admin dashboard where shop owner configures which contract holder is eligible for discounts/custom merch
• NextJS backend:
  • Server that stores the data
  • Dynamically create promo codes for discounts using Shopify API (?) - need to do some research on that
• A widget that
  • connects with crypto wallet
  • talks to server to verify if user is eligible for discounts/custom merch
  • fetches promo code from server and applies it to the user's cart

Requirements

• If you don’t have one, create a Shopify partner account.
• If you don’t have one, create a Development store where you can install and test your app.
• In the Partner dashboard, create a new app. You’ll need this app’s API credentials during the setup process.
• Download NGROK - is a free service that makes it easy to host your app in development. Sign up for NGROK.

Development

• Clone the project and run npm install
• Create .env from .env.example
• Add SHOPIFY_API_KEY=<your API key> from your Shopify App settings
• Add SHOPIFY_API_SECRET=<your API secret>
• Add SHOP=<your shop>.myshopify.com
• SCOPES will be updated, for now just leave them as in the example
• Start NGROK and replace HOST with your NGROK URL

In your Shopify App settings:

• Set App URL to NGROK URL
• Set Allowed redirection URL(s) to <NGROK URL>/auth/callback, for example: https://1231231.ngrok.io/auth/callback*

You will need to update it every time you change NGROK URL

• npm run dev
• Click Select store under Test your app in Shopify App settings
• This should prompt you to install the app in your development store and open it in an admin dashboard. Common error is The redirect URI is not whitelisted, in that case you need to update NGROK URL in Allowed redirection URL(s)

Theme App Extension

Example of a theme app extension: https://github.com/Shopify/theme-extension-getting-started

• cd theme-app-extension and shopify extension register, choose THEME_APP_EXTENSION type
• npm run create-extension-js-bundle to bundle the crypto-wallet.js file and put it into theme-app-extension/assets folder
• shopify extension push and follow the instructions to install extension on the shopify theme or look at the Demo: https://www.loom.com/share/9c21c12fc567417e9f3e6e910b65f874
• My demo shopify page: https://sergey-metamask-test.myshopify.com, store password: rubado

WIP: https://www.loom.com/share/9cb9caccd1494387937ae0ce6b614d66