Skip to content
This repository has been archived by the owner on Nov 8, 2023. It is now read-only.

rename l1/l2 pay and add chain / currency sumbols to UI #148

Closed
wants to merge 3 commits into from
Closed

rename l1/l2 pay and add chain / currency sumbols to UI #148

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
f565caf
rename l1/l2 pay
geoknee Oct 19, 2023
03cfe52
add symbols to UI
geoknee Oct 19, 2023
c71699b
lint fix
geoknee Oct 19, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 22 additions & 5 deletions src/Intermediary.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ import {
import { blo } from "blo";
import { formatEther } from "ethers";
import { useBalances } from "./useBalances";
import { type ChainData, chains } from "./chains";

const startingIntermediaryBalance = BigInt(
// @ts-expect-error
Expand All @@ -32,6 +33,16 @@ export const Coordinator: React.FunctionComponent = () => {
const aliceScwAddress = import.meta.env.VITE_ALICE_SCW_ADDRESS;
// @ts-expect-error
const bobScwAddress = import.meta.env.VITE_BOB_SCW_ADDRESS;
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
const aliceChain = chains.find(
// @ts-expect-error
(c) => c.url === import.meta.env.VITE_ALICE_CHAIN_URL,
)!;
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
const bobChain = chains.find(
// @ts-expect-error
(c) => c.url === import.meta.env.VITE_BOB_CHAIN_URL,
)!;

const [withAlice] = useState(
() =>
Expand Down Expand Up @@ -100,20 +111,22 @@ export const Coordinator: React.FunctionComponent = () => {
spacing={2}
>
<Divider />
<Intermediary client={withAlice} />
<Intermediary client={withAlice} chain={aliceChain} />
<Divider />
<Intermediary client={withBob} />
<Intermediary client={withBob} chain={bobChain} />
</Stack>
</Card>
);
};

export const Intermediary: React.FunctionComponent<{
client: IntermediaryClient;
}> = (props: { client: IntermediaryClient }) => {
chain: ChainData;
}> = (props: { client: IntermediaryClient; chain: ChainData }) => {
const [ownerBalance, intermediaryBalance] = useBalances(props.client);
return (
<>
{props.chain.name}
<Stack
direction="row"
justifyContent="left"
Expand All @@ -126,7 +139,10 @@ export const Intermediary: React.FunctionComponent<{
sx={{ width: 24, height: 24 }}
/>
</Tooltip>
<Typography>Owner balance: {formatEther(ownerBalance)}</Typography>
<Typography>
Owner balance:{" "}
{formatEther(BigInt(ownerBalance)) + " " + props.chain.symbol}
</Typography>
</Stack>
<Stack
direction="row"
Expand All @@ -141,7 +157,8 @@ export const Intermediary: React.FunctionComponent<{
/>
</Tooltip>
<Typography>
IntermediaryBalance: {formatEther(intermediaryBalance)}
IntermediaryBalance:{" "}
{formatEther(BigInt(intermediaryBalance)) + " " + props.chain.symbol}
</Typography>
</Stack>
</>
Expand Down
24 changes: 17 additions & 7 deletions src/Wallet.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,7 @@ let myScwAddress: string;
let myPeerSCWAddress: string;
let myChainUrl: string;
let myChain: ChainData;
let myPeerChain: ChainData;

const startingIntermediaryBalance = BigInt(
// @ts-expect-error
Expand Down Expand Up @@ -69,7 +70,11 @@ const Wallet: React.FunctionComponent<{ role: Role }> = (props: {
// @ts-expect-error
(c) => c.url === import.meta.env.VITE_ALICE_CHAIN_URL,
)!;

// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
myPeerChain = chains.find(
// @ts-expect-error
(c) => c.url === import.meta.env.VITE_BOB_CHAIN_URL,
)!;
break;
case "bob":
// @ts-expect-error
Expand All @@ -89,7 +94,11 @@ const Wallet: React.FunctionComponent<{ role: Role }> = (props: {
// @ts-expect-error
(c) => c.url === import.meta.env.VITE_BOB_CHAIN_URL,
)!;

// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
myPeerChain = chains.find(
// @ts-expect-error
(c) => c.url === import.meta.env.VITE_ALICE_CHAIN_URL,
)!;
break;
}

Expand All @@ -103,7 +112,6 @@ const Wallet: React.FunctionComponent<{ role: Role }> = (props: {
BigInt(parseInt(import.meta.env.VITE_SCW_DEPOSIT, 10) / 100);

const [recipient, setRecipient] = useState(myPeer);
const [hostNetwork, setHostNetwork] = useState("Scroll");
const [isModalL1PayOpen, setModalL1PayOpen] = useState<boolean>(false);
const [isModalEjectOpen, setModalEjectOpen] = useState<boolean>(false);
const [userOpHash, setUserOpHash] = useState<string | null>(null);
Expand Down Expand Up @@ -191,11 +199,13 @@ const Wallet: React.FunctionComponent<{ role: Role }> = (props: {
</Typography>
<Typography>
{" "}
<b> Balance:</b> {formatEther(ownerBalance)}{" "}
<b> Balance:</b>{" "}
{formatEther(BigInt(ownerBalance)) + " " + myChain.symbol}{" "}
</Typography>
<Typography>
{" "}
<b> Inbound Capacity:</b> {formatEther(intermediaryBalance)}{" "}
<b> Inbound Capacity:</b>{" "}
{formatEther(BigInt(intermediaryBalance)) + " " + myChain.symbol}{" "}
</Typography>
</Stack>
<br />
Expand Down Expand Up @@ -267,7 +277,7 @@ const Wallet: React.FunctionComponent<{ role: Role }> = (props: {
);
}}
>
<AccessTimeIcon style={{ marginRight: "5px" }} /> L1 Pay
<AccessTimeIcon style={{ marginRight: "5px" }} /> Send
</Button>
<Button
size="medium"
Expand All @@ -280,7 +290,7 @@ const Wallet: React.FunctionComponent<{ role: Role }> = (props: {
});
}}
>
<BoltIcon /> L2 Pay
<BoltIcon /> Bridge to {myPeerChain.symbol}
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could use the "name" field here, although that is typically a little too long to make the button look good...

We could just use "bridge" in the button, and display the chain name (and/or logo?) somewhere else on the UI?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

i.e. Host Network / Target Network

</Button>
</ButtonGroup>

Expand Down