Purchase age verification

README.md

@@ -5,26 +5,16 @@ The browser game client for Influence.
 ## Test Environment
 1. Initialize your .env file:
     ```
-    echo "REACT_APP_API_URL=http://localhost:3001
-    REACT_APP_IMAGES_URL=http://localhost:3001
-    REACT_APP_BRIDGE_URL=http://localhost:4000
-    REACT_APP_STARKNET_NETWORK=http://localhost:9000
-    REACT_APP_ETHEREUM_EXPLORER_URL=https://etherscan.io
-    REACT_APP_STARKNET_EXPLORER_URL=https://voyager.online
-    REACT_APP_ETHEREUM_NFT_MARKET_URL=https://opensea.io
-    REACT_APP_STTARKNET_NFT_MARKET_URL=https://unframed.co
-
-    # (this is the devnet >0.4 token address)
-    REACT_APP_ERC20_TOKEN_ADDRESS=0x049d36570d4e46f48e99674bd3fcc84644ddd6b96f7c741b1562b82f9e004dc7
-    REACT_APP_STARKNET_DISPATCHER=
-
-    REACT_APP_HIDE_SOCIAL=false
-
-    SKIP_PREFLIGHT_CHECK=true
-    " > .env
+    echo "BUFFER_GLOBAL=1
+    SKIP_PREFLIGHT_CHECK=1
+
+    NODE_ENV=development
+    REACT_APP_CONFIG_ENV=prerelease
+    REACT_APP_APP_VERBOSELOGS=1" > .env
     ```
-1. Adjust or fill in any missing .env variables as needed.
-    > i.e. If you are running starknet devnet, `REACT_APP_STARKNET_DISPATCHER` value is available by running `node bin/printEnv.js` from the `starknet-contracts` project.
+1. Adjust or fill in any missing .env variables as needed. Most values are preset in 
+`src/appConfig/prerelease.json`. However, if you need to overwrite any of these presets,
+you can do so in your local env file by following the instructions in `src/appConfig/index.js`
 1. Run `npm start`.
 
 ## Available Scripts

app.json

@@ -6,123 +6,28 @@
     }
   ],
   "env": {
-    "REACT_APP_DEPLOYMENT": {
-      "description": "The specific deployment tag for the client (i.e. prerelease, production, etc.)",
-      "required": true
-    },
-    "REACT_APP_API_URL": {
-      "description": "Base URL of the Influence API server, does not include trailing slash",
-      "required": true
-    },
-    "REACT_APP_IMAGES_URL": {
-      "description": "Base URL of the Influence images server, does not include trailing slash",
-      "required": true
-    },
-    "REACT_APP_BRIDGE_URL": {
-      "description": "Base URL of the Influence L1/L2 bridge",
-      "required": true
-    },
-    "REACT_APP_ETHEREUM_NFT_MARKET_URL": {
-      "description": "Base URL for Ethereum NFT marketplace. Does not include trailing slash",
-      "required": true
-    },
-    "REACT_APP_STARKNET_NFT_MARKET_URL": {
-      "description": "Base URL for Starknet NFT marketplace. Does not include trailing slash",
-      "required": true
-    },
-    "REACT_APP_CHAIN_ID": {
-      "description": "Chain ID for Starknet (i.e. 0x534e5f474f45524c49 for Testnet)",
-      "required": true
-    },
-    "REACT_APP_STARKNET_NETWORK": {
-      "description": "Base URL for Starknet network.",
-      "required": true
-    },
-    "REACT_APP_ETHEREUM_EXPLORER_URL": {
-      "description": "Base URL for Ethereum block explorer. Does not include trailing slash",
-      "required": true
-    },
-    "REACT_APP_STARKNET_EXPLORER_URL": {
-      "description": "Base URL for Starknet block explorer. Does not include trailing slash",
-      "required": true
-    },
-    "REACT_APP_ERC20_TOKEN_ADDRESS": {
-      "description": "Address of ERC20 token for network.",
-      "required": true
-    },
-    "REACT_APP_STARKNET_DISPATCHER": {
-      "required": true
-    },
-    "REACT_APP_STARKNET_ESCROW": {
-      "required": true
-    },
-    "REACT_APP_STARKNET_ASTEROID_TOKEN": {
-      "required": true
-    },
-    "REACT_APP_STARKNET_CREWMATE_TOKEN": {
-      "required": true
-    },
-    "REACT_APP_STARKNET_SHIP_TOKEN": {
-      "required": true
-    },
-    "REACT_APP_CONTRACT_ASTEROID_TOKEN": {
-      "description": "Address of Asteroid token on L1",
-      "required": true
-    },
-    "REACT_APP_CONTRACT_CREWMATE_TOKEN": {
-      "description": "Address of Crewmate token on L1",
-      "required": true
-    },
-    "REACT_APP_CONTRACT_CREWMATE_TOKEN_V2": {
-      "description": "Address of Crewmate v2 token on L1",
-      "required": true
-    },
-    "REACT_APP_ENABLE_DEV_TOOLS": {
-      "required": false
-    },
-    "REACT_APP_HIDE_SOCIAL": {
-      "required": false
-    },
-    "REACT_APP_CLOUDFRONT_IMAGE_URL": {
-      "required": true
-    },
-    "REACT_APP_CLOUDFRONT_OTHER_URL": {
-      "required": true
-    },
-    "REACT_APP_CLOUDFRONT_BUCKET": {
-      "required": true
-    },
-    "REACT_APP_HELP_URL": {
-      "required": false
-    },
-    "REACT_APP_LAYERSWAP_CLIENT_ID": {
-      "required": false
-    },
-    "REACT_APP_RAMP_API_KEY": {
+    "REACT_APP_CONFIG_ENV": {
+      "description": "Override NODE_ENV in choosing which config to use (optional)",
       "required": false
     },
-    "REACT_APP_ARGENT_WEB_WALLET_URL": {
+    "REACT_APP_API_CLIENTID_GTM": {
+      "description": "Google Tag Manager ID (optional)",
       "required": false
     },
-    "REACT_APP_STARKNET_SWAY_TOKEN": {
-      "required": true
-    },
-    "REACT_APP_AVNU_API_URL": {
+    "REACT_APP_API_CLIENTID_GOOGLE": {
+      "description": "Google API Key (optional)",
       "required": false
     },
-    "REACT_APP_IPFS_URL": {
-      "required": true
-    },
-    "REACT_APP_GOOGLE_API_KEY": {
-      "required": true
-    },
-    "REACT_APP_SOCIAL_QUESTS_URL": {
+    "REACT_APP_API_CLIENTID_LAYERSWAP": {
+      "description": "Layerswap Client ID (optional)",
       "required": false
     },
-    "REACT_APP_COLONIZATION_MISSIONS_URL": {
+    "REACT_APP_API_CLIENTID_RAMP": {
+      "description": "Ramp API Key (optional)",
       "required": false
     },
-    "REACT_APP_COMMUNITY_MISSIONS_URL": {
+    "REACT_APP_STARKNET_PROVIDER": {
+      "description": "Custom Starknet rpc provider (optional)",
       "required": false
     }
   }

opengraph.js

@@ -1,7 +1,9 @@
 const axios = require('axios');
 const probe = require('probe-image-size');
 
-const instance = axios.create({ baseURL: `${process.env.REACT_APP_API_URL}/og/data` });
+const { appConfig } = require('./src/appConfig');
+
+const instance = axios.create({ baseURL: `${appConfig.get('Api.influence')}/og/data?t=1` });
 
 const getOpengraphTags = async (originalUrl) => {
   const urlParts = originalUrl.split('/').slice(1);

src/Game.js

@@ -6,6 +6,7 @@ import { useDetectGPU } from '@react-three/drei';
 
 import { initializeTagManager } from './gtm';
 
+import { appConfig } from '~/appConfig';
 import FullpageInterstitial from '~/components/FullpageInterstitial';
 import { ActionItemProvider } from '~/contexts/ActionItemContext';
 import { ActivitiesProvider } from '~/contexts/ActivitiesContext';
@@ -62,7 +63,7 @@ const GlobalStyle = createGlobalStyle`
   }
 `;
 
-const DISABLE_LAUNCHER_LANDING = true && process.env.NODE_ENV === 'development';
+const DISABLE_LAUNCHER_LANDING = appConfig.get('App.disableLauncherLanding');
 
 const LauncherRedirect = () => {
   const { authenticated } = useSession();

src/ScreensizeWarning.js

@@ -1,10 +1,11 @@
 import { useState } from 'react';
 
+import { appConfig } from '~/appConfig';
 import FullpageInterstitial from '~/components/FullpageInterstitial';
 import useScreenSize from '~/hooks/useScreenSize';
 import theme from '~/theme';
 
-const disableScreensizeWarning = process.env.NODE_ENV === 'development';
+const disableScreensizeWarning = appConfig.get('App.disableScreensizeWarning');
 
 const ScreensizeWarning = () => {
   const { height, width } = useScreenSize();

src/appConfig/_default.json

@@ -0,0 +1,69 @@
+{
+  "App": {
+    "deployment": "development",
+    "disableIntroAnimation": false,
+    "disableLauncherLanding": false,
+    "disableLaunchTrailer": false,
+    "defaultMuted": false,
+    "disableScreensizeWarning": false,
+    "enableDevTools": false,
+    "hideSocial": true,
+    "verboseLogs": false
+  },
+  "Api": {
+    "argent": "",
+    "argentWebWallet": "",
+    "avnu": "",
+    "influence": "",
+    "influenceImage": "",
+    "ipfs": "",
+    "ramp": "",
+    "ClientId": {
+      "google": "",
+      "gtm": "",
+      "layerswap": "",
+      "ramp": ""
+    }
+  },
+  "Cloudfront": {
+    "imageUrl": "",
+    "otherUrl": "",
+    "bucket": ""
+  },
+  "Ethereum": {
+    "Address": {
+      "asteroidToken": "",
+      "crewmateToken": ""
+    }
+  },
+  "Starknet": {
+    "chainId": "",
+    "provider": "",
+    "providerBackup": "",
+    "Address": {
+      "ethToken": "",
+      "usdcToken": "",
+      "asteroidToken": "",
+      "crewmateToken": "",
+      "dispatcher": "",
+      "escrow": "",
+      "shipToken": "",
+      "swayToken": ""
+    }
+  },
+  "Url": {
+    "bridge": "",
+    "bugReport": "https://discord.gg/influenceth",
+    "colonizationMissions": "",
+    "communityMissions": "https://influence.wendash.com/",
+    "discord": "https://discord.gg/influenceth",
+    "ethereumExplorer": "",
+    "ethereumNftMarket": "",
+    "help": "https://discord.gg/influenceth",
+    "home": "https://influence.io",
+    "socialQuests": "",
+    "starknetExplorer": "",
+    "starknetNftMarket": "",
+    "wiki": "https://wiki.influenceth.io"
+  }
+}

src/appConfig/index.js

@@ -0,0 +1,53 @@
+import { isPlainObject, reduce } from 'lodash';
+import defaultConfig from './_default.json';
+import prereleaseConfig from './prerelease.json';
+import productionConfig from './production.json';
+
+// 
+//                                          NOTES:
+// - _default contains a list of all possible config values, though most are not filled in
+// - prerelease and production contain the actual values for those environments
+// - any value can be overridden by an environment variable... for example, to overwrite 
+//  'Api.ClientId.layerswap', you would set `REACT_APP_API_CLIENTID_LAYERSWAP` in your env
+
+function flattenObject(obj, parentKey = '', result = {}) {
+  return reduce(obj, (res, value, key) => {
+    const newKey = parentKey ? `${parentKey}.${key}` : key;
+    if (isPlainObject(value)) {
+      flattenObject(value, newKey, res);
+    } else {
+      res[newKey] = value;
+    }
+    return res;
+  }, result);
+}
+
+// override default config with environment specific config
+const configSelection = process.env.REACT_APP_CONFIG_ENV || process.env.NODE_ENV;
+const rawConfig = {
+  ...flattenObject(defaultConfig),
+  ...flattenObject(configSelection === 'production' ? productionConfig : prereleaseConfig),
+};
+
+// override config with environment variables
+const appConfigData = reduce(
+  rawConfig,
+  (res, v, key) => {
+    const overrideKey = `REACT_APP_${key.replace(/\./g, '_').toUpperCase()}`;
+    if (process.env.hasOwnProperty(overrideKey)) {
+      res[key] = process.env[overrideKey];
+    }
+    return res;
+  },
+  rawConfig
+);
+
+const appConfig = {
+  get: (key) => {
+    if (!appConfigData.hasOwnProperty(key)) throw new Error(`Invalid appConfig key: "${key}"`);
+    return appConfigData[key];
+  },
+  has: (key) => appConfigData.hasOwnProperty(key),
+};
+
+export { appConfig };

src/appConfig/prerelease.json

@@ -0,0 +1,48 @@
+{
+  "App": {
+    "deployment": "prerelease",
+    "enableDevTools": 1,
+    "verboseLogs": true
+  },
+  "Api": {
+    "argent": "https://api.hydrogen.argent47.net/v1",
+    "argentWebWallet": "https://web-v2.hydrogen.argent47.net",
+    "avnu": "https://sepolia.api.avnu.fi",
+    "influence": "https://api-prerelease.influenceth.io",
+    "influenceImage": "https://images-prerelease.influenceth.io",
+    "ipfs": "https://influence.infura-ipfs.io/ipfs",
+    "ramp": "https://app.demo.ramp.network"
+  },
+  "Cloudfront": {
+    "imageUrl": "https://d2xo5vocah3zyk.cloudfront.net",
+    "otherUrl": "https://d1c1daundk1ax0.cloudfront.net/influence/prerelease",
+    "bucket": "unstoppablegames"
+  },
+  "Ethereum": {
+    "Address": {
+      "asteroidToken": "0xA986C6D24222700f78c617ed49E0D78983D0f9AF",
+      "crewmateToken": "0xE5700883cf429bB63B69424447C7F86C8fdD1786"
+    }
+  },
+  "Starknet": {
+    "chainId": "0x534e5f5345504f4c4941",
+    "provider": "https://free-rpc.nethermind.io/sepolia-juno/v0_7",
+    "Address": {
+      "ethToken": "0x049d36570d4e46f48e99674bd3fcc84644ddd6b96f7c741b1562b82f9e004dc7",
+      "usdcToken": "0x053b40a647cedfca6ca84f542a0fe36736031905a9639a7f19a3c1e66bfd5080",
+      "asteroidToken": "0x0680710b95255a852ed9ead04d4c1ffcf4f0695e29fb5c327abe2b8cb305ba25",
+      "crewmateToken": "0x026b26dc1cd021d7a1e78615cdf9f8f7d19ddbec73a4187e37af1d57f9bcfdc6",
+      "dispatcher": "0x0517567ac7026ce129c950e6e113e437aa3c83716cd61481c6bb8c5057e6923e",
+      "escrow": "0x04541d894b5c0476d620e62c3a9be4719ba2dc652df84148be382a89619864e2",
+      "shipToken": "0x061645ea472d543200c28291c92d54066b1088de67069c1ff0ad2c4c05ef2ed8",
+      "swayToken": "0x0030058f19ed447208015f6430f0102e8ab82d6c291566d7e73fe8e613c3d2ed"
+    }
+  },
+  "Url": {
+    "bridge": "https://assets-prerelease.influenceth.io",
+    "ethereumExplorer": "https://sepolia.etherscan.io",
+    "ethereumNftMarket": "https://testnets.opensea.io",
+    "starknetExplorer": "https://sepolia.starkscan.co",
+    "starknetNftMarket": "https://pyramid.market"
+  }
+}