added light/dark switch Fixes #157 also added stellar wallet kit Fixes #155

components/atoms/card/style.module.css

@@ -3,7 +3,7 @@
   padding: 1.5rem;
   text-align: left;
   border-radius: 12px;
-  background-color: #ffffff;
+  /*background-color: #ffffff;*/
   height: fit-content;
   display: flex;
   flex-direction: column;

components/atoms/connect-button/index.tsx

@@ -1,20 +1,114 @@
-import React from 'react'
-import { setAllowed } from '@stellar/freighter-api'
+
+import React, { useEffect, useState, useRef } from 'react'
+import {
+    StellarWalletsKit,
+    WalletNetwork,
+    allowAllModules,
+    ISupportedWallet,
+    XBULL_ID,
+} from "@creit.tech/stellar-wallets-kit/build/index";
 import styles from './style.module.css'
+import { useAppContext } from '../../../context/appContext'
+import { Horizon } from '@stellar/stellar-sdk'
 
 export interface ConnectButtonProps {
-  label: string
-  isHigher?: boolean
+    label: string
+    isHigher?: boolean
 }
 
-export function ConnectButton({ label, isHigher }: ConnectButtonProps) {
-  return (
-    <button
-      className={styles.button}
-      style={{ height: isHigher ? 50 : 38 }}
-      onClick={setAllowed}
-    >
-      {label}
-    </button>
-  )
+const kit: StellarWalletsKit = new StellarWalletsKit({
+    network: WalletNetwork.TESTNET,
+    selectedWalletId: XBULL_ID,
+    modules: allowAllModules(),
+});
+
+export const ConnectButton: React.FC = () => {
+    const { activePubKey, setActivePubKey } = useAppContext();
+    const { balance2, setBalance2 } = useAppContext();
+    const [dropdownOpen, setDropdownOpen] = useState(false);
+    const dropdownRef = useRef<HTMLDivElement | null>(null);
+
+    const onClick = async () => {
+        //setConnectionError(null);
+        // See https://github.com/Creit-Tech/Stellar-Wallets-Kit/tree/main for more options
+        if (!activePubKey) {
+            await kit.openModal({
+                modalDialogStyles: {
+                    ["backgroundColor"]: "#ffffff",
+                    ["color"]: '#fff',
+                },
+                onWalletSelected: async (option: ISupportedWallet) => {
+                    kit.setWallet(option.id);
+                    //console.log('option', option)
+                    //console.log('option', option.id)
+                    const publicKey = await kit.getPublicKey();
+                    console.log('publicKeys', publicKey);
+                    setActivePubKey(publicKey);
+                    //createUserLogIn(publicKey);
+                }
+            });
+        }
+    };
+
+    const getBalance = async () => {
+        if (activePubKey) {
+            try {
+                const server = new Horizon.Server('https://horizon-testnet.stellar.org');
+                //const account = await server.loadAccount(activePubKey);
+                const account = await server.accounts().accountId(activePubKey).call();
+                //const claimableBalances = await server.claimableBalances().claimant(activePubKey).call();
+                //console.log('claimableBalances', claimableBalances);
+                //console.log(account.balances[0].balance);
+                console.log('account.balances', await account.balances)
+                //const balance = await account.balances[0].balance;
+                const balance = await account.balances;
+                setBalance2(balance);
+                //console.log('balance XLM', balance);
+                //console.log('activePubKey', activePubKey);
+            } catch (error) {
+                console.error('An error occurred:', error);
+            }
+        }
+    }
+
+    useEffect(() => {
+        //console.log('useEffect iniciado')
+        getBalance();
+    }, [activePubKey]);
+
+    return (
+        <>
+            {activePubKey ? (
+                <div className="relative" ref={dropdownRef}>
+                    <button
+                        className={styles.button}
+                        onClick={() => setDropdownOpen(!dropdownOpen)} >
+                        <div className="font-rooftop flex items-center">
+                            {`${activePubKey?.slice(0, 4)}...${activePubKey?.slice(-4)}`.toUpperCase()}
+                        </div>
+                    </button>
+                    {dropdownOpen && (
+                        <button
+                            className={styles.button}
+                            onClick={() => {
+                                setActivePubKey(null);
+                                setBalance2(null);
+                                setDropdownOpen(false);
+                            }}
+                        >
+                            Disconnect
+                        </button>
+                    )}
+                </div>
+            ) : (
+                <button
+
+                    className={styles.button}
+                    onClick={onClick}
+                >
+                    {activePubKey ? "Next" : "Connect Wallet"}
+                </button>
+            )}
+        </>
+    )
 }

components/atoms/connect-button/style.module.css

@@ -18,4 +18,5 @@
 
 .higher {
     height: 58px;
-}
+}
+

components/molecules/form-pledge/index.tsx

@@ -4,9 +4,34 @@ import { TransactionModal } from '../../molecules/transaction-modal'
 import { Utils } from '../../../shared/utils'
 import styles from './style.module.css'
 import { Spacer } from '../../atoms/spacer'
-import { abundance, crowdfund } from '../../../shared/contracts'
+import { abundance, crowdfund, server } from '../../../shared/contracts'
 import { signTransaction } from '@stellar/freighter-api'
-import { BASE_FEE, xdr } from '@stellar/stellar-sdk'
+import {
+  xdr, FeeBumpTransaction, Transaction,
+  Keypair,
+  Contract,
+  SorobanRpc,
+  TransactionBuilder,
+  Networks,
+  BASE_FEE,
+  nativeToScVal,
+  Address,
+} from '@stellar/stellar-sdk'
+import {
+  StellarWalletsKit,
+  WalletNetwork,
+  allowAllModules,
+  ISupportedWallet,
+  XBULL_ID,
+  FREIGHTER_ID,
+} from "@creit.tech/stellar-wallets-kit/build/index";
+import { useAppContext } from '../../../context/appContext'
+
+const kit: StellarWalletsKit = new StellarWalletsKit({
+  network: WalletNetwork.TESTNET,
+  selectedWalletId: FREIGHTER_ID,
+  modules: allowAllModules(),
+});
 
 export interface IFormPledgeProps {
   account: string
@@ -41,14 +66,59 @@ function MintButton({
 
   const displayAmount = 100
   const amount = BigInt(displayAmount * 10 ** decimals)
+  const { activePubKey, setActivePubKey } = useAppContext();
+  const StellarSdk = require("stellar-sdk");
+  const RPC_SERVER = "https://soroban-testnet.stellar.org/";
+
+  const signTx = async (tx) => {
+    console.log('tx', tx)
+    const signedXDR = await kit.signTx({
+      xdr: tx.toXDR(),
+      publicKeys: [activePubKey],
+      network: WalletNetwork.TESTNET,
+    });
+
+    return signedXDR.result;
+  }
 
   return (
     <Button
       title={`Mint ${displayAmount} ${symbol}`}
       onClick={async () => {
         setSubmitting(true)
-        const tx = await abundance.mint({ to: account, amount: amount })
-        await tx.signAndSend()
+
+        const server = new SorobanRpc.Server("https://soroban-testnet.stellar.org:443",);
+        const contractAddress = "CARKSRXI44GV5HP2IALCXRNJ6H6YZRXPI72UNNIIY7KEOYNP5ROH63NT";
+        const contract = new Contract(contractAddress);
+        const sourceAccount = await server.getAccount(activePubKey);
+        let builtTransaction = new TransactionBuilder(sourceAccount, {
+          fee: BASE_FEE,
+          networkPassphrase: Networks.TESTNET,
+        })
+          .addOperation(
+            contract.call(
+              "mint",
+              nativeToScVal(Address.fromString(activePubKey)),
+              nativeToScVal(amount, { type: "i128" }),
+            ),
+          )
+          .setTimeout(180)
+          .build();
+
+        console.log(`builtTransaction=${builtTransaction.toXDR()}`);
+        let preparedTransaction = await server.prepareTransaction(builtTransaction);
+        console.log('preparedTransaction',preparedTransaction.toXDR())
+        const signedXDR = await kit.signTx({
+          xdr: preparedTransaction.toXDR(),
+          publicKeys: [activePubKey],
+          network: WalletNetwork.TESTNET,
+        });
+
+        console.log('signedXDR',signedXDR.result)
+        const signedTx = TransactionBuilder.fromXDR(signedXDR.result, StellarSdk.Networks.TESTNET);
+        let sendResponse = await server.sendTransaction(signedTx);
+        console.log(`Sent transaction: ${JSON.stringify(sendResponse)}`);
+
         setSubmitting(false)
         onComplete()
       }}
@@ -67,6 +137,12 @@ const FormPledge: FunctionComponent<IFormPledgeProps> = props => {
   const [resultSubmit, setResultSubmit] = useState<IResultSubmit | undefined>()
   const [input, setInput] = useState('')
   const [isSubmitting, setSubmitting] = useState(false)
+  const { activePubKey, setActivePubKey } = useAppContext();
+  const StellarSdk = require("stellar-sdk");
+  //const server2 = new StellarSdk.Horizon.Server("https://horizon-testnet.stellar.org");
+
+  const RPC_SERVER = "https://soroban-testnet.stellar.org/";
+  const server2 = new SorobanRpc.Server(RPC_SERVER);
 
   React.useEffect(() => {
     Promise.all([
@@ -90,12 +166,47 @@ const FormPledge: FunctionComponent<IFormPledgeProps> = props => {
     setSubmitting(true)
 
     try {
+      ////
+
+      const server = new SorobanRpc.Server("https://soroban-testnet.stellar.org:443",);
+      const contractAddress = "CCKMR2MCVNOZHQKEKQX4RZKYA2A26Q6INXUW74XP3DN3DFU7IB7QFW7S";
+      const contract = new Contract(contractAddress);
+      const sourceAccount = await server.getAccount(activePubKey);
+      let builtTransaction = new TransactionBuilder(sourceAccount, {
+        fee: BASE_FEE,
+        networkPassphrase: Networks.TESTNET,
+      })
+        .addOperation(
+          contract.call(
+            "deposit",
+            nativeToScVal(Address.fromString(activePubKey)),
+            nativeToScVal(BigInt(amount * 10 ** decimals), { type: "i128" }),
+          ),
+        )
+        .setTimeout(180)
+        .build();
+
+      console.log(`builtTransaction=${builtTransaction.toXDR()}`);
+      let preparedTransaction = await server.prepareTransaction(builtTransaction);
+      console.log('preparedTransaction',preparedTransaction.toXDR())
+      const signedXDR = await kit.signTx({
+        xdr: preparedTransaction.toXDR(),
+        publicKeys: [activePubKey],
+        network: WalletNetwork.TESTNET,
+      });
+
+      console.log('signedXDR',signedXDR.result)
+      const signedTx = TransactionBuilder.fromXDR(signedXDR.result, StellarSdk.Networks.TESTNET);
+      let sendResponse = await server.sendTransaction(signedTx);
+      console.log(`Sent transaction: ${JSON.stringify(sendResponse)}`);
+
+      /////
+      /*
       const tx = await crowdfund.deposit({
         user: props.account,
         amount: BigInt(amount * 10 ** decimals),
       })
-      await tx.signAndSend()
-
+      */
       setResultSubmit({
         status: 'success',
         value: String(amount),

components/molecules/index.tsx

@@ -2,3 +2,4 @@ export * from './transaction-modal'
 export * from './form-pledge'
 export * from './wallet-data'
 export * from './deposits'
+export * from './style-mode'

components/molecules/style-mode/index.tsx

@@ -0,0 +1,34 @@
+import React, { useState, useEffect } from 'react';
+
+export function StyleMode() {
+  const [theme, setTheme] = useState('light');
+  const toggleTheme = () => {setTheme((prevTheme) => (prevTheme === 'light' ? 'dark' : 'light')); };
+
+  useEffect(() => {
+    document.body.className = theme;
+  }, [theme]);
+
+  return (
+    <div className="toggle colorModeToggle">
+      <button
+        className="clean-btn toggleButton"
+        type="button"
+        title={`Switch between dark and light mode (currently ${theme} mode)`}
+        aria-label={`Switch between dark and light mode (currently ${theme} mode)`}
+        aria-live="polite"
+        onClick={toggleTheme}
+        style={{ border: 0, borderRadius: '4px' }} 
+      >
+        {theme === 'light' ? (
+          <svg viewBox="0 0 24 24" width="32" height="32">
+            <path fill="currentColor" d="M12,9c1.65,0,3,1.35,3,3s-1.35,3-3,3s-3-1.35-3-3S10.35,9,12,9 M12,7c-2.76,0-5,2.24-5,5s2.24,5,5,5s5-2.24,5-5 S14.76,7,12,7L12,7z M2,13l2,0c0.55,0,1-0.45,1-1s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S1.45,13,2,13z M20,13l2,0c0.55,0,1-0.45,1-1 s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S19.45,13,20,13z M11,2v2c0,0.55,0.45,1,1,1s1-0.45,1-1V2c0-0.55-0.45-1-1-1S11,1.45,11,2z M11,20v2c0,0.55,0.45,1,1,1s1-0.45,1-1v-2c0-0.55-0.45-1-1-1C11.45,19,11,19.45,11,20z M5.99,4.58c-0.39-0.39-1.03-0.39-1.41,0 c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0s0.39-1.03,0-1.41L5.99,4.58z M18.36,16.95 c-0.39-0.39-1.03-0.39-1.41,0c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0c0.39-0.39,0.39-1.03,0-1.41 L18.36,16.95z M19.42,5.99c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06c-0.39,0.39-0.39,1.03,0,1.41 s1.03,0.39,1.41,0L19.42,5.99z M7.05,18.36c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06 c-0.39,0.39-0.39,1.03,0,1.41s1.03,0.39,1.41,0L7.05,18.36z"></path>
+          </svg>
+        ) : (
+          <svg viewBox="0 0 24 24" width="32" height="32">
+            <path fill="currentColor" d="M9.37,5.51C9.19,6.15,9.1,6.82,9.1,7.5c0,4.08,3.32,7.4,7.4,7.4c0.68,0,1.35-0.09,1.99-0.27C17.45,17.19,14.93,19,12,19 c-3.86,0-7-3.14-7-7C5,9.07,6.81,6.55,9.37,5.51z M12,3c-4.97,0-9,4.03-9,9s4.03,9,9,9s9-4.03,9-9c0-0.46-0.04-0.92-0.1-1.36 c-0.98,1.37-2.58,2.26-4.4,2.26c-2.98,0-5.4-2.42-5.4-5.4c0-1.81,0.89-3.42,2.26-4.4C12.92,3.04,12.46,3,12,3L12,3z"></path>
+          </svg>
+        )}
+      </button>
+    </div>
+  );
+};