Merge pull request #56 from ChainSafe/lykhoyda/receive

Receive & Transaction history page

packages/demo-wallet/src/App/components/ReceiveFunds.tsx

@@ -1,19 +1,19 @@
-import React, { useContext, useState, useEffect } from "react";
+import React, { useContext, useState, useEffect } from 'react';
 
-import QRCode from "react-qr-code";
-import Form from "react-bootstrap/Form";
-import { WalletContext } from "../App";
+import QRCode from 'react-qr-code';
+import Form from 'react-bootstrap/Form';
+import { WalletContext } from '../App';
 
 export function ReceiveFunds() {
   let { state, dispatch } = useContext(WalletContext);
 
-  let [unifiedAddress, setUnifiedAddress] = useState("");
+  let [unifiedAddress, setUnifiedAddress] = useState('');
 
   useEffect(() => {
     const updateUnifiedAddress = async () => {
       if (state.webWallet && state.activeAccount !== undefined) {
         let address = await state.webWallet.get_current_address(
-          state.activeAccount
+          state.activeAccount,
         );
         setUnifiedAddress(address);
       }
@@ -30,7 +30,7 @@ export function ReceiveFunds() {
         <Form.Label>Unified Address:</Form.Label>
         <Form.Control type="text" disabled value={unifiedAddress} />
       </Form.Group>
-      <div style={{ background: "white", padding: "16px" }}>
+      <div style={{ background: 'white', padding: '16px' }}>
         <QRCode value={unifiedAddress} />
       </div>
     </Form>

packages/snap/snap.manifest.json

@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/template-snap-monorepo.git"
   },
   "source": {
-    "shasum": "f+uCIgeC4d6/etrDizge6IA/ySlD1CVlBqtl3ZCOpgA=",
+    "shasum": "SA1fH7ay1ietGUsIELeD6rgpMuXu/rusR65jSdjCBrk=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

packages/web-wallet/package.json

@@ -13,9 +13,11 @@
     "@metamask/providers": "^18.2.0",
     "@webzjs/webz-keys": "workspace:^",
     "@webzjs/webz-wallet": "workspace:^",
+    "classnames": "^2.5.1",
     "idb-keyval": "^6.2.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-qr-code": "^2.0.15",
     "react-router-dom": "^6.27.0",
     "usehooks-ts": "^3.1.0"
   },
@@ -25,7 +27,7 @@
     "@fontsource/roboto": "^5.1.0",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
-    "@vitejs/plugin-react": "^4.3.3",
+    "@vitejs/plugin-react": "^4.3.4",
     "autoprefixer": "^10.4.20",
     "eslint": "^9.13.0",
     "eslint-plugin-react-hooks": "^5.0.0",
@@ -36,7 +38,7 @@
     "tailwindcss": "^3.4.14",
     "typescript": "~5.6.2",
     "typescript-eslint": "^8.11.0",
-    "vite": "^5.4.10",
+    "vite": "^6.0.7",
     "vite-plugin-svgr": "^4.3.0"
   }
 }

packages/web-wallet/src/App.tsx

@@ -1,8 +1,8 @@
 import { useInterval } from 'usehooks-ts';
-import { useWebZjsActions } from '@hooks/useWebzjsActions.ts';
-import Layout from '@components/Layout/Layout.tsx';
+import { useWebZjsActions } from '@hooks/useWebzjsActions';
+import Layout from '@components/Layout/Layout';
 import { Outlet, useLocation } from 'react-router-dom';
-import { RESCAN_INTERVAL } from './config/constants.ts';
+import { RESCAN_INTERVAL } from './config/constants';
 import { useEffect } from 'react';
 
 function App() {

packages/web-wallet/src/assets/index.ts

@@ -16,6 +16,10 @@ import { ReactComponent as CoinsSvg } from './icons/coins.svg';
 import { ReactComponent as ChevronSVG } from './icons/chevron.svg';
 import { ReactComponent as CheckSVG } from './icons/check.svg';
 import { ReactComponent as WarningSVG } from './icons/warning.svg';
+import { ReactComponent as EyeSvg } from './icons/eye.svg';
+import { ReactComponent as EyeSlashSvg } from './icons/eye-slash.svg';
+import { ReactComponent as CircleSvg } from './icons/circle.svg';
+import { ReactComponent as CircleDashedSvg } from './icons/circle-dashed.svg';
 
 export {
   ChainsafeSvg,
@@ -34,4 +38,8 @@ export {
   ChevronSVG,
   CheckSVG,
   WarningSVG,
+  EyeSvg,
+  EyeSlashSvg,
+  CircleSvg,
+  CircleDashedSvg,
 };

packages/web-wallet/src/components/Button/Button.tsx

@@ -1,4 +1,6 @@
 import React from 'react';
+import cn from 'classnames';
+
 type ButtonVariant = 'primary' | 'secondary';
 
 interface ButtonProps {
@@ -16,19 +18,20 @@ function Button({
   variant = 'primary',
   icon,
 }: ButtonProps) {
-  const baseClasses =
-    'min-w-[228px] px-6 py-3 rounded-3xl text-base font-medium leading-normal cursor-pointer transition-all hover:transition-all';
-
-  const variantClasses =
-    variant === 'primary'
-      ? 'bg-[#0e0e0e] text-white border hover:bg-buttonBlackGradientHover'
-      : 'bg-transparent text-black hover:bg-[#fff7e6] border hover:border-[#ffa940]';
+  const buttonClasses = cn(
+    'min-w-[228px] px-6 py-3 rounded-3xl text-base font-medium leading-normal',
+    'cursor-pointer transition-all hover:transition-all',
+    {
+      'bg-[#0e0e0e] text-white border hover:bg-buttonBlackGradientHover':
+        variant === 'primary',
+      'bg-transparent text-black hover:bg-[#fff7e6] border hover:border-[#ffa940]':
+        variant === 'secondary',
+    },
+    classNames,
+  );
 
   return (
-    <button
-      onClick={onClick}
-      className={`${baseClasses} ${variantClasses} ${classNames}`}
-    >
+    <button onClick={onClick} className={buttonClasses}>
       <div className="flex items-center justify-center">
         {icon && <span className="mr-2 flex items-center">{icon}</span>}
         <span>{label}</span>

packages/web-wallet/src/components/CopyButton/CopyButton.tsx

@@ -0,0 +1,42 @@
+import React, { useState } from 'react';
+
+interface CopyButtonProps {
+  textToCopy: string;
+}
+
+const HIDE_IN_SECONDS = 2000;
+
+const CopyButton: React.FC<CopyButtonProps> = ({ textToCopy }) => {
+  const [copied, setCopied] = useState(false);
+
+  const handleCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(textToCopy);
+      setCopied(true);
+      setTimeout(() => setCopied(false), HIDE_IN_SECONDS);
+    } catch (err) {
+      console.error('Failed to copy text:', err);
+    }
+  };
+
+  return (
+    <div className="relative inline-block">
+      {copied && (
+        <div
+          className="absolute bottom-full left-1/2 transform -translate-x-1/2  text-white px-2 py-2 rounded-3xl mb-1 whitespace-nowrap text-sm
+      bg-neutral-800 justify-center items-center gap-2.5 inline-flex"
+        >
+          Address copied!
+        </div>
+      )}
+      <button
+        onClick={handleCopy}
+        className="text-[#e27625] text-base font-semibold leading-normal"
+      >
+        copy
+      </button>
+    </div>
+  );
+};
+
+export default CopyButton;

packages/web-wallet/src/components/Header/Header.tsx

@@ -8,7 +8,7 @@ const Header = (): React.JSX.Element => {
   const isHomePage = location.pathname === '/';
 
   return (
-    <header className="font-inter h-16 fixed top-0 left-0 w-full px-16 flex flex-grow items-center justify-between bg-transparent py-3 border-b border-neutral-200">
+    <header className="font-inter h-[60px] fixed top-0 left-0 w-full px-16 flex flex-grow items-center justify-between bg-transparent py-3 border-b border-neutral-200">
       <Link to={'/'}>
         <div className="flex items-center">
           <div className="h-6 w-6 mr-3">

packages/web-wallet/src/components/Layout/Layout.tsx

@@ -1,13 +1,13 @@
 import React from 'react';
-import Header from '../Header/Header.tsx';
-import Footer from '../Footer/Footer.tsx';
+import Header from '../Header/Header';
+import Footer from '../Footer/Footer';
 import { Outlet } from 'react-router-dom';
 
 const Layout = ({ children }: React.PropsWithChildren): React.JSX.Element => {
   return (
     <div className="container mx-auto flex flex-col min-h-screen">
       <Header />
-      <main className="flex-grow flex justify-center py-3 self-stretch mt-16 w-full">
+      <main className="flex-grow flex justify-center py-3 self-stretch mt-[60px] w-full">
         {children ? children : <Outlet />}
       </main>
       <Footer />

packages/web-wallet/src/components/Loader/Loader.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+
+const Loader: React.FC = () => {
+  return (
+    <div className={`flex justify-center items-center`}>
+      <div
+        className={`w-8 h-8 border-4 border-t-transparent border-gray-300 rounded-full animate-spin`}
+      />
+    </div>
+  );
+};
+
+export default Loader;