feat: font | icons | footer styling

public/locales/en/common.json

@@ -1,7 +1,8 @@
 {
   "HOME": {
-    "title": "ZKsync Ecosystem",
-    "gasPrice": "Gas Price",
+    "title": "ZKsync",
+    "subtitle": "Ecosystem",
+    "gasPrice": "L1 Gas Price",
     "transfer": "ERC-20 Transfer",
     "lockedAssets": "Locked assets in shared bridge",
     "DASHBOARD": {
@@ -50,7 +51,8 @@
   "FOOTER": {
     "docs": "Documentation",
     "github": "GitHub",
-    "madeWithLove": "Made with ❤️ by"
+    "madeWith": "Made with",
+    "by": "by"
   },
   "LOCALES": {
     "en": "English",

public/locales/es/common.json

@@ -1,7 +1,8 @@
 {
   "HOME": {
-    "title": "Ecosistema ZKsync",
-    "gasPrice": "Precio del gas",
+    "title": "ZKsync",
+    "subtitle": "Ecosistema",
+    "gasPrice": "Precio del gas L1",
     "transfer": "Transferencia ERC-20",
     "lockedAssets": "Activos bloqueados en puente compartido",
     "DASHBOARD": {
@@ -50,7 +51,8 @@
   "FOOTER": {
     "docs": "Documentación",
     "github": "GitHub",
-    "madeWithLove": "Hecho con ❤️ por"
+    "madeWithLove": "Hecho con",
+    "by": "por"
   },
   "LOCALES": {
     "en": "Inglés",

src/assets/font/css/inter.css

@@ -0,0 +1,21 @@
+/*
+Copyright 2020 The Inter Project Authors (https://github.com/rsms/inter)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+https://openfontlicense.org
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+*/
+
+@font-face {
+  font-family: 'Inter-Variable';
+  src:
+    url('../fonts/Inter-Italic-VariableFont_opsz,wght.ttf') format('ttf'),
+    url('../fonts/Inter-VariableFont_opsz,wght.ttf') format('ttf');
+  font-weight: 200 700;
+  font-display: swap;
+  font-style: normal;
+}

src/components/BasicSelect.tsx

@@ -66,10 +66,13 @@ export const BasicSelect = ({ list, value, setValue, disabled, dataTest }: Basic
   );
 };
 
-const SBox = styled(Box)({
-  display: 'flex',
-  flexDirection: 'column',
-  gap: '0.5rem',
+export const SBox = styled(Box)(() => {
+  const { currentTheme } = useCustomTheme();
+  return {
+    display: 'flex',
+    gap: currentTheme.gap,
+    alignItems: 'center',
+  };
 });
 
 const MenuButton = styled(Button)(() => {

src/components/Gas.tsx

@@ -0,0 +1,54 @@
+import { Typography, Box, styled } from '@mui/material';
+import Image from 'next/image';
+import { useTranslation } from 'next-i18next';
+
+import GasLight from '~/assets/icons/gasLight.svg';
+import GasDark from '~/assets/icons/gasDark.svg';
+import { useCustomTheme } from '~/hooks';
+import { SBox } from '~/components';
+
+export const Gas = () => {
+  const { theme } = useCustomTheme();
+  const { t } = useTranslation();
+
+  return (
+    <GasContainer>
+      <Image src={theme === 'dark' ? GasDark : GasLight} alt='gas' />
+      <Box>
+        <SBox>
+          <Typography>{t('HOME.gasPrice')}:</Typography>
+          <GasValueText>10 wei</GasValueText>
+        </SBox>
+        <SBox>
+          <Typography>{t('HOME.transfer')}:</Typography>
+          <GasValueText>$10</GasValueText>
+        </SBox>
+      </Box>
+    </GasContainer>
+  );
+};
+
+const GasContainer = styled(Box)(() => {
+  const { currentTheme } = useCustomTheme();
+
+  return {
+    display: 'flex',
+    alignItems: 'center',
+    color: currentTheme.textSecondary,
+    gap: currentTheme.gap,
+    fontWeight: 400,
+    fontSize: '0.7rem',
+    lineHeight: '1.25rem',
+    padding: '0.5rem 1rem',
+  };
+});
+
+const GasValueText = styled(Typography)(() => {
+  const { currentTheme } = useCustomTheme();
+
+  return {
+    color: currentTheme.textPrimary,
+    fontWeight: 500,
+    letterSpacing: '-0.03em',
+  };
+});