feat(taikoon): geoblocking

packages/taikoon-ui/package.json

@@ -22,7 +22,7 @@
  "@playwright/test": "^1.28.1",
  "@sveltejs/adapter-auto": "^3.0.0",
  "@sveltejs/kit": "^2.0.0",
- "@sveltejs/vite-plugin-svelte": "^3.0.0",
+ "@sveltejs/vite-plugin-svelte": "^3.1.0",
  "@types/eslint": "^8.56.0",
  "@types/jest": "^29.5.12",
  "@types/node": "^20.12.7",

packages/taikoon-ui/src/components/SwitchChainModal/SwitchChainModal.svelte

@@ -74,26 +74,27 @@
  <h3 class={titleClasses}>{$t('switch_modal.title')}</h3>
  <p class={textClasses}>{$t('switch_modal.description')}</p>
  <ul role="menu" class=" w-full">
- {#each chains as chain (chain.id)}
- {@const icon = getChainImage(Number(chain.id)) || 'Unknown Chain'}
+ {#if chains !== undefined}
+ {#each chains as chain (chain.id)}
+ {@const icon = getChainImage(Number(chain.id)) || 'Unknown Chain'}
 
- <li
- role="menuitem"
- tabindex="0"
- class={chainItemClasses}
- on:click={() => selectChain(chain)}
- on:keydown={getChainKeydownHandler(chain)}>
- <!-- TODO: agree on hover:bg color -->
- <div class={chainItemContentClasses}>
- <div class={chainItemContentWrapperClasses}>
- <i role="img" aria-label={chain.name}>
- <img src={icon} alt="chain-logo" class="rounded-full" width="30px" height="30px" />
- </i>
- <span class="body-bold">{chain.name}</span>
+ <li
+ role="menuitem"
+ tabindex="0"
+ class={chainItemClasses}
+ on:click={() => selectChain(chain)}
+ on:keydown={getChainKeydownHandler(chain)}>
+ <!-- TODO: agree on hover:bg color -->
+ <div class={chainItemContentClasses}>
+ <div class={chainItemContentWrapperClasses}>
+ <i role="img" aria-label={chain.name}>
+ <img src={icon} alt="chain-logo" class="rounded-full" width="30px" height="30px" />
+ </i>
+ <span class="body-bold">{chain.name}</span>
+ </div>
  </div>
- </div>
- </li>
- {/each}
+ </li>
+ {/each}{/if}
  </ul>
  </div>
 </dialog>

packages/taikoon-ui/src/components/core/ResponsiveController/ResponsiveController.svelte

@@ -1,12 +1,7 @@
 <script lang="ts">
  import { onDestroy, onMount } from 'svelte';
 
- // This component will help us to programmatically do the same as
- // CSS media queries. We can use it to show/hide elements or render
- // different components based on whether or not the size is desktop
- // or larger
- const isLgMediaQuery = window.matchMedia('(min-width: 1024px)');
- const isMdMediaQuery = window.matchMedia('(min-width: 768px)');
+ import { browser } from '$app/environment';
 
  export let windowSize: 'sm' | 'md' | 'lg' = 'md';
 
@@ -18,15 +13,24 @@
  windowSize = event.matches ? 'md' : 'sm';
  }
 
- onMount(() => {
- isLgMediaQuery.addEventListener('change', isLgQueryHandler);
- isMdMediaQuery.addEventListener('change', isMdQueryHandler);
- //assign starting value
- windowSize = window.innerWidth > 1024 ? 'lg' : window.innerWidth < 768 ? 'sm' : 'md';
- });
+ if (browser) {
+ // This component will help us to programmatically do the same as
+ // CSS media queries. We can use it to show/hide elements or render
+ // different components based on whether or not the size is desktop
+ // or larger
+ const isLgMediaQuery = window.matchMedia('(min-width: 1024px)');
+ const isMdMediaQuery = window.matchMedia('(min-width: 768px)');
 
- onDestroy(() => {
- isLgMediaQuery.removeEventListener('change', isLgQueryHandler);
- isMdMediaQuery.removeEventListener('change', isMdQueryHandler);
- });
+ onMount(() => {
+ isLgMediaQuery.addEventListener('change', isLgQueryHandler);
+ isMdMediaQuery.addEventListener('change', isMdQueryHandler);
+ //assign starting value
+ windowSize = window.innerWidth > 1024 ? 'lg' : window.innerWidth < 768 ? 'sm' : 'md';
+ });
+
+ onDestroy(() => {
+ isLgMediaQuery.removeEventListener('change', isLgQueryHandler);
+ isMdMediaQuery.removeEventListener('change', isMdQueryHandler);
+ });
+ }
 </script>

packages/taikoon-ui/src/generated/abi/index.ts

@@ -549,7 +549,7 @@ export const taikoonTokenAbi = [
  */
 export const taikoonTokenAddress = {
  17000: '0xfDbaA6d6c382A2555856bFaB315D5E6F3CDA1393',
- 31337: '0xe7f1725E7734CE288F8367e1Bb143E90bb3F0512',
+ 31337: '0x9fE46736679d2D9a65F0992F2272dE9f3c7fa6e0',
  167001: '0xe7f1725E7734CE288F8367e1Bb143E90bb3F0512',
 } as const;
 

packages/taikoon-ui/src/lib/chain/chains.ts

@@ -1,6 +1,6 @@
 import type { Chain } from 'viem';
 
-import { type ChainConfig, type ChainConfigMap, LayerType } from '../../lib/chain';
+import { type ChainConfig, type ChainConfigMap, LayerType } from '.';
 
 //import { chainConfig } from '$chainConfig';
 
@@ -107,33 +107,33 @@ export const chains: Chain[] = Object.entries(chainConfigs).map(([chainId, chain
  mapChainConfigToChain(chainId, chainConfig as ChainConfig),
 );
 
-export const getConfiguredChainIds = (): number[] => {
+export function getConfiguredChainIds(): number[] {
  return chains.map((chain) => Number(chain.id));
-};
+}
 
-export const isSupportedChain = (chainId: number) => {
+export function isSupportedChain(chainId: number) {
  return chains.some((chain) => chain.id === chainId);
-};
+}
 
-export const getChainImages = (): Record<number, string> => {
+export function getChainImages(): Record<number, string> {
  return Object.fromEntries(
  Object.entries(chainConfigs).map(([chainId]) => [Number(chainId), chainConfigs[Number(chainId)].icon]),
  );
-};
+}
 
-export const getChainImage = (chainId: number) => {
+export function getChainImage(chainId: number) {
  const images = getChainImages();
  if (!images[chainId]) {
  throw new Error(`Chain with id ${chainId} not found`);
  }
 
  return images[chainId];
-};
+}
 
-export const getChainName = (chainId: number) => {
+export function getChainName(chainId: number) {
  const chain = chains.find((chain) => chain.id === chainId);
  if (!chain) {
  throw new Error(`Chain with id ${chainId} not found`);
  }
  return chain.name;
-};
+}

packages/taikoon-ui/src/lib/connect/web3modal.ts

@@ -2,10 +2,11 @@ import { getAccount, getChainId, watchAccount, watchChainId } from '@wagmi/core'
 import { createWeb3Modal } from '@web3modal/wagmi';
 import { readable } from 'svelte/store';
 
+import { browser } from '$app/environment';
 import { PUBLIC_WALLETCONNECT_PROJECT_ID } from '$env/static/public';
 import { config } from '$wagmi-config';
 
-import { getChainImages } from '../../lib/chain';
+import { getChainImages } from '../../lib/chain/chains';
 
 const projectId = PUBLIC_WALLETCONNECT_PROJECT_ID || 'walletconnect-project-id';
 const chainImages = getChainImages();
@@ -37,5 +38,5 @@ export const web3modal = createWeb3Modal({
  '--w3m-border-radius-master': '9999px',
  '--w3m-accent': 'var(--primary-brand)',
  },
- themeMode: (localStorage.getItem('theme') as 'dark' | 'light') ?? 'dark',
+ themeMode: browser ? (localStorage.getItem('theme') as 'dark' | 'light') ?? 'dark' : 'dark',
 });

packages/taikoon-ui/src/lib/wagmi/watcher.ts

@@ -39,6 +39,6 @@ export async function startWatching() {
 }
 
 export function stopWatching() {
- unWatchAccount();
+ unWatchAccount && unWatchAccount();
  isWatching = false;
 }

packages/taikoon-ui/src/routes/+error.svelte

@@ -0,0 +1,7 @@
+<script>
+ import { page } from '$app/stores';
+</script>
+
+{#if $page && $page.error && $page.error.message}
+ <h1>{$page.error.message}</h1>
+{/if}

packages/taikoon-ui/src/routes/+layout.ts

@@ -2,4 +2,4 @@
 // which essentially means you turn your app into an SPA.
 // See https://kit.svelte.dev/docs/page-options#ssr
 
-export const ssr = false;
+export const ssr = true;

packages/taikoon-ui/src/routes/+page.server.ts

@@ -0,0 +1,37 @@
+import { error } from '@sveltejs/kit';
+
+const blacklistedCountries = [
+ 'AF', // Afghanistan (AF)
+ 'BY', // Belarus (BY)
+ 'MM', // Burma/Myanmar (MM)
+ 'CF', // Central African Republic (CF)
+ 'CN', // China (CN)
+ 'CU', // Cuba (CU)
+ 'CD', // Democratic Republic of the Congo (CD)
+ 'ET', // Ethiopia (ET)
+ 'IR', // Iran (IR)
+ 'IQ', // Iraq (IQ)
+ 'LB', // Lebanon (LB)
+ 'LY', // Libya (LY)
+ 'ML', // Mali (ML)
+ 'NI', // Nicaragua (NI)
+ 'KP', // North Korea (KP)
+ 'RU', // Russia (RU)
+ 'SO', // Somalia (SO)
+ 'SS', // South Sudan (SS)
+ 'SD', // Sudan (SD)
+ 'SY', // Syria (SY)
+ 'VE', // Venezuela (VE)
+ 'US', // United States (US)
+];
+
+export function load(event: any) {
+ const country = event.request.headers.get('x-vercel-ip-country') ?? false;
+ const isDev = event.url.hostname === 'localhost';
+ if (!isDev && (!country || blacklistedCountries.includes(country))) {
+ return error(400, { message: 'This site is not available in your country.' });
+ }
+ return {
+ location: { country },
+ };
+}

packages/taikoon-ui/src/routes/blocked/+page.svelte

@@ -0,0 +1,4 @@
+<script lang="ts">
+</script>
+
+<h1>Seems that you have been blocked</h1>

packages/taikoon-ui/svelte.config.js

@@ -1,4 +1,4 @@
-import adapter from '@sveltejs/adapter-auto'
+import adapter from '@sveltejs/adapter-auto';
 import { vitePreprocess } from '@sveltejs/vite-plugin-svelte'
 /** @type {import('@sveltejs/kit').Config} */
 const config = {

packages/taikoon-ui/tsconfig.json

@@ -28,7 +28,7 @@
  //"$relayerConfig": ["./src/generated/relayerConfig.ts"],
  //"$customToken": ["./src/generated/customTokenConfig.ts"]
  },
- "rootDirs": [".", "./.svelte-kit/types", "./$houdini/types"]
+ "rootDirs": [".", "./.svelte-kit/types"]
  }
  // Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias
  // except $lib which is handled by https://kit.svelte.dev/docs/configuration#files