feat: connect wallet

.eslintignore

@@ -0,0 +1,8 @@
+.github
+.next/
+dist/
+docs/
+node_modules/
+.eslintrc.js
+*.tsbuildinfo
+*.json

.eslintrc.js

@@ -0,0 +1,20 @@
+module.exports = {
+  extends: ['next/core-web-vitals', 'plugin:@typescript-eslint/recommended', 'prettier'],
+  ignorePatterns: ['**/public/*.js', '**/plugins/*.js'],
+  rules: {
+    'comma-dangle': ['error', 'always-multiline'],
+    'no-useless-escape': ['warn'],
+    'jsx-a11y/click-events-have-key-events': ['warn'],
+    'jsx-a11y/interactive-supports-focus': ['warn'],
+    'jsx-a11y/no-static-element-interactions': ['warn'],
+    'jsx-a11y/no-noninteractive-element-interactions': ['warn'],
+    'jsx-a11y/anchor-is-valid': ['warn'],
+    'react/display-name': ['warn'],
+    'react/no-unescaped-entities': ['warn'],
+    'react/prop-types': ['off'],
+    '@typescript-eslint/ban-ts-comment': 'off',
+    '@typescript-eslint/ban-types': ['warn'],
+    '@typescript-eslint/no-empty-interface': ['warn'],
+    '@typescript-eslint/no-unused-vars': ['error', {vars: 'local', args: 'none'}],
+  },
+};

.prettierignore

@@ -0,0 +1,7 @@
+.github
+.next/
+dist/
+docs/
+node_modules/
+*.tsbuildinfo
+*.json

.prettierrc.json

@@ -0,0 +1,21 @@
+{
+  "printWidth": 100,
+  "tabWidth": 2,
+  "semi": true,
+  "singleQuote": true,
+  "jsxSingleQuote": false,
+  "trailingComma": "all",
+  "bracketSpacing": false,
+  "jsxBracketSameLine": true,
+  "arrowParens": "avoid",
+  "endOfLine": "lf",
+  "importOrder": [
+    "^(react)([-a-zA-Z]+)?$",
+    "^(next)([-a-zA-Z/]+)?$",
+    "^@material-ui/(.*)$",
+    "^@polkadot/(.*)$",
+    "^[./]",
+    "^[-a-zA-Z/]+"
+  ],
+  "importOrderSeparation": true
+}

next.config.js

@@ -1,6 +1,7 @@
 /** @type {import('next').NextConfig} */
 
 const {
+  NEXT_PUBLIC_APP_NAME,
   NEXT_PUBLIC_APP_AUTH_URL,
   NEXT_PUBLIC_MYRIAD_RPC_URL,
   NEXT_PUBLIC_MYRIAD_API_URL,
@@ -15,28 +16,24 @@ const nextConfig = {
     styledComponent: true,
   },
   serverRuntimeConfig: {
-    myriadAPIURL: NEXT_PUBLIC_MYRIAD_API_URL ?? "http://localhost:3001",
-    myriadAPIKey: NEXT_PUBLIC_MYRIAD_API_KEY ?? "s3cr3t",
+    myriadAPIURL: NEXT_PUBLIC_MYRIAD_API_URL ?? 'http://localhost:3001',
+    myriadAPIKey: NEXT_PUBLIC_MYRIAD_API_KEY ?? 's3cr3t',
   },
   publicRuntimeConfig: {
-    appAuthURL: NEXT_PUBLIC_APP_AUTH_URL ?? "http://localhost:3000",
-    myriadWebsiteURL: NEXT_PUBLIC_MYRIAD_WEBSITE_URL ?? "https://myriad.social",
-    myriadSupportMail:
-      NEXT_PUBLIC_MYRIAD_SUPPORT_MAIL ?? "support@myriad.social",
-    myriadRPCURL: NEXT_PUBLIC_MYRIAD_RPC_URL ?? "ws://localhost:9944",
+    appName: NEXT_PUBLIC_APP_NAME ?? 'Federated Local',
+    appAuthURL: NEXT_PUBLIC_APP_AUTH_URL ?? 'http://localhost:3000',
+    myriadWebsiteURL: NEXT_PUBLIC_MYRIAD_WEBSITE_URL ?? 'https://myriad.social',
+    myriadSupportMail: NEXT_PUBLIC_MYRIAD_SUPPORT_MAIL ?? 'support@myriad.social',
+    myriadRPCURL: NEXT_PUBLIC_MYRIAD_RPC_URL ?? 'ws://localhost:9944',
   },
   images: {
-    domains: [
-      "i.pravatar.cc",
-      "firebasestorage.googleapis.com",
-      "storage.googleapis.com",
-    ],
+    domains: ['i.pravatar.cc', 'firebasestorage.googleapis.com', 'storage.googleapis.com'],
   },
   webpack(config) {
     config.module.rules.push({
       test: /\.mjs$/,
       include: /node_modules/,
-      type: "javascript/auto",
+      type: 'javascript/auto',
     });
 
     return config;

package.json

@@ -14,7 +14,13 @@
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
-    "lint": "next lint"
+    "prettier:cli": "prettier",
+    "prettier:check": "yarn run prettier:cli -l .",
+    "prettier:fix": "yarn run prettier:cli --write .",
+    "lint": "next lint",
+    "lint:check": "yarn run lint --report-unused-disable-directives error",
+    "lint:fix": "yarn run lint --fix && yarn run prettier:fix",
+    "clean": "rm -rf .next dist plugins/sv-env.js"
   },
   "dependencies": {
     "@emotion/react": "^11.9.3",
@@ -26,7 +32,9 @@
     "@material-ui/lab": "^4.0.0-alpha.61",
     "@mui/icons-material": "^5.10.2",
     "@mui/material": "^5.10.2",
-    "@polkadot/api": "^8.8.2",
+    "@polkadot/api": "^9.2.4",
+    "@polkadot/extension-dapp": "^0.44.6",
+    "@polkadot/react-identicon": "^2.9.7",
     "@svgr/webpack": "^6.2.1",
     "@tanstack/react-query": "^4.2.1",
     "@tanstack/react-query-devtools": "^4.2.1",
@@ -39,6 +47,7 @@
     "formik": "^2.2.9",
     "husky": "^8.0.1",
     "js-cookie": "^3.0.1",
+    "localforage": "^1.10.0",
     "lodash": "^4.17.21",
     "next": "12.1.6",
     "next-http-proxy-middleware": "^1.2.4",
@@ -50,13 +59,15 @@
     "tailwindcss": "^3.1.8"
   },
   "devDependencies": {
-    "@polkadot/types": "^8.8.2",
+    "@polkadot/types": "^9.2.4",
     "@types/lodash": "^4.14.182",
     "@types/node": "17.0.43",
     "@types/react": "18.0.12",
     "@types/react-dom": "18.0.5",
+    "@typescript-eslint/eslint-plugin": "^5.16.0",
     "eslint": "8.17.0",
     "eslint-config-next": "12.1.6",
+    "eslint-config-prettier": "^8.5.0",
     "typescript": "4.7.3"
   }
 }

postcss.config.js

@@ -3,4 +3,4 @@ module.exports = {
     tailwindcss: {},
     autoprefixer: {},
   },
-}
+};

public/icons/index.ts

@@ -1,27 +1,27 @@
-import IcClosePurple from "./IcClosePurple.svg";
-import IcCluster from "./IcCluster.svg";
-import IcDasboard from "./IcDasboard.svg";
-import IcDropdownPrimary from "./IcDropdownPrimary.svg";
-import IcHelp from "./IcHelp.svg";
-import IcNotification from "./IcNotification.svg";
-import IcOpenUrl from "./IcOpenUrl.svg";
-import IcPost from "./IcPost.svg";
-import IcUser from "./IcUser.svg";
-import Logo from "./Logo.svg";
-import FavIcon from "./myriad-icon.png";
-import IcSettings from "./IcSettings.svg";
-import NotificationJoinInstance from "./NotificationJoinInstance.svg";
-import NotificationsDeployNode from "./NotificationsDeployNode.svg";
-import NotificationsReportPost from "./NotificationsReportPost.svg";
-import NotificationsReportUser from "./NotificationsReportUser.svg";
-import ExperianceGray from "./ExperianceGray.svg";
-import PostGray from "./PostGray.svg";
-import UserGray from "./UserGray.svg";
-import IcCalender from "./IcCalender.svg";
-import IcCopy from "./IcCopy.svg";
-import Magnifier from "./magnifierIcon.svg";
-import MyriadFullBlack from "./myriad-full-black.svg";
-import Illustration from "./Illustration.svg";
+import IcClosePurple from './IcClosePurple.svg';
+import IcCluster from './IcCluster.svg';
+import IcDasboard from './IcDasboard.svg';
+import IcDropdownPrimary from './IcDropdownPrimary.svg';
+import IcHelp from './IcHelp.svg';
+import IcNotification from './IcNotification.svg';
+import IcOpenUrl from './IcOpenUrl.svg';
+import IcPost from './IcPost.svg';
+import IcUser from './IcUser.svg';
+import Logo from './Logo.svg';
+import FavIcon from './myriad-icon.png';
+import IcSettings from './IcSettings.svg';
+import NotificationJoinInstance from './NotificationJoinInstance.svg';
+import NotificationsDeployNode from './NotificationsDeployNode.svg';
+import NotificationsReportPost from './NotificationsReportPost.svg';
+import NotificationsReportUser from './NotificationsReportUser.svg';
+import ExperianceGray from './ExperianceGray.svg';
+import PostGray from './PostGray.svg';
+import UserGray from './UserGray.svg';
+import IcCalender from './IcCalender.svg';
+import IcCopy from './IcCopy.svg';
+import Magnifier from './magnifierIcon.svg';
+import MyriadFullBlack from './myriad-full-black.svg';
+import Illustration from './Illustration.svg';
 
 export {
   Magnifier,

src/components/PolkadotAccountList/PolkadotAccountList.styles.ts

@@ -0,0 +1,76 @@
+import {makeStyles, createStyles, Theme, alpha} from '@material-ui/core/styles';
+
+export const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    root: {},
+    wrapper: {
+      width: 360,
+    },
+    list: {
+      paddingTop: 0,
+
+      '& .MuiListItem-root:hover': {
+        backgroundColor: alpha('#FFC857', 0.15),
+
+        '&::before,&::after': {
+          content: '""',
+          position: 'absolute',
+          width: 30,
+          height: 61,
+          top: 0,
+          backgroundColor: alpha('#FFC857', 0.15),
+        },
+        '&::before': {
+          left: -30,
+        },
+        '&::after': {
+          right: -30,
+        },
+      },
+    },
+    accountDetail: {
+      '& .MuiListItemText-secondary': {
+        overflow: 'hidden',
+        color: ' #4B4851',
+        textOverflow: 'ellipsis',
+      },
+    },
+    help: {
+      padding: theme.spacing(1),
+      textAlign: 'center',
+      maxWidth: 390,
+      marginLeft: 'auto',
+      marginRight: 'auto',
+      fontSize: 16,
+      fontWeight: 600,
+      fontStyle: 'normal',
+      lineHeight: '24px',
+    },
+    actions: {
+      display: 'flex',
+      flexWrap: 'wrap',
+      justifyContent: 'center',
+      flexDirection: 'row',
+      marginBottom: 24,
+    },
+    circle: {
+      margin: theme.spacing(0, 0.5),
+      fontSize: 10,
+      color: '#BCBCBC',
+    },
+    buttonGroup: {
+      width: '100%',
+      padding: theme.spacing(2, 2, 0, 2),
+      display: 'flex',
+      flexWrap: 'wrap',
+      justifyContent: 'space-between',
+
+      '& .MuiButton-contained': {
+        background: theme.palette.background.paper,
+        fontSize: 16,
+        fontWeight: 600,
+        color: theme.palette.secondary.main,
+      },
+    },
+  }),
+);

src/components/PolkadotAccountList/PolkadotAccountList.tsx

@@ -0,0 +1,92 @@
+import React from 'react';
+
+import {Typography} from '@material-ui/core';
+import Button from '@material-ui/core/Button';
+import List from '@material-ui/core/List';
+import ListItem from '@material-ui/core/ListItem';
+import ListItemAvatar from '@material-ui/core/ListItemAvatar';
+import ListItemText from '@material-ui/core/ListItemText';
+import YouTubeIcon from '@material-ui/icons/YouTube';
+
+import {InjectedAccountWithMeta} from '@polkadot/extension-inject/types';
+import Identicon from '@polkadot/react-identicon';
+
+import {Modal} from '../atoms/Modal';
+import {AllignTitle} from '../atoms/Modal/Modal.types';
+import {PolkadotLink} from '../common/PolkadotLink.component';
+import ShowIf from '../common/show-if.component';
+import {useStyles} from './PolkadotAccountList.styles';
+
+type PolkadotAccountListProps = {
+  isOpen: boolean;
+  onClose: () => void;
+  onSelect: (account: InjectedAccountWithMeta) => void;
+  accounts: InjectedAccountWithMeta[];
+  title?: string;
+  align?: AllignTitle;
+};
+
+export const PolkadotAccountList: React.FC<PolkadotAccountListProps> = ({
+  isOpen,
+  accounts,
+  onSelect,
+  onClose,
+  title,
+  align,
+}) => {
+  const styles = useStyles();
+
+  return (
+    <Modal
+      title={title ?? 'Account List'}
+      open={isOpen}
+      onClose={onClose}
+      align={align ?? 'center'}>
+      <div className={styles.wrapper}>
+        <ShowIf condition={accounts.length == 0}>
+          <Typography className={styles.help}>
+            Please open your&nbsp;
+            <PolkadotLink />
+            &nbsp;extension and create new account or import existing.Then reload this page.
+          </Typography>
+
+          <div className={styles.buttonGroup}>
+            <Button
+              variant="contained"
+              fullWidth
+              size="medium"
+              href="https://polkadot.js.org/extension"
+              startIcon={<YouTubeIcon />}>
+              Watch Tutorial Video
+            </Button>
+          </div>
+        </ShowIf>
+        <ShowIf condition={accounts.length > 0}>
+          <List className={styles.list}>
+            {accounts.map(account => {
+              return (
+                <ListItem
+                  disableGutters
+                  onClick={() => onSelect(account)}
+                  key={account.address}
+                  className={styles.list}
+                  button>
+                  <ListItemAvatar>
+                    <Identicon value={account.address} size={48} theme="polkadot" />
+                  </ListItemAvatar>
+                  <ListItemText
+                    primary={account.meta.name}
+                    secondary={account.address}
+                    className={styles.accountDetail}
+                  />
+                </ListItem>
+              );
+            })}
+          </List>
+        </ShowIf>
+      </div>
+    </Modal>
+  );
+};
+
+export default PolkadotAccountList;

src/components/PolkadotAccountList/index.ts

@@ -0,0 +1 @@
+export * from './PolkadotAccountList';