Wallet transaction tab (MystenLabs#2529)

* transaction_logo update * select rpc network added * transaction tab added * update * network switch update * On network change, set setNewJsonRpcProvider, fetch all owned objects, and fetch all transactions * use camel case for classname * use camel case on element className
lykhangky · Jun 14, 2022 · c4b078a · c4b078a
1 parent 26e25df
commit c4b078a
Show file tree

Hide file tree

Showing 19 changed files with 620 additions and 32 deletions.
diff --git a/wallet/src/ui/app/ApiProvider.ts b/wallet/src/ui/app/ApiProvider.ts
@@ -1,7 +1,7 @@
 // Copyright (c) 2022, Mysten Labs, Inc.
 // SPDX-License-Identifier: Apache-2.0
 
-import { JsonRpcProvider, RawSigner } from '@mysten/sui.js';
+import { RawSigner, JsonRpcProvider } from '@mysten/sui.js';
 
 import type { Ed25519Keypair } from '@mysten/sui.js';
 
@@ -16,9 +16,9 @@ type EnvInfo = {
     color: string;
 };
 export const API_ENV_TO_INFO: Record<API_ENV, EnvInfo> = {
-    [API_ENV.local]: { name: 'Local', color: '#000' },
-    [API_ENV.devNet]: { name: 'DevNet', color: '#666' },
-    [API_ENV.staging]: { name: 'Staging', color: '#999' },
+    [API_ENV.local]: { name: 'Local', color: '#9064ff' },
+    [API_ENV.devNet]: { name: 'DevNet', color: '#29b6af' },
+    [API_ENV.staging]: { name: 'Staging', color: '#ff4a8d' },
 };
 
 export const ENV_TO_API: Record<API_ENV, string | undefined> = {
@@ -54,6 +54,10 @@ export default class ApiProvider {
         this._apiProvider = new JsonRpcProvider(DEFAULT_API_ENDPOINT);
     }
 
+    public setNewJsonRpcProvider(apiEnv: API_ENV) {
+        this._apiProvider = new JsonRpcProvider(getDefaultAPI(apiEnv));
+    }
+
     public get instance() {
         return this._apiProvider;
     }

diff --git a/wallet/src/ui/app/components/account-address/index.tsx b/wallet/src/ui/app/components/account-address/index.tsx
@@ -12,7 +12,7 @@ function AccountAddress() {
     const address = useAppSelector(
         ({ account: { address } }) => address && `0x${address}`
     );
-    const shortenAddress = useMiddleEllipsis(address || '');
+    const shortenAddress = useMiddleEllipsis(address || '', 20);
     return address ? (
         <span className={st['address-container']}>
             <CopyToClipboard txt={address}>

diff --git a/wallet/src/ui/app/components/header/index.tsx b/wallet/src/ui/app/components/header/index.tsx
@@ -22,6 +22,13 @@ function Header() {
             <NavLink to="./nfts" className={makeLinkCls} title="NFTs">
                 <BsIcon className={st.icon} icon="collection" />
             </NavLink>
+            <NavLink
+                to="./transactions"
+                className={makeLinkCls}
+                title="Transactions"
+            >
+                <BsIcon className={st.icon} icon="arrow-left-right" />
+            </NavLink>
             <NavLink to="./settings" className={makeLinkCls} title="Settings">
                 <BsIcon className={st.icon} icon="gear" />
             </NavLink>

diff --git a/wallet/src/ui/app/components/network-switch/Network.module.scss b/wallet/src/ui/app/components/network-switch/Network.module.scss
@@ -0,0 +1,111 @@
+.network {
+    display: flex;
+    flex-flow: row nowrap;
+    align-items: center;
+    margin-left: 10px;
+    width: 100%;
+    justify-content: space-between;
+    font-family: 'Space Mono', monospace;
+}
+
+.network-container {
+    max-width: 150px;
+    height: 25px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 100px;
+    border: 1px solid #d1d9e1;
+    padding: 8px 16px;
+    width: 100%;
+    background-color: #f8f8f8;
+    cursor: pointer;
+}
+
+.network-icon {
+    font-size: 13px;
+}
+
+.network-name {
+    color: #000;
+    font-weight: 500;
+    margin-left: 4px;
+}
+
+.network-dropdown {
+    color: #000;
+    font-weight: bold;
+}
+
+.network-options {
+    display: flex;
+    flex-flow: column nowrap;
+    align-items: center;
+    justify-content: center;
+    margin: 0;
+    background-color: #fff;
+    position: absolute;
+    z-index: 100;
+    min-height: 100px;
+    width: 250px;
+    border-radius: 10px;
+    margin-right: 23px;
+    top: 56px;
+    box-shadow: 1px 1px 3px 0 #d1d9e1;
+    cursor: auto;
+    font-family: 'Space Mono', monospace;
+    padding: 16px 0 0;
+
+    .network-header {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        width: 100%;
+        line-height: 150%;
+        font-size: 1rem;
+        text-align: center;
+        border-bottom: 1px solid #d1d9e1;
+        padding-bottom: 10px;
+    }
+
+    .network-lists {
+        list-style: none;
+        padding: 0;
+        overflow-y: auto;
+        margin-bottom: 0;
+        margin-top: 0;
+        width: 100%;
+    }
+
+    .network-item {
+        list-style: none;
+        padding: 16px;
+        font-size: 16px;
+        font-style: normal;
+        cursor: pointer;
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+        line-height: 20px;
+
+        &:hover {
+            background-color: #e6effe;
+        }
+
+        .network-icon {
+            margin-right: 15px;
+        }
+
+        .selected-network {
+            margin-right: 15px;
+            font-weight: bold;
+            font-size: 20px;
+            opacity: 0;
+        }
+
+        .network-active {
+            opacity: 1;
+            color: #6fbcf0;
+        }
+    }
+}
diff --git a/wallet/src/ui/app/components/network-switch/NetworkSelector.tsx b/wallet/src/ui/app/components/network-switch/NetworkSelector.tsx
@@ -0,0 +1,71 @@
+// Copyright (c) 2022, Mysten Labs, Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+import cl from 'classnames';
+import { useMemo, useCallback } from 'react';
+
+import { API_ENV_TO_INFO, API_ENV } from '_app/ApiProvider';
+import BsIcon from '_components/bs-icon';
+import { useAppSelector, useAppDispatch } from '_hooks';
+import { changeRPCNetwork } from '_redux/slices/app';
+
+import st from './Network.module.scss';
+
+const NetworkSelector = () => {
+    const selectedApiEnv = useAppSelector(({ app }) => app.apiEnv);
+    const dispatch = useAppDispatch();
+    const netWorks = useMemo(
+        () =>
+            Object.keys(API_ENV).map((itm) => ({
+                style: {
+                    color: API_ENV_TO_INFO[itm as keyof typeof API_ENV].color,
+                },
+                ...API_ENV_TO_INFO[itm as keyof typeof API_ENV],
+                networkName: itm,
+            })),
+        []
+    );
+
+    const changeNetwork = useCallback(
+        (e: React.MouseEvent<HTMLElement>) => {
+            const networkName = e.currentTarget.dataset.network;
+            const apiEnv = API_ENV[networkName as keyof typeof API_ENV];
+            dispatch(changeRPCNetwork(apiEnv));
+        },
+        [dispatch]
+    );
+
+    return (
+        <div className={st.networkOptions}>
+            <div className={st.networkHeader}>RPC NETWORK</div>
+            <ul className={st.networkLists}>
+                {netWorks.map((apiEnv) => (
+                    <li
+                        className={st.networkItem}
+                        key={apiEnv.networkName}
+                        data-network={apiEnv.networkName}
+                        onClick={changeNetwork}
+                    >
+                        <BsIcon
+                            icon="check2"
+                            className={cl(
+                                st.selectedNetwork,
+                                selectedApiEnv === apiEnv.networkName &&
+                                    st.networkActive
+                            )}
+                        />
+                        <div style={apiEnv.style}>
+                            <BsIcon
+                                icon="circle-fill"
+                                className={st.networkIcon}
+                            />
+                        </div>
+                        {apiEnv.name}
+                    </li>
+                ))}
+            </ul>
+        </div>
+    );
+};
+
+export default NetworkSelector;
diff --git a/wallet/src/ui/app/components/network-switch/index.tsx b/wallet/src/ui/app/components/network-switch/index.tsx
@@ -0,0 +1,62 @@
+// Copyright (c) 2022, Mysten Labs, Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+import cl from 'classnames';
+import { useMemo, useCallback, useRef } from 'react';
+
+import NetworkSelector from './NetworkSelector';
+import { API_ENV_TO_INFO } from '_app/ApiProvider';
+import BsIcon from '_components/bs-icon';
+import { useAppSelector, useAppDispatch, useOnClickOutside } from '_hooks';
+import { setNetworkSelector } from '_redux/slices/app';
+
+import st from './Network.module.scss';
+
+const Network = () => {
+    const selectedApiEnv = useAppSelector(({ app }) => app.apiEnv);
+    const showNetworkSelect = useAppSelector(({ app }) => app.showHideNetwork);
+    const dispatch = useAppDispatch();
+
+    const openNetworkSelector = useCallback(() => {
+        dispatch(setNetworkSelector(showNetworkSelect));
+    }, [dispatch, showNetworkSelect]);
+
+    const netColor = useMemo(
+        () =>
+            selectedApiEnv
+                ? { color: API_ENV_TO_INFO[selectedApiEnv].color }
+                : {},
+        [selectedApiEnv]
+    );
+    const ref = useRef<HTMLHeadingElement>(null);
+
+    const clickOutsidehandler = () => {
+        return showNetworkSelect && dispatch(setNetworkSelector(true));
+    };
+    useOnClickOutside(ref, clickOutsidehandler);
+
+    return (
+        <div
+            className={st.networkContainer}
+            ref={ref}
+            onClick={openNetworkSelector}
+        >
+            {selectedApiEnv ? (
+                <div className={st.network} style={netColor}>
+                    <BsIcon icon="circle-fill" className={st.networkIcon} />
+                    <span className={st.networkName}>
+                        {API_ENV_TO_INFO[selectedApiEnv].name}
+                    </span>
+                    <BsIcon
+                        icon={showNetworkSelect ? 'chevron-up' : 'chevron-down'}
+                        className={cl(st.networkIcon, st.networkDropdown)}
+                    />
+                </div>
+            ) : null}
+
+            {showNetworkSelect && <NetworkSelector />}
+        </div>
+    );
+};
+
+export default Network;
diff --git a/wallet/src/ui/app/components/transactions-card/TransactionsCard.module.scss b/wallet/src/ui/app/components/transactions-card/TransactionsCard.module.scss
@@ -0,0 +1,30 @@
+.title {
+    font-size: 15px;
+    font-weight: 700;
+    color: #404040;
+}
+
+.card {
+    box-shadow: 0 1px 2px 0 #0000000d;
+    background-color: #fff;
+    display: grid;
+    height: auto;
+    margin-bottom: 1rem;
+    margin-top: 1rem;
+    padding: 0.8rem;
+    text-align: left;
+    font-family: 'Space Mono', ui-monospace, monospace;
+
+    a {
+        color: #4caad8;
+        text-decoration: none;
+    }
+}
+
+.failure {
+    color: #fca5a5;
+}
+
+.success {
+    color: #4ade80;
+}