🔥 Helios Test — Guía Paso a Paso
⚠️ NO cambies de ventana durante la grabación. Lee todo desde el celular.
PASO 0
Clonar e instalar
En la terminal de VS Code:
git clone https://github.com/spacedev-hiring/helios-test-app.git
cd helios-test-app
npm install
npm start
Cuando cargue Chrome, ve a localhost:3000/stake
💡 npm start abre el proyecto en el navegador. La página Stake es donde están los 3 bugs.
FIX 1
Botón MAX debe poner 250
📄 src/common/stakecount/StakeCount.jsx
Línea 74 — La función maxButtonClicked recibe el valor máximo real, pero el README pide que ponga 250 fijo.
❌ Cambiar esto:
const maxButtonClicked = (max) => {
setCheckSuccess(false);
setInputValue(max);
};
✅ Por esto:
const maxButtonClicked = () => {
setCheckSuccess(false);
setInputValue(250);
};
Línea 103 — Actualizar la llamada al botón (ya no pasa max).
❌ Cambiar esto:
<button className="max_button" onClick={() => maxButtonClicked(max)}>
✅ Por esto:
<button className="max_button" onClick={() => maxButtonClicked()}>
💡 El README dice "clicking Max sets input to 250". El código original ponía el balance real del usuario. Hardcodeamos 250 como piden.
FIX 2
Alinear estilos del botón MAX y el input
📄 src/common/stakecount/StakeCount.style.js
Línea 56 — El input es muy angosto.
❌ Cambiar:
width: 17%;
✅ Por:
width: 20%;
Línea 60 — El input tiene bordes cuadrados y el botón es redondo. Hacerlos consistentes.
❌ Cambiar:
border-radius: 5px;
✅ Por:
border-radius: 30px;
💡 El botón MAX tiene border-radius: 30px (píldora). El input tenía 5px (cuadrado). Ahora ambos son consistentes visualmente.
FIX 3
Botón "Connect To Stake" debe conectar wallet
📄 src/components/stake/StakeContent.jsx
Línea 21 — Agregar useConnect al import de wagmi.
❌ Buscar esto (línea 19-25):
import {
useContractReads,
useContractRead,
useAccount,
useContractWrite,
useWaitForTransaction
} from "wagmi";
✅ Cambiar a:
import {
useContractReads,
useContractRead,
useAccount,
useConnect,
useContractWrite,
useWaitForTransaction
} from "wagmi";
Línea 104 — Después de la línea que dice:
const { isConnected, address } = useAccount();
Agrega esta línea DEBAJO:
const { connect, connectors } = useConnect();
Línea ~423 — El onClick del botón. Busca esto:
⚠️ IMPORTANTE — Línea ~422 — El disabled del botón lo bloquea cuando no hay wallet. Cambiar:
❌ Cambiar:
disabled={
!(isConnected && !(stakeLoading || approveLoading || isConfirmed))
}
✅ Por:
disabled={
isConnected ? !(!(stakeLoading || approveLoading || isConfirmed)) : false
}
Línea ~425 — El onClick:
❌ Cambiar:
onClick={() => {
stakeAmplifier && stakeAmplifier > 0
? aproveAndWrite()
: stakeWrite({ from: address });
}}
✅ Por:
onClick={() => {
if (!isConnected) {
connect({ connector: connectors[0] });
return;
}
stakeAmplifier && stakeAmplifier > 0
? aproveAndWrite()
: stakeWrite({ from: address });
}}
💡 El botón decía "Connect To Start Stake" pero no tenía lógica para conectar. Ahora si no hay wallet conectado, abre la conexión usando RainbowKit/wagmi. Si ya está conectado, hace el stake normal.
VERIFICAR
Probar en Chrome
Guarda todos los archivos (Ctrl+S). Ve a Chrome, refresca /stake.
✅ Botón MAX pone 250 en el input
✅ Input y botón MAX se ven alineados (ambos redondeados)
✅ Botón "Connect To Start Stake" abre popup de wallet
Cuando todo funcione, para la grabación en OBS.
RESUMEN
Archivos modificados
src/common/stakecount/StakeCount.jsx → Fix Max button
src/common/stakecount/StakeCount.style.js → Fix estilos
src/components/stake/StakeContent.jsx → Fix Connect button
Solo 3 archivos. Cambios mínimos y limpios.