Skip to content

Commit b83a327

Browse files
GabrielaDelPilarRjrcarlos20000xquantum3labsdanielcdzgianalarcon
authored
Update Cyberpunk theme ch-base (#85)
Co-authored-by: Carlos Ramos <[email protected]> Co-authored-by: 0xquantum3labs <[email protected]> Co-authored-by: jrcarlos2000 <[email protected]> Co-authored-by: Daniel Calderón Díaz <[email protected]> Co-authored-by: gianmalarcon <[email protected]> Co-authored-by: Nadai2010 <[email protected]>
1 parent 2884f6d commit b83a327

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

56 files changed

+507
-388
lines changed

‎assests/debug-contracts.png

-378 KB
Binary file not shown.

‎packages/nextjs/app/debug/_components/DebugContracts.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -35,8 +35,8 @@ export function DebugContracts() {
3535
<button
3636
className={`btn btn-secondary btn-sm font-light hover:border-transparent ${
3737
contractName === selectedContract
38-
? "bg-base-300 hover:bg-base-300 no-animation text-base-100 "
39-
: "bg-base-100 hover:bg-secondary hover:text-neutral-content text-primary"
38+
? "bg-secondary hover:bg-secondary no-animation text-white"
39+
: "bg-transparent text-neutral hover:text-white"
4040
}`}
4141
key={contractName}
4242
onClick={() => setSelectedContract(contractName)}

‎packages/nextjs/app/debug/_components/contract/ContractReadMethods.tsx

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,7 @@
11
import { Abi } from "abi-wan-kanabi";
22
import {
3-
AbiFunction,
43
Contract,
54
ContractName,
6-
GenericContract,
7-
InheritedFunctions,
85
getFunctionsByStateMutability,
96
} from "~~/utils/scaffold-stark/contract";
107
import { ReadOnlyFunctionForm } from "./ReadOnlyFunctionForm";

‎packages/nextjs/app/debug/_components/contract/ContractUI.tsx

Lines changed: 14 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,7 @@ import { useReducer } from "react";
55
import { ContractReadMethods } from "./ContractReadMethods";
66
// import { ContractWriteMethods } from "./ContractWriteMethods";
77
import { Address, Balance } from "~~/components/scaffold-stark";
8-
import {
9-
useDeployedContractInfo,
10-
useNetworkColor,
11-
} from "~~/hooks/scaffold-stark";
8+
import { useDeployedContractInfo } from "~~/hooks/scaffold-stark";
129
import { useTargetNetwork } from "~~/hooks/scaffold-stark/useTargetNetwork";
1310
import { ContractName } from "~~/utils/scaffold-stark/contract";
1411
import { ContractVariables } from "./ContractVariables";
@@ -33,7 +30,6 @@ export const ContractUI = ({
3330
const { targetNetwork } = useTargetNetwork();
3431
const { data: deployedContractData, isLoading: deployedContractLoading } =
3532
useDeployedContractInfo(contractName);
36-
const networkColor = useNetworkColor();
3733

3834
if (deployedContractLoading) {
3935
return (
@@ -57,30 +53,28 @@ export const ContractUI = ({
5753
>
5854
<div className="col-span-5 grid grid-cols-1 lg:grid-cols-3 gap-8 lg:gap-10 ">
5955
<div className="col-span-1 flex flex-col">
60-
<div className="bg-base-100 border-base-300 rounded-3xl px-6 lg:px-8 mb-6 space-y-1 py-4">
56+
<div className="bg-transparent border-gradient rounded-[5px] px-6 lg:px-8 mb-6 space-y-1 py-4">
6157
<div className="flex">
6258
<div className="flex flex-col gap-1">
63-
<span className="font-bold text-primary">{contractName}</span>
59+
<span className="font-bold text-neutral">{contractName}</span>
6460
<Address address={deployedContractData.address} />
6561
<div className="flex gap-1 items-center">
6662
<span className="font-bold text-sm">Balance:</span>
6763
<Balance
6864
address={deployedContractData.address}
69-
className="px-0 h-1.5 min-h-[0.375rem]"
65+
className="px-0 h-1.5 min-h-[0.375rem] text-network"
7066
/>
7167
</div>
7268
</div>
7369
</div>
7470
{targetNetwork && (
7571
<p className="my-0 text-sm">
7672
<span className="font-bold">Network</span>:{" "}
77-
<span style={{ color: networkColor }}>
78-
{targetNetwork.name}
79-
</span>
73+
<span className="text-network">{targetNetwork.name}</span>
8074
</p>
8175
)}
8276
</div>
83-
<div className="bg-base-300 rounded-3xl px-6 lg:px-8 py-4 text-neutral-content">
77+
<div className="bg-transparent border-gradient rounded-[5px] px-6 lg:px-8 py-4">
8478
<ContractVariables // TODO : there is no contract variables on starknet
8579
refreshDisplayVariables={refreshDisplayVariables}
8680
deployedContractData={deployedContractData}
@@ -89,27 +83,27 @@ export const ContractUI = ({
8983
</div>
9084
<div className="col-span-1 lg:col-span-2 flex flex-col gap-6">
9185
<div className="z-10">
92-
<div className="bg-base-100 rounded-3xl border border-base-300 flex flex-col mt-10 relative">
93-
<div className="h-[5rem] w-[5.5rem] bg-base-300 absolute self-start rounded-[22px] -top-[38px] -left-[1px] -z-10 py-[0.65rem]">
86+
<div className="rounded-[5px] border border-[#8A45FC] flex flex-col mt-10 relative bg-component">
87+
<div className="bg-function w-[140px] h-[32.5px] absolute self-start -top-[43px] -left-[1px] -z-10 py-[0.55rem] clip-corner">
9488
<div className="flex items-center justify-center space-x-2">
95-
<p className="my-0 text-sm text-neutral-content">Read</p>
89+
<p className="my-0 text-sm text-center">Read</p>
9690
</div>
9791
</div>
98-
<div className="p-5 divide-y divide-base-300">
92+
<div className="p-5 divide-y divide-secondary">
9993
<ContractReadMethods
10094
deployedContractData={deployedContractData}
10195
/>
10296
</div>
10397
</div>
10498
</div>
10599
<div className="z-10">
106-
<div className="bg-base-100 rounded-3xl border border-base-300 flex flex-col mt-10 relative">
107-
<div className="h-[5rem] w-[5.5rem] bg-base-300 absolute self-start rounded-[22px] -top-[38px] -left-[1px] -z-10 py-[0.65rem] ">
100+
<div className="rounded-[5px] border border-[#8A45FC] flex flex-col mt-10 relative bg-component">
101+
<div className="w-[140px] h-[32.5px] absolute self-start -top-[43px] -left-[1px] -z-10 py-[0.55rem] bg-function clip-corner">
108102
<div className="flex items-center justify-center space-x-2">
109-
<p className="my-0 text-sm text-neutral-content">Write</p>
103+
<p className="my-0 text-sm">Write</p>
110104
</div>
111105
</div>
112-
<div className="p-5 divide-y divide-base-300">
106+
<div className="p-5 divide-y divide-secondary">
113107
<ContractWriteMethods
114108
deployedContractData={deployedContractData}
115109
onChange={triggerRefreshDisplayVariables}

‎packages/nextjs/app/debug/_components/contract/ContractVariables.tsx

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,7 @@
11
import { Abi } from "abi-wan-kanabi";
22
import {
3-
AbiFunction,
43
Contract,
54
ContractName,
6-
GenericContract,
7-
InheritedFunctions,
85
getFunctionsByStateMutability,
96
} from "~~/utils/scaffold-stark/contract";
107
import { DisplayVariable } from "./DisplayVariable";

‎packages/nextjs/app/debug/_components/contract/DisplayVariable.tsx

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import { Address } from "@starknet-react/chains";
1010
import { useContractRead } from "@starknet-react/core";
1111
import { BlockNumber } from "starknet";
1212
import { displayTxResult } from "./utilsDisplay";
13+
import { useTheme } from "next-themes";
1314

1415
type DisplayVariableProps = {
1516
contractAddress: Address;
@@ -38,6 +39,8 @@ export const DisplayVariable = ({
3839
});
3940

4041
const { showAnimation } = useAnimationConfig(result);
42+
const { resolvedTheme } = useTheme();
43+
const isDarkMode = resolvedTheme === "dark";
4144

4245
useEffect(() => {
4346
refetch();
@@ -46,7 +49,9 @@ export const DisplayVariable = ({
4649
return (
4750
<div className="space-y-1 pb-2">
4851
<div className="flex items-center">
49-
<h3 className="font-medium text-[15px] mb-0 break-all text-neutral-content ">
52+
<h3
53+
className={`font-medium text-lg mb-0 break-all ${isDarkMode ? "text-[#4DB4FF]" : "text-[#7800FF]"}`}
54+
>
5055
{abiFunction.name}
5156
</h3>
5257
<button
@@ -64,7 +69,7 @@ export const DisplayVariable = ({
6469
</button>
6570
{/* <InheritanceTooltip inheritedFrom={inheritedFrom} /> */}
6671
</div>
67-
<div className="text-gray-500 font-medium flex flex-col items-start">
72+
<div className="text-neutral font-medium flex flex-col items-start">
6873
<div>
6974
<div
7075
className={`break-all block transition bg-transparent ${

‎packages/nextjs/app/debug/_components/contract/ReadOnlyFunctionForm.tsx

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -67,12 +67,14 @@ export const ReadOnlyFunctionForm = ({
6767

6868
return (
6969
<div className="flex flex-col gap-3 py-5 first:pt-0 last:pb-1">
70-
<p className="font-medium my-0 break-words">{abiFunction.name}</p>
70+
<p className="font-medium my-0 break-words text-function">
71+
{abiFunction.name}
72+
</p>
7173
{inputElements}
7274
<div className="flex justify-between gap-2 flex-wrap">
7375
<div className="flex-grow w-4/5">
7476
{data !== null && data !== undefined && (
75-
<div className="bg-secondary rounded-3xl text-sm text-white px-4 py-1.5 break-words">
77+
<div className="bg-input text-sm px-4 py-1.5 break-words">
7678
<p className="font-bold m-0 mb-1">Result:</p>
7779
<pre className="whitespace-pre-wrap break-words">
7880
{displayTxResult(data, false, abiFunction?.outputs)}
@@ -81,7 +83,7 @@ export const ReadOnlyFunctionForm = ({
8183
)}
8284
</div>
8385
<button
84-
className="btn btn-primary text-neutral-content btn-sm"
86+
className="btn bg-gradient-dark btn-sm shadow-none border-none text-white"
8587
onClick={handleRead}
8688
disabled={inputValue && isFetching}
8789
>

‎packages/nextjs/app/debug/_components/contract/TxReceipt.tsx

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ export const TxReceipt = (
1919
const [txResultCopied, setTxResultCopied] = useState(false);
2020

2121
return (
22-
<div className="flex text-sm rounded-3xl peer-checked:rounded-b-none min-h-0 bg-secondary py-0">
22+
<div className="flex text-sm rounded-[5px] peer-checked:rounded-b-none min-h-0 bg-input py-0">
2323
<div className="mt-1 pl-2">
2424
{txResultCopied ? (
2525
<CheckCircleIcon
@@ -45,13 +45,11 @@ export const TxReceipt = (
4545
</div>
4646
<div className="flex-wrap collapse collapse-arrow">
4747
<input type="checkbox" className="min-h-0 peer" />
48-
<div className="collapse-title text-sm min-h-0 py-1.5 pl-1 text-secondary-content">
48+
<div className="collapse-title text-xs min-h-0 py-1.5 pl-1 custom">
4949
<strong>Transaction Receipt</strong>
5050
</div>
51-
<div className="collapse-content overflow-auto bg-secondary rounded-t-none rounded-3xl">
52-
<pre className="text-xs pt-4 text-secondary-content">
53-
{displayTxResult(txResult, false)}
54-
</pre>
51+
<div className="collapse-content overflow-auto bg-transparent rounded-t-none rounded-3xl">
52+
<pre className="text-xs pt-4">{displayTxResult(txResult, false)}</pre>
5553
</div>
5654
</div>
5755
</div>

‎packages/nextjs/app/debug/_components/contract/WriteOnlyFunctionForm.tsx

Lines changed: 3 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,8 @@
11
"use client";
22

33
import { useEffect, useState } from "react";
4-
// import { Abi, AbiFunction } from "abitype";
5-
// import { Address, TransactionReceipt } from "viem";
6-
// import { useContractWrite, useNetwork, useWaitForTransaction } from "wagmi";
74
import {
85
ContractInput,
9-
// TxReceipt,
106
getFunctionInputKey,
117
getInitialFormState,
128
getParsedContractFunctionArgs,
@@ -30,16 +26,14 @@ type WriteOnlyFunctionFormProps = {
3026
abiFunction: AbiFunction;
3127
onChange: () => void;
3228
contractAddress: Address;
33-
// inheritedFrom?: string;
3429
};
3530

3631
export const WriteOnlyFunctionForm = ({
3732
abi,
3833
abiFunction,
3934
onChange,
4035
contractAddress,
41-
}: // inheritedFrom,
42-
WriteOnlyFunctionFormProps) => {
36+
}: WriteOnlyFunctionFormProps) => {
4337
const [form, setForm] = useState<Record<string, any>>(() =>
4438
getInitialFormState(abiFunction),
4539
);
@@ -116,9 +110,8 @@ WriteOnlyFunctionFormProps) => {
116110
zeroInputs ? "flex-row justify-between items-center" : "flex-col"
117111
}`}
118112
>
119-
<p className="font-medium my-0 break-words">
113+
<p className="font-medium my-0 break-words text-function">
120114
{abiFunction.name}
121-
{/* <InheritanceTooltip inheritedFrom={undefined} /> */}
122115
</p>
123116
{inputs}
124117
<div className="flex justify-between gap-2">
@@ -139,7 +132,7 @@ WriteOnlyFunctionFormProps) => {
139132
}`}
140133
>
141134
<button
142-
className="btn btn-secondary btn-sm bg-primary text-neutral-content "
135+
className="btn bg-gradient-dark btn-sm shadow-none border-none text-white"
143136
disabled={writeDisabled || isLoading}
144137
onClick={handleWrite}
145138
>

‎packages/nextjs/app/debug/page.tsx

Lines changed: 0 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -12,16 +12,6 @@ const Debug: NextPage = () => {
1212
return (
1313
<>
1414
<DebugContracts />
15-
<div className="text-center mt-8 bg-base-300 p-10">
16-
<h1 className="text-4xl my-0 text-neutral-content">Debug Contracts</h1>
17-
<p className="text-neutral-content">
18-
You can debug & interact with your deployed contracts here.
19-
<br /> Check{" "}
20-
<code className="italic bg-base-300 font-bold [word-spacing:-0.5rem] px-1 text-neutral-content">
21-
packages / nextjs / app / debug / page.tsx
22-
</code>{" "}
23-
</p>
24-
</div>
2515
</>
2616
);
2717
};

0 commit comments

Comments
 (0)