-
+
+
+
+
{multisigAccount?.address ? (
-
+
) : (
)}
-
- {t('multisig.Confirmed Extrinsic')}
- {confirmedAccount}
-
- }
- key="confirmed"
- >
-
-
+ {networkConfig?.api?.subql && (
+ <>
+
+ {t('multisig.Confirmed Extrinsic')}
+ {confirmedAccount}
+
+ }
+ key="confirmed"
+ >
+
+
+
+ {t('multisig.Cancelled Extrinsic')}
+ {cancelledAccount}
+
+ }
+ key="cancelled"
+ >
+
+
+
+ )}
);
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index 6568f8d1..c5cf293f 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -1,15 +1,85 @@
-import { Layout } from 'antd';
-import { NetConfig } from '../model';
+import { Dropdown, Layout, Menu, Typography } from 'antd';
+import { useMemo } from 'react';
+import { useApi } from 'src/hooks';
+import { getDonateAddress } from 'src/utils';
+import { NetConfigV2 } from '../model';
+import { useTranslation } from '../packages/react-signer/src/translate';
import { Language } from './Language';
+import { ThemeSwitch } from './ThemeSwitch';
-export function Footer({ className = '' }: { networkConfig: NetConfig; className?: string }) {
+export function Footer({ className = '' }: { networkConfig?: NetConfigV2; className?: string }) {
+ const { t } = useTranslation();
+ const { network, chain } = useApi();
+
+ const contactIcons = useMemo(
+ () => [
+ { href: 'https://twitter.com/subscan_io/', icon: 'twitter-black' },
+ {
+ href: 'https://riot.im/app/#/room/!uaYUrKBueiKUurHliJ:matrix.org?via=matrix.org&via=matrix.parity.io&via=web3.foundation',
+ icon: 'riot-black',
+ },
+ { href: 'https://github.com/itering/subscan-multisig-react', icon: 'github-black' },
+ { href: 'https://medium.com/subscan', icon: 'medium-black' },
+ { href: 'mailto:hello@subscan.io', icon: 'email-black' },
+ ],
+ []
+ );
return (
+
+ {chain && (
+
+
+
+ {t('donate_unit', { unit: chain.tokens.length > 0 ? chain.tokens[0].symbol : 'Unknown' })}
+
+ {getDonateAddress(chain.ss58Format)}
+
+
+ )}
+
+
+
+ {t('donate_other')}
+
+
+
+ }
+ >
+
+ 
+
+
+
+ {contactIcons.map(({ href, icon }) => (
+
+ 
+
+ ))}
+
+
+
);
diff --git a/src/components/HeadAccounts.tsx b/src/components/HeadAccounts.tsx
index 060c1910..34da510b 100644
--- a/src/components/HeadAccounts.tsx
+++ b/src/components/HeadAccounts.tsx
@@ -1,12 +1,14 @@
-import { DownOutlined, PlusCircleFilled, DeleteOutlined } from '@ant-design/icons';
+import { DeleteOutlined, DownOutlined } from '@ant-design/icons';
import BaseIdentityIcon from '@polkadot/react-identicon';
import keyring from '@polkadot/ui-keyring';
-import { Popover, Tabs, Typography, Button, message } from 'antd';
+import { Button, Drawer, message, Popover, Tabs } from 'antd';
import { useEffect, useMemo, useState } from 'react';
import { useTranslation } from 'react-i18next';
+import { getThemeColor } from 'src/config';
import { useApi, useContacts } from '../hooks';
import { Network } from '../model';
import { AddContactModal } from './AddContactModal';
+import { SubscanLink } from './SubscanLink';
const { TabPane } = Tabs;
@@ -18,77 +20,151 @@ const genHeaderLinkStyle = (classes: TemplateStringsArray, network: Network) =>
export const HeadAccounts = () => {
const { t } = useTranslation();
- const { network, accounts } = useApi();
+ const { network, accounts, extensions } = useApi();
const { contacts, queryContacts } = useContacts();
const [popoverVisible, setPopoverVisible] = useState(false);
+ const [drawerVisible, setDrawerVisible] = useState(false);
const [addContactModalVisible, setAddContactModalVisible] = useState(false);
const headerLinkStyle = useMemo(() => genHeaderLinkStyle`${network}`, [network]);
+ const mainColor = useMemo(() => {
+ return getThemeColor(network);
+ }, [network]);
+
useEffect(() => {
if (popoverVisible) {
queryContacts();
}
}, [popoverVisible, queryContacts]);
+ const renderAccountContent = () => {
+ if (extensions && extensions.length === 0) {
+ return
{t('extension not found')}
;
+ }
+ if (accounts && accounts.length === 0) {
+ return
{t('extension account empty')}
;
+ }
+ return accounts?.map((item) => (
+
+ ));
+ };
+
return (
- <>
-
+ setDrawerVisible(true)}>
+ {t('accounts')}
+
+
+
+
+ setDrawerVisible(false)}
+ >
+
-
- {accounts?.map((item) => (
-
- ))}
-
{renderAccountContent()}
-
- {contacts?.map((item) => (
-
- ))}
+
+
+ {contacts?.map((item) => (
+
+ ))}
+
-
{
setAddContactModalVisible(true);
setPopoverVisible(false);
}}
- style={{ cursor: 'pointer' }}
- className="flex items-center"
>
-
-
-
{t('contact.Add Contact')}
-
+ {t('contact.Add Contact')}
+
+
{renderAccountContent()}
+
+
+
+
+
+ {contacts?.map((item) => (
+
+ ))}
+
+
+
+
+
+
}
placement="bottom"
>
-
+
{t('accounts')}
-
-
+
+ 
+## Integration
+
+### Add your own network in supported network list
+
+#### 1.Write your network config file
+
+All networks are configured in `src/config/chains` folder, You can take `polkadot.json` as an exmaple:
+
+```
+{
+ "name": "polkadot",
+ "displayName": "Polkadot",
+ "rpc": "wss://rpc.polkadot.io",
+ // Optional (Delete this line in PR!)
+ "api": {
+ "subql": "https://api.subquery.network/sq/itering/multisig_polkadot__aXRlc"
+ },
+ "logo": "/image/polkadot-button-mobile.png",
+ // Optional (Delete this line in PR!)
+ "explorerHostName": "polkadot",
+ "themeColor": "#e6007a"
+}
+```
+
+#### 2.Make a PR to submit your network
+
+After completing the above json config file, you can place it under `src/config/chains`, and submit a PR targeting `master` branch, once it's approved, multisig APP will display your network in the list.
+
+ 
-
+
+ 
+
{t('multisig.index')}
@@ -60,73 +81,52 @@ function App() {