Skip to content

Commit

Permalink
Merge branch 'djeck1432:main' into test/add-dashboard_test
Browse files Browse the repository at this point in the history
  • Loading branch information
0xdevcollins authored Oct 27, 2024
2 parents d938ac5 + 6cb27ca commit 482f3bc
Show file tree
Hide file tree
Showing 36 changed files with 1,576 additions and 245 deletions.
3 changes: 1 addition & 2 deletions frontend/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -16,8 +16,7 @@ You may also see any lint errors in the console.

### `npm test`

Launches the test runner in the interactive watch mode.\
See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
This launches the tests using the node environment provisioned by jest. After running the initial setup and the app is runnign , open another terminal shell, cd into the frontend directory and then run npm test.

### `npm run build`

Expand Down
4 changes: 4 additions & 0 deletions frontend/babel.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
module.exports = {
presets: [['@babel/preset-env', { targets: { node: 'current' } }], '@babel/preset-react'],
};

14 changes: 14 additions & 0 deletions frontend/jest.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
module.exports = {
setupFiles: ['./jest.setup.js'],
transform: {
'^.+\\.[tj]sx?$': 'babel-jest', // Using Babel for transforming JS, JSX, TS, and TSX
},
moduleNameMapper: {
'\\.svg$': '<rootDir>/test/__mocks__/svgMock.js',
},
transformIgnorePatterns: [
'node_modules/(?!(axios|get-starknet)/)' // Ignore transforming node_modules
],

testEnvironment: 'jsdom', // Use node as the test environment
};
4 changes: 4 additions & 0 deletions frontend/jest.setup.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
import { TextEncoder, TextDecoder } from 'util';

global.TextEncoder = TextEncoder;
global.TextDecoder = TextDecoder;
18 changes: 12 additions & 6 deletions frontend/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"axios": "^1.7.7",
Expand All @@ -13,21 +12,20 @@
"react-dom": "^18.3.1",
"react-router-dom": "^6.26.2",
"react-scripts": "^5.0.1",
"starknet": "^6.11.0",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"test": "jest",
"eject": "react-scripts eject"
},
"proxy": "http://localhost:8000",
"eslintConfig": {
"parserOptions": {
"ecmaVersion": 2020,
"sourceType": "module"
},
"ecmaVersion": 2020,
"sourceType": "module"
},
"extends": [
"react-app",
"react-app/jest"
Expand All @@ -44,5 +42,13 @@
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"@babel/preset-env": "^7.25.9",
"@testing-library/jest-dom": "^6.6.2",
"@types/jest": "^29.5.14",
"babel-jest": "^29.7.0",
"jest": "^27.5.1",
"starknet": "^6.11.0"
}
}
70 changes: 36 additions & 34 deletions frontend/src/components/header/Header.jsx
Original file line number Diff line number Diff line change
@@ -1,44 +1,46 @@
import React from 'react';
import './header.css'
import { ReactComponent as Logo } from "../../assets/images/logo.svg";
import { Link } from 'react-router-dom';
import { NavLink } from 'react-router-dom';

function Header({ walletId, onConnectWallet, onLogout }) {
return (
<nav>
<div className='list-items'>
<div className='logo'>
<Link to="/">
<Logo/>
</Link>
<nav>
<div className='list-items'>
<div className='logo'>
<NavLink to="/">
<Logo/>
</NavLink>
</div>
<div className='nav-items'>
<NavLink to="/" end className={({ isActive }) => (isActive ? 'active-link' : '')}>
Home
</NavLink>
<NavLink to="/dashboard" className={({ isActive }) => (isActive ? 'active-link' : '')}>
Dashboard
</NavLink>
</div>
<div className='wallet-section'>
{walletId ? (
<div className='wallet-container'>
<button className='logout-button' onClick={onLogout}>
Log out
</button>
<div className='wallet-id'>
{`${walletId.slice(0, 4)}...${walletId.slice(-4)}`}
</div>
<div className='nav-items'>
<a href="/">Home</a>
<Link to="/dashboard">Dashboard</Link>
</div>
<div className='wallet-section'>
{walletId ? (
<div className='wallet-container'>
<div className='wallet-id'>
{`${walletId.slice(0, 4)}...${walletId.slice(-4)}`}
</div>
<button className='gradient-button'
onClick={onLogout}
>
Log Out
</button>
</div>
) : (
<button className='gradient-button'
onClick={onConnectWallet}
>
<span>Connect Wallet</span>
</button>
)}
</div>
</div>
</nav>
</div>
) : (
<button className='gradient-button'
onClick={onConnectWallet}
>
<span>Connect Wallet</span>
</button>
)}
</div>
</div>
</nav>
);
}

export default Header;
export default Header;
38 changes: 38 additions & 0 deletions frontend/src/components/header/header.css
Original file line number Diff line number Diff line change
Expand Up @@ -71,12 +71,18 @@ nav {
color: var(--secondary);
font-family:var(--text-font);
font-size: 20px;
transition: color 0.3s;
}

.nav-items a:hover{
color: var(--brand);
}

.nav-items a.active-link {
color: var(--brand);
font-weight: 700;
}

.gradient-button{
border-radius: 8px;
border: none;
Expand All @@ -90,6 +96,38 @@ nav {
line-height: 100%;
}

.logout-button {
display: flex;
align-items: center;
justify-content: center;
width: 190px;
height: 52px;
border-radius: 8px;
border: 1px solid var(--brand);
background-color: transparent;
color: #fff;
font-family: var(--text-font, 'Rethink Sans', sans-serif);
font-size: 20px;
font-weight: 700;
line-height: 100%;
transition: all 0.3s ease;
}

.logout-button:hover {
background: var(--button-gradient, linear-gradient(55deg, #74d6fd 0%, #e01dee 100%));
border: none;
}

.logout-button:active {
background: var(--button-gradient-active, linear-gradient(55deg, #58c4ef 0%, #58c4ef 100%));
}

.logout-button:disabled {
opacity: 0.6;
cursor: not-allowed;
}


.gradient-button:hover {
background: var(--button-gradient-hover);
}
Expand Down
Loading

0 comments on commit 482f3bc

Please sign in to comment.