BitBabble DChat

.github/workflows/deploy-mainnet.yml

@@ -0,0 +1,12 @@
+name: Deploy DApp to Mainnet
+on:
+  push:
+    branches: [main]
+jobs:
+  deploy-mainnet:
+    uses: wpdas/alem/.github/workflows/deploy.yml@main
+    with:
+      signer-account-address: wendersonpires.near
+      signer-public-key: ed25519:9jDaFsG11jftUEQbccjUMsT39rZ3dzWJcDLoyT2qJvzb
+    secrets:
+      SIGNER_PRIVATE_KEY: ${{ secrets.SIGNER_PRIVATE_KEY }}

.github/workflows/deploy-testnet.yml

@@ -0,0 +1,12 @@
+name: Deploy DApp to Testnet
+on:
+  push:
+    branches: [staging]
+jobs:
+  deploy-testnet:
+    uses: wpdas/alem/.github/workflows/deploy-testnet.yml@main
+    with:
+      signer-account-address: wendersonpires.testnet
+      signer-public-key: ed25519:8NTXtouT5r4g18XJTErBeqEgDbDXsNxysVgD7DjUnL2N
+    secrets:
+      SIGNER_PRIVATE_KEY: ${{ secrets.TESTNET_SIGNER_PRIVATE_KEY }}

.gitignore

@@ -0,0 +1,6 @@
+/build
+/node_modules
+.env
+
+# misc
+.DS_Store

.nvmrc

@@ -0,0 +1 @@
+18.0.0

.prettierrc

@@ -0,0 +1,7 @@
+{
+  "trailingComma": "all",
+  "tabWidth": 2,
+  "semi": true,
+  "singleQuote": false,
+  "printWidth": 120
+}

alem.config.json

@@ -0,0 +1,32 @@
+{
+  "isIndex": false,
+  "mainnetAccount": "wendersonpires.near",
+  "testnetAccount": "wendersonpires.testnet",
+  "name": "Bit Babble",
+  "description": "App description",
+  "linktree": {
+    "website": "github.com/wpdas/alem"
+  },
+  "image": {
+    "ipfs_cid": "bafkreicjdgat5xsw7vxbosoyygermawhkfi2by3ovg7c6tumrayn4rimty"
+  },
+  "tags": [
+    "alem",
+    "dapp",
+    "near",
+    "bos"
+  ],
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@app/": "src/",
+      "@services/": "src/services/",
+      "@components/": "src/components/",
+      "@contexts/": "src/contexts/"
+    }
+  },
+  "options": {
+    "keepRoute": true,
+    "hideAlemBar": false
+  }
+}

alem.modules.json

@@ -0,0 +1,3 @@
+{
+  "javascript-time-ago": "https://unpkg.com/javascript-time-ago@2.5.9/bundle/javascript-time-ago.js"
+}

package.json

@@ -0,0 +1,25 @@
+{
+  "name": "bitbabble",
+  "version": "1.0.0",
+  "description": "The base template for Create Alem dApp",
+  "repository": "git@github.com:wpdas/create-alem-dapp.git",
+  "license": "MIT",
+  "scripts": {
+    "start": "MINIFY=false NODE_ENV=development alem dev --network testnet",
+    "start:mainnet": "MINIFY=false NODE_ENV=development alem dev",
+    "build": "alem build",
+    "deploy:mainnet": "npm run build; alem deploy",
+    "deploy:testnet": "npm run build; alem deploy --network testnet"
+  },
+  "dependencies": {
+    "alem": "^1.0.0-beta.12"
+  },
+  "devDependencies": {
+    "@types/styled-components": "^5.1.26",
+    "lint-staged": "^13.2.1",
+    "prettier": "^2.8.8"
+  },
+  "lint-staged": {
+    "**/*.{js,jsx,ts,tsx}": "prettier --write --ignore-unknown"
+  }
+}

src/Main.tsx

@@ -0,0 +1,28 @@
+import Routes from "./screens/Routes";
+import TopBar from "@components/TopBar";
+import BottomBar from "@components/BottomBar";
+import { useRoutes, context, useMemo } from "alem";
+import routesPath from "./screens/routesPath";
+import CenterMessage from "./components/CenterMessage";
+
+const Main = () => {
+  const { activeRoute } = useRoutes();
+  const accountId = context.accountId;
+
+  const Content = useMemo(
+    () => () => accountId ? <Routes /> : <CenterMessage message="You need to Sign in before using this chat." />,
+    [accountId, activeRoute],
+  );
+
+  return (
+    <div className="main-container">
+      <div className="top-bar-margin" />
+      <TopBar />
+      <Content />
+      {activeRoute !== routesPath.CHAT && accountId && <BottomBar />}
+      <div className="bottom-bar-margin" />
+    </div>
+  );
+};
+
+export default Main;

src/components/Avatar/index.tsx

@@ -0,0 +1,20 @@
+// TODO: Criar lib de Componentes?
+
+type Props = {
+  name?: string;
+  image?: string;
+};
+
+// TODO: usar imagem do amigo
+const Avatar = ({ name, image }: Props) => {
+  const nameParts = name ? name?.split(" ") : [""];
+  const finalName = `${nameParts[0][0]}${nameParts[1] ? nameParts[1][0] : ""}`;
+
+  return (
+    <div className="avatar">
+      {!image ? <p className="avatar-text">{finalName}</p> : <img src={image} alt={`Image of user ${name}`} />}
+    </div>
+  );
+};
+
+export default Avatar;

src/components/Avatar/styles.css

@@ -0,0 +1,22 @@
+.avatar {
+  display: flex;
+  /* background-color: #e2e8f0; */
+  border: 2px solid #103144;
+  border-radius: 9999px;
+  width: 32px;
+  height: 32px;
+  justify-content: center;
+  align-items: center;
+
+  img {
+    width: 32px;
+    height: 32px;
+    border-radius: 9999px;
+  }
+}
+
+.avatar-text {
+  color: #4a5568;
+  font-size: 0.9rem;
+  font-weight: 600;
+}

src/components/BottomBar/index.tsx

@@ -0,0 +1,46 @@
+import routesPath from "@app/screens/routesPath";
+import { navigate, useRoutes } from "alem";
+
+const BottomBar = () => {
+  const routes = useRoutes();
+
+  // Items
+  const Items = ({
+    children,
+    name,
+    to,
+    active,
+  }: {
+    children: JSX.Element;
+    name: string;
+    to: string;
+    active?: boolean;
+  }) => {
+    const onClick = () => {
+      navigate.to(to, { previous: routes.activeRoute });
+    };
+
+    return (
+      <button className={`item ${active ? "active" : ""}`} onClick={onClick}>
+        {children}
+        <p className="item-text">{name}</p>
+      </button>
+    );
+  };
+
+  return (
+    <div className="bottombar">
+      <Items name="Chats" to={routesPath.CHATS_LIST} active={routes.activeRoute === routesPath.CHATS_LIST}>
+        <span className="material-symbols-outlined">forum</span>
+      </Items>
+      {/* <Items name="Groups" to={routesPath.GROUPS_LIST} active={routes.activeRoute === routesPath.GROUPS_LIST}>
+        <span className="material-symbols-outlined">group</span>
+      </Items> */}
+      <Items name="Contacts" to={routesPath.CONTACTS_LIST} active={routes.activeRoute === routesPath.CONTACTS_LIST}>
+        <span className="material-symbols-outlined">list_alt</span>
+      </Items>
+    </div>
+  );
+};
+
+export default BottomBar;

src/components/BottomBar/styles.css

@@ -0,0 +1,45 @@
+.bottombar {
+  bottom: 0px;
+  left: 0px;
+  width: 100%;
+  position: fixed;
+  display: flex;
+  background-color: #103144;
+  padding: 1rem 2.5rem;
+  justify-content: space-around;
+
+  .active {
+    p, span {
+      color: #EEFFFB;
+    }
+
+    span {
+      background-color: #1f5574;
+      border-radius: 0.5rem;
+    }
+  }
+
+  .item {
+    background-color: transparent;
+    border: none;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .item-text {
+    margin-top: 0.2rem;
+    font-weight: 600;
+    color: #bbc9c5;
+  }
+
+  span {
+    padding: 0.15rem 1rem;
+    color: #bbc9c5;
+  }
+}
+
+.bottom-bar-margin {
+  width: 100%;
+  height: 90px;
+}

src/components/CenterMessage/index.tsx

@@ -0,0 +1,19 @@
+type Props = {
+  message: string;
+};
+
+const CenterMessage = ({ message }: Props) => (
+  <div style={{ margin: "auto", paddingTop: "236px", width: "100%" }}>
+    <div
+      style={{
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+      }}
+    >
+      <p className="loading-message">{message}</p>
+    </div>
+  </div>
+);
+
+export default CenterMessage;

src/components/CenterMessage/styles.css

@@ -0,0 +1,4 @@
+.loading-message {
+  color: #1031449a;
+  font-weight: 600;
+}

src/components/ChatItem/index.tsx

@@ -0,0 +1,20 @@
+import Avatar from "@components/Avatar";
+
+type Props = {
+  name: string;
+  onSelectChat?: (chatId: string) => void;
+};
+
+const ChatItem = ({ name, onSelectChat }: Props) => {
+  return (
+    <div className="chat-item">
+      <div className="left">
+        <Avatar name={name} />
+        <p className="text">{name}</p>
+      </div>
+      <span className="material-symbols-outlined">arrow_forward_ios</span>
+    </div>
+  );
+};
+
+export default ChatItem;

src/components/ChatItem/styles.css

@@ -0,0 +1,28 @@
+.chat-item {
+  cursor: pointer;
+  display: flex;
+  padding: 16px 8px;
+  align-items: center;
+  justify-content: space-between;
+  border-bottom: 1px solid #c9dad5;
+
+  :hover {
+    background-color: #D9F3EB;
+  }
+
+  :active {
+    background-color: #c2e9de;
+  }
+
+  .left {
+    display: flex;
+    align-items: flex-start;
+    align-items: center;
+  }
+
+  .text {
+    color: #103144;
+    font-weight: bold;
+    margin-left: 1rem;
+  }
+}