diff --git a/.github/workflows/pull-request.yml b/.github/workflows/pull-request.yml index d01ef95e8..1d7c5760d 100644 --- a/.github/workflows/pull-request.yml +++ b/.github/workflows/pull-request.yml @@ -19,7 +19,7 @@ jobs: # FEATURE flags FEATURE_PRIVACY_SETTINGS: "true" FEATURE_EXPERIMENTAL_SETTINGS: "false" - FEATURE_BETA_FEATURES: "true" + FEATURE_BETA_FEATURES: "false" FEATURE_BANXA: "true" FEATURE_LAYERSWAP: "true" FEATURE_ORBITER: "true" @@ -29,6 +29,7 @@ jobs: # API URLs ARGENT_API_BASE_URL: ${{ vars.ARGENT_API_BASE_URL }} ARGENT_X_STATUS_URL: ${{ vars.ARGENT_X_STATUS_URL }} + ARGENT_TESTNET_RPC_URL: ${{ vars.ARGENT_TESTNET_RPC_URL }} # API ENVIRONMENT ARGENT_X_ENVIRONMENT: ${{ matrix.env }} @@ -50,6 +51,9 @@ jobs: SLOW: 60 * 5 # 5m VERY_SLOW: 24 * 60 * 60 # 1d + #For testing only + FEE_OVERHEAD: 2 + steps: # Setup Project - uses: actions/checkout@v4 @@ -120,12 +124,13 @@ jobs: env: ARGENT_API_BASE_URL: ${{ vars.ARGENT_API_BASE_URL }} + ARGENT_TESTNET_RPC_URL: ${{ vars.ARGENT_TESTNET_RPC_URL }} ARGENT_X_STATUS_URL: ${{ vars.ARGENT_X_STATUS_URL }} ARGENT_X_ENVIRONMENT: "hydrogen" services: devnet: - image: shardlabs/starknet-devnet:latest-seed0 + image: shardlabs/starknet-devnet-rs:latest-seed0 ports: - 5050:5050 @@ -184,6 +189,7 @@ jobs: shardTotal: [8] env: ARGENT_X_ENVIRONMENT: "hydrogen" + ARGENT_API_BASE_URL: ${{ secrets.ARGENT_API_BASE_URL }} E2E_TESTNET_SEED1: ${{ secrets.E2E_TESTNET_SEED1 }} E2E_TESTNET_SEED2: ${{ secrets.E2E_TESTNET_SEED2 }} E2E_TESTNET_SEED3: ${{ secrets.E2E_TESTNET_SEED3 }} @@ -195,6 +201,7 @@ jobs: E2E_SENDER_SEED: ${{ secrets.E2E_SENDER_SEED }} STARKNET_TESTNET_URL: ${{ secrets.STARKNET_TESTNET_URL }} STARKSCAN_TESTNET_URL: ${{ secrets.STARKSCAN_TESTNET_URL }} + ARGENT_TESTNET_RPC_URL: ${{ secrets.ARGENT_TESTNET_RPC_URL }} steps: - uses: actions/checkout@v4 @@ -397,6 +404,7 @@ jobs: NEXT_PUBLIC_RAMP_API_KEY: ${{ secrets.RAMP_API_KEY }} NEXT_PUBLIC_FEATURE_COSIGNER: "true" NEXT_PUBLIC_ARGENT_API_BASE_URL: ${{ vars.ARGENT_API_BASE_URL }} + NEXT_PUBLIC_ARGENT_TESTNET_RPC_URL: ${{ vars.ARGENT_TESTNET_RPC_URL }} steps: - uses: actions/checkout@v4 @@ -445,7 +453,7 @@ jobs: if: always() uses: actions/upload-artifact@v3 with: - name: all-blob-reports + name: all-blob-reports-webwallet path: packages/e2e/blob-report/ retention-days: 5 diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml index 4c3f0e75d..a5c23719f 100644 --- a/.github/workflows/release.yml +++ b/.github/workflows/release.yml @@ -10,7 +10,7 @@ on: env: FEATURE_PRIVACY_SETTINGS: "true" FEATURE_EXPERIMENTAL_SETTINGS: "false" - FEATURE_BETA_FEATURES: "true" + FEATURE_BETA_FEATURES: "false" FEATURE_BANXA: "true" FEATURE_LAYERSWAP: "true" FEATURE_ORBITER: "true" @@ -26,9 +26,8 @@ env: FILENAME: argent-extension SAFE_ENV_VARS: true ARGENT_API_BASE_URL: ${{ vars.ARGENT_API_BASE_URL }} - ARGENT_TRANSACTION_REVIEW_API_BASE_URL: ${{ vars.ARGENT_TRANSACTION_REVIEW_API_BASE_URL }} + ARGENT_TESTNET_RPC_URL: ${{ vars.ARGENT_TESTNET_RPC_URL }} ARGENT_X_STATUS_URL: ${{ vars.ARGENT_X_STATUS_URL }} - ARGENT_EXPLORER_BASE_URL: ${{ vars.ARGENT_EXPLORER_BASE_URL }} ARGENT_X_ENVIRONMENT: "prod" MULTICALL_MAX_BATCH_SIZE: 20 FAST: 20 # 20s @@ -136,7 +135,7 @@ jobs: pnpm --filter @argent/get-starknet publish --no-git-checks --access public || exit 0 pnpm --filter @argent/web-sdk publish --no-git-checks --access public || exit 0 pnpm --filter @argent/starknet-react-webwallet-connector publish --no-git-checks --access public || exit 0 - pnpm --filter @argent-x/sessions publish --no-git-checks --access public || exit 0 + pnpm --filter @argent/x-sessions publish --no-git-checks --access public || exit 0 - name: Get product version id: product-version @@ -149,7 +148,7 @@ jobs: uses: softprops/action-gh-release@v1 with: generate_release_notes: true - title: extension@${{ steps.product-version.outputs.current-version }} + name: extension@${{ steps.product-version.outputs.current-version }} files: | ${{ env.FILENAME }}-chrome.zip ${{ env.FILENAME }}-firefox.zip diff --git a/.nvmrc b/.nvmrc index f6610cade..87ec8842b 100644 --- a/.nvmrc +++ b/.nvmrc @@ -1 +1 @@ -18.18.1 +18.18.2 diff --git a/package.json b/package.json index f17db27d4..e014f3d15 100644 --- a/package.json +++ b/package.json @@ -6,13 +6,13 @@ "homepage": "https://github.com/argentlabs/argent-x/#readme", "devDependencies": { "@changesets/cli": "^2.26.1", - "@lavamoat/preinstall-always-fail": "^2.0.0", "@lavamoat/allow-scripts": "^3.0.0", + "@lavamoat/preinstall-always-fail": "^2.0.0", "bundlewatch": "^0.3.3", "husky": "^8.0.3", "import-sort-style-module": "^6.0.0", "lint-staged": "^15.0.0", - "nx": "^16.2.2", + "nx": "^17.0.0", "patch-package": "^8.0.0", "prettier": ">=2.8.8", "prettier-plugin-import-sort": "^0.0.7", diff --git a/packages/dapp/.env.example b/packages/dapp/.env.example new file mode 100644 index 000000000..ce579f865 --- /dev/null +++ b/packages/dapp/.env.example @@ -0,0 +1,2 @@ +NEXT_PUBLIC_WEBWALLET_URL="http://localhost:3005" +NEXT_PUBLIC_ARGENT_CHAIN_ID=SN_GOERLI \ No newline at end of file diff --git a/packages/dapp/next.config.js b/packages/dapp/next.config.js index 4b1bd3055..5456af0c3 100644 --- a/packages/dapp/next.config.js +++ b/packages/dapp/next.config.js @@ -2,4 +2,9 @@ module.exports = { reactStrictMode: true, swcMinify: false, // we need to use terser, as swc doesn't support svelte and `@argent/get-starknet` + publicRuntimeConfig: { + webWalletUrl: + process.env.NEXT_PUBLIC_WEBWALLET_URL ?? "http://localhost:3005", + argentMobileChainId: process.env.NEXT_PUBLIC_ARGENT_CHAIN_ID ?? "SN_GOERLI", + }, } diff --git a/packages/dapp/package.json b/packages/dapp/package.json index bc6180154..49d7e60d9 100644 --- a/packages/dapp/package.json +++ b/packages/dapp/package.json @@ -11,20 +11,24 @@ }, "dependencies": { "@argent/shared": "^6.3.1", - "@argent/get-starknet": "^6.3.1", + "@argent/ui": "^6.3.1", "@argent/x-sessions": "^6.3.1", + "@chakra-ui/react": "^2.6.1", + "@starknet-react/chains": "0.1.0-next.1", + "@starknet-react/core": "2.0.0-next.6", + "micro-starknet": "^0.2.3", "next": "^13.4.6", "react": "^18.0.0", "react-dom": "^18.0.0", - "starknet": "5.19.5", - "micro-starknet": "^0.2.3" + "starknet": "5.24.3", + "starknetkit": "^1.0.21" }, "devDependencies": { - "@types/node": "20.8.4", + "@types/node": "20.8.10", "@types/react": "^18.0.0", "@types/react-dom": "^18.0.0", "eslint": "8", - "eslint-config-next": "13.5.4", + "eslint-config-next": "13.5.6", "typescript": "^5.0.4" } } diff --git a/packages/dapp/src/components/AddNetwork.tsx b/packages/dapp/src/components/AddNetwork.tsx new file mode 100644 index 000000000..397ef6573 --- /dev/null +++ b/packages/dapp/src/components/AddNetwork.tsx @@ -0,0 +1,39 @@ +import { H2 } from "@argent/ui" +import { Flex } from "@chakra-ui/react" +import { addNetwork } from "../services/wallet.service" +import { useState } from "react" + +const AddNetwork = () => { + const [addNetworkError, setAddNetworkError] = useState("") + + const handleAddNetwork = async () => { + try { + await addNetwork({ + id: "dapp-test", + chainId: "SN_DAPP_TEST", + chainName: "Test chain name", + baseUrl: "http://localhost:5050", + }) + setAddNetworkError("") + } catch (error) { + setAddNetworkError((error as any).message) + } + } + + return ( + +

Network

+ + Add network to wallet + + {addNetworkError} + + ) +} + +export { AddNetwork } diff --git a/packages/dapp/src/components/AddToken.tsx b/packages/dapp/src/components/AddToken.tsx new file mode 100644 index 000000000..75ab0d8db --- /dev/null +++ b/packages/dapp/src/components/AddToken.tsx @@ -0,0 +1,72 @@ +import { Button, H2 } from "@argent/ui" +import { truncateAddress } from "../services/address.service" +import { DAITokenAddress, ETHTokenAddress } from "../services/token.service" +import { addToken } from "../services/wallet.service" +import { useState } from "react" +import { Code, Flex } from "@chakra-ui/react" + +const AddToken = () => { + const [addTokenError, setAddTokenError] = useState("") + + const handleAddEth = async () => { + try { + await addToken(ETHTokenAddress) + setAddTokenError("") + } catch (error) { + setAddTokenError((error as any).message) + } + } + + const handleAddDai = async () => { + try { + await addToken(DAITokenAddress) + setAddTokenError("") + } catch (error) { + setAddTokenError((error as any).message) + } + } + + return ( + +

ERC20

+ ETH token address + + + {truncateAddress(ETHTokenAddress)} + + + + Add ETH token to wallet + + + Add DAI token to wallet + + {addTokenError} + + ) +} + +export { AddToken } diff --git a/packages/dapp/src/components/Declare.tsx b/packages/dapp/src/components/Declare.tsx new file mode 100644 index 000000000..5dcf1d68e --- /dev/null +++ b/packages/dapp/src/components/Declare.tsx @@ -0,0 +1,146 @@ +import { Button, H2, Input } from "@argent/ui" +import { + CompiledSierraCasm, + DeclareContractPayload, + hash, + isSierra, +} from "starknet" + +import { readFileAsString } from "@argent/shared" +import { Flex } from "@chakra-ui/react" +import { FC, useMemo, useState } from "react" +import { declare, declareAndDeploy } from "../services/wallet.service" +import { Status } from "../types/Status" + +interface DeclareProps { + setTransactionStatus: (status: Status) => void + setLastTransactionHash: (status: string) => void +} + +const Declare: FC = ({ + setTransactionStatus, + setLastTransactionHash, +}) => { + const [classHash, setClassHash] = useState("") + const [contract, setContract] = useState(null) + const [casm, setCasm] = useState(null) + const [shouldDeploy, setShouldDeploy] = useState(false) + + const contractIsSierra = useMemo(() => { + return contract && isSierra(contract) + }, [contract]) + + const handleDeclare = async (e: React.FormEvent) => { + try { + e.preventDefault() + if (!contract) { + throw new Error("No contract") + } + if (!classHash) { + throw new Error("No class hash") + } + const payload: DeclareContractPayload = { + contract, + classHash, + } + if (casm) { + payload.casm = casm + delete payload.classHash + } + if (shouldDeploy) { + const result = await declareAndDeploy(payload) + console.log(result) + setLastTransactionHash(result.deploy.transaction_hash) + } else { + const result = await declare(payload) + console.log(result) + setLastTransactionHash(result.transaction_hash) + } + setTransactionStatus("pending") + } catch (e) { + console.error(e) + setTransactionStatus("idle") + } + } + + return ( + +

Declare (and deploy)

+ + + { + if (!e.target.files) { + return + } + setCasm(null) + + const file = e.target.files[0] + const fileAsString = await readFileAsString(file) + setContract(fileAsString) + + const classHash = hash.computeContractClassHash(fileAsString) + setClassHash(classHash) + }} + /> + + + + + {contractIsSierra && ( + <> + + { + if (!e.target.files) { + return + } + const file = e.target.files[0] + const fileAsString = await readFileAsString(file) + const fileAsJson = JSON.parse(fileAsString) + setCasm(fileAsJson) + }} + /> + + )} + + setShouldDeploy(!shouldDeploy)} + /> + + + + + ) +} + +export { Declare } diff --git a/packages/dapp/src/components/Deploy.tsx b/packages/dapp/src/components/Deploy.tsx new file mode 100644 index 000000000..df17d4abd --- /dev/null +++ b/packages/dapp/src/components/Deploy.tsx @@ -0,0 +1,71 @@ +import { Button, H2, Input } from "@argent/ui" +import { UniversalDeployerContractPayload } from "starknet" + +import { Flex } from "@chakra-ui/react" +import { FC, useState } from "react" +import { deploy } from "../services/wallet.service" +import { Status } from "../types/Status" + +interface DeployProps { + setTransactionStatus: (status: Status) => void + setLastTransactionHash: (status: string) => void +} + +const Deploy: FC = ({ + setTransactionStatus, + setLastTransactionHash, +}) => { + const [deployClassHash, setDeployClassHash] = useState("") + + const handleDeploy = async (e: React.FormEvent) => { + try { + e.preventDefault() + if (!deployClassHash) { + throw new Error("No class hash") + } + const payload: UniversalDeployerContractPayload = { + classHash: deployClassHash, + } + const result = await deploy(payload) + setLastTransactionHash(result.transaction_hash) + setTransactionStatus("pending") + } catch (e) { + console.error(e) + setTransactionStatus("idle") + } + } + + return ( + +

Deploy

+ + + { + setDeployClassHash(e.target.value) + }} + value={deployClassHash} + /> + + + + ) +} + +export { Deploy } diff --git a/packages/dapp/src/components/Header.tsx b/packages/dapp/src/components/Header.tsx new file mode 100644 index 000000000..830d39fb9 --- /dev/null +++ b/packages/dapp/src/components/Header.tsx @@ -0,0 +1,38 @@ +import { Divider, Flex, Text } from "@chakra-ui/react" +import { Button } from "@argent/ui" +import { useRouter } from "next/router" +import Link from "next/link" +import { FC } from "react" + +export const Header: FC<{ + isConnected?: boolean + disconnectFn?: () => void +}> = ({ isConnected, disconnectFn }) => { + const { pathname } = useRouter() + + return ( + + + + StarknetKit app + + + Starknet React app + + + + {!isConnected && ( + + )} + {isConnected && disconnectFn && ( + + )} + + + + ) +} diff --git a/packages/dapp/src/components/InfoRow.tsx b/packages/dapp/src/components/InfoRow.tsx new file mode 100644 index 000000000..b7585a3fa --- /dev/null +++ b/packages/dapp/src/components/InfoRow.tsx @@ -0,0 +1,45 @@ +import { H4 } from "@argent/ui" +import { Code, Flex } from "@chakra-ui/react" +import { FC } from "react" + +const InfoRow: FC<{ + title: string + content?: string + copyContent?: string +}> = ({ title, content, copyContent }) => { + return ( + +

{title}

+ {!copyContent && ( +

+ + {content} + +

+ )} + {copyContent && content && ( + { + navigator.clipboard.writeText(copyContent) + }} + > +

+ + {content} + +

+ + )} + + ) +} + +export { InfoRow } diff --git a/packages/dapp/src/components/Mint.tsx b/packages/dapp/src/components/Mint.tsx new file mode 100644 index 000000000..ed32a99b3 --- /dev/null +++ b/packages/dapp/src/components/Mint.tsx @@ -0,0 +1,64 @@ +import { H2, Input } from "@argent/ui" +import { Flex } from "@chakra-ui/react" +import { FC, useState } from "react" +import { AccountInterface } from "starknet" +import { mintToken } from "../services/token.service" +import { Status } from "../types/Status" + +interface MintProps { + account?: AccountInterface + setTransactionStatus: (status: Status) => void + setLastTransactionHash: (status: string) => void + transactionStatus: Status +} +const Mint: FC = ({ + setTransactionStatus, + setLastTransactionHash, + transactionStatus, +}) => { + const [mintAmount, setMintAmount] = useState("10") + const buttonsDisabled = ["approve", "pending"].includes(transactionStatus) + + const handleMintSubmit = async (e: React.FormEvent) => { + e.preventDefault() + try { + setTransactionStatus("approve") + const { transaction_hash } = await mintToken(mintAmount) + setLastTransactionHash(transaction_hash) + setTransactionStatus("pending") + } catch (e) { + console.error(e) + setTransactionStatus("idle") + } + } + + return ( + + +

Mint token

+ setMintAmount(e.target.value)} + /> + + + + + ) +} + +export { Mint } diff --git a/packages/dapp/src/components/MintWithStarknetReact.tsx b/packages/dapp/src/components/MintWithStarknetReact.tsx new file mode 100644 index 000000000..9790c2275 --- /dev/null +++ b/packages/dapp/src/components/MintWithStarknetReact.tsx @@ -0,0 +1,89 @@ +import { bigDecimal } from "@argent/shared" +import { H2, Input } from "@argent/ui" +import { Flex } from "@chakra-ui/react" +import { useContractWrite } from "@starknet-react/core" +import { FC, useMemo, useState } from "react" +import { AccountInterface } from "starknet" +import { ETHTokenAddress } from "../services/token.service" +import { Status } from "../types/Status" + +interface MintProps { + account?: AccountInterface + setTransactionStatus: (status: Status) => void + setLastTransactionHash: (status: string) => void + transactionStatus: Status +} + +const MintWithStarknetReact: FC = ({ + account, + setTransactionStatus, + setLastTransactionHash, + transactionStatus, +}) => { + const [mintAmount, setMintAmount] = useState("10") + const buttonsDisabled = ["approve", "pending"].includes(transactionStatus) + + const mintCalls = useMemo(() => { + if (!account) { + return [] + } + return [ + { + contractAddress: ETHTokenAddress, + entrypoint: "transfer", + calldata: [ + account?.address, + Number(bigDecimal.parseEther(mintAmount).value), + 0, + ], + }, + ] + }, [account, mintAmount]) + + const { writeAsync: mintWithStarknetReact } = useContractWrite({ + calls: mintCalls, + }) + + const handleMintSubmit = async (e: React.FormEvent) => { + e.preventDefault() + try { + setTransactionStatus("approve") + const { transaction_hash } = await mintWithStarknetReact() + setLastTransactionHash(transaction_hash) + setTransactionStatus("pending") + } catch (e) { + console.error(e) + setTransactionStatus("idle") + } + } + + return ( + + +

Mint token

+ setMintAmount(e.target.value)} + /> + + + + + ) +} + +export { MintWithStarknetReact } diff --git a/packages/dapp/src/components/OffchainSessionKeys.tsx b/packages/dapp/src/components/OffchainSessionKeys.tsx new file mode 100644 index 000000000..3811600f8 --- /dev/null +++ b/packages/dapp/src/components/OffchainSessionKeys.tsx @@ -0,0 +1,54 @@ +import { Button, H2, Input } from "@argent/ui" +import { OffchainSessionAccount } from "@argent/x-sessions" +import { FC, useState } from "react" +import { Abi, AccountInterface, Contract } from "starknet" + +import { Flex } from "@chakra-ui/react" +import Erc20Abi from "../../abi/ERC20.json" +import { + ETHTokenAddress, + parseInputAmountToUint256, +} from "../services/token.service" +import { Status } from "../types/Status" +import { OffchainSessionKeysSign } from "./OffchainSessionKeysSign" +import { OffchainSessionKeysExecute } from "./OffchainSessionKeysExecute" + +interface OffchainSessionKeysProps { + account: AccountInterface + setTransactionStatus: (status: Status) => void + setLastTransactionHash: (tx: string) => void + transactionStatus: Status +} + +/* no starknet react, need to use the account directly to sign + and the offchainSessionAccount to execute the transaction + */ +const OffchainSessionKeys: FC = ({ + account, + setTransactionStatus, + transactionStatus, + setLastTransactionHash, +}) => { + const [offchainSessionAccount, setOffchainSessionAccount] = useState< + OffchainSessionAccount | undefined + >() + + return ( + + + + + ) +} + +export { OffchainSessionKeys } diff --git a/packages/dapp/src/components/OffchainSessionKeysExecute.tsx b/packages/dapp/src/components/OffchainSessionKeysExecute.tsx new file mode 100644 index 000000000..7d0463678 --- /dev/null +++ b/packages/dapp/src/components/OffchainSessionKeysExecute.tsx @@ -0,0 +1,97 @@ +import { Button, H2, Input } from "@argent/ui" +import { OffchainSessionAccount } from "@argent/x-sessions" +import { FC, useState } from "react" +import { Abi, AccountInterface, Contract } from "starknet" + +import { Flex } from "@chakra-ui/react" +import Erc20Abi from "../../abi/ERC20.json" +import { + ETHTokenAddress, + parseInputAmountToUint256, +} from "../services/token.service" +import { Status } from "../types/Status" + +interface OffchainSessionKeysExecuteProps { + account: AccountInterface + setTransactionStatus: (status: Status) => void + setLastTransactionHash: (tx: string) => void + transactionStatus: Status + offchainSessionAccount: OffchainSessionAccount | undefined +} + +const OffchainSessionKeysExecute: FC = ({ + account, + setTransactionStatus, + transactionStatus, + setLastTransactionHash, + offchainSessionAccount, +}) => { + const [transferOffchainSessionAmount, setTransferOffchainSessionAmount] = + useState("") + + const buttonsDisabled = + ["approve", "pending"].includes(transactionStatus) || + !offchainSessionAccount + + const handleOffchainSessionTransaction = async (e: React.FormEvent) => { + try { + e.preventDefault() + setTransactionStatus("pending") + if (!offchainSessionAccount) { + throw new Error("No open session") + } + const erc20Contract = new Contract( + Erc20Abi as Abi, + ETHTokenAddress, + offchainSessionAccount, + ) + + const result = await erc20Contract.transfer( + account.address, + parseInputAmountToUint256(transferOffchainSessionAmount), + ) + + setLastTransactionHash(result.transaction_hash) + setTransactionStatus("success") + } catch (e) { + console.error(e) + setTransactionStatus("idle") + } + } + + return ( + +

Use session keys

+ + setTransferOffchainSessionAmount(e.target.value)} + /> + + + ) +} + +export { OffchainSessionKeysExecute } diff --git a/packages/dapp/src/components/OffchainSessionKeysSign.tsx b/packages/dapp/src/components/OffchainSessionKeysSign.tsx new file mode 100644 index 000000000..16eccf7ac --- /dev/null +++ b/packages/dapp/src/components/OffchainSessionKeysSign.tsx @@ -0,0 +1,85 @@ +import { Button, H2, Input } from "@argent/ui" +import { OffchainSessionAccount } from "@argent/x-sessions" +import { FC, useState } from "react" +import { AccountInterface, RpcProvider } from "starknet" + +import { Flex } from "@chakra-ui/react" +import { getStarkKey, utils } from "micro-starknet" +import { createSessionKeys } from "../services/wallet.service" +import { Status } from "../types/Status" + +interface OffchainSessionKeysSignProps { + account: AccountInterface + setTransactionStatus: (status: Status) => void + setOffchainSessionAccount: (account: OffchainSessionAccount) => void +} + +const OffchainSessionKeysSign: FC = ({ + account, + setTransactionStatus, + setOffchainSessionAccount, +}) => { + const [allowedFees, setAllowedFees] = useState("") + const [sessionSigner] = useState(utils.randomPrivateKey()) + + const handleCreateSessionSubmit = async (e: React.FormEvent) => { + try { + e.preventDefault() + + setTransactionStatus("approve") + const signedSession = await createSessionKeys( + getStarkKey(sessionSigner), + allowedFees, + account, + ) + + const provider = new RpcProvider({ + nodeUrl: "https://cloud.argent-api.com/v1/starknet/goerli/rpc/v0.5", + }) + + const sessionAccount = new OffchainSessionAccount( + provider, + account.address, + sessionSigner, + signedSession, + account, + ) + + setOffchainSessionAccount(sessionAccount) + + setTransactionStatus("success") + } catch (e) { + console.error(e) + setTransactionStatus("idle") + } + } + + return ( + +

Create session keys

+ setAllowedFees(e.target.value)} + /> + + + ) +} + +export { OffchainSessionKeysSign } diff --git a/packages/dapp/src/components/SignMessage.tsx b/packages/dapp/src/components/SignMessage.tsx new file mode 100644 index 000000000..828240322 --- /dev/null +++ b/packages/dapp/src/components/SignMessage.tsx @@ -0,0 +1,92 @@ +import { Button, H2, Input, Textarea } from "@argent/ui" +import { Flex } from "@chakra-ui/react" +import { FC, useState } from "react" +import { stark } from "starknet" +import { signMessage } from "../services/wallet.service" +import { Status } from "../types/Status" + +interface SignMessageProps { + setTransactionStatus: (status: Status) => void +} + +const SignMessage: FC = ({ setTransactionStatus }) => { + const [shortText, setShortText] = useState("") + const [lastSig, setLastSig] = useState([]) + + const handleSignSubmit = async (skipDeploy: boolean) => { + try { + setTransactionStatus("approve") + const result = await signMessage(shortText, skipDeploy) + setLastSig(stark.formatSignature(result)) + setTransactionStatus("success") + } catch (e) { + console.error(e) + setTransactionStatus("idle") + } + } + + return ( + + { + e.preventDefault() + handleSignSubmit(false) + }} + direction="column" + background="neutrals.700" + flex={1} + p="4" + gap="3" + borderTopLeftRadius="lg" + borderBottomLeftRadius="lg" + > +

Sign Message

+ + setShortText(e.target.value)} + /> + +
+ + +
+ + +

Sign results

+ + {/* Label and textarea for value r */} +