Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Customizable UI Theme #85

Merged
merged 1 commit into from
May 24, 2024
Merged

Customizable UI Theme #85

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 10 additions & 4 deletions frontend/src/app/components/AddressBar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -81,7 +81,10 @@ export const UserModal = ({
<span className="flex justify-between p-3 border-[1px] border-outline-gray rounded-full w-full">
<span className="flex justify-center">
{starkProfile?.name ||
address?.slice(0, 12).concat("...").concat(address?.slice(-5))}
address
?.slice(0, 12)
.concat("...")
.concat(address?.slice(-5))}
</span>
<Image
onClick={handleCopyClick}
Expand All @@ -98,7 +101,7 @@ export const UserModal = ({
disconnect();
e.stopPropagation();
}}
className="p-3 w-full rounded-lg bg-[#f77448] "
className="p-3 w-full rounded-lg bg-primary "
>
Disconnect
</button>
Expand Down Expand Up @@ -129,7 +132,7 @@ const AddressBar = ({
return (
<button
onClick={toggleModal}
className="bg-[#f77448] py-2 px-4 text-white rounded-full transition duration-300"
className="bg-primary py-2 px-4 text-white rounded-full transition duration-300"
>
{
<span className="flex items-center">
Expand All @@ -144,7 +147,10 @@ const AddressBar = ({
)}
{starkProfile?.name
? starkProfile.name
: address?.slice(0, 6).concat("...").concat(address?.slice(-5))}
: address
?.slice(0, 6)
.concat("...")
.concat(address?.slice(-5))}
</span>
}
</button>
Expand Down
8 changes: 4 additions & 4 deletions frontend/src/app/components/AssetTransferModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,13 +73,13 @@ function AssetTransferModal({
starknet_contract = new Contract(
abi,
"0x04718f5a0fc34cc1af16a1cdee98ffb20c31f5cd61d6ab07201858f4287c938d",
provider
provider,
);
} else {
starknet_contract = new Contract(
abi,
"0x049d36570d4e46f48e99674bd3fcc84644ddd6b96f7c741b1562b82f9e004dc7",
provider
provider,
);
}

Expand All @@ -103,7 +103,7 @@ function AssetTransferModal({
[walletAddress, toTransferTk],
{
maxFee: maxFee,
}
},
);
await provider.waitForTransaction(transferTxHash);
toast.success("Your transfer was successful!", { duration: 2000 });
Expand Down Expand Up @@ -248,7 +248,7 @@ function AssetTransferModal({
</div>

<button
className="w-full mt-7 py-3 bg-[#f77448] rounded font-medium flex items-center gap-x-2 justify-center disabled:cursor-not-allowed"
className="w-full mt-7 py-3 bg-primary rounded font-medium flex items-center gap-x-2 justify-center disabled:cursor-not-allowed"
onClick={async (e) => {
e.preventDefault();
await handleTransfer();
Expand Down
20 changes: 10 additions & 10 deletions frontend/src/app/components/Burner/Burner.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,11 +33,11 @@ const Burners: React.FC = () => {
let burnerWalletDeployer = new Contract(
Array.from(Abi),
burnerDeployerAddress!,
account
account,
);

const generateWallet = async (
burnerWalletDeployer: Contract
burnerWalletDeployer: Contract,
): Promise<Wallet> => {
const provider = new RpcProvider({
nodeUrl: rpcAddress,
Expand All @@ -47,12 +47,11 @@ const Burners: React.FC = () => {

const publicKey = ec.starkCurve.getStarkKey(privateKey);

const TransactionHash = await burnerWalletDeployer.deploy_burner_wallet(
publicKey
);
const TransactionHash =
await burnerWalletDeployer.deploy_burner_wallet(publicKey);

const result = await provider.waitForTransaction(
TransactionHash.transaction_hash
TransactionHash.transaction_hash,
);

return {
Expand Down Expand Up @@ -80,7 +79,7 @@ const Burners: React.FC = () => {
setWallets([...wallets, newWallet]);
localStorage.setItem(
"wallets",
JSON.stringify([...wallets, newWallet])
JSON.stringify([...wallets, newWallet]),
);
console.log(newWallet);
} catch (error) {
Expand Down Expand Up @@ -135,16 +134,17 @@ const Burners: React.FC = () => {
)}
<div className="flex">
<button
className="mt-2 mr-5 p-2 bg-[#f77448] text-white rounded"
className="mt-2 mr-5 p-2 bg-primary text-white rounded"
onClick={handleCreate}
>
Generate Wallet
</button>
<button
className="mt-2 p-2 bg-blue-500 text-white rounded"
className="mt-2 p-2 bg-secondary text-white rounded"
onClick={clearWallets}
>
Clear Wallets
{" "}
#3B82F6 Clear Wallets
</button>
</div>
</div>
Expand Down
14 changes: 7 additions & 7 deletions frontend/src/app/components/BurnerWallet/BurnerWallet.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,7 @@ function BurnerWallet({ wallet }: { wallet: IWallet }) {
const account: any = new Account(
provider,
wallet.address,
wallet.privateKey
wallet.privateKey,
);

setAccount(account);
Expand All @@ -71,7 +71,7 @@ function BurnerWallet({ wallet }: { wallet: IWallet }) {
onClose={() => setIsSending(false)}
account={account}
/>,
document.body
document.body,
)}
{isExecuting &&
createPortal(
Expand All @@ -80,7 +80,7 @@ function BurnerWallet({ wallet }: { wallet: IWallet }) {
onClose={() => setIsExecuting(false)}
account={account}
/>,
document.body
document.body,
)}
{isConnecting &&
createPortal(
Expand All @@ -90,7 +90,7 @@ function BurnerWallet({ wallet }: { wallet: IWallet }) {
handleConnect={handleConnect}
wallet={wallet}
/>,
document.body
document.body,
)}
<h2 className="mb-[5px] text-2xl font-semibold">Burner Wallet</h2>

Expand Down Expand Up @@ -137,7 +137,7 @@ function BurnerWallet({ wallet }: { wallet: IWallet }) {
<>
{ethBalance > 0 && (
<button
className=" px-6 py-4 bg-[#f77448] text-white rounded-[5px] disabled:cursor-not-allowed w-[200px] font-semibold"
className=" px-6 py-4 bg-primary text-white rounded-[5px] disabled:cursor-not-allowed w-[200px] font-semibold"
disabled={!eth || !strk}
onClick={() => setIsSending(true)}
>
Expand All @@ -146,7 +146,7 @@ function BurnerWallet({ wallet }: { wallet: IWallet }) {
)}
{ethBalance > 0 && (
<button
className=" px-6 py-4 bg-[#f77448] text-white rounded-[5px] w-[200px] font-semibold disabled:cursor-not-allowed"
className=" px-6 py-4 bg-primary text-white rounded-[5px] w-[200px] font-semibold disabled:cursor-not-allowed"
disabled={!eth || !strk}
onClick={() => setIsExecuting(true)}
>
Expand All @@ -156,7 +156,7 @@ function BurnerWallet({ wallet }: { wallet: IWallet }) {
</>
) : (
<button
className=" px-6 py-4 bg-[#f77448] disabled:cursor-not-allowed text-white rounded-[5px] w-[200px] font-semibold"
className=" px-6 py-4 bg-primary disabled:cursor-not-allowed text-white rounded-[5px] w-[200px] font-semibold"
onClick={() => setIsConnecting(true)}
disabled={!eth || !strk}
>
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/app/components/ConnectionModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -95,7 +95,7 @@ function ConnectionModal({ isOpen, onClose, handleConnect, wallet }: Props) {
</div>

<button
className="w-full mt-7 py-3 bg-[#f77448] rounded font-bold flex items-center gap-x-2 justify-center disabled:cursor-not-allowed"
className="w-full mt-7 py-3 bg-primary rounded font-bold flex items-center gap-x-2 justify-center disabled:cursor-not-allowed"
type="submit"
onClick={handleConnect}
>
Expand Down
10 changes: 5 additions & 5 deletions frontend/src/app/components/Header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,7 @@ const Header = () => {
if (lastUsedConnector) {
connect({
connector: connectors.find(
(connector) => connector.name === lastUsedConnector
(connector) => connector.name === lastUsedConnector,
),
});
}
Expand Down Expand Up @@ -119,7 +119,7 @@ const Header = () => {
<div className="flex justify-end">
<AddressBar setOpenConnectedModal={setOpenConnectedModal} />
<button
className="mx-3 bg-[#f77448] hover:bg-[#f77448] text-white font-bold py-2 px-4 rounded-full transition duration-300"
className="mx-3 bg-primary hover:bg-primary text-white font-bold py-2 px-4 rounded-full transition duration-300"
onClick={handleOpenTransactionListClick}
>
<LibraryBig className="h-full w-full" />
Expand All @@ -128,7 +128,7 @@ const Header = () => {
) : (
<button
onClick={toggleModal}
className="hidden md:block bg-[#f77448] hover:bg-[#f77448] text-white py-2 px-4 rounded-full transition duration-300"
className="hidden md:block bg-primary hover:bg-primary text-white py-2 px-4 rounded-full transition duration-300"
>
Connect
</button>
Expand Down Expand Up @@ -198,7 +198,7 @@ const Header = () => {
<div className="flex justify-end">
<AddressBar setOpenConnectedModal={setOpenConnectedModal} />
<button
className="mx-3 bg-[#f77448] hover:bg-[#f77448] text-white font-bold py-2 px-4 rounded-full transition duration-300"
className="mx-3 bg-primary hover:bg-primary text-white font-bold py-2 px-4 rounded-full transition duration-300"
onClick={handleOpenTransactionListClick}
>
<LibraryBig className="h-full w-full" />
Expand All @@ -207,7 +207,7 @@ const Header = () => {
) : (
<button
onClick={toggleModal}
className="bg-[#f77448] hover:bg-[#f77448] text-white py-2 px-4 rounded-full transition duration-300"
className="bg-primary hover:bg-primary text-white py-2 px-4 rounded-full transition duration-300"
>
Connect
</button>
Expand Down
35 changes: 21 additions & 14 deletions frontend/src/app/components/ScaffoldDeployer/ScaffoldDeployer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,13 @@ import trash from "../../../../public/assets/deleteIcon.svg";
import { useRef, useState } from "react";
import Header from "../Header";
import Image from "next/image";
import { DeclareContractPayload, hash, CallData,
UniversalDeployerContractPayload, CompiledSierraCasm } from "starknet";
import {
DeclareContractPayload,
hash,
CallData,
UniversalDeployerContractPayload,
CompiledSierraCasm,
} from "starknet";
import { useAccount } from "@starknet-react/core";

interface FileList {
Expand All @@ -24,7 +29,7 @@ function ScaffoldDeployer() {
const [selectedSierra, setSelectedSierra] = useState<FileList[]>([]);
const [selectedCasm, setSelectedCasm] = useState<FileList[]>([]);
const [contract, setContract] = useState<string | null>(null);
const [casm, setCasm] = useState<CompiledSierraCasm | null>(null)
const [casm, setCasm] = useState<CompiledSierraCasm | null>(null);
const [contractClassHash, setContractClassHash] = useState("");
const { account, status, isConnected } = useAccount();
const [classHash, setClassHash] = useState("");
Expand All @@ -41,7 +46,7 @@ function ScaffoldDeployer() {
const handleAddArgument = () => {
if (argumentsList[argumentsList.length - 1] === "") {
setArgumentError(
"Input an argument value in the previous field before adding another!"
"Input an argument value in the previous field before adding another!",
);
return;
}
Expand Down Expand Up @@ -91,7 +96,7 @@ function ScaffoldDeployer() {

const handleDeleteFile = (event: any) => {
event.preventDefault();
console.log("e: ", event)
console.log("e: ", event);
if (event.target.name == "casm") setSelectedCasm([]);
if (event.target.name == "sierra") setSelectedSierra([]);
};
Expand Down Expand Up @@ -119,10 +124,10 @@ function ScaffoldDeployer() {

const payload: DeclareContractPayload = {
contract: contract,
classHash: contractClassHash
classHash: contractClassHash,
};

if(casm) {
if (casm) {
payload.casm = casm;
delete payload.classHash;
}
Expand All @@ -149,22 +154,24 @@ function ScaffoldDeployer() {
if (!isConnected || !account) {
throw new Error("Connect wallet to continue");
}
const contractConstructor = CallData.compile(argumentsList.filter(arg=>arg !== ''));
const contractConstructor = CallData.compile(
argumentsList.filter((arg) => arg !== ""),
);
const payload: UniversalDeployerContractPayload = {
classHash: classHash,
constructorCalldata: contractConstructor,
};
const result = await account.deployContract(payload);
console.log(
result.contract_address,
"Contract Address of The Smart Contract"
"Contract Address of The Smart Contract",
);
setDeployedAddress(result.contract_address);
} catch (e) {
console.error("DEPLOYER ERROR", e);
} finally{
} finally {
setClassHash("");
setArgumentsList([""])
setArgumentsList([""]);
}
};

Expand Down Expand Up @@ -291,7 +298,7 @@ function ScaffoldDeployer() {
)}
<button
onClick={(e) => handleDeclare(e)}
className="bg-[#f77448] py-3 px-4 rounded-[5px] w-[200px] text-white"
className="bg-primary py-3 px-4 rounded-[5px] w-[200px] text-white"
>
Declare
</button>
Expand Down Expand Up @@ -346,14 +353,14 @@ function ScaffoldDeployer() {
type="button"
onClick={handleAddArgument}
disabled={argumentsList[argumentsList.length - 1] === ""}
className="bg-blue-500 py-3 px-4 rounded-[5px] w-[250px] text-white disabled:bg-slate-300 disabled:cursor-not-allowed"
className="bg-secondary py-3 px-4 rounded-[5px] w-[250px] text-white disabled:bg-slate-300 disabled:cursor-not-allowed"
>
Add argument
</button>
<button
type="submit"
disabled={disableButton}
className="bg-[#f77448] py-3 px-4 rounded-[5px] w-[200px] text-white disabled:bg-slate-300 disabled:cursor-not-allowed"
className="bg-primary py-3 px-4 rounded-[5px] w-[200px] text-white disabled:bg-slate-300 disabled:cursor-not-allowed"
>
Deploy
</button>
Expand Down
8 changes: 5 additions & 3 deletions frontend/tailwind.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,11 +21,13 @@ const config: Config = {
colors: {
"dark-1": "#000",
"white-1": "#fff",
primary: "#f77448",
secondary: "#3B82F6",
},
backgroundImage: {
'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
'gradient-conic':
'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
"gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
"gradient-conic":
"conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
},
},
},
Expand Down
Loading
Loading