♻️ Extract wallet to context

components/Banner.tsx

@@ -1,14 +1,13 @@
 import { Cross1Icon } from "@radix-ui/react-icons";
-import { useContext } from "react";
-import { AppDispatchContext, AppStateContext } from "../context/state";
+import { useAppDispatch, useAppState } from "../context/state";
 
 type props = {
  children: React.ReactNode;
 };
 
 const Banner = ({ children }: props) => {
- const state = useContext(AppStateContext)!;
- const dispatch = useContext(AppDispatchContext)!;
+ const state = useAppState();
+ const dispatch = useAppDispatch();
 
  return state.hasBanner ? (
  <div className="fixed top-0 z-50 flex h-12 w-full items-center justify-between bg-primary px-4 text-xs text-white md:text-base">

components/ContractExecution.tsx

@@ -7,8 +7,9 @@ import {
  Formik,
  useFormikContext,
 } from "formik";
-import React, { useContext, useEffect } from "react";
-import { AppStateContext } from "../context/state";
+import React, { useEffect } from "react";
+import { useAppState } from "../context/state";
+import { useTezosToolkit } from "../context/tezos-toolkit";
 import {
  parseContract,
  genLambda,
@@ -485,10 +486,11 @@ function ExecuteForm(
  onShapeChange: (v: object) => void;
  }>
 ) {
- const state = useContext(AppStateContext)!;
+ const state = useAppState();
+
+ const { tezos } = useTezosToolkit();
 
  const address = props.address;
- const conn = state.connection;
  const setLoading = props.setLoading;
  const loading = props.loading;
 
@@ -497,7 +499,7 @@ function ExecuteForm(
  (async () => {
  try {
  setLoading(true);
- const c = await conn.contract.at(address);
+ const c = await tezos.contract.at(address);
  const initTokenTable: Record<string, tokenValueType> = {};
  const token: token = parseContract(c, initTokenTable);
 

components/ExecuteContractForm.tsx

@@ -0,0 +1,129 @@
+import { Field, useFormikContext } from "formik";
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import { useWallet } from "../context/wallet";
+import { tezToMutez } from "../utils/tez";
+import ExecuteForm from "./ContractExecution";
+import ContractLoader from "./contractLoader";
+import renderError from "./formUtils";
+import { state, Basic } from "./transferForm";
+
+export function ExecuteContractForm(
+ props: React.PropsWithoutRef<{
+ setField: (lambda: string, metadata: string) => void;
+ getFieldProps: (name: string) => { value: string };
+ id: number;
+ defaultState?: state;
+ onReset: () => void;
+ onChange: (state: state) => void;
+ }>
+) {
+ const { submitCount, setFieldValue } = useFormikContext();
+ const submitCountRef = useRef(submitCount);
+ const { userAddress } = useWallet();
+
+ const [state, setState] = useState(
+ () => props.defaultState ?? { address: "", amount: 0, shape: {} }
+ );
+ const [loading, setLoading] = useState(false);
+ const [error, setError] = useState("");
+
+ const setLoader = useCallback((x: boolean) => setLoading(x), []);
+
+ useEffect(() => {
+ props.onChange(state);
+ }, [state, props.onChange]);
+
+ if (loading) {
+ return (
+ <div className="mb-2 mt-8 flex w-full items-center justify-center rounded border-2 border-white p-4 align-middle">
+ <ContractLoader loading={loading}></ContractLoader>
+ </div>
+ );
+ }
+
+ return (
+ <div className="w-full text-white">
+ <p className="text-lg text-white">
+ <span className="mr-2 text-zinc-500">
+ #{(props.id + 1).toString().padStart(2, "0")}
+ </span>
+ Execute Contract
+ </p>
+ <Basic
+ id={props.id}
+ setFormState={x => setState({ ...x, shape: {} })}
+ onAmountChange={amount => {
+ setState({ ...state, amount: tezToMutez(Number(amount)) });
+ setFieldValue(`transfers.${props.id}.amount`, amount);
+ }}
+ onAddressChange={address => {
+ setState({ ...state, address });
+ }}
+ withContinue={!userAddress}
+ address={userAddress}
+ defaultValues={{
+ amount: undefined,
+ address: undefined,
+ }}
+ />
+ {!!userAddress && (
+ <ExecuteForm
+ loading={loading}
+ setLoading={setLoader}
+ shape={state.shape}
+ onShapeChange={shape => {
+ setState(v => ({
+ ...v,
+ shape: { ...v.shape, init: shape },
+ }));
+ }}
+ setState={shape => {
+ setState(v => ({ ...v, shape }));
+ }}
+ reset={() => setState({ address: "", amount: 0, shape: {} })}
+ address={userAddress}
+ amount={state.amount}
+ setField={(lambda: string, metadata: string) => {
+ props.setField(lambda, metadata);
+ }}
+ onReset={() => {
+ setState({ address: "", amount: 0, shape: {} });
+ props.onReset();
+ }}
+ />
+ )}
+ <Field
+ name={`transfers.${props.id}.values.lambda`}
+ className="hidden"
+ validate={(v: string) => {
+ // This is a tricky way to detect when the submition happened
+ // We want this message to show only on submit, not on every change
+ if (!!v) {
+ submitCountRef.current = submitCount;
+ setError("");
+ return;
+ }
+
+ if (submitCountRef.current === submitCount - 1) {
+ setError("Please fill contract");
+ submitCountRef.current += 1;
+ }
+
+ // Returning a value to prevent submition
+ return true;
+ }}
+ />
+ <Field
+ name={`transfers.${props.id}.values.metadata`}
+ className="hidden"
+ validate={(v: string) => {
+ if (!!v) return;
+
+ // Returning a value to prevent submition
+ return true;
+ }}
+ />
+ {!!error && renderError(error)}
+ </div>
+ );
+}

components/FA1_2.tsx

@@ -1,7 +1,7 @@
 import { Field, useFormikContext } from "formik";
-import { useCallback, useContext, useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { TZKT_API_URL, THUMBNAIL_URL } from "../context/config";
-import { AppStateContext } from "../context/state";
+import { useAppState } from "../context/state";
 import { debounce, promiseWithTimeout } from "../utils/timeout";
 import { proposals } from "../versioned/interface";
 import ErrorMessage from "./ErrorMessage";
@@ -75,7 +75,7 @@ const tokenToOption = (fa1_2Token: fa1_2Token) => {
 };
 
 const FA1_2 = ({ index, remove, children }: props) => {
- const state = useContext(AppStateContext)!;
+ const state = useAppState();
  const { setFieldValue, getFieldProps } = useFormikContext<proposals>();
 
  const [isFetching, setIsFetching] = useState(true);

components/FA2Transfer.tsx

@@ -2,17 +2,10 @@ import { PlusIcon } from "@radix-ui/react-icons";
 import { validateAddress, ValidationResult } from "@taquito/utils";
 import BigNumber from "bignumber.js";
 import { Field, FieldProps, useFormikContext } from "formik";
-import {
- useCallback,
- useContext,
- useEffect,
- useMemo,
- useRef,
- useState,
-} from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { v4 as uuidV4 } from "uuid";
 import { TZKT_API_URL, THUMBNAIL_URL } from "../context/config";
-import { AppStateContext } from "../context/state";
+import { useAppState } from "../context/state";
 import { debounce } from "../utils/timeout";
 import { proposals } from "../versioned/interface";
 import ErrorMessage from "./ErrorMessage";
@@ -90,7 +83,7 @@ const FA2Transfer = ({
  toExclude,
  autoSetField = true,
 }: fa2TransferProps) => {
- const state = useContext(AppStateContext)!;
+ const state = useAppState();
  const { getFieldProps, setFieldValue, errors } =
  useFormikContext<proposals>();