Skip to content

Commit

Permalink
chore: update linter errors (#143)
Browse files Browse the repository at this point in the history 
* chore: update linter errors

* chore: remove unused sections
  • Loading branch information
@ElasticBottle
ElasticBottle committed Sep 19, 2023
1 parent 60c7177 commit e8e04cc
Show file tree
Hide file tree
Showing 3 changed files with 131 additions and 133 deletions.
2 changes: 1 addition & 1 deletion apps/paper-web
Submodule paper-web updated from d58800 to a58f18
87 changes: 48 additions & 39 deletions examples/embedded-wallet-service-sdk-demo-app/src/WalletFeatures.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,22 +7,22 @@ import {
Heading,
Input,
Link,
Stack,
Text,
Modal,
ModalOverlay,
ModalBody,
ModalCloseButton,
ModalContent,
ModalHeader,
ModalCloseButton,
ModalBody,
useDisclosure
ModalOverlay,
Stack,
Text,
useDisclosure,
} from "@chakra-ui/react";
import {
ContractCallInputType,
InitializedUser,
} from "@paperxyz/embedded-wallet-service-sdk";
import { ethers } from "ethers";
import { useEffect, useState } from "react";
import { useCallback, useEffect, useState } from "react";

interface Props {
user: InitializedUser | undefined;
Expand All @@ -39,14 +39,12 @@ enum Features {
FETCH_BALANCE = "FETCH_BALANCE",
}

const PLACEHOLDER = "The result will appear here";

export const WalletFeatures: React.FC<Props> = ({ user }) => {
const [loading, setLoading] = useState<Features | null>(null);
const [result, setResult] = useState<any>(null);
const [recipient, setRecipient] = useState('');
const [amount, setAmount] = useState('');
const [txStatus, setTxStatus] = useState('');
const [recipient, setRecipient] = useState("");
const [amount, setAmount] = useState("");
const [txStatus, setTxStatus] = useState("");
const [balance, setBalance] = useState<string | null>(null);
const wallet = user?.wallet;
const { isOpen, onOpen, onClose } = useDisclosure();
Expand All @@ -67,7 +65,7 @@ export const WalletFeatures: React.FC<Props> = ({ user }) => {
console.log("address", address);
};

const fetchBalance = async () => {
const fetchBalance = useCallback(async () => {
setLoading(Features.FETCH_BALANCE);
try {
const signer = await wallet?.getEthersJsSigner();
Expand All @@ -79,10 +77,10 @@ export const WalletFeatures: React.FC<Props> = ({ user }) => {
const balanceWei = await signer.getBalance();

// Let's add some debugging here:
console.log('Fetched balance in Wei:', balanceWei.toString());
console.log("Fetched balance in Wei:", balanceWei.toString());

const balanceEth = ethers.utils.formatEther(balanceWei);
console.log('Converted balance in ETH:', balanceEth);
console.log("Converted balance in ETH:", balanceEth);

setBalance(balanceEth);
} catch (error) {
Expand All @@ -94,16 +92,13 @@ export const WalletFeatures: React.FC<Props> = ({ user }) => {
} finally {
setLoading(null);
}
};

}, [wallet]);

useEffect(() => {
if (user?.wallet) {
fetchBalance();
}
}, [user?.wallet]);


}, [fetchBalance, user?.wallet]);

const signMessage = async () => {
setLoading(Features.SIGN_MESSAGE);
Expand Down Expand Up @@ -172,14 +167,14 @@ export const WalletFeatures: React.FC<Props> = ({ user }) => {

const tx = await signer.sendTransaction({
to: recipient,
value: ethers.utils.parseEther(amount)
value: ethers.utils.parseEther(amount),
});

setTxStatus(`Transaction hash: ${tx.hash}`);
await tx.wait();
setTxStatus(`Transaction ${tx.hash} has been confirmed`);
} catch (error) {
if (typeof error === 'string') {
if (typeof error === "string") {
console.error("Error sending native token:", error);
setTxStatus(`Error: ${error}`);
} else if (error instanceof Error) {
Expand All @@ -194,7 +189,6 @@ export const WalletFeatures: React.FC<Props> = ({ user }) => {
}
};


const callContractGasless = async () => {
setLoading(Features.CALL_GASLESS_CONTRACT);
const params = {
Expand All @@ -220,7 +214,9 @@ export const WalletFeatures: React.FC<Props> = ({ user }) => {
return (
<Card bg="white" borderRadius={8} boxShadow="lg" p={6}>
<CardBody>
<Heading size="lg" color="black" mb={6}>Wallet Features</Heading>
<Heading size="lg" color="black" mb={6}>
Wallet Features
</Heading>
<Divider my={4} borderColor="gray.300" />
<Stack spacing={6}>
<Section title="Native Token Balance">
Expand All @@ -231,7 +227,9 @@ export const WalletFeatures: React.FC<Props> = ({ user }) => {
>
Fetch Balance
</Button>
<Text fontSize="xl" color="black">{balance ? `${balance} MATIC` : "Balance not fetched"}</Text>
<Text fontSize="xl" color="black">
{balance ? `${balance} MATIC` : "Balance not fetched"}
</Text>
</Section>

<Section title="Wallet Address">
Expand All @@ -242,7 +240,10 @@ export const WalletFeatures: React.FC<Props> = ({ user }) => {
>
Get Wallet Address
</Button>
<LinkDisplay value={result?.wallet} urlBase="https://mumbai.polygonscan.com/address/" />
<LinkDisplay
value={result?.wallet}
urlBase="https://mumbai.polygonscan.com/address/"
/>
</Section>

<Section title="Transfer Native Token">
Expand All @@ -267,7 +268,9 @@ export const WalletFeatures: React.FC<Props> = ({ user }) => {
>
Send
</Button>
<Text mt={2} fontSize="md" color="black">{txStatus}</Text>
<Text mt={2} fontSize="md" color="black">
{txStatus}
</Text>
</Section>

<Section title="Sign Message">
Expand Down Expand Up @@ -300,11 +303,13 @@ export const WalletFeatures: React.FC<Props> = ({ user }) => {
>
Call Gasless Contract
</Button>
<LinkDisplay value={result?.gaslessTransactionHash} urlBase="https://mumbai.polygonscan.com/tx/" />
<LinkDisplay
value={result?.gaslessTransactionHash}
urlBase="https://mumbai.polygonscan.com/tx/"
/>
</Section>

<Section title="Export Private Key">

<Button onClick={onOpen} colorScheme="blue" mt={4}>
Export Account
</Button>
Expand All @@ -315,15 +320,15 @@ export const WalletFeatures: React.FC<Props> = ({ user }) => {
<ModalCloseButton />
<ModalBody>
<iframe
src='https://withpaper.com/sdk/2022-08-12/embedded-wallet/export?clientId=8e0e99fe-933e-4ff8-a2f7-5c7439196c15'
title="export private key"
src="https://withpaper.com/sdk/2022-08-12/embedded-wallet/export?clientId=8e0e99fe-933e-4ff8-a2f7-5c7439196c15"
width="525px"
height="475px"
/>
</ModalBody>
</ModalContent>
</Modal>
</Section>

</Stack>
</CardBody>
</Card>
Expand All @@ -336,8 +341,16 @@ interface SectionProps {
}

const Section: React.FC<SectionProps> = ({ title, children }) => (
<Stack spacing={4} borderWidth="1px" borderRadius="8px" p={4} borderColor="gray.300">
<Heading size="md" color="black">{title}</Heading>
<Stack
spacing={4}
borderWidth="1px"
borderRadius="8px"
p={4}
borderColor="gray.300"
>
<Heading size="md" color="black">
{title}
</Heading>
<Divider borderColor="gray.300" />
{children}
</Stack>
Expand All @@ -361,15 +374,11 @@ interface LinkDisplayProps {
const LinkDisplay: React.FC<LinkDisplayProps> = ({ value, urlBase }) => (
<Code borderRadius={8} p={4} width="full">
{value ? (
<Link
isExternal
textDecoration="underline"
href={`${urlBase}${value}`}
>
<Link isExternal textDecoration="underline" href={`${urlBase}${value}`}>
{value}
</Link>
) : (
"No data available"
)}
</Code>
);
);
Loading

0 comments on commit e8e04cc

Please sign in to comment.