feat: basic layout created

henkaku-center · Mar 11, 2023 · 26ad3f1 · 26ad3f1
1 parent 97c17bc
commit 26ad3f1
Show file tree

Hide file tree

Showing 22 changed files with 4,828 additions and 508 deletions.
diff --git a/.prettierrc.json b/.prettierrc.json
@@ -0,0 +1,11 @@
+{
+  "bracketSpacing": true,
+  "printWidth": 100,
+  "singleQuote": true,
+  "trailingComma": "all",
+  "tabWidth": 2,
+  "useTabs": false,
+  "bracketSameLine": false,
+  "endOfLine": "lf",
+  "semi": true
+}
diff --git a/i18n.json b/i18n.json
@@ -0,0 +1,7 @@
+{
+  "locales": ["en", "ja"],
+  "defaultLocale": "ja",
+  "pages": {
+    "*": ["common"]
+  }
+}
diff --git a/locales/en/admin.json b/locales/en/admin.json
@@ -0,0 +1 @@
+{}
diff --git a/locales/en/common.json b/locales/en/common.json
@@ -0,0 +1,12 @@
+{
+  "layout": {
+    "nav": {
+      "HEADING": "Learn To Earn",
+      "HOME": "Home",
+      "QUESTS": "Quests",
+      "ADMIN": "Admin",
+      "WALLET__NOT_CONNECTED": "Wallet Not Connected",
+      "WALLET__SETTINGS": "Settings"
+    }
+  }
+}
diff --git a/locales/ja/admin.json b/locales/ja/admin.json
@@ -0,0 +1 @@
+{}
diff --git a/locales/ja/common.json b/locales/ja/common.json
@@ -0,0 +1,12 @@
+{
+  "layout": {
+    "nav": {
+      "HEADING": "稼ぐことを学ぶ",
+      "HOME": "ホーム",
+      "QUESTS": "クエスト",
+      "ADMIN": "管理者",
+      "WALLET__NOT_CONNECTED": "ウォレットが接続されていない",
+      "WALLET__SETTINGS": "設定"
+    }
+  }
+}
diff --git a/next.config.js b/next.config.js
@@ -1,6 +1,7 @@
+const nextTranslate = require('next-translate-plugin');
+
 /** @type {import('next').NextConfig} */
-const nextConfig = {
+module.exports = nextTranslate({
   reactStrictMode: true,
-}
-
-module.exports = nextConfig
+  trailingSlash: true,
+});
diff --git a/package.json b/package.json
@@ -9,14 +9,27 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@chakra-ui/icons": "^2.0.17",
+    "@chakra-ui/react": "^2.5.1",
+    "@emotion/react": "^11.10.6",
+    "@emotion/styled": "^11.10.6",
     "@types/node": "18.14.6",
     "@types/react": "18.0.28",
     "@types/react-dom": "18.0.11",
-    "eslint": "8.35.0",
-    "eslint-config-next": "13.2.3",
+    "axios": "^1.3.4",
+    "ethers": "^5",
+    "framer-motion": "^10.2.4",
     "next": "13.2.3",
+    "next-translate": "^2.0.2",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "typescript": "4.9.5"
+    "typescript": "4.9.5",
+    "wagmi": "^0.12.1"
+  },
+  "devDependencies": {
+    "eslint": "8.35.0",
+    "eslint-config-next": "13.2.3",
+    "next-translate-plugin": "^2.0.2",
+    "prettier": "^2.8.4"
   }
 }
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
@@ -0,0 +1,10 @@
+import {Container} from "@chakra-ui/react";
+
+const Footer = ()=>{
+    return(
+        <Container>
+            Footer
+        </Container>
+    )
+}
+export default Footer;
diff --git a/src/layouts/Layout.tsx b/src/layouts/Layout.tsx
@@ -0,0 +1,109 @@
+import {
+  Heading,
+  Box,
+  Link,
+  Flex,
+  Spacer,
+  useColorMode,
+  Button,
+  Menu,
+  MenuButton,
+  MenuList,
+  MenuItem,
+  Stack,
+} from '@chakra-ui/react';
+import { useRouter } from 'next/router';
+import useTranslation from 'next-translate/useTranslation';
+import { default as NextLink } from 'next/link';
+import { MoonIcon, SunIcon, ChevronDownIcon } from '@chakra-ui/icons';
+import setLanguage from 'next-translate/setLanguage';
+import Footer from '@/components/Footer';
+import Head from 'next/head';
+import styles from '@/styles/Home.module.css';
+// import {Profile} from '@/components/wallet/profile';
+import { useAccount, useNetwork } from 'wagmi';
+import { avalancheFuji } from 'wagmi/chains';
+
+interface LayoutProps {
+  children: React.ReactNode;
+}
+
+const Layout = ({ children }: LayoutProps) => {
+  const { address, connector, isConnected } = useAccount();
+  const { chain } = useNetwork();
+  const router = useRouter();
+  const { t, lang } = useTranslation('common');
+  const { colorMode, toggleColorMode } = useColorMode();
+  return (
+    <>
+      <Head>
+        <title>{t('layout.nav.HEADING')}</title>
+        <meta name='description' content='Generated by create next app' />
+        <meta name='viewport' content='width=device-width, initial-scale=1' />
+        <link rel='icon' href='/favicon.ico' />
+      </Head>
+      {/*<SwitchNetworkAlert />*/}
+      {/*<MetaMaskLeadBanner />*/}
+      <Box p='4' bg={isConnected ? '#88ff8811' : '#ff888811'}>
+        <Flex>
+          <Box p={2}>
+            <Link as={NextLink} href='/' locale={router.locale}>
+              <Heading size='md'>
+                <pre>{t('layout.nav.HEADING')}</pre>
+              </Heading>
+            </Link>
+          </Box>
+          <Spacer />
+          <Stack alignItems={'center'} direction='row' spacing={4}>
+            <Link as={NextLink} _focus={{ boxShadow: 'none' }} href='/' p={4}>
+              {t('layout.nav.HOME')}
+            </Link>
+            <Link as={NextLink} href={'/quests'} _focus={{ boxShadow: 'none' }} p={4}>
+              {t('layout.nav.QUESTS')}
+            </Link>
+            <Link as={NextLink} href={'/admin'} _focus={{ boxShadow: 'none' }} p={4}>
+              {t('layout.nav.ADMIN')}
+            </Link>
+            <Menu>
+              <MenuButton
+                colorScheme={
+                  isConnected && chain?.id == avalancheFuji.id
+                    ? 'green'
+                    : isConnected
+                      ? 'orange'
+                      : 'red'
+                }
+                as={Button}
+                rightIcon={<ChevronDownIcon />}
+              >
+                {isConnected ? `Connected to ${chain?.name}` : t('layout.nav.WALLET__NOT_CONNECTED')}
+                {/*{t('TOOL_LINK')}*/}
+              </MenuButton>
+              <MenuList>
+                <MenuItem>
+                  <NextLink href='/wallet'>{t('layout.nav.WALLET__SETTINGS')}</NextLink>
+                </MenuItem>
+                {/*<Profile />*/}
+                {/*<MenuItem>*/}
+                {/*  /!*<Link href="/koukan">*!/*/}
+                {/*  {t('EXCHANGE_LINK')}*/}
+                {/*  /!*</Link>*!/*/}
+                {/*</MenuItem>*/}
+              </MenuList>
+            </Menu>
+            <Button size='md' onClick={toggleColorMode} p={4}>
+              {colorMode == 'dark' ? <SunIcon /> : <MoonIcon />}
+            </Button>
+            <Button size='md' onClick={async () => await setLanguage(lang == 'en' ? 'ja' : 'en')}>
+              {lang == 'en' ? '日本' : 'En'}
+            </Button>
+          </Stack>
+        </Flex>
+      </Box>
+      <Box p={5}>{children}</Box>
+      <Footer />
+    </>
+  );
+};
+
+export default Layout;
diff --git a/src/layouts/theme.ts b/src/layouts/theme.ts
@@ -0,0 +1,21 @@
+import {extendTheme, type ThemeConfig} from '@chakra-ui/react'
+
+const config: ThemeConfig = {
+    initialColorMode: 'dark',
+    useSystemColorMode: true
+};
+
+export const gradationColor = {
+    styles: {
+        global: {
+            body: {},
+            html: {
+                height: '100%'
+            }
+        }
+    }
+};
+
+export const theme = extendTheme({
+    config
+});
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
@@ -1,6 +1,34 @@
-import '@/styles/globals.css'
+import { WagmiConfig, createClient, configureChains } from 'wagmi'
+import { ChakraProvider } from '@chakra-ui/react'
 import type { AppProps } from 'next/app'
+import { theme } from '@/layouts/theme'
+import { MetaMaskConnector } from 'wagmi/connectors/metaMask'
+import Layout from '@/layouts/Layout'
+import { publicProvider } from '@wagmi/core/providers/public'
+// import connector from '@/components/metaMask/WagmiMetamask'
+import { avalancheFuji } from 'wagmi/chains'
 
-export default function App({ Component, pageProps }: AppProps) {
-  return <Component {...pageProps} />
+const { chains, provider } = configureChains(
+  [avalancheFuji],
+  [publicProvider()],
+)
+
+const client = createClient({
+  autoConnect: true,
+  connectors: [new MetaMaskConnector({ chains })],
+  provider,
+})
+
+function MyApp({ Component, pageProps }: AppProps): JSX.Element {
+  return (
+    <WagmiConfig client={client}>
+      <ChakraProvider theme={theme}>
+        <Layout>
+          <Component {...pageProps} />
+        </Layout>
+      </ChakraProvider>
+    </WagmiConfig>
+  )
 }
+
+export default MyApp
diff --git a/src/pages/admin.tsx b/src/pages/admin.tsx
@@ -0,0 +1,11 @@
+import { Container, Grid, GridItem } from '@chakra-ui/react';
+
+const Admin = () => {
+  return (
+    <Grid templateColumns='350px 1fr' gap={6} width={"100%"} height={"80vh"}>
+      <GridItem bg='blue.100'  height={'100%'}/>
+      <GridItem bg='blue.100'  height={'100%'}/>
+    </Grid>
+  );
+};
+export default Admin;
diff --git a/src/pages/api/hello.ts b/src/pages/api/hello.ts
diff --git a/src/pages/api/quest.ts b/src/pages/api/quest.ts
@@ -0,0 +1,36 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { QuestInterface } from '@/types';
+
+type Data = {
+  created_at: Date
+  expires_at: Date
+  questions: QuestInterface[]
+}
+
+export default function handler(
+  req: NextApiRequest,
+  res: NextApiResponse<Data>,
+) {
+  res.status(200).json({
+    created_at: new Date(),
+    expires_at: new Date(),
+    questions: [
+      {
+        question: 'Who Invented Blockchain Technology?',
+        selection: 'single',
+        options: ['Satoshi Nakamoto', 'Linus Torvalds', 'Bill Gates', 'Reid Hoffman'],
+      },
+      {
+        question: 'What is Pitpa Learn to Earn?',
+        selection: 'single',
+        options: ['A Web hosting platform', 'An internet service provider', 'A learning platform', 'An Automated Teller Machine'],
+      },
+      {
+        question: 'What can you do earn through Pitpa Learn to Earn?',
+        selection: 'single',
+        options: ['Japanese Yen', 'United States Dollars', 'Crypto Currency', 'Nothing'],
+      },
+    ],
+  });
+}