Racing car: add gasless and signless (#377)

gear-foundation · Jun 7, 2024 · e31c4ea · e31c4ea
1 parent 126affa
commit e31c4ea
Show file tree

Hide file tree

Showing 30 changed files with 278 additions and 442 deletions.
diff --git a/.github/workflows/Release-racing-game.yml b/.github/workflows/Release-racing-game.yml
@@ -72,6 +72,7 @@ jobs:
           build-args: |
             REACT_APP_CONTRACT_ADDRESS=${{ secrets.REACT_APP_CONTRACT_ADDRESS_RACING }}
             REACT_APP_NODE_ADDRESS=${{ secrets.REACT_APP_NODE_ADDRESS }}
+            REACT_APP_GASLESS_BACKEND_ADDRESS=${{ secrets.REACT_APP_GASLESS_BACKEND_ADDRESS }}
             REACT_APP_SENTRY_DSN=${{ secrets.REACT_SENTRY_DSN_RACING }}
 
   deploy-to-k8s:

diff --git a/.github/workflows/STG-racing-game.yml b/.github/workflows/STG-racing-game.yml
@@ -77,6 +77,7 @@ jobs:
           build-args: |
             REACT_APP_CONTRACT_ADDRESS=${{ secrets.REACT_APP_CONTRACT_ADDRESS_RACING }}
             REACT_APP_NODE_ADDRESS=${{ secrets.REACT_APP_NODE_ADDRESS }}
+            REACT_APP_GASLESS_BACKEND_ADDRESS=${{ secrets.REACT_APP_GASLESS_BACKEND_ADDRESS }}
             REACT_APP_SENTRY_DSN=${{ secrets.REACT_SENTRY_DSN_RACING }}
 
   deploy-to-k8s:

diff --git a/frontend/apps/racing-car-game/.env.example b/frontend/apps/racing-car-game/.env.example
@@ -1,6 +1,7 @@
 REACT_APP_NODE_ADDRESS=
 REACT_APP_CONTRACT_ADDRESS=
 REACT_APP_GTM_ID_CARS=
+REACT_APP_GASLESS_BACKEND_ADDRESS=
 
 # optional, specify sentry dsn and targetted domain for error tracking
 # if domain is not specified, localhost is used by default

diff --git a/frontend/apps/racing-car-game/Dockerfile b/frontend/apps/racing-car-game/Dockerfile
@@ -17,9 +17,11 @@ RUN apk add xsel
 
 ARG REACT_APP_CONTRACT_ADDRESS \
     REACT_APP_NODE_ADDRESS \
+    REACT_APP_GASLESS_BACKEND_ADDRESS \
     REACT_APP_SENTRY_DSN
 ENV REACT_APP_CONTRACT_ADDRESS=${REACT_APP_CONTRACT_ADDRESS} \
     REACT_APP_NODE_ADDRESS=${REACT_APP_NODE_ADDRESS} \
+    REACT_APP_GASLESS_BACKEND_ADDRESS=${REACT_APP_GASLESS_BACKEND_ADDRESS} \
     REACT_APP_SENTRY_DSN=${REACT_APP_SENTRY_DSN} \
     DISABLE_ESLINT_PLUGIN=true
 

diff --git a/frontend/apps/racing-car-game/package.json b/frontend/apps/racing-car-game/package.json
@@ -3,8 +3,8 @@
   "version": "1.0.2",
   "private": true,
   "scripts": {
-    "start": "yarn build:packages && react-app-rewired start",
-    "build": "yarn build:packages && react-app-rewired build"
+    "start": "yarn build:packages && yarn build:ez-transactions && yarn react-app-rewired start",
+    "build": "yarn build:packages && yarn build:ez-transactions && yarn react-app-rewired build"
   },
   "dependencies": {
     "@dapps-frontend/error-tracking": "workspace:*",
@@ -34,8 +34,7 @@
     "react-router-dom": "6.10.0",
     "react-scripts": "5.0.1",
     "react-transition-group": "^4.4.5",
-    "sass": "1.62.0",
-    "socket.io-client": "^4.7.2"
+    "sass": "1.62.0"
   },
   "devDependencies": {
     "@craco/craco": "7.1.0",

diff --git a/frontend/apps/racing-car-game/src/App.tsx b/frontend/apps/racing-car-game/src/App.tsx
@@ -19,6 +19,7 @@ import { LoginPage } from './pages/LoginPage';
 import { ApiLoader } from './components/ApiLoader';
 import { useGameState } from './features/Game/hooks';
 import { useAuth, useAuthSync } from './features/Auth/hooks';
+import '@gear-js/vara-ui/dist/style.css';
 
 function AppComponent() {
   const { isApiReady } = useApi();

diff --git a/frontend/apps/racing-car-game/src/assets/meta/meta.txt b/frontend/apps/racing-car-game/src/assets/meta/meta.txt
@@ -1 +1 @@
-0002000100000000000104000000010e0000000000010f000000000116000000011700000081299c0008306361725f72616365735f696f2047616d65496e69740000040118636f6e666967040118436f6e66696700000408306361725f72616365735f696f18436f6e66696700002401486761735f746f5f72656d6f76655f67616d6508010c753634000134696e697469616c5f73706565640c010c7533320001246d696e5f73706565640c010c7533320001246d61785f73706565640c010c7533320001346761735f666f725f726f756e6408010c75363400013474696d655f696e74657276616c0c010c7533320001306d61785f64697374616e63650c010c75333200011074696d650c010c75333200015474696d655f666f725f67616d655f73746f7261676508010c75363400000800000506000c00000505001008306361725f72616365735f696f2847616d65416374696f6e0001282041646441646d696e040014011c4163746f7249640000002c52656d6f766541646d696e040014011c4163746f72496400010038416464537472617465677949647304011c6361725f6964732001305665633c4163746f7249643e00020024537461727447616d6500030010506c617904011c6163636f756e7414011c4163746f72496400040028506c617965724d6f766504013c73747261746567795f616374696f6e2401385374726174656779416374696f6e00050030557064617465436f6e6669672401486761735f746f5f72656d6f76655f67616d6528012c4f7074696f6e3c7536343e000134696e697469616c5f73706565642c012c4f7074696f6e3c7533323e0001246d696e5f73706565642c012c4f7074696f6e3c7533323e0001246d61785f73706565642c012c4f7074696f6e3c7533323e0001346761735f666f725f726f756e6428012c4f7074696f6e3c7536343e00013474696d655f696e74657276616c2c012c4f7074696f6e3c7533323e0001306d61785f64697374616e63652c012c4f7074696f6e3c7533323e00011074696d652c012c4f7074696f6e3c7533323e00015474696d655f666f725f67616d655f73746f7261676528012c4f7074696f6e3c7536343e0006004852656d6f766547616d65496e7374616e63650401286163636f756e745f696414011c4163746f7249640007004c52656d6f766547616d65496e7374616e63657304012c706c61796572735f6964733001504f7074696f6e3c5665633c4163746f7249643e3e00080034416c6c6f774d657373616765730400340110626f6f6c000900001410106773746418636f6d6d6f6e287072696d6974697665731c4163746f724964000004001801205b75383b2033325d000018000003200000001c001c00000503002000000214002408306361725f72616365735f696f385374726174656779416374696f6e00010c3c427579416363656c65726174696f6e000000204275795368656c6c00010010536b6970000200002804184f7074696f6e04045401080108104e6f6e6500000010536f6d6504000800000100002c04184f7074696f6e040454010c0108104e6f6e6500000010536f6d6504000c00000100003004184f7074696f6e04045401200108104e6f6e6500000010536f6d6504002000000100003400000500003808306361725f72616365735f696f2447616d655265706c790001182c47616d6553746172746564000000304e6f74456e6f7567684761730001003047616d6546696e69736865640002002c476173526573657276656400030034537472617465677941646465640004002c506c61796572734d6f7665000500003c08306361725f72616365735f696f24526f756e64496e666f0000080110636172734001a05665633c284163746f7249642c207533322c204f7074696f6e3c526f756e64416374696f6e3e293e000118726573756c745001484f7074696f6e3c47616d65526573756c743e0000400000024400440000040c140c48004804184f7074696f6e040454014c0108104e6f6e6500000010536f6d6504004c00000100004c08306361725f72616365735f696f2c526f756e64416374696f6e00010c2c416363656c65726174656400000028536c6f776564446f776e00010060536c6f776564446f776e416e64416363656c657261746564000200005004184f7074696f6e04045401540108104e6f6e6500000010536f6d6504005400000100005408306361725f72616365735f696f2847616d65526573756c7400010c0c57696e0000001044726177000100104c6f7365000200005808306361725f72616365735f696f285374617465517565727900011c1841646d696e730000002c53747261746567794964730001001047616d650401286163636f756e745f696414011c4163746f72496400020020416c6c47616d6573000300344d73674964546f47616d65496400040018436f6e6669670005003c4d65737361676573416c6c6f776564000600005c08306361725f72616365735f696f2853746174655265706c790001201841646d696e7304002001305665633c4163746f7249643e0000002c537472617465677949647304002001305665633c4163746f7249643e0001001047616d6504006001304f7074696f6e3c47616d653e00020020416c6c47616d657304008001505665633c284163746f7249642c2047616d65293e000300344d73674964546f47616d65496404008801645665633c284d65737361676549642c204163746f724964293e0004002c57616974696e674d736773040094016c5665633c284d65737361676549642c204d6573736167654964293e00050018436f6e6669670400040118436f6e6669670006003c4d65737361676573416c6c6f7765640400340110626f6f6c000700006004184f7074696f6e04045401640108104e6f6e6500000010536f6d6504006400000100006408306361725f72616365735f696f1047616d6500001c01106361727368015842547265654d61703c4163746f7249642c204361723e00011c6361725f6964732001305665633c4163746f7249643e00013063757272656e745f7475726e1c0108753800011473746174657c012447616d655374617465000118726573756c745001484f7074696f6e3c47616d65526573756c743e00013463757272656e745f726f756e640c010c7533320001386c6173745f74696d655f7374657008010c753634000068042042547265654d617008044b01140456016c000400740000006c08306361725f72616365735f696f0c4361720000100120706f736974696f6e0c010c75333200011473706565640c010c75333200012c6361725f616374696f6e737001405665633c526f756e64416374696f6e3e000130726f756e645f726573756c7448014c4f7074696f6e3c526f756e64416374696f6e3e0000700000024c007400000278007800000408146c007c08306361725f72616365735f696f2447616d655374617465000114305265616479546f537461727400000010526163650001001c53746f707065640002002046696e697368656400030030506c61796572416374696f6e000400008000000284008400000408146400880000028c008c000004089014009010106773746418636f6d6d6f6e287072696d697469766573244d6573736167654964000004001801205b75383b2033325d00009400000298009800000408909000
+000200010000000000010400000001130000000000011600000000011f0000000120000000a13cc80008306361725f72616365735f696f2047616d65496e69740000040118636f6e666967040118436f6e66696700000408306361725f72616365735f696f18436f6e66696700002c01486761735f746f5f72656d6f76655f67616d6508010c753634000134696e697469616c5f73706565640c010c7533320001246d696e5f73706565640c010c7533320001246d61785f73706565640c010c7533320001346761735f666f725f726f756e6408010c75363400013474696d655f696e74657276616c0c010c7533320001306d61785f64697374616e63650c010c75333200011074696d650c010c75333200015474696d655f666f725f67616d655f73746f7261676508010c753634000144626c6f636b5f6475726174696f6e5f6d7308010c7536340001546761735f746f5f64656c6574655f73657373696f6e08010c75363400000800000506000c00000505001008306361725f72616365735f696f2847616d65416374696f6e0001342041646441646d696e040014011c4163746f7249640000002c52656d6f766541646d696e040014011c4163746f72496400010038416464537472617465677949647304011c6361725f6964732001305665633c4163746f7249643e00020024537461727447616d6504014c73657373696f6e5f666f725f6163636f756e7424013c4f7074696f6e3c4163746f7249643e00030010506c617904011c6163636f756e7414011c4163746f72496400040028506c617965724d6f766508014c73657373696f6e5f666f725f6163636f756e7424013c4f7074696f6e3c4163746f7249643e00013c73747261746567795f616374696f6e2801385374726174656779416374696f6e00050030557064617465436f6e6669672c01486761735f746f5f72656d6f76655f67616d652c012c4f7074696f6e3c7536343e000134696e697469616c5f737065656430012c4f7074696f6e3c7533323e0001246d696e5f737065656430012c4f7074696f6e3c7533323e0001246d61785f737065656430012c4f7074696f6e3c7533323e0001346761735f666f725f726f756e642c012c4f7074696f6e3c7536343e00013474696d655f696e74657276616c30012c4f7074696f6e3c7533323e0001306d61785f64697374616e636530012c4f7074696f6e3c7533323e00011074696d6530012c4f7074696f6e3c7533323e00015474696d655f666f725f67616d655f73746f726167652c012c4f7074696f6e3c7536343e000144626c6f636b5f6475726174696f6e5f6d732c012c4f7074696f6e3c7536343e0001546761735f746f5f64656c6574655f73657373696f6e2c012c4f7074696f6e3c7536343e0006004852656d6f766547616d65496e7374616e63650401286163636f756e745f696414011c4163746f7249640007004c52656d6f766547616d65496e7374616e63657304012c706c61796572735f6964733401504f7074696f6e3c5665633c4163746f7249643e3e00080034416c6c6f774d657373616765730400380110626f6f6c0009003443726561746553657373696f6e10010c6b657914011c4163746f7249640001206475726174696f6e08010c75363400013c616c6c6f7765645f616374696f6e733c01585665633c416374696f6e73466f7253657373696f6e3e0001247369676e617475726544013c4f7074696f6e3c5665633c75383e3e000a006044656c65746553657373696f6e46726f6d50726f6772616d04011c6163636f756e7414011c4163746f724964000b006044656c65746553657373696f6e46726f6d4163636f756e74000c00001410106773746418636f6d6d6f6e287072696d6974697665731c4163746f724964000004001801205b75383b2033325d000018000003200000001c001c00000503002000000214002404184f7074696f6e04045401140108104e6f6e6500000010536f6d6504001400000100002808306361725f72616365735f696f385374726174656779416374696f6e00010c3c427579416363656c65726174696f6e000000204275795368656c6c00010010536b6970000200002c04184f7074696f6e04045401080108104e6f6e6500000010536f6d6504000800000100003004184f7074696f6e040454010c0108104e6f6e6500000010536f6d6504000c00000100003404184f7074696f6e04045401200108104e6f6e6500000010536f6d6504002000000100003800000500003c00000240004008306361725f72616365735f696f44416374696f6e73466f7253657373696f6e00010824537461727447616d6500000028506c617965724d6f7665000100004404184f7074696f6e04045401480108104e6f6e6500000010536f6d650400480000010000480000021c004c0418526573756c740804540150044501540108084f6b040050000000000c45727204005400000100005008306361725f72616365735f696f2447616d655265706c790001303047616d6546696e69736865640000002c47616d65537461727465640001003453747261746567794164646564000200204d6f76654d6164650003004c47616d65496e7374616e636552656d6f76656400040040496e7374616e63657352656d6f7665640005002841646d696e41646465640006003041646d696e52656d6f76656400070034436f6e66696755706461746564000800545374617475734d65737361676573557064617465640009003853657373696f6e43726561746564000a003853657373696f6e44656c65746564000b00005408306361725f72616365735f696f2447616d654572726f72000118204e6f7441646d696e0000004c4d757374426554776f537472617465676965730001004847616d65416c726561647953746172746564000200344e6f74506c617965725475726e000300284e6f7450726f6772616d000400684d65737361676550726f63657373696e6753757370656e6465640005000058000004085c60005c08306361725f72616365735f696f345369676e61747572654461746100000c010c6b657914011c4163746f7249640001206475726174696f6e08010c75363400013c616c6c6f7765645f616374696f6e733c01585665633c416374696f6e73466f7253657373696f6e3e00006008306361725f72616365735f696f24526f756e64496e666f0000080110636172736401a05665633c284163746f7249642c207533322c204f7074696f6e3c526f756e64416374696f6e3e293e000118726573756c747401484f7074696f6e3c47616d65526573756c743e0000640000026800680000040c140c6c006c04184f7074696f6e04045401700108104e6f6e6500000010536f6d6504007000000100007008306361725f72616365735f696f2c526f756e64416374696f6e00010c2c416363656c65726174656400000028536c6f776564446f776e00010060536c6f776564446f776e416e64416363656c657261746564000200007404184f7074696f6e04045401780108104e6f6e6500000010536f6d6504007800000100007808306361725f72616365735f696f2847616d65526573756c7400010c0c57696e0000001044726177000100104c6f7365000200007c08306361725f72616365735f696f28537461746551756572790001201841646d696e730000002c53747261746567794964730001001047616d650401286163636f756e745f696414011c4163746f72496400020020416c6c47616d6573000300344d73674964546f47616d65496400040018436f6e6669670005003c4d65737361676573416c6c6f7765640006005053657373696f6e466f725468654163636f756e74040014011c4163746f724964000700008008306361725f72616365735f696f2853746174655265706c790001241841646d696e7304002001305665633c4163746f7249643e0000002c537472617465677949647304002001305665633c4163746f7249643e0001001047616d6504008401304f7074696f6e3c47616d653e00020020416c6c47616d65730400a401505665633c284163746f7249642c2047616d65293e000300344d73674964546f47616d6549640400ac01645665633c284d65737361676549642c204163746f724964293e0004002c57616974696e674d7367730400b8016c5665633c284d65737361676549642c204d6573736167654964293e00050018436f6e6669670400040118436f6e6669670006003c4d65737361676573416c6c6f7765640400380110626f6f6c0007005053657373696f6e466f725468654163636f756e740400c0013c4f7074696f6e3c53657373696f6e3e000800008404184f7074696f6e04045401880108104e6f6e6500000010536f6d6504008800000100008808306361725f72616365735f696f1047616d6500001c0110636172738c015842547265654d61703c4163746f7249642c204361723e00011c6361725f6964732001305665633c4163746f7249643e00013063757272656e745f7475726e1c010875380001147374617465a0012447616d655374617465000118726573756c747401484f7074696f6e3c47616d65526573756c743e00013463757272656e745f726f756e640c010c7533320001386c6173745f74696d655f7374657008010c75363400008c042042547265654d617008044b011404560190000400980000009008306361725f72616365735f696f0c4361720000100120706f736974696f6e0c010c75333200011473706565640c010c75333200012c6361725f616374696f6e739401405665633c526f756e64416374696f6e3e000130726f756e645f726573756c746c014c4f7074696f6e3c526f756e64416374696f6e3e0000940000027000980000029c009c00000408149000a008306361725f72616365735f696f2447616d655374617465000114305265616479546f537461727400000010526163650001001c53746f707065640002002046696e697368656400030030506c61796572416374696f6e00040000a4000002a800a800000408148800ac000002b000b000000408b41400b410106773746418636f6d6d6f6e287072696d697469766573244d6573736167654964000004001801205b75383b2033325d0000b8000002bc00bc00000408b4b400c004184f7074696f6e04045401c40108104e6f6e6500000010536f6d650400c40000010000c408306361725f72616365735f696f1c53657373696f6e000010010c6b657914011c4163746f72496400011c6578706972657308010c75363400013c616c6c6f7765645f616374696f6e733c01585665633c416374696f6e73466f7253657373696f6e3e000140657870697265735f61745f626c6f636b0c010c7533320000
diff --git a/frontend/apps/racing-car-game/src/components/BurgerMenu/BurgerMenu.tsx b/frontend/apps/racing-car-game/src/components/BurgerMenu/BurgerMenu.tsx
@@ -8,6 +8,7 @@ import { Button } from '@/ui';
 import { WalletModal } from '@/features/Wallet/components';
 import { WalletInfo } from '@/features/Wallet/components/WalletInfo';
 
+// @deprecated
 function BurgerMenu({ burgerMenuHandler }: BurgerMenuProps) {
   const { account } = useAccount();
   const [isWalletModalOpen, setIsWalletModalOpen] = useState<boolean>(false);

diff --git a/frontend/apps/racing-car-game/src/components/Header/Header.interfaces.ts b/frontend/apps/racing-car-game/src/components/Header/Header.interfaces.ts
diff --git a/frontend/apps/racing-car-game/src/components/Header/Header.module.scss b/frontend/apps/racing-car-game/src/components/Header/Header.module.scss
@@ -1,155 +1,11 @@
-@use '~styles/variables' as *;
-@use '~styles/mixins' as *;
-
 .header {
-  height: 100px;
-  width: 100%;
-  box-sizing: border-box;
-  background: theme-var($background-primary);
-  z-index: 2;
-
-  @include md {
-    height: 80px;
-  }
+  position: relative;
+  z-index: 9;
+  padding: 20px;
 
-  .logo-link {
-    height: 100%;
-    position: relative;
+  &__container {
     display: flex;
-
-    &-centered {
-      @include md {
-        margin: auto;
-      }
-    }
-
-    & img {
-      max-height: 100%;
-    }
-
-    .post-logo {
-      position: relative;
-      top: -5px;
-      font-size: 20px;
-      font-weight: 400;
-      background: linear-gradient(90deg, #2b2b2b 33.39%, #0ed3a3 77.42%);
-      -webkit-background-clip: text;
-      background-clip: text;
-      -webkit-text-fill-color: transparent;
-      align-self: start;
-      margin-bottom: 10px;
-
-      @include md {
-        display: none;
-      }
-    }
-  }
-}
-
-.container {
-  height: 100%;
-  padding: 20px 0;
-  max-width: 1200px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin: auto;
-
-  @include xl {
-    padding: 20px 20px;
-  }
-
-  @include lg {
-    padding: 30px 20px;
-  }
-
-  @include md {
-    padding: 20px 20px;
-  }
-}
-
-.menu {
-  list-style: none;
-  display: flex;
-
-  @include lg {
+    justify-content: space-between;
     align-items: center;
   }
 }
-
-.menu-item {
-  margin: 0 30px;
-  font-size: 18px;
-  font-weight: 500;
-
-  @include lg {
-    margin: 0 10px;
-  }
-
-  &--active {
-    color: theme-var($green-special);
-  }
-}
-
-.wallet-info {
-  display: flex;
-  align-items: center;
-
-  &-connect-btn {
-    width: 170px;
-    font-size: 16px;
-    font-weight: 700;
-  }
-}
-
-.balance {
-  display: flex;
-  align-items: center;
-  padding: 12px 0;
-  margin-right: 20px;
-
-  &-coin-image {
-    margin-right: 10px;
-  }
-
-  .text {
-    display: flex;
-    align-items: flex-end;
-    gap: 4px;
-
-    .value {
-      font-size: 20px;
-      font-weight: 700;
-      line-height: 22px;
-      letter-spacing: -0.02em;
-    }
-
-    .unit {
-      font-size: 10px;
-      font-weight: 400;
-      line-height: 14px;
-    }
-  }
-}
-
-.blur-background {
-  position: fixed;
-  top: 0;
-  left: 0;
-  background: rgba(39, 44, 63, 0.11);
-  backdrop-filter: blur(16px);
-  z-index: 4;
-  width: 100%;
-  height: 100%;
-  display: none;
-
-  @include lg {
-    display: block;
-  }
-}
-
-.menu-wrapper {
-  display: flex;
-  align-items: center;
-  gap: 20px;
-}