1  import React, { useState, useEffect, useRef } from 'react';
  2  import * as Dialog from "@radix-ui/react-dialog";
  3  import { Button } from "@radix-ui/themes";
  4  import { Cross2Icon } from "@radix-ui/react-icons";
  5  import styles from "./accountokenmodal.module.scss";
  6  import { AccountRecordsDB } from '../Database/Database';
  7  import useCkBtcLedger from "../Wallet/useCkBtcLedger";
  8  
  9  
 10  const AccountTokenModal = ({open, onClose}) => {
 11      const dialogRef = useRef(null);
 12      const [accountName, setAccountName] = useState("");
 13      const [token, setToken] = useState("");
 14      const [ethExchangeRate] = useState(2513.62);
 15      const [eurcExchangeRate] = useState(1.09);
 16      const [testingBalance, setTestingBalance] = useState(null);
 17      const [testingUsdBalance, setTestingUsdBalance] = useState(null);
 18      const { balance } = useCkBtcLedger();
 19      
 20      useEffect(()=> {
 21        if(balance) {
 22          console.log("Found ckBtc balance: ", balance);
 23        }
 24      },[balance]);
 25  
 26      const handleClose = () => {
 27          if (onClose) {
 28            onClose();
 29          }
 30        };
 31  
 32      const handleAccountNameChange = (event) => {
 33          setAccountName(event.target.value);
 34      }
 35  
 36      const handleTokenChange = (event) => {
 37          setToken(event.target.value);
 38      }
 39  
 40      useEffect(() => {
 41        createTestingBalance();
 42        console.log("Testing balance: ",testingBalance);
 43      },[token])
 44  
 45      const createTestingBalance = () => {
 46        if(token === "ETH") {
 47          setTestingBalance(0.7);
 48        } else if (token === "CKBTC") {
 49          setTestingBalance(balance);
 50        } else {
 51          setTestingBalance(1000);
 52        }
 53      }
 54  
 55      useEffect(()=> {
 56        if(!testingBalance) return
 57        createTestingDollarBalance()
 58      },[token, testingBalance]);
 59  
 60      const createTestingDollarBalance = () => {
 61        if (token === "ETH") {
 62          const dollarBalance = parseFloat((testingBalance * ethExchangeRate).toFixed(2));
 63          setTestingUsdBalance(dollarBalance);
 64        } else if (token === "EURC") {
 65          const dollarBalance = parseFloat((testingBalance * eurcExchangeRate.toFixed(2)));
 66          setTestingUsdBalance(dollarBalance);
 67        } else {
 68          setTestingUsdBalance(parseFloat((testingBalance)?.toFixed(2)));
 69        }
 70      }
 71  
 72      const handleCreateButton = () => {
 73        console.log(".........Creating new account........");
 74        addAccountRecordsData()
 75        console.log(`New account: ${accountName} created succesfully`);
 76        handleClose();
 77      }
 78  
 79      const addAccountRecordsData = async () => {
 80        try {
 81          await AccountRecordsDB.accountRecordsDetails.add({
 82            accountName: accountName,
 83            currency: token,
 84            nativeBalance: testingBalance,  // for testing purposes
 85            usdBalance: testingUsdBalance, // for testing purposes
 86            timestamp: new Date(),
 87          });
 88        }catch(error) {
 89          console.log("There was an issue writing to the account records database: ", error);
 90        }
 91      }
 92  
 93      const createckBtcAccount = () => {
 94        if(token === "BTC") {
 95          
 96        }
 97      }
 98      
 99      return (
100          <Dialog.Root open={open} onClose={handleClose} ref={dialogRef} style={{ alignItems: 'center', justifyContent: 'center' }}>
101          <Dialog.Overlay className={styles.DialogOverlay} />
102          <Dialog.Content className={`${styles.DialogContent} ${styles.centeredContent}`}>
103            <Dialog.Close asChild>
104              <button className={styles.DialogCloseButton} onClick={handleClose}>
105                <Cross2Icon />
106              </button>
107            </Dialog.Close>
108            <Dialog.Title className={styles.DialogTitle}>Create Account</Dialog.Title>
109            <fieldset>
110              <label className={styles.SendModalLabel}>Account Name</label>
111              <input
112                className={styles.SendModalInput}
113                name="accountName"
114                type="text"
115                id="accountName"
116                placeholder="Enter account name"
117                onChange={handleAccountNameChange}
118                value={accountName}
119              />
120              <label className={styles.SendModalLabel}>Token</label>
121                  <select
122                      className={styles.SendModalInput}
123                      name="token"
124                      id="token"
125                      onChange={handleTokenChange}
126                      value={token}
127                  >
128                      <option value="" disabled>Select a token</option>
129                      <option value="BTC">BTC</option>
130                      <option value ="DAI">DAI</option>
131                      <option value ="USDC">USDC</option>
132                      <option value ="EURC">EURC</option>
133                      <option value="ETH">ETH</option>
134                      <option value="USDT">USDT</option>
135                      <option value="CKBTC">ckBTC</option>
136              </select>
137            </fieldset>
138            <div className={styles.ButtonContainer}>
139              <Button
140                className={`${styles.Button} ${styles.SendModalCancelButton}`}
141                onClick={handleClose}
142              >
143                Cancel
144              </Button>
145              <Button
146                className={`${styles.Button} ${styles.SendModalNextButton}`}
147                onClick={handleCreateButton}
148              >
149                Create
150              </Button>
151            </div>
152          </Dialog.Content>
153        </Dialog.Root>
154      );
155  }
156  
157  export default AccountTokenModal;