complete project

.github/workflows/ci.yml

@@ -0,0 +1,47 @@
+name: CI
+
+on: [push]
+
+jobs:
+  setup:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 16.x
+          cache: 'yarn'
+      - uses: actions/cache@v3
+        id: yarn-cache
+        with:
+          path: '**/node_modules'
+          key: ${{ runner.os }}-${{ hashFiles('**/yarn.lock') }}
+      - name: Install packages
+        if: steps.yarn-cache.outputs.cache-hit != 'true'
+        run: yarn install --immutable
+
+  check:
+    runs-on: ubuntu-latest
+    needs: setup
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/cache@v3
+        with:
+          path: '**/node_modules'
+          key: ${{ runner.os }}-${{ hashFiles('**/yarn.lock') }}
+      - name: lint
+        run: yarn lint
+      - name: format
+        run: yarn prettier:check
+
+  contract-test:
+    runs-on: ubuntu-latest
+    needs: [setup, check]
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/cache@v3
+        with:
+          path: '**/node_modules'
+          key: ${{ runner.os }}-${{ hashFiles('**/yarn.lock') }}
+      - name: integration_test
+        run: yarn workspace contract test

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 UNCHAIN
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,44 @@
+## ✅Astar-SocialFi(prototype)
+
+本レポジトリは Astar-SocialFi の完成版を示したものになります。
+
+以下の手順を実行することで Astar-SocialFi の挙動を確認できます。
+
+## レポジトリのクローン
+
+[Astar-SocialFi のリポジトリ](https://github.com/unchain-tech/ASTAR-SocialFi)から Astar-SocialFi をクローンします。
+
+### コントラクトとフロントの準備
+
+1. コントラクトのデプロイ
+
+[Astar-SocialFi の教材](https://app.unchain.tech/learn/ASTAR-SocialFi/ja/0/2/)のうち section0-Lesson2 の polkadot.js の説明箇所を参考にコントラクトのデプロイを行います。
+
+デプロイ後はコントラクトアドレスをどこかへ控えておいてください。
+
+2. ウォレットの作成
+
+[Astar-SocialFi の教材](https://app.unchain.tech/learn/ASTAR-SocialFi/ja/1/1/)のうち section1-Lesson4 の polkadot.js という拡張機能を追加してウォレットを作成する部分を参考にしてウォレットを作成しましょう。
+
+作成したら、Alice という元々あるアカウントから 10 トークンほど作成したアドレスへ送金しておきましょう。ガス代として使用します。
+
+3. フロントエンドのパッケージをインストール
+
+トップディレクトリで下のコマンドを実行することで必要なパッケージをインストールしましょう。
+
+```
+yarn install
+```
+
+4. .env ファイルの作成、記述
+
+1.で得たコントラクトアドレスと、ユーザーの初期プロフィール画像を下の変数名で設定しましょう。画像 URL は[unsplash のサイト](https://unsplash.com/)から取得しましょう。
+
+```
+NEXT_PUBLIC_CONTRACT_ADDRESS=WCpkcJenKkFZwk2tot1yhyvZuwFXD2xdzb7dyn2WMebKtC6
+NEXT_PUBLIC_UNKNOWN_IMAGE_URL="https://images.unsplash.com/..."
+```
+
+5. フロントエンドの立ち上げ
+
+最後に下のコマンドを実行することでフロントエンドを立ち上げます。その後は[Astar-SocialFi の教材](https://app.unchain.tech/learn/ASTAR-SocialFi/ja/3/1/)のうち section3-Lesson1 での動作確認の工程を参考にフロントの様子を確認しましょう。

packages/client/.eslintrc.json

@@ -1,3 +1,19 @@
 {
-  "extends": "next/core-web-vitals"
+  "extends": [
+    "plugin:@typescript-eslint/recommended",
+    "next",
+    "prettier",
+    "plugin:react/recommended",
+    "plugin:react-hooks/recommended"
+  ],
+  "rules": {
+    "import/order": [
+      "error",
+      {
+        "alphabetize": {
+          "order": "asc"
+        }
+      }
+    ]
+  }
 }

packages/client/.gitignore

@@ -27,6 +27,7 @@ yarn-error.log*
 
 # local env files
 .env*.local
+.env
 
 # vercel
 .vercel

packages/client/components/atoms/appLogo.tsx

@@ -0,0 +1,32 @@
+import Image from 'next/image';
+import type { FC } from 'react';
+
+const AppLogo: FC = () => {
+  return (
+    <div className="flex-row flex items-center ml-[5px]">
+      <Image
+        className="w-[50px] h-[50px]"
+        src="/unchain_logo.png"
+        alt="unchain_logo"
+        width={30}
+        height={30}
+      />
+      <Image
+        className="w-[40px] h-[25px]"
+        src="/cross_mark_2_logo-removebg.png"
+        alt="cross_logo"
+        width={30}
+        height={30}
+      />
+      <Image
+        className="w-[50px] h-[50px]"
+        src="/Astar_logo.png"
+        alt="astar_logo"
+        width={30}
+        height={30}
+      />
+    </div>
+  );
+};
+
+export default AppLogo;

packages/client/components/atoms/balance.tsx

@@ -0,0 +1,9 @@
+import { FC } from 'react';
+
+type Props = {
+  balance: string;
+};
+
+export const Balance: FC<Props> = (props: Props) => {
+  return <div className="text-2xl">{props.balance} UNI</div>;
+};

packages/client/components/atoms/bigInput.tsx

@@ -0,0 +1,20 @@
+import { FC } from 'react';
+
+type Props = {
+  title: string;
+  name: string;
+};
+
+export const BigInput: FC<Props> = (props: Props) => {
+  return (
+    <div className="flex flex-col items-start w-full my-4">
+      <div className="mr-2 text-2xl ml-[32px]">{`${props.title}:`}</div>
+      <input
+        id={props.name}
+        name={props.name}
+        type="text"
+        className="w-64 h-32 bg-white flex ml-4"
+      />
+    </div>
+  );
+};

packages/client/components/atoms/biggerProfileIcon.tsx

@@ -0,0 +1,19 @@
+import Image from 'next/image';
+import type { FC } from 'react';
+
+type Props = {
+  imgUrl: string;
+};
+
+export const BiggerProfileIcon: FC<Props> = (props: Props) => {
+  return (
+    <Image
+      className="rounded-full h-24 w-24 mx-2"
+      src={props.imgUrl}
+      alt="profile_logo"
+      width={30}
+      height={30}
+      quality={100}
+    />
+  );
+};

packages/client/components/atoms/bottomLogo.tsx

@@ -0,0 +1,38 @@
+import Link from 'next/link';
+import { Dispatch, FC } from 'react';
+import { IconType } from 'react-icons';
+
+type Props = {
+  selectedScreen: string;
+  screenName: string;
+  setSelectedScreen: Dispatch<React.SetStateAction<string>>;
+  icon: IconType;
+};
+
+const BottomLogo: FC<Props> = (props: Props) => {
+  return (
+    <Link
+      onClick={() => {
+        props.setSelectedScreen(props.screenName);
+      }}
+      href={props.screenName}
+      className="flex-1 flex items-center justify-center flex-col"
+    >
+      <props.icon
+        className={
+          'h-12 w-12 ' +
+          (props.screenName === props.selectedScreen
+            ? 'fill-[#0009DC]'
+            : 'fill-gray-500')
+        }
+      />
+      {props.screenName === props.selectedScreen ? (
+        <div className="pb-1 text-[#0009DC]">{props.screenName}</div>
+      ) : (
+        <></>
+      )}
+    </Link>
+  );
+};
+
+export default BottomLogo;

packages/client/components/atoms/closeButton.tsx

@@ -0,0 +1,16 @@
+import { Dispatch, FC } from 'react';
+
+type Props = {
+  afterOpenFn: Dispatch<React.SetStateAction<boolean>>;
+};
+
+export const CloseButton: FC<Props> = (props: Props) => {
+  return (
+    <button
+      className="rounded-3xl h-10 w-32 bg-[#003AD0] text-white"
+      onClick={() => props.afterOpenFn(false)}
+    >
+      Close
+    </button>
+  );
+};

packages/client/components/atoms/disconnectButton.tsx

@@ -0,0 +1,18 @@
+import { useRouter } from 'next/router';
+import { FC } from 'react';
+
+const DisconnectButton: FC = () => {
+  const router = useRouter();
+  return (
+    <button
+      onClick={() => {
+        router.push('/');
+      }}
+      className="z-10 text-xl text-white items-center flex justify-center h-14 bg-[#003AD0] hover:bg-blue-700  py-2 px-4 rounded-full mr-4"
+    >
+      Disconnect Wallet
+    </button>
+  );
+};
+
+export default DisconnectButton;

packages/client/components/atoms/inputBox.tsx

@@ -0,0 +1,12 @@
+import type { FC } from 'react';
+
+export const InputBox: FC = () => {
+  return (
+    <input
+      id="message"
+      name="message"
+      type="text"
+      className="flex-1 h-11 bg-white"
+    />
+  );
+};

packages/client/components/atoms/postButton.tsx

@@ -0,0 +1,19 @@
+import { Dispatch, FC } from 'react';
+import { BsPlusLg } from 'react-icons/bs';
+
+type Props = {
+  setShowNewPostModal: Dispatch<React.SetStateAction<boolean>>;
+};
+
+export const PostButton: FC<Props> = (props: Props) => {
+  return (
+    <button
+      onClick={() => {
+        props.setShowNewPostModal(true);
+      }}
+      className="rounded-full h-14 w-14 bg-[#003AD0] absolute bottom-24 right-1/3 mr-5 items-center flex justify-center"
+    >
+      <BsPlusLg className="h-9 w-9" />
+    </button>
+  );
+};

packages/client/components/atoms/profileTitle.tsx

@@ -0,0 +1,19 @@
+import { Dispatch, FC } from 'react';
+import { BsGear } from 'react-icons/bs';
+
+type Props = {
+  isOpenModal: Dispatch<React.SetStateAction<boolean>>;
+  name: string;
+};
+
+export const ProfileTitle: FC<Props> = (props: Props) => {
+  return (
+    <div className="flex flex-row items-center space-x-2">
+      <div className="text-2xl font-semibold">{props.name}</div>
+      <BsGear
+        onClick={() => props.isOpenModal(true)}
+        className="fill-gray-500 h-7 w-7"
+      />
+    </div>
+  );
+};

packages/client/components/atoms/sendButton.tsx

@@ -0,0 +1,10 @@
+import type { FC } from 'react';
+import { BiSend } from 'react-icons/bi';
+
+export const SendButton: FC = () => {
+  return (
+    <button type="submit">
+      <BiSend className="w-11 h-11" />
+    </button>
+  );
+};

packages/client/components/atoms/smallInput.tsx

@@ -0,0 +1,20 @@
+import { FC } from 'react';
+
+type Props = {
+  title: string;
+  name: string;
+};
+
+export const SmallInput: FC<Props> = (props: Props) => {
+  return (
+    <div className="flex flex-row justify-start my-4">
+      <div className="mr-2 text-2xl">{`${props.title}:`}</div>
+      <input
+        id={props.name}
+        name={props.name}
+        type="text"
+        className="w-24 bg-white"
+      />
+    </div>
+  );
+};