some component reorg, usable header links

Author: jwdwr

src/App.tsx

@@ -10,6 +10,8 @@ import { Connection } from "./features/connection/Connection";
 import { Configuration } from "./features/connection/Configuration";
 import { Messages } from "./features/messages/Messages";
 import { ExecuteOptions } from "./features/console/ExecuteOptions";
+import { Header } from "./components/Header";
+import { Donate } from "./features/accounts/Donate";
 
 setBasePath(
   "https://cdn.jsdelivr.net/npm/@shoelace-style/[email protected]/dist/"
@@ -18,10 +20,7 @@ function App() {
   return (
     <div className="main">
       <aside className="sidebar">
-        <h3 className="header">cøsmwasm devtøøls</h3>
-        <div className="subhead">
-          <a href="https://github.com">github</a> | <a href="#">donate</a>
-        </div>
+        <Header />
         <SlDivider />
         <div className="sidebar-main">
           <AccountList />
@@ -38,6 +37,7 @@ function App() {
       <Configuration />
       <Messages />
       <ExecuteOptions />
+      <Donate />
     </div>
   );
 }

src/components/Header.module.css

@@ -0,0 +1,24 @@
+.header {
+}
+
+.name,
+.subhead {
+  font-family: "Courier New", Courier, monospace;
+  text-align: center;
+  font-weight: normal;
+  margin-bottom: 0;
+}
+
+.link {
+  color: slateblue;
+  text-decoration: none;
+  border: none;
+  background-color: white;
+  font-family: "Courier New", Courier, monospace;
+  font-size: 0.9em;
+  cursor: pointer;
+}
+
+.link:hover {
+  text-decoration: underline;
+}

src/components/Header.tsx

@@ -0,0 +1,36 @@
+import { SlDivider } from "@shoelace-style/shoelace/dist/react";
+import React from "react";
+import { useAppDispatch } from "../app/hooks";
+import { AccountList } from "../features/accounts/AccountList";
+import { setDonationOpen } from "../features/accounts/accountsSlice";
+import { ContractList } from "../features/accounts/ContractList";
+import { Connection } from "../features/connection/Connection";
+import styles from "./Header.module.css";
+
+const GITHUB_URL = "https://github.com/aswever/cosmwasm-devtools";
+
+export const Header = () => {
+  const dispatch = useAppDispatch();
+  return (
+    <div className={styles.header}>
+      <h3 className={styles.name}>cøsmwasm devtøøls</h3>
+      <div className={styles.subhead}>
+        <a
+          className={styles.link}
+          href={GITHUB_URL}
+          target="_blank"
+          rel="noreferrer"
+        >
+          github
+        </a>{" "}
+        |{" "}
+        <button
+          className={styles.link}
+          onClick={() => dispatch(setDonationOpen(true))}
+        >
+          donate
+        </button>
+      </div>
+    </div>
+  );
+};

src/components/AccountCard.module.css src/features/accounts/AccountCard.module.css

@@ -1,14 +1,14 @@
 import { SlCard, SlIcon, SlTooltip } from "@shoelace-style/shoelace/dist/react";
-import React, { FC, useEffect, useState } from "react";
-import { useAppDispatch, useAppSelector } from "../app/hooks";
+import React, { FC, useCallback, useEffect, useState } from "react";
+import { useAppDispatch, useAppSelector } from "../../app/hooks";
 import {
   Account,
   AccountType,
   balanceString,
   checkBalance,
   hitFaucet,
   setSendCoinsOpen,
-} from "../features/accounts/accountsSlice";
+} from "./accountsSlice";
 import styles from "./AccountCard.module.css";
 
 interface AccountCardProps {
@@ -61,17 +61,25 @@ export const AccountCard: FC<AccountCardProps> = ({
     }
   }, [account?.address, dispatch, config]);
 
-  function copyAddress() {
+  const copyAddress = useCallback(() => {
     if (account?.address) navigator.clipboard.writeText(account.address);
     setCopyTooltip("Copied!");
     setTimeout(() => setCopyTooltip("Copy to clipboard"), 2000);
-  }
+  }, [account?.address]);
+
+  const clickX = useCallback(
+    (e: React.MouseEvent<HTMLElement, MouseEvent>) => {
+      e.preventDefault();
+      onClickX();
+    },
+    [onClickX]
+  );
 
   return (
     <>
       <SlCard
         className={classes.join(" ")}
-        onClick={disabled ? undefined : onClick}
+        onClick={disabled || selected ? undefined : onClick}
       >
         <div className={styles.main}>
           <div className={styles.left}>
@@ -108,7 +116,7 @@ export const AccountCard: FC<AccountCardProps> = ({
                   : "Remove account"
               }
             >
-              <SlIcon name="x-lg" className={styles.close} onClick={onClickX} />
+              <SlIcon name="x-lg" className={styles.close} onClick={clickX} />
             </SlTooltip>
           )}
         </div>

src/components/AccountCard.tsx src/features/accounts/AccountCard.tsx

@@ -9,8 +9,8 @@ import {
 import styles from "./AccountList.module.css";
 import { AddAccount } from "./AddAccount";
 import { KeplrAccount } from "./KeplrAccount";
-import { AccountCard } from "../../components/AccountCard";
-import { SendCoins } from "../../components/SendCoins";
+import { AccountCard } from "./AccountCard";
+import { SendCoins } from "./SendCoins";
 
 interface AccountProps {
   account: Account;

src/features/accounts/AccountList.tsx

@@ -8,7 +8,7 @@ import {
 } from "./accountsSlice";
 import styles from "./ContractList.module.css";
 import { AddContract } from "./AddContract";
-import { AccountCard } from "../../components/AccountCard";
+import { AccountCard } from "./AccountCard";
 import { Contract } from "../accounts/accountsSlice";
 
 interface ContractProps {

src/features/accounts/ContractList.tsx

@@ -0,0 +1,8 @@
+.form {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  height: 8rem;
+  margin-top: -1rem;
+  margin-bottom: 0.5rem;
+}

src/features/accounts/Donate.module.css

@@ -0,0 +1,69 @@
+import {
+  SlButton,
+  SlDialog,
+  SlInput,
+} from "@shoelace-style/shoelace/dist/react";
+import type SlInputElement from "@shoelace-style/shoelace/dist/components/input/input";
+import React, { FC, useState } from "react";
+import { useAppDispatch, useAppSelector } from "../../app/hooks";
+import styles from "./Donate.module.css";
+import { sendCoins, setDonationOpen } from "./accountsSlice";
+import { fromMicroDenom } from "../../util/coins";
+import presets from "../connection/presets.json";
+
+const DONATIONS_ADDRESS = "juno1py5lflcm30rgk56jc0ynyu4afn9fpxyk88wyvv";
+
+export const Donate: FC = () => {
+  const dispatch = useAppDispatch();
+  const open = useAppSelector((state) => state.accounts.donationOpen);
+  const sender = useAppSelector((state) => state.accounts.currentAccount!);
+  const junoConfig = presets["juno-mainnet"];
+  const [amount, setAmount] = useState("");
+  const [memo, setMemo] = useState("");
+
+  function dispatchSend() {
+    dispatch(
+      sendCoins({
+        sender,
+        recipient: DONATIONS_ADDRESS,
+        amount,
+        memo,
+        customConfig: junoConfig,
+      })
+    );
+    dispatch(setDonationOpen(false));
+    setAmount("");
+    setMemo("");
+  }
+
+  return (
+    <SlDialog
+      label="Thank you!"
+      open={open}
+      onSlRequestClose={() => dispatch(setDonationOpen(false))}
+      className={styles.dialog}
+    >
+      <div className={styles.form}>
+        <SlInput
+          placeholder="Amount"
+          value={amount}
+          className={styles.amount}
+          onSlChange={(e) =>
+            setAmount((e.target as SlInputElement).value.trim())
+          }
+        >
+          <div slot="suffix">{fromMicroDenom(junoConfig["microDenom"])}</div>
+        </SlInput>
+        <SlInput
+          placeholder="Memo"
+          value={memo}
+          className={styles.memo}
+          onSlChange={(e) => setMemo((e.target as SlInputElement).value.trim())}
+        />
+        <SlButton variant="neutral" onClick={() => dispatchSend()}>
+          Send
+        </SlButton>
+      </div>
+    </SlDialog>
+  );
+};

src/features/accounts/Donate.tsx

@@ -1,7 +1,7 @@
 import { SlIcon } from "@shoelace-style/shoelace/dist/react";
 import React, { FC, useCallback } from "react";
 import { useAppDispatch, useAppSelector } from "../../app/hooks";
-import { AccountCard } from "../../components/AccountCard";
+import { AccountCard } from "./AccountCard";
 import { selectAccount, setKeplrAccount } from "./accountsSlice";
 import styles from "./KeplrAccount.module.css";
 import { useKeplr } from "./useKeplr";
@@ -11,7 +11,9 @@ export const KeplrAccount: FC = () => {
   const { connect } = useKeplr();
   const account = useAppSelector((state) => state.accounts.keplrAccount);
   const selected = useAppSelector(
-    (state) => state.accounts.currentAccount === account?.address
+    (state) =>
+      state.accounts.currentAccount !== undefined &&
+      state.accounts.currentAccount === account?.address
   );
 
   const reconnect = useCallback(() => connect(), [connect]);

src/features/accounts/KeplrAccount.tsx

@@ -10,15 +10,15 @@ import {
 import type SlSelectElement from "@shoelace-style/shoelace/dist/components/select/select";
 import type SlInputElement from "@shoelace-style/shoelace/dist/components/input/input";
 import React, { FC, useState } from "react";
-import { useAppDispatch, useAppSelector } from "../app/hooks";
+import { useAppDispatch, useAppSelector } from "../../app/hooks";
 import styles from "./SendCoins.module.css";
 import {
   AccountType,
   contractAccounts,
   sendCoins,
   setSendCoinsOpen,
-} from "../features/accounts/accountsSlice";
-import { fromMicroDenom } from "../util/coins";
+} from "./accountsSlice";
+import { fromMicroDenom } from "../../util/coins";
 
 export const SendCoins: FC = () => {
   const dispatch = useAppDispatch();

src/components/SendCoins.module.css src/features/accounts/SendCoins.module.css

@@ -43,11 +43,13 @@ export interface AccountsState {
   currentAccount?: string;
   currentContract?: string;
   sendCoinsOpen: boolean;
+  donationOpen: boolean;
 }
 
 const initialState: AccountsState = {
   accountList: {},
   sendCoinsOpen: false,
+  donationOpen: false,
 };
 
 export const importAccount = createAsyncThunk(
@@ -204,29 +206,35 @@ export const sendCoins = createAsyncThunk(
       recipient,
       amount,
       memo,
+      customConfig,
     }: {
       sender: string;
       recipient: string;
       amount: string;
       memo?: string;
+      customConfig?: { [key: string]: string };
     },
     { getState, dispatch }
   ): Promise<void> => {
     try {
       const state = getState() as RootState;
+      const config = customConfig ?? state.connection.config;
       const senderAccount = state.accounts.accountList[sender];
+
+      console.log(sender, senderAccount);
+      if (!sender) {
+        throw new Error("No account selected");
+      }
+
       const client = await connectionManager.getSigningClient(
         senderAccount,
-        state.connection.config
+        config
       );
 
       const coinsAmount = [
         {
-          amount: toMicroAmount(
-            amount,
-            state.connection.config["coinDecimals"]
-          ),
-          denom: state.connection.config["microDenom"],
+          amount: toMicroAmount(amount, config["coinDecimals"]),
+          denom: config["microDenom"],
         },
       ];
 
@@ -281,6 +289,17 @@ export const accountsSlice = createSlice({
       if (account) {
         state.accountList[account.address] = account;
       } else {
+        console.log(
+          state.currentAccount,
+          state.currentAccount &&
+            state.accountList[state.currentAccount]?.type === AccountType.Keplr
+        );
+        if (
+          state.currentAccount &&
+          state.accountList[state.currentAccount]?.type === AccountType.Keplr
+        ) {
+          state.currentAccount = undefined;
+        }
         delete state.accountList[state.keplrAccount!.address];
       }
 
@@ -299,6 +318,9 @@ export const accountsSlice = createSlice({
     setSendCoinsOpen: (state, action: PayloadAction<boolean>) => {
       state.sendCoinsOpen = action.payload;
     },
+    setDonationOpen: (state, action: PayloadAction<boolean>) => {
+      state.donationOpen = action.payload;
+    },
   },
   extraReducers: (builder) => {
     builder
@@ -350,6 +372,7 @@ export const {
   setKeplrAccount,
   setAccountBalance,
   setSendCoinsOpen,
+  setDonationOpen,
 } = accountsSlice.actions;
 
 export const selectedAccount = (state: RootState) =>

src/components/SendCoins.tsx src/features/accounts/SendCoins.tsx

@@ -1,5 +1,4 @@
 import { createAsyncThunk, createSlice, PayloadAction } from "@reduxjs/toolkit";
-import { config } from "process";
 import { RootState } from "../../app/store";
 import { pushMessage } from "../messages/messagesSlice";
 import connectionManager from "./connectionManager";