Yd/syndote updates (#288)

Co-authored-by: Yauheni <[email protected]>

frontend/apps/syndote/package.json

@@ -8,7 +8,7 @@
     "@gear-js/api": "0.36.5",
     "@gear-js/react-hooks": "0.10.2",
     "@gear-js/ui": "0.5.21",
-    "@mantine/form": "4.2.12",
+    "@mantine/form": "6.0.8",
     "@polkadot/api": "10.11.2",
     "@polkadot/extension-dapp": "0.46.5",
     "@polkadot/react-identicon": "3.1.4",

frontend/apps/syndote/src/App.tsx

@@ -3,13 +3,24 @@ import { Routing } from 'pages';
 import { ApiLoader } from 'components';
 import { withProviders } from 'hocs';
 import 'simplebar-react/dist/simplebar.min.css';
+import '@gear-js/vara-ui/dist/style.css';
 import 'App.scss';
+import { Header } from 'components/layout/header';
+import { Container, Footer } from '@dapps-frontend/ui';
 
 function Component() {
   const { isApiReady } = useApi();
   const { isAccountReady } = useAccount();
 
-  return <main>{isApiReady && isAccountReady ? <Routing /> : <ApiLoader />}</main>;
+  return (
+    <>
+      <Header />
+      <main>{isApiReady && isAccountReady ? <Routing /> : <ApiLoader />}</main>
+      <Container>
+        <Footer vara />
+      </Container>
+    </>
+  );
 }
 
 export const App = withProviders(Component);

frontend/apps/syndote/src/assets/meta/syndote_meta.txt

@@ -0,0 +1 @@
+0002000100000000000103000000010a0000000000010b00000000011b000000011c00000031339400082873796e646f74655f696f18436f6e66696700001801487265736572766174696f6e5f616d6f756e7404010c7536340001747265736572766174696f6e5f6475726174696f6e5f696e5f626c6f636b08010c75333200013474696d655f666f725f7374657008010c7533320001346d696e5f6761735f6c696d697404010c7536340001486761735f726566696c6c5f74696d656f757408010c7533320001306761735f666f725f7374657004010c75363400000400000506000800000505000c082873796e646f74655f696f2847616d65416374696f6e0001244443726561746547616d6553657373696f6e0c0124656e7472795f6665651001304f7074696f6e3c753132383e0001106e616d65180118537472696e6700012c73747261746567795f69641c011c4163746f7249640000003c4d616b655265736572766174696f6e04012061646d696e5f69641c011c41646d696e49640001002052656769737465720c012061646d696e5f69641c011c41646d696e496400012c73747261746567795f69641c011c4163746f7249640001106e616d65180118537472696e6700020010506c617904012061646d696e5f69641c011c41646d696e496400030058416464476173546f506c61796572537472617465677904012061646d696e5f69641c011c41646d696e49640004004443616e63656c47616d6553657373696f6e04012061646d696e5f69641c011c41646d696e4964000500204578697447616d6504012061646d696e5f69641c011c41646d696e49640006002844656c65746547616d6504012061646d696e5f69641c011c41646d696e49640007003044656c657465506c61796572040124706c617965725f69641c011c4163746f724964000800001004184f7074696f6e04045401140108104e6f6e6500000010536f6d6504001400000100001400000507001800000502001c10106773746418636f6d6d6f6e287072696d6974697665731c4163746f724964000004002001205b75383b2033325d000020000003200000002400240000050300280418526573756c74080454012c044501680108084f6b04002c000000000c45727204006800000100002c082873796e646f74655f696f2447616d655265706c7900012c4847616d6553657373696f6e4372656174656404012061646d696e5f69641c011c41646d696e49640000003c5265736572766174696f6e4d616465000100485374726174656779526567697374657265640002003047616d6546696e697368656408012061646d696e5f69641c011c41646d696e496400011877696e6e65721c011c4163746f72496400030064476173466f72506c61796572537472617465677941646465640004004047616d6557617343616e63656c6c656400050038506c617965724c65667447616d65000600105374657014011c706c61796572733001685665633c284163746f7249642c20506c61796572496e666f293e00012870726f706572746965735001a85665633c4f7074696f6e3c284163746f7249642c2047656172732c2050726963652c2052656e74293e3e00013863757272656e745f706c617965721c011c4163746f7249640001246f776e6572736869706401305665633c4163746f7249643e00013063757272656e745f7374657004010c753634000700604e657874526f756e6446726f6d5265736572766174696f6e0008002c47616d6544656c6574656400090034506c6179657244656c65746564000a000030000002340034000004081c380038082873796e646f74655f696f28506c61796572496e666f00002c01206f776e65725f69641c011c4163746f7249640001106e616d65180118537472696e67000120706f736974696f6e240108753800011c62616c616e636508010c7533320001106465627408010c75333200011c696e5f6a61696c3c0110626f6f6c000114726f756e641401107531323800011463656c6c7340013042547265655365743c75383e00011c70656e616c747924010875380001106c6f73743c0110626f6f6c0001387265736572766174696f6e5f69644801544f7074696f6e3c5265736572766174696f6e49643e00003c000005000040042042547265655365740404540124000400440000004400000224004804184f7074696f6e040454014c0108104e6f6e6500000010536f6d6504004c00000100004c10106773746418636f6d6d6f6e287072696d697469766573345265736572766174696f6e4964000004002001205b75383b2033325d00005000000254005404184f7074696f6e04045401580108104e6f6e6500000010536f6d65040058000001000058000004101c5c0808005c000002600060082873796e646f74655f696f104765617200010c1842726f6e7a650000001853696c76657200010010476f6c6400020000640000021c0068082873796e646f74655f696f2447616d654572726f72000140605374726174656779416c7265616479526569737465726564000000604163636f756e74416c726561647952656769737465726564000100505374726174656779446f65734e6f744578697374000200405265736572766174696f6e4572726f72000300244f6e6c7941646d696e00040048506c61796572446f65734e6f7445786973740005003c57726f6e6747616d65537461747573000600744d7367536f757263654d757374426541646d696e4f7250726f6772616d0007004047616d65446f65734e6f7445786973740008004c5265736572766174696f6e4e6f7456616c696400090050416464476173546f47616d65436f6e7472616374000a0044416464476173466f72537472617465677904001c011c4163746f724964000b006047616d6553657373696f6e416c7265616479457869737473000c003c46656549734c6573735468616e4544000d004057726f6e6756616c7565416d6f756e74000e00385374726174656769634572726f72000f00006c082873796e646f74655f696f285374617465517565727900010c3847657447616d6553657373696f6e0401286163636f756e745f69641c011c4163746f72496400000034476574506c61796572496e666f0401286163636f756e745f69641c011c4163746f724964000100284765744f776e6572496408012061646d696e5f69641c011c41646d696e496400012c73747261746567795f69641c011c4163746f7249640002000070082873796e646f74655f696f2853746174655265706c7900010c2c47616d6553657373696f6e04013067616d655f73657373696f6e7401444f7074696f6e3c47616d6553746174653e00000028506c61796572496e666f04012c706c617965725f696e666f8c01484f7074696f6e3c506c61796572496e666f3e0001001c4f776e657249640401206f776e65725f696490013c4f7074696f6e3c4163746f7249643e000200007404184f7074696f6e04045401780108104e6f6e6500000010536f6d65040078000001000078082873796e646f74655f696f2447616d655374617465000040012061646d696e5f69641c011c4163746f72496400014870726f706572746965735f696e5f62616e6b44011c5665633c75383e000114726f756e641401107531323800011c706c61796572733001685665633c284163746f7249642c20506c61796572496e666f293e0001586f776e6572735f746f5f73747261746567795f6964737c015c5665633c284163746f7249642c204163746f724964293e000134706c61796572735f71756575656401305665633c4163746f7249643e00013063757272656e745f7475726e240108753800013863757272656e745f706c617965721c011c4163746f72496400013063757272656e745f7374657004010c75363400012870726f706572746965735001a85665633c4f7074696f6e3c284163746f7249642c2047656172732c2050726963652c2052656e74293e3e0001246f776e6572736869706401305665633c4163746f7249643e00012c67616d655f73746174757384012847616d6553746174757300011877696e6e65721c011c4163746f7249640001307265736572766174696f6e738801485665633c5265736572766174696f6e49643e000124656e7472795f6665651001304f7074696f6e3c753132383e0001287072697a655f706f6f6c1401107531323800007c000002800080000004081c1c0084082873796e646f74655f696f2847616d6553746174757300011830526567697374726174696f6e00000010506c61790001002046696e697368656400020010576169740003007057616974696e67466f72476173466f7247616d65436f6e74726163740004006057616974696e67466f72476173466f72537472617465677904001c011c4163746f72496400050000880000024c008c04184f7074696f6e04045401380108104e6f6e6500000010536f6d6504003800000100009004184f7074696f6e040454011c0108104e6f6e6500000010536f6d6504001c0000010000

frontend/apps/syndote/src/atoms.ts

@@ -0,0 +1,12 @@
+import { atom } from 'jotai';
+// import { RegistrationStatus } from 'features/session/types';
+
+export const CURRENT_GAME_ADMIN_ATOM = atom<string>('');
+
+export const CURRENT_STRATEGY_ID_ATOM = atom<string>('');
+
+export const PLAYER_NAME_ATOM = atom<string | null>(null);
+
+// export const REGISTRATION_STATUS = atom<RegistrationStatus>('registration');
+
+export const IS_LOADING = atom<boolean>(false);

frontend/apps/syndote/src/components/layout/game-details/GameDetails.module.scss

@@ -0,0 +1,29 @@
+.info {
+  width: 100%;
+  padding: 16px;
+  display: grid;
+  grid-template-rows: auto;
+  background: #F7F9FA;
+  color: #000000;
+  gap: 13px;
+  border-radius: 15px;
+}
+
+.item {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+
+  .itemName {
+    font-size: 14px;
+    font-weight: 400;
+    text-align: start;
+  }
+
+  .itemValue {
+    font-size: 14px;
+    font-weight: 600;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+}

frontend/apps/syndote/src/components/layout/game-details/GameDetails.tsx

@@ -0,0 +1,28 @@
+import clsx from 'clsx';
+import styles from './GameDetails.module.scss';
+
+type Props = {
+  items: {
+    name: string;
+    value: JSX.Element;
+  }[];
+  className?: {
+    container?: string;
+    item?: string;
+  };
+};
+
+function GameDetails({ items, className }: Props) {
+  return (
+    <div className={clsx(styles.info, className?.container)}>
+      {items.map((item) => (
+        <div key={item.name} className={clsx(styles.item, className?.item)}>
+          <span className={styles.itemName}>{item.name}</span>
+          <span className={styles.itemValue}>{item.value}</span>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+export { GameDetails };