fix: add default Koios api token to prevent CORS issues

fabianbormann · Mar 11, 2024 · effe997 · effe997
1 parent b4c51e8
commit effe997
Show file tree

Hide file tree

Showing 8 changed files with 2,825 additions and 2,371 deletions.
diff --git a/.github/workflows/deploy-preprod.yml b/.github/workflows/deploy-preprod.yml
@@ -29,6 +29,7 @@ jobs:
           echo 'VITE_PREPROD_URL=https://preprod.walkinwallet.com' >> .env
           echo 'VITE_PREVIEW_URL=https://preview.walkinwallet.com' >> .env
           echo 'VITE_MAINNET_URL=https://walkinwallet.com' >> .env
+          echo 'VITE_KOIOS_API_TOKEN=${{ secrets.KOIOS_API_TOKEN }}' >> .env
 
       - name: 🔥 Edit firebase.json
         run: |

diff --git a/.github/workflows/deploy-preview.yml b/.github/workflows/deploy-preview.yml
@@ -29,6 +29,7 @@ jobs:
           echo 'VITE_PREPROD_URL=https://preprod.walkinwallet.com' >> .env
           echo 'VITE_PREVIEW_URL=https://preview.walkinwallet.com' >> .env
           echo 'VITE_MAINNET_URL=https://walkinwallet.com' >> .env
+          echo 'VITE_KOIOS_API_TOKEN=${{ secrets.KOIOS_API_TOKEN }}' >> .env
 
       - name: 🔥 Edit firebase.json
         run: |

diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
@@ -26,6 +26,7 @@ jobs:
           echo 'VITE_PREPROD_URL=https://preprod.walkinwallet.com' >> .env
           echo 'VITE_PREVIEW_URL=https://preview.walkinwallet.com' >> .env
           echo 'VITE_MAINNET_URL=https://walkinwallet.com' >> .env
+          echo 'VITE_KOIOS_API_TOKEN=${{ secrets.KOIOS_API_TOKEN }}' >> .env
 
       - name: 🔨 Download dependencies and build hosting
         run: npm ci && npm run build

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -12,8 +12,7 @@
   "dependencies": {
     "@babylonjs/core": "^6.15.0",
     "@babylonjs/loaders": "^6.15.0",
-    "@cardano-foundation/cardano-connect-with-wallet": "^0.2.7",
-    "@cardano-foundation/cardano-connect-with-wallet-core": "^0.2.3",
+    "@cardano-foundation/cardano-connect-with-wallet": "^0.2.8",
     "@emotion/react": "^11.10.5",
     "@emotion/styled": "^11.10.5",
     "@fontsource/roboto": "^5.0.8",

diff --git a/src/App.tsx b/src/App.tsx
@@ -21,7 +21,7 @@ import {
   loadPaintings,
 } from './global/api';
 import { FAQ, Welcome, Benefits } from './pages';
-import { Picture, Room, RoomElement } from './global/types';
+import { NftDetailResponse, Picture, Room, RoomElement } from './global/types';
 
 const Main = () => {
   const [progress, setProgress] = useState(0);
@@ -48,7 +48,7 @@ const Main = () => {
         stakeAddress = await getStakeAddressFromAdaHandle(address);
       }
 
-      let nftDetailResponse = [];
+      let nftDetailResponse: NftDetailResponse = [];
 
       if (stakeAddress.startsWith('stake')) {
         nftDetailResponse = await getNFTsFromStakeAddress(stakeAddress);

diff --git a/src/components/Header.tsx b/src/components/Header.tsx
@@ -135,6 +135,22 @@ const Header = (props: HeaderProps) => {
           }
           primaryColor={theme.palette.primary.main}
           borderRadius={4}
+          onConnectError={(walletname, error) => {
+            if (error.name === 'WrongNetworkTypeError') {
+              setSnackbarVariant('error');
+              setSnackbarMessage(
+                `Please make sure that you selected the ${currentNetwork} network in your ${walletname} settings.`
+              );
+              setOpen(true);
+            } else {
+              console.warn(error);
+              setSnackbarVariant('error');
+              setSnackbarMessage(
+                `Failed to connect to ${walletname}. Please make sure that you created an account in your wallet app on the ${currentNetwork} network.`
+              );
+              setOpen(true);
+            }
+          }}
           customCSS={`
               padding-top: 8px;
               button {

diff --git a/src/global/api.ts b/src/global/api.ts
@@ -10,6 +10,7 @@ import { setupCache, buildWebStorage } from 'axios-cache-interceptor';
 
 const MAX_IPFS_FETCH_RETRIES = 20;
 const currentNetwork = import.meta.env.VITE_NETWORK || 'mainnet';
+const koiosApiToken = import.meta.env.VITE_KOIOS_API_TOKEN || '';
 let koiosBaseUrl = 'https://api.koios.rest/api/v0/';
 
 if (currentNetwork === 'preprod') {
@@ -26,6 +27,13 @@ const axios = setupCache(Axios.create(), {
 
 const defaultAxios = Axios.create();
 
+if (koiosApiToken) {
+  axios.defaults.headers.common['Authorization'] = `Bearer ${koiosApiToken}`;
+  defaultAxios.defaults.headers.common[
+    'Authorization'
+  ] = `Bearer ${koiosApiToken}`;
+}
+
 export const getStakeAddressFromPaymentAddress = async (
   paymentAddress: string
 ) => {