From 83d0c3d4d76603686e5f10aabd9d87e14eddc771 Mon Sep 17 00:00:00 2001 From: armsves Date: Tue, 9 Jul 2024 05:28:52 +0200 Subject: [PATCH 1/3] added light/dark switch --- components/atoms/card/style.module.css | 2 +- components/molecules/index.tsx | 1 + components/molecules/style-mode/index.tsx | 34 +++++++++++ .../molecules/style-mode/style.module.css | 60 +++++++++++++++++++ .../molecules/wallet-data/style.module.css | 2 +- components/organisms/pledge/style.module.css | 2 +- pages/_app.tsx | 24 ++++++-- pages/index.tsx | 6 +- styles/Home.module.css | 7 ++- styles/globals.css | 29 ++++++++- 10 files changed, 155 insertions(+), 12 deletions(-) create mode 100644 components/molecules/style-mode/index.tsx create mode 100644 components/molecules/style-mode/style.module.css diff --git a/components/atoms/card/style.module.css b/components/atoms/card/style.module.css index 6a26bf31..b9613e7a 100644 --- a/components/atoms/card/style.module.css +++ b/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; diff --git a/components/molecules/index.tsx b/components/molecules/index.tsx index d27a9aac..12e7db68 100644 --- a/components/molecules/index.tsx +++ b/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' \ No newline at end of file diff --git a/components/molecules/style-mode/index.tsx b/components/molecules/style-mode/index.tsx new file mode 100644 index 00000000..c7f13c8d --- /dev/null +++ b/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 ( +
+ +
+ ); +}; diff --git a/components/molecules/style-mode/style.module.css b/components/molecules/style-mode/style.module.css new file mode 100644 index 00000000..28cd47ae --- /dev/null +++ b/components/molecules/style-mode/style.module.css @@ -0,0 +1,60 @@ +.card { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + padding: 8px 12px; + gap: 8px; + height: 38px; + background: #ffffff; + border-radius: 4px; + font-weight: 600; + font-size: 13px; + line-height: 22px; + color: #1a1523; + margin-right: 1rem; +} + +.displayData { + display: flex; +} + +.toggle { + height: 2rem; + width: 2rem +} + +.colorModeToggle { + display: none +} + +.clean-btn { + background: none; + border: none; + outline: none; + color: inherit; + cursor: pointer; + font-family: inherit; + padding: 0 +} + + +.toggleButton, +html { + -webkit-tap-highlight-color: transparent +} + +.toggleButton { + border-radius: 40px; + align-items: center; + border-radius: 50%; + display: flex; + height: 100%; + justify-content: center; + transition: background var(--ifm-transition-fast); + width: 100% +} + +.toggleButton:hover { + background: var(--ifm-color-emphasis-200) +} diff --git a/components/molecules/wallet-data/style.module.css b/components/molecules/wallet-data/style.module.css index aaff8313..6e1848de 100644 --- a/components/molecules/wallet-data/style.module.css +++ b/components/molecules/wallet-data/style.module.css @@ -6,7 +6,7 @@ padding: 8px 12px; gap: 8px; height: 38px; - background: #ffffff; + /*background: #ffffff;*/ border-radius: 4px; font-weight: 600; font-size: 13px; diff --git a/components/organisms/pledge/style.module.css b/components/organisms/pledge/style.module.css index c12e9711..e6dadb79 100644 --- a/components/organisms/pledge/style.module.css +++ b/components/organisms/pledge/style.module.css @@ -25,5 +25,5 @@ font-weight: 500; font-size: 16px; line-height: 30px; - color: #000000; + /*color: #000000;*/ } \ No newline at end of file diff --git a/pages/_app.tsx b/pages/_app.tsx index 2adccdd1..acbd8bc3 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -1,11 +1,27 @@ -import type { AppProps } from 'next/app' -import '../styles/globals.css' +import { useState, useEffect, createContext, useContext } from 'react'; +import type { AppProps } from 'next/app'; +import '../styles/globals.css'; +const ThemeContext = createContext({ theme: 'light', toggleTheme: () => {} }); function MyApp({ Component, pageProps }: AppProps) { + const [theme, setTheme] = useState('light'); + + const toggleTheme = () => { + setTheme((currentTheme) => (currentTheme === 'light' ? 'dark' : 'light')); + }; + + useEffect(() => { + document.body.className = theme; + }, [theme]); + return ( - + + + ); } -export default MyApp +export default MyApp; + +export const useTheme = () => useContext(ThemeContext); diff --git a/pages/index.tsx b/pages/index.tsx index 38f90bf2..fbb5f413 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -4,6 +4,7 @@ import Head from 'next/head' import styles from '../styles/Home.module.css' import { Campaign, Pledge } from '../components/organisms' import { WalletData } from '../components/molecules' +import { StyleMode } from '../components/molecules' const Home: NextPage = () => { return ( @@ -22,7 +23,10 @@ const Home: NextPage = () => {

Starfund

- +
+ + +
diff --git a/styles/Home.module.css b/styles/Home.module.css index 12e7323a..fe21c0e0 100644 --- a/styles/Home.module.css +++ b/styles/Home.module.css @@ -9,6 +9,11 @@ margin: auto } +.componentsContainer { + display: flex; + gap: 5px; +} + @media (max-width: 1150px) { .header { padding: 1rem 2rem 0 2rem; @@ -82,7 +87,7 @@ } .code { - background: #fafafa; + /*background: #fafafa;*/ border-radius: 5px; padding: 0.75rem; font-size: 1.1rem; diff --git a/styles/globals.css b/styles/globals.css index 6240062e..9f77191e 100644 --- a/styles/globals.css +++ b/styles/globals.css @@ -4,7 +4,7 @@ body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; - background-color: #eeedef; + /*background-color: #eeedef;*/ } a { @@ -28,14 +28,14 @@ h3 { font-size: 20px; line-height: 28px; letter-spacing: -0.02em; - color: #000000; + /*color: #000000;*/ } h6 { font-size: 12px; font-weight: 600; text-transform: uppercase; - color: #000000; + /*color: #000000;*/ opacity: 0.4; font-style: normal; line-height: 20px; @@ -48,3 +48,26 @@ p { line-height: 26px; text-align: start; } + +/* Light theme styles */ +.light { + background-color: #fff; + color: #000; +} + +/* Dark theme styles */ +.dark { + background-color: #333; + color: #fff; +} + +/* Additional styles for body based on the theme */ +body.light { + background-color: #fff; + color: #000; +} + +body.dark { + background-color: #333; + color: #fff; +} \ No newline at end of file From 017782f855d0b38d039b479973095c7964de0c29 Mon Sep 17 00:00:00 2001 From: armsves Date: Tue, 9 Jul 2024 11:56:37 +0200 Subject: [PATCH 2/3] added creit-stellar-wallet-kit --- components/atoms/connect-button/index.tsx | 122 +- .../atoms/connect-button/style.module.css | 3 +- components/molecules/form-pledge/index.tsx | 123 +- components/molecules/wallet-data/index.tsx | 8 +- context/appContext.tsx | 32 +- package-lock.json | 2513 ++++++++++++++++- package.json | 8 +- pages/index.tsx | 50 +- 8 files changed, 2742 insertions(+), 117 deletions(-) diff --git a/components/atoms/connect-button/index.tsx b/components/atoms/connect-button/index.tsx index eb8bfa12..39f7063f 100644 --- a/components/atoms/connect-button/index.tsx +++ b/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 ( - - ) +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(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 ? ( +
+ + {dropdownOpen && ( + + )} +
+ ) : ( + + )} + + ) } diff --git a/components/atoms/connect-button/style.module.css b/components/atoms/connect-button/style.module.css index fb19c151..f08e3094 100644 --- a/components/atoms/connect-button/style.module.css +++ b/components/atoms/connect-button/style.module.css @@ -18,4 +18,5 @@ .higher { height: 58px; -} \ No newline at end of file +} + diff --git a/components/molecules/form-pledge/index.tsx b/components/molecules/form-pledge/index.tsx index 08c6629e..7332212e 100644 --- a/components/molecules/form-pledge/index.tsx +++ b/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 (