diff --git a/.github/workflows/lint.yaml b/.github/workflows/lint.yaml index 3b707ab..9caf05a 100644 --- a/.github/workflows/lint.yaml +++ b/.github/workflows/lint.yaml @@ -38,7 +38,7 @@ jobs: - name: Run foundry node, deploy contracts (& generate contracts typescript output) env: ETHERSCAN_API_KEY: ${{ secrets.ETHERSCAN_API_KEY }} - run: yarn chain::eth & yarn deploy::eth + run: yarn chain:eth & yarn deploy:eth - name: Run nextjs lint run: yarn next:lint --max-warnings=0 diff --git a/.lintstagedrc.js b/.lintstagedrc.js index 941bf78..ce2d6bb 100644 --- a/.lintstagedrc.js +++ b/.lintstagedrc.js @@ -7,15 +7,9 @@ const buildNextEslintCommand = (filenames) => const checkTypesNextCommand = () => "yarn next:check-types"; -const buildHardhatEslintCommand = (filenames) => - `yarn hardhat:lint-staged --fix ${filenames - .map((f) => path.relative(path.join("packages", "hardhat"), f)) - .join(" ")}`; - module.exports = { "packages/nextjs/**/*.{ts,tsx}": [ buildNextEslintCommand, checkTypesNextCommand, ], - "packages/hardhat/**/*.{ts,tsx}": [buildHardhatEslintCommand], }; diff --git a/package.json b/package.json index cc730b2..0dd5118 100644 --- a/package.json +++ b/package.json @@ -1,5 +1,5 @@ { - "name": "sse-2", + "name": "ses", "version": "0.0.1", "private": true, "workspaces": { @@ -8,36 +8,37 @@ ] }, "scripts": { - "chain::strk": "yarn workspace @sse-2/snfoundry chain", - "deploy::strk": "yarn workspace @sse-2/snfoundry deploy", - "deploy:reset::strk": "yarn workspace @sse-2/snfoundry deploy:reset", - "test::strk": "yarn workspace @sse-2/snfoundry test", - "compile::strk": "yarn workspace @sse-2/snfoundry compile", - "format::strk": "yarn workspace @sse-2/snfoundry format", - "account::eth": "yarn workspace @sse-2/foundry account", - "chain::eth": "yarn workspace @sse-2/foundry chain", - "compile::eth": "yarn workspace @sse-2/foundry compile", - "deploy::eth": "yarn workspace @sse-2/foundry deploy", - "deploy:verify::eth": "yarn workspace @sse-2/foundry deploy:verify", - "flatten::eth": "yarn workspace @sse-2/foundry flatten", - "fork::eth": "yarn workspace @sse-2/foundry fork", - "foundry:format::eth": "yarn workspace @sse-2/foundry format", - "foundry:lint::eth": "yarn workspace @sse-2/foundry lint", - "foundry:test::eth": "yarn workspace @sse-2/foundry test", - "generate::eth": "yarn workspace @sse-2/foundry generate", - "verify::eth": "yarn workspace @sse-2/foundry verify", + "chain:strk": "yarn workspace @ss-2/snfoundry chain", + "chain:eth": "yarn workspace @se-2/foundry chain", + "deploy:strk": "yarn workspace @ss-2/snfoundry deploy", + "deploy:eth": "yarn workspace @se-2/foundry deploy", + "deploy": "yarn deploy:eth && yarn deploy:strk", + "deploy:reset:strk": "yarn workspace @ss-2/snfoundry deploy:reset", + "test:strk": "yarn workspace @ss-2/snfoundry test", + "compile:strk": "yarn workspace @ss-2/snfoundry compile", + "format:strk": "yarn workspace @ss-2/snfoundry format", + "account:eth": "yarn workspace @se-2/foundry account", + "compile:eth": "yarn workspace @se-2/foundry compile", + "deploy:verify:eth": "yarn workspace @se-2/foundry deploy:verify", + "flatten:eth": "yarn workspace @se-2/foundry flatten", + "fork:eth": "yarn workspace @se-2/foundry fork", + "foundry:format:eth": "yarn workspace @se-2/foundry format", + "foundry:lint:eth": "yarn workspace @se-2/foundry lint", + "foundry:test:eth": "yarn workspace @se-2/foundry test", + "generate:eth": "yarn workspace @se-2/foundry generate", + "verify:eth": "yarn workspace @se-2/foundry verify", "postinstall": "husky install", - "next:build": "yarn workspace @sse-2/nextjs build", - "next:check-types": "yarn workspace @sse-2/nextjs check-types", - "next:format": "yarn workspace @sse-2/nextjs format", - "next:lint": "yarn workspace @sse-2/nextjs lint", - "next:serve": "yarn workspace @sse-2/nextjs serve", + "next:build": "yarn workspace @ses/nextjs build", + "next:check-types": "yarn workspace @ses/nextjs check-types", + "next:format": "yarn workspace @ses/nextjs format", + "next:lint": "yarn workspace @ses/nextjs lint", + "next:serve": "yarn workspace @ses/nextjs serve", "precommit": "lint-staged", - "start": "yarn workspace @sse-2/nextjs dev", - "vercel": "yarn workspace @sse-2/nextjs vercel", - "vercel:yolo": "yarn workspace @sse-2/nextjs vercel:yolo", - "test": "yarn foundry:test::eth && test::strk", - "format": "yarn next:format && yarn foundry:format::eth && format::strk" + "start": "yarn workspace @ses/nextjs dev", + "vercel": "yarn workspace @ses/nextjs vercel", + "vercel:yolo": "yarn workspace @ses/nextjs vercel:yolo", + "test": "yarn foundry:test:eth && test:strk", + "format": "yarn next:format && yarn foundry:format:eth && format:strk" }, "devDependencies": { "daisyui": "^4.7.3", diff --git a/packages/foundry/Makefile b/packages/foundry/Makefile new file mode 100644 index 0000000..5a63c19 --- /dev/null +++ b/packages/foundry/Makefile @@ -0,0 +1,89 @@ +.PHONY: build deploy generate-abis verify-keystore account chain compile deploy-verify flatten fork format lint test verify + +# setup wallet for anvil +setup-anvil-wallet: + shx rm ~/.foundry/keystores/scaffold-eth-default 2>/dev/null; \ + cast wallet import --private-key 0x2a871d0798f97d79848a013d4936a73bf4cc922c825d33c1cf7073dff6d409c6 --unsafe-password 'localhost' scaffold-eth-default + +# Start local chain +chain: setup-anvil-wallet + anvil + +# Start a fork +fork: setup-anvil-wallet + anvil --fork-url ${FORK_URL} --chain-id 31337 + +# Build the project +build: + forge build --build-info --build-info-path out/build-info/ + +# Deploy the project +deploy: + @if [ "$(RPC_URL)" = "localhost" ]; then \ + forge script script/Deploy.s.sol --rpc-url localhost --password localhost --broadcast --legacy --ffi; \ + else \ + forge script script/Deploy.s.sol --rpc-url $(RPC_URL) --broadcast --legacy --ffi; \ + fi + +# Build and deploy target +build-and-deploy: build deploy generate-abis + +# Generate TypeScript ABIs +generate-abis: + node scripts-js/generateTsAbis.js + +verify-keystore: + if grep -q "scaffold-eth-default" .env; then \ + cast wallet address --password localhost; \ + else \ + cast wallet address; \ + fi + +# List account +account: + @node scripts-js/ListAccount.js $$(make verify-keystore) + +# Generate a new account +account-generate: + @cast wallet import $(ACCOUNT_NAME) --private-key $$(cast wallet new | grep 'Private key:' | awk '{print $$3}') + @echo "Please update .env file with ETH_KEYSTORE_ACCOUNT=$(ACCOUNT_NAME)" + +# Import an existing account +account-import: + @cast wallet import ${ACCOUNT_NAME} --interactive + +# Compile contracts +compile: + forge compile + +# Deploy and verify +deploy-verify: + @if [ "$(RPC_URL)" = "localhost" ]; then \ + forge script script/Deploy.s.sol --rpc-url localhost --password localhost --broadcast --legacy --ffi --verify; \ + else \ + forge script script/Deploy.s.sol --rpc-url $(RPC_URL) --broadcast --legacy --ffi --verify; \ + fi + node scripts-js/generateTsAbis.js + +# Flatten contracts +flatten: + forge flatten + +# Format code +format: + forge fmt && prettier --write ./script/**/*.js + +# Lint code +lint: + forge fmt --check && prettier --check ./script/**/*.js + +# Run tests +test: + forge test + +# Verify contracts +verify: + forge script script/VerifyAll.s.sol --ffi --rpc-url $(RPC_URL) + +build-and-verify: build verify + diff --git a/packages/foundry/contracts/YourContract.sol b/packages/foundry/contracts/YourContract.sol index 3142774..fde85a7 100644 --- a/packages/foundry/contracts/YourContract.sol +++ b/packages/foundry/contracts/YourContract.sol @@ -30,7 +30,9 @@ contract YourContract { // Constructor: Called once on contract deployment // Check packages/foundry/deploy/Deploy.s.sol - constructor(address _owner) { + constructor( + address _owner + ) { owner = _owner; } @@ -47,7 +49,9 @@ contract YourContract { * * @param _newGreeting (string memory) - new greeting to save on the contract */ - function setGreeting(string memory _newGreeting) public payable { + function setGreeting( + string memory _newGreeting + ) public payable { // Print data to the anvil chain console. Remove when deploying to a live network. console.logString("Setting new greeting"); diff --git a/packages/foundry/package.json b/packages/foundry/package.json index 63bdc7e..9bf2836 100644 --- a/packages/foundry/package.json +++ b/packages/foundry/package.json @@ -1,5 +1,5 @@ { - "name": "@sse-2/foundry", + "name": "@se-2/foundry", "version": "0.0.1", "scripts": { "account": "node script/ListAccount.js", diff --git a/packages/foundry/script/VerifyAll.s.sol b/packages/foundry/script/VerifyAll.s.sol index 829d676..ec5b1e6 100644 --- a/packages/foundry/script/VerifyAll.s.sol +++ b/packages/foundry/script/VerifyAll.s.sol @@ -17,7 +17,9 @@ struct FfiResult { } interface tempVm { - function tryFfi(string[] calldata) external returns (FfiResult memory); + function tryFfi( + string[] calldata + ) external returns (FfiResult memory); } contract VerifyAll is Script { @@ -39,7 +41,9 @@ contract VerifyAll is Script { } } - function _verifyIfContractDeployment(string memory content) internal { + function _verifyIfContractDeployment( + string memory content + ) internal { string memory txType = abi.decode( vm.parseJson(content, searchStr(currTransactionIdx, "transactionType")), (string) @@ -49,7 +53,9 @@ contract VerifyAll is Script { } } - function _verifyContract(string memory content) internal { + function _verifyContract( + string memory content + ) internal { string memory contractName = abi.decode( vm.parseJson(content, searchStr(currTransactionIdx, "contractName")), (string) @@ -98,7 +104,9 @@ contract VerifyAll is Script { return; } - function nextTransaction(string memory content) external view returns (bool) { + function nextTransaction( + string memory content + ) external view returns (bool) { try this.getTransactionFromRaw(content, currTransactionIdx) { return true; } catch { @@ -106,11 +114,9 @@ contract VerifyAll is Script { } } - function _getCompiledBytecode(string memory contractName) - internal - view - returns (string memory compiledBytecode) - { + function _getCompiledBytecode( + string memory contractName + ) internal view returns (string memory compiledBytecode) { string memory root = vm.projectRoot(); string memory path = string.concat(root, "/out/", contractName, ".sol/", contractName, ".json"); diff --git a/packages/foundry/script/generateTsAbis.js b/packages/foundry/script/generateTsAbis.js index d1cb0d5..99f0239 100644 --- a/packages/foundry/script/generateTsAbis.js +++ b/packages/foundry/script/generateTsAbis.js @@ -112,7 +112,7 @@ function main() { }); }); - const TARGET_DIR = "../nextjs/core/eth/contracts/"; + const TARGET_DIR = "../nextjs/lib/scaffold-eth-2/contracts/"; const fileContent = Object.entries(allGeneratedContracts).reduce( (content, [chainId, chainConfig]) => { @@ -131,7 +131,7 @@ function main() { fs.writeFileSync( `${TARGET_DIR}deployedContracts.ts`, prettier.format( - `${generatedContractComment} import { GenericContractsDeclaration } from "~~/core/eth/utils/scaffold-eth/contract"; \n\n + `${generatedContractComment} import { GenericContractsDeclaration } from "@scaffold-eth-2/utils/scaffold-eth/contract"; \n\n const deployedContracts = {${fileContent}} as const; \n\n export default deployedContracts satisfies GenericContractsDeclaration`, { parser: "typescript", diff --git a/packages/nextjs/.eslintignore b/packages/nextjs/.eslintignore index 2ea0b64..11b1edb 100644 --- a/packages/nextjs/.eslintignore +++ b/packages/nextjs/.eslintignore @@ -9,3 +9,4 @@ node_modules/ **/*.png **/*.svg **/generated/**/* +**/lib/* diff --git a/packages/nextjs/app/layout.tsx b/packages/nextjs/app/layout.tsx index 6b75c83..10c1b18 100644 --- a/packages/nextjs/app/layout.tsx +++ b/packages/nextjs/app/layout.tsx @@ -10,11 +10,12 @@ export const metadata: Metadata = { icons: "/logo.ico", }; -const ScaffoldStarkApp = ({ children }: { children: React.ReactNode }) => { +const ScaffoldEthStarkApp = ({ children }: { children: React.ReactNode }) => { return ( + {" "} {children} @@ -22,4 +23,4 @@ const ScaffoldStarkApp = ({ children }: { children: React.ReactNode }) => { ); }; -export default ScaffoldStarkApp; +export default ScaffoldEthStarkApp; diff --git a/packages/nextjs/app/page.tsx b/packages/nextjs/app/page.tsx index c596da0..9255d0a 100644 --- a/packages/nextjs/app/page.tsx +++ b/packages/nextjs/app/page.tsx @@ -1,16 +1,62 @@ "use client"; import React, { useEffect, useState } from "react"; -import { useDynamicAccount } from "~~/core/dynamic/hooks/useDynamicAccount"; -import { useDynamicReadContract } from "~~/core/dynamic/hooks/useDynamicReadContract"; -import { useDynamicWriteContract } from "~~/core/dynamic/hooks/useDynamicWriteContract"; -import { useGlobalState } from "~~/core/dynamic/services/store/global"; +import { useDynamicAccount } from "~~/dynamic/hooks/useDynamicAccount"; +import { useDynamicContract } from "~~/dynamic/hooks/useDynamicContract"; +import { useDynamicDeployContract } from "~~/dynamic/hooks/useDynamicDeployContract"; +import { useDynamicEventHistory } from "~~/dynamic/hooks/useDynamicEventHistory"; +import { useDynamicReadContract } from "~~/dynamic/hooks/useDynamicReadContract"; +import { useDynamicTargetNetwork } from "~~/dynamic/hooks/useDynamicTargetNetwork"; +import { useDynamicWriteContract } from "~~/dynamic/hooks/useDynamicWriteContract"; +import { useGlobalState } from "~~/dynamic/services/store/global"; const Home = () => { const currentChain = useGlobalState(state => state.currentChain); const { address } = useDynamicAccount(); + const targetNetwork = useDynamicTargetNetwork(); + const [isLoading, setIsLoading] = useState(true); const [greetingState, setGreetingState] = useState(""); + const { + data: contractData, + isLoading: contractLoading, + error: contractError, + } = useDynamicContract({ + eth: { + contractName: "YourContract", + }, + strk: { + contractName: "YourContract", + }, + }); + + const { + data: deployedContractInfo, + isLoading: deployedContractLoading, + error: deployedContractError, + } = useDynamicDeployContract({ + eth: { contractName: "YourContract" }, + strk: { contractName: "YourContract" }, + }); + + const { data: eventHistoryData, isLoading: eventHistoryLoading } = useDynamicEventHistory({ + strk: { + contractName: "YourContract", + eventName: "contracts::YourContract::YourContract::GreetingChanged", + fromBlock: 1n, + enabled: true, + watch: true, + }, + eth: { + contractName: "YourContract", + eventName: "GreetingChange", + fromBlock: 1n, + enabled: true, + watch: true, + }, + }); + + console.log("eventHistoryData", eventHistoryData); const { isLoading: isGreetingLoading, @@ -37,7 +83,7 @@ const Home = () => { async function handleClick() { try { await writeAsync(); - + console.log("after click"); // after transaction successfull, we need refetch the contract data await refetchGreeting(); } catch (error) { @@ -53,9 +99,27 @@ const Home = () => { setGreetingState(greeting ? greeting.toString() : ""); }, [greeting]); + useEffect(() => { + const checkLoading = () => { + if (!contractLoading && !deployedContractLoading && !eventHistoryLoading && !isGreetingLoading) { + setIsLoading(false); + } + }; + + checkLoading(); + }, [contractLoading, deployedContractLoading, eventHistoryLoading, isGreetingLoading]); + + if (isLoading) { + return ( +
+
+
+ ); + } + return ( -
-

Starknet and EVM chains playground

+
+

Starknet and EVM chains playground

@@ -63,20 +127,61 @@ const Home = () => { +
+
+
+ + + + +
+ + + + +
+ + + + +
+ + + +
Current chain {currentChain}
Current address {address}
YourContract greeting {isGreetingLoading ? "Loading..." : String(greeting)}
Network{targetNetwork?.name}
Contract address + {!contractError ?
{contractLoading ? "Loading..." : contractData?.address}
: contractError} +
Deployed contract info + {!deployedContractError ? ( +
{deployedContractLoading ? "Loading..." : deployedContractInfo?.address}
+ ) : ( + deployedContractError + )} +
Events + {eventHistoryLoading ? ( +
Loading...
+ ) : ( + eventHistoryData && + eventHistoryData.map((event: any, index: number) => ( +
+ Event {index}: {currentChain == "ethereum" ? event?.topics[1] : event.args.new_greeting} +
+ )) + )} +
- {/* input for greeting */} + {/* input for greeting */} { {greetingPending ? (
Loading...
) : ( -
- Click me to change greeting +
+ Click me to change greeting and emit an event!
)}
diff --git a/packages/nextjs/components/Header.tsx b/packages/nextjs/components/Header.tsx index 70da23a..71953b9 100644 --- a/packages/nextjs/components/Header.tsx +++ b/packages/nextjs/components/Header.tsx @@ -1,38 +1,19 @@ "use client"; -import React, { useEffect, useState } from "react"; -import { useLocalStorage } from "usehooks-ts"; +import SelectNetWorkModal from "./modals/SelectNetworkModal"; import { RainbowKitCustomConnectButton } from "~~/components/scaffold-eth"; import { CustomConnectButton } from "~~/components/scaffold-stark/CustomConnectButton"; -import { useGlobalState } from "~~/core/dynamic/services/store/global"; -import { ChainType } from "~~/core/dynamic/types/chains"; +import { useGlobalState } from "~~/dynamic/services/store/global"; +import { ChainType } from "~~/dynamic/types/chains"; export const Header = () => { - const setCurrentChain = useGlobalState(state => state.setCurrentChain); const currentChain = useGlobalState(state => state.currentChain); - const [selectedOption, setSelectedOption] = useState(ChainType.Ethereum as string); - const [_, setLastSelectedChain] = useLocalStorage("lastSelectedChain", ""); - - const handleChange = (event: React.ChangeEvent) => { - setLastSelectedChain(event.target.value); - setSelectedOption(event.target.value); - setCurrentChain(event.target.value); - }; - - useEffect(() => { - setSelectedOption(currentChain); - }, [currentChain]); - return (
-
-

{currentChain}

- - {selectedOption == ChainType.Ethereum ? : } +
+ + {currentChain == ChainType.Ethereum ? : }
); diff --git a/packages/nextjs/components/ScaffoldAppWithProviders.tsx b/packages/nextjs/components/ScaffoldAppWithProviders.tsx index afbb786..a539acc 100644 --- a/packages/nextjs/components/ScaffoldAppWithProviders.tsx +++ b/packages/nextjs/components/ScaffoldAppWithProviders.tsx @@ -2,6 +2,12 @@ import { useEffect, useState } from "react"; import { RainbowKitProvider, darkTheme, lightTheme } from "@rainbow-me/rainbowkit"; +import { BlockieAvatar } from "@scaffold-eth-2/components/scaffold-eth"; +import { useInitializeNativeCurrencyPrice } from "@scaffold-eth-2/hooks/scaffold-eth"; +import { wagmiConfig } from "@scaffold-eth-2/services/web3/wagmiConfig"; +import { useNativeCurrencyPrice } from "@scaffold-stark-2/hooks/scaffold-stark/useNativeCurrencyPrice"; +import { appChains, connectors } from "@scaffold-stark-2/services/web3/connectors"; +import provider from "@scaffold-stark-2/services/web3/provider"; import { StarknetConfig, starkscan } from "@starknet-react/core"; import { QueryClient, QueryClientProvider } from "@tanstack/react-query"; import { useTheme } from "next-themes"; @@ -9,14 +15,8 @@ import { Toaster } from "react-hot-toast"; import { useLocalStorage } from "usehooks-ts"; import { WagmiProvider } from "wagmi"; import { Header } from "~~/components/Header"; -import { BlockieAvatar } from "~~/components/scaffold-eth"; -import { useGlobalState } from "~~/core/dynamic/services/store/global"; -import { ChainType } from "~~/core/dynamic/types/chains"; -import { useInitializeNativeCurrencyPrice } from "~~/core/eth/hooks"; -import { wagmiConfig } from "~~/core/eth/services/web3/wagmiConfig"; -import { useNativeCurrencyPrice } from "~~/core/stark/hooks/useNativeCurrencyPrice"; -import { appChains, connectors } from "~~/core/stark/services/web3/connectors"; -import provider from "~~/core/stark/services/web3/provider"; +import { useGlobalState } from "~~/dynamic/services/store/global"; +import { ChainType } from "~~/dynamic/types/chains"; const ScaffoldCrossChainApp = ({ children }: { children: React.ReactNode }) => { useInitializeNativeCurrencyPrice(); diff --git a/packages/nextjs/components/modals/SelectNetworkModal.tsx b/packages/nextjs/components/modals/SelectNetworkModal.tsx new file mode 100644 index 0000000..30ac15b --- /dev/null +++ b/packages/nextjs/components/modals/SelectNetworkModal.tsx @@ -0,0 +1,96 @@ +import { useEffect, useRef, useState } from "react"; +import Image from "next/image"; +import EthNetwork from "../../public/icons/eth-network-icon.svg"; +import StrkNetwork from "../../public/icons/strk-network-icon.svg"; +import GenericModal from "../scaffold-stark/CustomConnectButton/GenericModal"; +import { useLocalStorage } from "usehooks-ts"; +import { useGlobalState } from "~~/dynamic/services/store/global"; +import { ChainType } from "~~/dynamic/types/chains"; + +const ArrowDownIcon = ({ color }: { color: string }) => { + return ( + + + + ); +}; + +export default function SelectNetWorkModal() { + const [open, setOpen] = useState(false); + const [animate, setAnimate] = useState(false); + const [activeNetwork, setActiveNetwork] = useState(""); + const currentChain = useGlobalState(state => state.currentChain); + const setCurrentChain = useGlobalState(state => state.setCurrentChain); + const [_, setLastSelectedChain] = useLocalStorage("lastSelectedChain", ""); + + const closeModal = (e: React.MouseEvent) => { + e.stopPropagation(); + setAnimate(false); + setTimeout(() => { + setOpen(false); + }, 400); + }; + + useEffect(() => { + setActiveNetwork(currentChain); + }, [currentChain]); + useEffect(() => setAnimate(open), [open]); + + return ( + <> +
setOpen(true)} + > + network-icon + +
+ + +

Connect Network

+

Choose your network to connect wallet

+
+
{ + setActiveNetwork(ChainType.Ethereum); + setLastSelectedChain(ChainType.Ethereum); + setCurrentChain(ChainType.Ethereum); + }} + className={`network ${activeNetwork === ChainType.Ethereum ? "active-network" : "bg-network"}`} + > + Ethereum Network +

Ethereum

+
+
{ + setActiveNetwork(ChainType.Starknet); + setLastSelectedChain(ChainType.Starknet); + setCurrentChain(ChainType.Starknet); + }} + className={`network ${activeNetwork === ChainType.Starknet ? "active-network" : "bg-network"}`} + > + StarkNet Network +

StarkNet

+
+
+ + + ); +} diff --git a/packages/nextjs/components/scaffold-eth/Balance.tsx b/packages/nextjs/components/scaffold-eth/Balance.tsx index a36b5a0..2e854ba 100644 --- a/packages/nextjs/components/scaffold-eth/Balance.tsx +++ b/packages/nextjs/components/scaffold-eth/Balance.tsx @@ -1,10 +1,10 @@ "use client"; +import { useDisplayUsdMode } from "@scaffold-eth-2/hooks/scaffold-eth/useDisplayUsdMode"; +import { useTargetNetwork } from "@scaffold-eth-2/hooks/scaffold-eth/useTargetNetwork"; +import { useWatchBalance } from "@scaffold-eth-2/hooks/scaffold-eth/useWatchBalance"; +import { useGlobalState } from "@scaffold-eth-2/services/store/store"; import { Address, formatEther } from "viem"; -import { useDisplayUsdMode } from "~~/core/eth/hooks/useDisplayUsdMode"; -import { useTargetNetwork } from "~~/core/eth/hooks/useTargetNetwork"; -import { useWatchBalance } from "~~/core/eth/hooks/useWatchBalance"; -import { useGlobalState } from "~~/core/eth/services/store/store-eth"; type BalanceProps = { address?: Address; @@ -53,13 +53,13 @@ export const Balance = ({ address, className = "", usdMode }: BalanceProps) => { return ( +
+

Connect

+ wallet-icon +
); } diff --git a/packages/nextjs/components/scaffold-eth/index.tsx b/packages/nextjs/components/scaffold-eth/index.tsx index bf1e8a7..da3e4d4 100644 --- a/packages/nextjs/components/scaffold-eth/index.tsx +++ b/packages/nextjs/components/scaffold-eth/index.tsx @@ -1,7 +1,2 @@ -export * from "./Address"; export * from "./Balance"; -export * from "./BlockieAvatar"; -export * from "./Faucet"; -export * from "./FaucetButton"; -export * from "./Input"; export * from "./RainbowKitCustomConnectButton"; diff --git a/packages/nextjs/components/scaffold-stark/Balance.tsx b/packages/nextjs/components/scaffold-stark/Balance.tsx index 1611faa..337b7d3 100644 --- a/packages/nextjs/components/scaffold-stark/Balance.tsx +++ b/packages/nextjs/components/scaffold-stark/Balance.tsx @@ -1,11 +1,11 @@ "use client"; import { useState } from "react"; +import useScaffoldEthBalance from "@scaffold-stark-2/hooks/scaffold-stark/useScaffoldEthBalance"; +import useScaffoldStrkBalance from "@scaffold-stark-2/hooks/scaffold-stark/useScaffoldStrkBalance"; +import { useTargetNetwork } from "@scaffold-stark-2/hooks/scaffold-stark/useTargetNetwork"; +import { useGlobalState } from "@scaffold-stark-2/services/store/store"; import { Address } from "@starknet-react/chains"; -import useScaffoldEthBalance from "~~/core/stark/hooks/useScaffoldEthBalance"; -import useScaffoldStrkBalance from "~~/core/stark/hooks/useScaffoldStrkBalance"; -import { useTargetNetwork } from "~~/core/stark/hooks/useTargetNetwork"; -import { useGlobalState } from "~~/core/stark/services/store/store-strk"; type BalanceProps = { address?: Address; @@ -82,7 +82,7 @@ export const Balance = ({ address, className = "", usdMode }: BalanceProps) => {
) : ( <> -
+
{parseFloat(formatted).toFixed(4)} {targetNetwork.nativeCurrency.symbol} diff --git a/packages/nextjs/components/scaffold-stark/CustomConnectButton/AddressInfoDropdown.tsx b/packages/nextjs/components/scaffold-stark/CustomConnectButton/AddressInfoDropdown.tsx index 0924cb9..2e8a0bc 100644 --- a/packages/nextjs/components/scaffold-stark/CustomConnectButton/AddressInfoDropdown.tsx +++ b/packages/nextjs/components/scaffold-stark/CustomConnectButton/AddressInfoDropdown.tsx @@ -1,5 +1,13 @@ import { useRef, useState } from "react"; +import Image from "next/image"; import { NetworkOptions } from "./NetworkOptions"; +import { BlockieAvatar, isENS } from "@scaffold-stark-2/components/scaffold-stark"; +import { useOutsideClick } from "@scaffold-stark-2/hooks/scaffold-stark"; +import useConditionalStarkProfile from "@scaffold-stark-2/hooks/useConditionalStarkProfile"; +import { BurnerConnector } from "@scaffold-stark-2/services/web3/stark-burner/BurnerConnector"; +import { burnerAccounts } from "@scaffold-stark-2/utils/devnetAccounts"; +import { getStarknetPFPIfExists } from "@scaffold-stark-2/utils/profile"; +import { getTargetNetworks } from "@scaffold-stark-2/utils/scaffold-stark"; import { Address } from "@starknet-react/chains"; import { useConnect, useDisconnect, useNetwork } from "@starknet-react/core"; import { useTheme } from "next-themes"; @@ -16,13 +24,6 @@ import { QrCodeIcon, UserCircleIcon, } from "@heroicons/react/24/outline"; -import { BlockieAvatar, isENS } from "~~/components/scaffold-stark"; -import { useOutsideClick } from "~~/core/stark/hooks/"; -import useConditionalStarkProfile from "~~/core/stark/hooks/useConditionalStarkProfile"; -import { BurnerConnector } from "~~/core/stark/services/web3/stark-burner/BurnerConnector"; -import { burnerAccounts } from "~~/core/stark/utils/devnetAccounts"; -import { getStarknetPFPIfExists } from "~~/core/stark/utils/profile"; -import { getTargetNetworks } from "~~/core/stark/utils/scaffold-stark"; const allowedNetworks = getTargetNetworks(); @@ -45,7 +46,7 @@ export const AddressInfoDropdown = ({ const { chain } = useNetwork(); const [showBurnerAccounts, setShowBurnerAccounts] = useState(false); const [selectingNetwork, setSelectingNetwork] = useState(false); - const { connectors, connect } = useConnect(); + const { connector, connectors, connect } = useConnect(); const { resolvedTheme } = useTheme(); const isDarkMode = resolvedTheme === "dark"; const dropdownRef = useRef(null); @@ -76,24 +77,15 @@ export const AddressInfoDropdown = ({ return ( <>
- - {getStarknetPFPIfExists(profile?.profilePicture) ? ( - //eslint-disable-next-line @next/next/no-img-element - Profile Picture - ) : ( - - )} - - {isENS(displayName) ? displayName : profile?.name || address?.slice(0, 6) + "..." + address?.slice(-4)} + + Wallet Picture + + {isENS(displayName) ? displayName : profile?.name || address?.slice(0, 4) + "..." + address?.slice(-4)} diff --git a/packages/nextjs/components/scaffold-stark/CustomConnectButton/AddressQRCodeModal.tsx b/packages/nextjs/components/scaffold-stark/CustomConnectButton/AddressQRCodeModal.tsx index 8539ff2..9886de8 100644 --- a/packages/nextjs/components/scaffold-stark/CustomConnectButton/AddressQRCodeModal.tsx +++ b/packages/nextjs/components/scaffold-stark/CustomConnectButton/AddressQRCodeModal.tsx @@ -1,16 +1,13 @@ -import { QRCodeSVG } from "qrcode.react"; +import { Address } from "@scaffold-stark-2/components/scaffold-stark"; import { Address as AddressType } from "@starknet-react/chains"; -import { Address } from "~~/components/scaffold-stark"; +import { QRCodeSVG } from "qrcode.react"; type AddressQRCodeModalProps = { address: AddressType; modalId: string; }; -export const AddressQRCodeModal = ({ - address, - modalId, -}: AddressQRCodeModalProps) => { +export const AddressQRCodeModal = ({ address, modalId }: AddressQRCodeModalProps) => { return ( <>
@@ -19,10 +16,7 @@ export const AddressQRCodeModal = ({