@@ -9,7 +9,7 @@ import { Box, Button, CircularProgress, Tooltip } from '@mui/material';
99import { AztecContext } from '../../../aztecContext' ;
1010import { useContext , useEffect , useState } from 'react' ;
1111import { PREDEFINED_CONTRACTS } from '../../../constants' ;
12- import { randomBytes } from '@aztec/foundation/crypto' ;
12+ import { randomBytes } from '@aztec/foundation/crypto/random ' ;
1313import { loadContractArtifact } from '@aztec/aztec.js/abi' ;
1414import { useTransaction } from '../../../hooks/useTransaction' ;
1515import {
@@ -429,127 +429,133 @@ export function Landing() {
429429 < div css = { container } >
430430 < div css = { contentScroll } >
431431 < div css = { welcomeCardContainer } >
432- < div css = { featureCard } >
433- < div >
434- < div css = { cardTitle } > Deploy Privacy-Preserving Smart Contracts</ div >
435- < div css = { cardDescription } >
436- Get started deploying and interacting with smart contracts on Aztec. Create an aztec account, try one of
437- our default contracts or upload your own and interact with public and private functions made possible by
438- client-side ZK proofs created in your browser.
432+ < div css = { featureCard } >
433+ < div >
434+ < div css = { cardTitle } > Deploy Privacy-Preserving Smart Contracts</ div >
435+ < div css = { cardDescription } >
436+ Get started deploying and interacting with smart contracts on Aztec. Create an aztec account, try one of
437+ our default contracts or upload your own and interact with public and private functions made possible by
438+ client-side ZK proofs created in your browser.
439+ </ div >
440+ </ div >
441+ < div
442+ style = { {
443+ width : '40%' ,
444+ display : 'flex' ,
445+ justifyContent : 'center' ,
446+ alignItems : 'center' ,
447+ marginLeft : '1rem' ,
448+ } }
449+ >
450+ < img src = { welcomeIconURL } alt = "Welcome visualization" style = { { maxWidth : '100%' , maxHeight : '140px' } } />
439451 </ div >
440- </ div >
441- < div
442- style = { {
443- width : '40%' ,
444- display : 'flex' ,
445- justifyContent : 'center' ,
446- alignItems : 'center' ,
447- marginLeft : '1rem' ,
448- } }
449- >
450- < img src = { welcomeIconURL } alt = "Welcome visualization" style = { { maxWidth : '100%' , maxHeight : '140px' } } />
451452 </ div >
452453 </ div >
453- </ div >
454454
455- < div css = { cardsContainer } >
456- < div css = { featureCard } >
457- < Box >
458- < div css = { cardIcon } >
459- < AccountAbstractionIcon />
460- </ div >
461- < div css = { cardTitle } > Account Abstraction</ div >
462- < div css = { cardDescription } >
463- Aztec's native account abstraction turns every account into a smart contract, enabling highly flexible and
464- programmable user identities that unlock features like gas sponsorship, nonce abstraction (setting your
465- own tx ordering), and the use of alternative signature schemes to control smart contracts with e.g.
466- passkeys.{ ' ' }
467- </ div >
468- </ Box >
469-
470- < Tooltip
471- title = {
472- ! wallet || ! embeddedWalletSelected ? 'Connect to a network and use a wallet to create an account' : ''
473- }
474- placement = "top"
475- >
476- < span >
477- < Button
478- variant = "contained"
479- css = { cardButton }
480- onClick = { handleCreateAccountButtonClick }
481- disabled = { isCreatingAccount || ! wallet }
482- >
483- { isCreatingAccount ? < CircularProgress size = { 20 } sx = { { color : 'white' } } /> : 'Create Account' }
484- </ Button >
485- </ span >
486- </ Tooltip >
487- </ div >
455+ < div css = { cardsContainer } >
456+ < div css = { featureCard } >
457+ < Box >
458+ < div css = { cardIcon } >
459+ < AccountAbstractionIcon />
460+ </ div >
461+ < div css = { cardTitle } > Account Abstraction</ div >
462+ < div css = { cardDescription } >
463+ Aztec's native account abstraction turns every account into a smart contract, enabling highly flexible
464+ and programmable user identities that unlock features like gas sponsorship, nonce abstraction (setting
465+ your own tx ordering), and the use of alternative signature schemes to control smart contracts with e.g.
466+ passkeys.{ ' ' }
467+ </ div >
468+ </ Box >
469+
470+ < Tooltip
471+ title = {
472+ ! wallet || ! embeddedWalletSelected ? 'Connect to a network and use a wallet to create an account' : ''
473+ }
474+ placement = "top"
475+ >
476+ < span >
477+ < Button
478+ variant = "contained"
479+ css = { cardButton }
480+ onClick = { handleCreateAccountButtonClick }
481+ disabled = { isCreatingAccount || ! wallet }
482+ >
483+ { isCreatingAccount ? < CircularProgress size = { 20 } sx = { { color : 'white' } } /> : 'Create Account' }
484+ </ Button >
485+ </ span >
486+ </ Tooltip >
487+ </ div >
488488
489- < div css = { featureCard } >
490- < Box >
491- < div css = { cardIcon } >
492- < PrivateVotingIcon />
493- </ div >
494- < div css = { cardTitle } > Private Voting</ div >
495- < div css = { cardDescription } >
496- Developers can seamlessly integrate public and private functions to unlock use cases like private voting.
497- Voters can hide their address and cast their votes privately through a private function, which internally
498- calls a public function to update the vote count transparently.{ ' ' }
499- </ div >
500- </ Box >
501-
502- < Tooltip title = { ! wallet ? 'Connect and account to deploy and interact with a contract' : '' } placement = "top" >
503- < span >
504- < Button
505- variant = "contained"
506- css = { cardButton }
507- onClick = { async ( ) => {
508- setIsLoadingPrivateVoting ( true ) ;
509- await handleContractButtonClick ( PREDEFINED_CONTRACTS . SIMPLE_VOTING ) ;
510- setIsLoadingPrivateVoting ( false ) ;
511- } }
512- disabled = { isLoadingPrivateVoting || ! wallet || isCreatingAccount }
513- >
514- { isLoadingPrivateVoting ? < CircularProgress size = { 20 } sx = { { color : 'white' } } /> : 'Check it out' }
515- </ Button >
516- </ span >
517- </ Tooltip >
518- </ div >
489+ < div css = { featureCard } >
490+ < Box >
491+ < div css = { cardIcon } >
492+ < PrivateVotingIcon />
493+ </ div >
494+ < div css = { cardTitle } > Private Voting</ div >
495+ < div css = { cardDescription } >
496+ Developers can seamlessly integrate public and private functions to unlock use cases like private
497+ voting. Voters can hide their address and cast their votes privately through a private function, which
498+ internally calls a public function to update the vote count transparently.{ ' ' }
499+ </ div >
500+ </ Box >
501+
502+ < Tooltip
503+ title = { ! wallet ? 'Connect and account to deploy and interact with a contract' : '' }
504+ placement = "top"
505+ >
506+ < span >
507+ < Button
508+ variant = "contained"
509+ css = { cardButton }
510+ onClick = { async ( ) => {
511+ setIsLoadingPrivateVoting ( true ) ;
512+ await handleContractButtonClick ( PREDEFINED_CONTRACTS . SIMPLE_VOTING ) ;
513+ setIsLoadingPrivateVoting ( false ) ;
514+ } }
515+ disabled = { isLoadingPrivateVoting || ! wallet || isCreatingAccount }
516+ >
517+ { isLoadingPrivateVoting ? < CircularProgress size = { 20 } sx = { { color : 'white' } } /> : 'Check it out' }
518+ </ Button >
519+ </ span >
520+ </ Tooltip >
521+ </ div >
519522
520- < div css = { featureCard } >
521- < Box >
522- < div css = { cardIcon } >
523- < PrivateTokensIcon />
524- </ div >
525- < div css = { cardTitle } > Private Tokens</ div >
526- < div css = { cardDescription } >
527- Accounts, transactions, and execution on Aztec can be done privately using client-side proofs, enabling
528- you to private mint or transfer tokens, move public tokens into private domain or the reverse - transfer
529- tokens from private to public, all without revealing your address or even the amount and recipient (in
530- case of private transfer), all the while maintaining the total supply of tokens publicly.
531- </ div >
532- </ Box >
533-
534- < Tooltip title = { ! wallet ? 'Connect and account to deploy and interact with a contract' : '' } placement = "top" >
535- < span >
536- < Button
537- variant = "contained"
538- css = { cardButton }
539- onClick = { async ( ) => {
540- setIsLoadingPrivateTokens ( true ) ;
541- await handleContractButtonClick ( PREDEFINED_CONTRACTS . SIMPLE_TOKEN ) ;
542- setIsLoadingPrivateTokens ( false ) ;
543- } }
544- disabled = { isLoadingPrivateTokens || ! wallet || isCreatingAccount }
545- >
546- { isLoadingPrivateTokens ? < CircularProgress size = { 20 } sx = { { color : 'white' } } /> : 'Check it out' }
547- </ Button >
548- </ span >
549- </ Tooltip >
523+ < div css = { featureCard } >
524+ < Box >
525+ < div css = { cardIcon } >
526+ < PrivateTokensIcon />
527+ </ div >
528+ < div css = { cardTitle } > Private Tokens</ div >
529+ < div css = { cardDescription } >
530+ Accounts, transactions, and execution on Aztec can be done privately using client-side proofs, enabling
531+ you to private mint or transfer tokens, move public tokens into private domain or the reverse - transfer
532+ tokens from private to public, all without revealing your address or even the amount and recipient (in
533+ case of private transfer), all the while maintaining the total supply of tokens publicly.
534+ </ div >
535+ </ Box >
536+
537+ < Tooltip
538+ title = { ! wallet ? 'Connect and account to deploy and interact with a contract' : '' }
539+ placement = "top"
540+ >
541+ < span >
542+ < Button
543+ variant = "contained"
544+ css = { cardButton }
545+ onClick = { async ( ) => {
546+ setIsLoadingPrivateTokens ( true ) ;
547+ await handleContractButtonClick ( PREDEFINED_CONTRACTS . SIMPLE_TOKEN ) ;
548+ setIsLoadingPrivateTokens ( false ) ;
549+ } }
550+ disabled = { isLoadingPrivateTokens || ! wallet || isCreatingAccount }
551+ >
552+ { isLoadingPrivateTokens ? < CircularProgress size = { 20 } sx = { { color : 'white' } } /> : 'Check it out' }
553+ </ Button >
554+ </ span >
555+ </ Tooltip >
556+ </ div >
550557 </ div >
551558 </ div >
552- </ div >
553559 </ div >
554560 ) ;
555561}
0 commit comments