Skip to content

Update transaction popup view #1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
PierreTrehet wants to merge 7 commits into
base: main
Choose a base branch
from
Open

Update transaction popup view #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
3665d8a
Update signing UI with modal summary
PierreTrehet Jun 13, 2025
8ef9b32
Adjust signing modal layout
PierreTrehet Jun 13, 2025
f07a720
Remove mx-4 from modal body
PierreTrehet Jun 13, 2025
e5b1754
Use confirm popup container
PierreTrehet Jun 13, 2025
a54993d
Show transaction summary without confirm container
PierreTrehet Jun 13, 2025
edc4965
Remove remaining mx-4 classes
PierreTrehet Jun 13, 2025
90569f4
Adjust signing popup layout
PierreTrehet Jun 13, 2025
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
2 changes: 1 addition & 1 deletion src/popup/RequestIndex.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@ function RequestIndex({
icon={faArrowAltCircleLeft as IconProp}
onClick={prevClick}
/>
<div className="mx-4">
<div>
<span>{index + 1}</span>
<span>/{totalItems}</span>
</div>
Expand Down
27 changes: 24 additions & 3 deletions src/popup/Signing/Extrinsic.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ import { PORT_EXTENSION } from "../../extension-base/defaults";
import { useTheme } from "../context/ThemeContext";
import { transactionUtils } from "@reef-chain/util-lib";
import { ProviderContext } from "../contexts";
import Uik from "@reef-chain/ui-kit";

interface Decoded {
args: AnyJson | null;
Expand Down Expand Up @@ -160,9 +161,27 @@ function Extrinsic({
}, [provider])

const { isDarkMode } = useTheme();
const [showDetails, setShowDetails] = useState(false);

return (
<table className={`flex overflow-x-scroll ${isDarkMode ? "" : "text-black"} extrinsic-data-table`}>
<tbody>
<div>
<div>
{signatureResponse?.methodName && (
<div className="font-bold">
{signatureResponse.methodName.split("(")[0]}
</div>
)}
{signatureResponse?.info && <div>{signatureResponse.info}</div>}
<Uik.Button
text={showDetails ? "Hide details" : "Show details"}
size="small"
onClick={() => setShowDetails(!showDetails)}
className="uik-button--small mt-2"
/>
</div>
{showDetails && (
<table className={`flex overflow-x-scroll ${isDarkMode ? "" : "text-black"} extrinsic-data-table`}>
<tbody>
{url !== PORT_EXTENSION && (
<tr>
<td className="extrinsic-table-label">From</td>
Expand Down Expand Up @@ -218,7 +237,9 @@ function Extrinsic({
<td className="pl-4">{mortalityAsString(era, blockNumber)}</td>
</tr>
</tbody>
</table>
</table>
)}
</div>
);
}

Expand Down
6 changes: 2 additions & 4 deletions src/popup/Signing/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,14 +9,12 @@ import Request from "./Request";
import RequestIndex from "../RequestIndex";
import Account from "../Accounts/Account";
import { Loading } from "../components/Loading";
import { useTheme } from "../context/ThemeContext";

interface Props {
requests: SigningRequest[];
}

export const Signing = ({ requests }: Props): JSX.Element => {
const { isDarkMode } = useTheme();
const [requestIndex, setRequestIndex] = useState(0);
const [isTransaction, setIsTransaction] = useState(false);

Expand Down Expand Up @@ -54,7 +52,7 @@ export const Signing = ({ requests }: Props): JSX.Element => {

return requests.length && requests[requestIndex] ? (
<>
<div className={`text-center text-lg font-bold ${isDarkMode ? "text--dark-mode" : "text-black"}`}>
<div className="text-center text-lg font-bold text-black">
<span>{isTransaction ? "Transaction" : "Sign message"}</span>
{requests.length > 1 && (
<RequestIndex
Expand All @@ -65,7 +63,7 @@ export const Signing = ({ requests }: Props): JSX.Element => {
/>
)}
</div>
<div className="flex flex-col align-middle justify-center request-page">
<div className="uik-modal__popup mx-4">
<Account
account={requests[requestIndex].account}
showCopyAddress={true}
Expand Down