wallet operations popup

apps/ui/public/fonts.css

@@ -26,10 +26,43 @@
     font-style: normal;
 }
 
+@font-face {
+    font-family: 'Robot Mono';
+    src: url('./fonts/RobotoMono.ttf') format('truetype');
+    font-weight: 400;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'Robot Mono Medium';
+    src: url('./fonts/RobotoMono.ttf') format('truetype');
+    font-weight: 500;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'Robot Mono Semi Bold';
+    src: url('./fonts/RobotoMono.ttf') format('truetype');
+    font-weight: 600;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'Robot Mono Bold';
+    src: url('./fonts/RobotoMono.ttf') format('truetype');
+    font-weight: 700;
+    font-style: normal;
+}
+
 :root {
     --ff--replacement-font: Arial, sans-serif;
     --ff--inter-regular: Inter, var(--ff--replacement-font);
     --ff--inter-bold: Inter Bold, var(--ff--replacement-font);
     --ff--inter-medium: Inter Medium, var(--ff--replacement-font);
     --ff--inter-semi-bold: Inter Semi Bold, var(--ff--replacement-font);
+
+    --ff--robot-regular: Robot Mono, var(--ff--replacement-font);
+    --ff--robot-medium: Robot Mono Medium, var(--ff--replacement-font);
+    --ff--robot-semi-bold: Robot Mono Semi Bold, var(--ff--replacement-font);
+    --ff--robot-bold: Robot Mono Bold, var(--ff--replacement-font);
 }

apps/ui/public/typography.css

@@ -35,3 +35,34 @@
     color: var(--col--link);
 }
 
+.t-robot-regular {
+    font-family: var(--ff--robot-regular);
+    font-size: 14px;
+    line-height: 133%;
+    font-weight: 400;
+    color: var(--col--dark);
+}
+
+.t-robot-medium {
+    font-family: var(--ff--robot-medium);
+    font-size: 14px;
+    line-height: 133%;
+    font-weight: 500;
+    color: var(--col--dark);
+}
+
+.t-robot-semi-bold {
+    font-family: var(--ff--robot-semi-bold);
+    font-size: 14px;
+    line-height: 133%;
+    font-weight: 600;
+    color: var(--col--dark);
+}
+
+.t-robot-bold {
+    font-family: var(--ff--robot-bold);
+    font-size: 14px;
+    line-height: 133%;
+    font-weight: 700;
+    color: var(--col--dark);
+}

apps/ui/src/comman/constants.ts

@@ -0,0 +1 @@
+export const NETWORK = 'testworld';

apps/ui/src/components/atoms/button/button.tsx

@@ -0,0 +1,18 @@
+import classNames from 'classnames';
+import style from './index.module.css';
+
+type Button = {
+    text: string;
+    onClick: () => void;
+    className?: string;
+};
+
+const Button = ({ text, onClick, className }: Button): JSX.Element => {
+    return (
+        <button onClick={onClick} className={classNames(style.button, className, 't-inter-semi-bold')}>
+            {text}
+        </button>
+    );
+};
+
+export default Button;

apps/ui/src/components/atoms/button/index.module.css

@@ -0,0 +1,21 @@
+.button {
+    padding: 0 32px;
+    height: 34px;
+    border-radius: 7px;
+    line-height: 20px;
+    background-color: #eef1ff;
+    outline: none !important;
+    border: none;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 300ms ease;
+    user-select: none;
+    border: 1px solid rgb(89, 127, 255);
+    color: #597fff;
+    cursor: pointer;
+}
+
+.button:hover {
+    background: #e8ecfa;
+}

apps/ui/src/components/atoms/button/index.ts

@@ -0,0 +1 @@
+export { default as Button } from './button';

apps/ui/src/components/atoms/input/index.ts

@@ -0,0 +1 @@
+export { default as Input } from './input';

apps/ui/src/components/atoms/input/input.tsx

@@ -0,0 +1,11 @@
+type InputProps = {
+    onChange: () => void;
+    placeholder: string;
+    value: string;
+};
+
+const Input = ({ onChange, placeholder, value }: InputProps): JSX.Element => {
+    return <input onChange={onChange} placeholder={placeholder} value={value} />;
+};
+
+export default Input;

apps/ui/src/components/atoms/loader/constants.ts

@@ -0,0 +1,11 @@
+export const colorConfig = {
+    blue: [
+        'rgba(222, 229, 255, 1)',
+        'rgba(189, 204, 255, 1)',
+        'rgba(155, 178, 255, 1)',
+        'rgba(122, 153, 255, 1)',
+        'rgba(89, 127, 255, 1)',
+    ],
+};
+
+export const disabledColor = 'rgba(232, 233, 235, 1)';

apps/ui/src/components/atoms/loader/index.ts

@@ -0,0 +1 @@
+export { default as Loader } from './loader';

apps/ui/src/components/atoms/loader/loader.tsx

@@ -0,0 +1,66 @@
+import React from 'react';
+import { colorConfig, disabledColor } from './constants';
+
+type LoaderProps = {
+    label?: string;
+    disabled?: boolean;
+    dotCount?: number;
+    radius?: number;
+    gap?: number;
+    duration?: number;
+};
+const Loader = ({ label, disabled, dotCount = 5, radius = 3, gap = 8, duration = 2000 }: LoaderProps): JSX.Element => {
+    const r = radius;
+    const g = gap;
+    const colors = colorConfig.blue;
+
+    const getCX = (r, g, i) => r + (r * 2 + g) * i;
+    const width = getCX(r, g, dotCount - 1) + r;
+
+    const getCircles = (count) => {
+        const arr = [];
+
+        for (let i = 0; i < count; i++) {
+            let values = [];
+            for (let index = 0; index < count * 2 - 1; index++) {
+                values.push(index < i || index > count + i - 1 ? 0 : 1);
+            }
+            values = [0, ...values, 0];
+            arr.push(
+                <circle
+                    cx={getCX(r, g, i)}
+                    cy={r}
+                    r={r}
+                    fill={!disabled ? colors[i] ?? colors.at(-1) : disabledColor}
+                    key={i}
+                >
+                    {!disabled && (
+                        <animate
+                            attributeName="opacity"
+                            begin="0s"
+                            dur={duration + 'ms'}
+                            values={values.join(';')}
+                            calcMode="linear"
+                            repeatCount="indefinite"
+                        />
+                    )}
+                </circle>
+            );
+        }
+        return arr;
+    };
+
+    return (
+        <svg
+            height={r * 2}
+            width={width}
+            viewBox={`0 0 ${width} ${r * 2}`}
+            xmlns="http://www.w3.org/2000/svg"
+            aria-label={label}
+        >
+            {getCircles(dotCount)}
+        </svg>
+    );
+};
+
+export default Loader;

apps/ui/src/components/atoms/logo/index.ts

@@ -0,0 +1 @@
+export { default as Logo } from './logo';

apps/ui/src/components/atoms/logo/logo.tsx

@@ -0,0 +1,8 @@
+import Image from 'next/image';
+import logo from '../../../../public/assets/MinaLogo.svg';
+
+const Logo = ({ className }: { className?: string }) => {
+    return <Image src={logo} alt="Mina" className={className} />;
+};
+
+export default Logo;

apps/ui/src/components/molecules/connectWalletButton/buttonWithAddress.tsx

@@ -0,0 +1,72 @@
+import Image from 'next/image';
+import auroIcon from './img/auro.png';
+import { StaticEllipse } from '../staticEllipse';
+import disconnect from './img/disconnect.svg';
+import profile from './img/profile.svg';
+import copy from './img/copy.svg';
+
+import style from './index.module.css';
+import DropdownWrapper from '../dropdownWrapper';
+import { useRef, useState } from 'react';
+import classNames from 'classnames';
+import { useRouter } from 'next/router';
+
+const ButtonWithAddress = ({ address, onDisconnect }: { address: string; onDisconnect: () => void }) => {
+    const [isShowDropdown, setIsShowDropdown] = useState<boolean>(false);
+    const handleCLick = () => {
+        setIsShowDropdown(!isShowDropdown);
+    };
+    const refTest = useRef();
+    const router = useRouter();
+
+    return (
+        <>
+            <div className={style.buttonWithAddress} onClick={handleCLick} ref={refTest}>
+                <Image src={auroIcon} alt="" className={style.auroIcon} />
+                <StaticEllipse text={address} view={{ sm: 7, md: 9, lg: 9 }} />
+                <DropdownWrapper
+                    className={style.dropdownWrapper}
+                    show={isShowDropdown}
+                    onClose={() => setIsShowDropdown(false)}
+                    parentRef={refTest}
+                    minWidth="185px"
+                >
+                    <div
+                        className={classNames(style.item, 't-inter-semi-bold')}
+                        onClick={() => {
+                            navigator.clipboard.writeText(address);
+                            setIsShowDropdown(false);
+                        }}
+                    >
+                        <Image src={copy} alt="" className={style.icon} />
+                        Copy address
+                    </div>
+                    <div
+                        className={classNames(style.item, 't-inter-semi-bold')}
+                        onClick={() => {
+                            setIsShowDropdown(false);
+                            router.push('https://minascan.io/testworld/account/' + address);
+                        }}
+                    >
+                        <Image src={profile} alt="" className={style.icon} />
+                        Profile
+                    </div>
+                    {onDisconnect && (
+                        <div
+                            className={classNames(style.item, 't-inter-semi-bold')}
+                            onClick={() => {
+                                onDisconnect();
+                                setIsShowDropdown(false);
+                            }}
+                        >
+                            <Image src={disconnect} alt="" className={style.icon} />
+                            Disconnect
+                        </div>
+                    )}
+                </DropdownWrapper>
+            </div>
+        </>
+    );
+};
+
+export default ButtonWithAddress;

apps/ui/src/components/molecules/connectWalletButton/connectButton.tsx

@@ -0,0 +1,15 @@
+import Image from 'next/image';
+import WalletIcon from './img/wallet.svg';
+import style from './index.module.css';
+import classNames from 'classnames';
+
+const ConnectButton = ({ onClick }: { onClick: () => void }) => {
+    return (
+        <div className={classNames(style.connectbutton, 't-inter-semi-bold')} onClick={onClick}>
+            <Image src={WalletIcon} alt="" color="red" />
+            <p>Connect</p>
+        </div>
+    );
+};
+
+export default ConnectButton;

apps/ui/src/components/molecules/connectWalletButton/connectWalletButton.tsx

@@ -0,0 +1,63 @@
+import { useState } from 'react';
+import useAuroWallet from '../../../hooks/useAuroWallet';
+import classNames from 'classnames';
+
+import style from './index.module.css';
+import ButtonWithAddress from './buttonWithAddress';
+import ConnectButton from './connectButton';
+import WalletConnectPopUp from './walletConnectPopUp';
+import getWalletConfig from './hellper';
+
+const ConnectWalletButton = () => {
+    const [showPopup, setShowPopup] = useState(false);
+
+    const {
+        accountId,
+        connectMessage,
+        actions: { onConnectClick, resetConnectMessage, onDisconnectClick },
+    } = useAuroWallet();
+
+    const walletName = accountId ? 'Auro Wallet' : null;
+
+    const closeHandler = () => {
+        resetConnectMessage();
+        setShowPopup(false);
+    };
+
+    const address = accountId?.[0];
+
+    const handleConnect = () => {
+        setShowPopup(true);
+    };
+
+    return (
+        <div>
+            <div className={classNames(style.plate, { [style.connect]: !address })}>
+                {address ? (
+                    <ButtonWithAddress
+                        address={address}
+                        onDisconnect={async () => {
+                            await onDisconnectClick();
+                        }}
+                    />
+                ) : (
+                    <ConnectButton onClick={handleConnect} />
+                )}
+            </div>
+            <WalletConnectPopUp
+                walletName={walletName}
+                connected={!!accountId}
+                rejected={connectMessage === 'user reject'}
+                connectFunction={onConnectClick}
+                onClose={closeHandler}
+                list={getWalletConfig()}
+                show={showPopup}
+                keyID="walletConnectPopUp"
+                zIndex={52}
+                onResolve={(data) => console.log(data)}
+            />
+        </div>
+    );
+};
+
+export default ConnectWalletButton;

apps/ui/src/components/molecules/connectWalletButton/hellper.ts

@@ -0,0 +1,15 @@
+import auroIcon from './img/auro.png';
+
+const getWalletConfig = () => [
+    {
+        // eslint-disable-next-line valid-typeof
+        installed: typeof window !== 'undefined' && window['mina']?.isAuro,
+        name: 'Auro Wallet',
+        icon: auroIcon,
+        downloadUrl: {
+            browserExtension: 'https://chrome.google.com/webstore/detail/auro-wallet/cnmamaachppnkjgnildpdmkaakejnhae',
+        },
+    },
+];
+
+export default getWalletConfig;