diff --git a/apps/astraplusplus/widget/Common/Components/Button.jsx b/apps/astraplusplus/widget/Common/Components/Button.jsx
new file mode 100644
index 0000000..cf55f30
--- /dev/null
+++ b/apps/astraplusplus/widget/Common/Components/Button.jsx
@@ -0,0 +1,61 @@
+const children = props.children ?? "Button";
+const onClick = props.onClick ?? (() => {});
+const href = props.href;
+const variant = props.variant ?? "primary"; // primary, success, danger
+
+const tag = href ? "a" : "button";
+
+const Wrapper = styled[tag]`
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ gap: 8px;
+ border-radius: 100px;
+ font-weight: 600;
+ font-size: 14px;
+ line-height: 15px;
+ text-align: center;
+ cursor: pointer;
+ white-space: nowrap;
+ padding: 12px 32px;
+ border: 1px solid #d7dbdf;
+
+ color: ${(p) => {
+ switch (p.variant) {
+ case "primary":
+ return "#11181c";
+ case "success":
+ return "#000";
+ case "danger":
+ return "#fff";
+ }
+ }} !important;
+ background: ${(p) => {
+ switch (p.variant) {
+ case "primary":
+ return "#FBFCFD";
+ case "success":
+ return "#59e692";
+ case "danger":
+ return "#e5484d";
+ }
+ }};
+
+ &:hover,
+ &:focus {
+ text-decoration: none;
+ outline: none;
+ opacity: 0.9;
+ }
+
+ &:disabled {
+ opacity: 0.7;
+ cursor: not-allowed;
+ }
+`;
+
+return (
+ onClick} href={href} variant={variant} {...props}>
+ {children}
+
+);
\ No newline at end of file
diff --git a/apps/astraplusplus/widget/Common/Components/Markdown.jsx b/apps/astraplusplus/widget/Common/Components/Markdown.jsx
new file mode 100644
index 0000000..7c5edff
--- /dev/null
+++ b/apps/astraplusplus/widget/Common/Components/Markdown.jsx
@@ -0,0 +1,51 @@
+const initialText = props.initialText ?? "# Hello World\n\n";
+const height = props.height ?? "500px";
+
+const code = `
+
+
+
+
+
+
+
+
+
+`;
+
+return (
+
+);
\ No newline at end of file
diff --git a/apps/astraplusplus/widget/Common/Components/Select.jsx b/apps/astraplusplus/widget/Common/Components/Select.jsx
new file mode 100644
index 0000000..b2a2f6c
--- /dev/null
+++ b/apps/astraplusplus/widget/Common/Components/Select.jsx
@@ -0,0 +1,198 @@
+const label = props.label ?? "Label";
+const noLabel = props.noLabel ?? false;
+const placeholder = props.placeholder ?? "Select an option";
+const value = props.value ?? "";
+const options = props.options ?? [];
+const onChange = props.onChange ?? (() => {});
+const validate = props.validate ?? (() => {});
+const error = props.error ?? "";
+
+const Container = styled.div`
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ justify-content: flex-start;
+ padding: 0px;
+ gap: 0.45em;
+ width: 100%;
+`;
+
+const Label = styled.label`
+ font-size: 14px;
+ font-weight: 500;
+ line-height: 1.2;
+ color: #6c757d;
+`;
+
+const Error = styled.span`
+ display: inline-block;
+ font-style: normal;
+ font-weight: 400;
+ font-size: 0.75em;
+ line-height: 1.25em;
+ color: #ff4d4f;
+ height: 0;
+ overflow: hidden;
+ transition: height 0.3s ease-in-out;
+
+ &.show {
+ height: 1.25em;
+ }
+`;
+
+const Input = styled.div`
+ box-sizing: border-box;
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: space-between;
+ padding: 0.5em 0.75em;
+ gap: 0.5em;
+ background: #ffffff;
+ border: 1px solid #d0d5dd;
+ box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
+ border-radius: 4px;
+ color: #101828;
+ width: 100%;
+`;
+
+const Placeholder = styled.span`
+ color: #a0a3a8;
+`;
+
+const scaleOut = styled.keyframes`
+ from {
+ transform: scaleY(0);
+ }
+ to {
+ transform: scaleY(1);
+ }
+`;
+
+const Content = styled.div`
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ justify-content: flex-start;
+ padding: 0;
+ gap: 0.5em;
+ width: 100%;
+ border: 1px solid #d0d5dd;
+ border-radius: 4px;
+ background: #ffffff;
+ z-index: 3 !important;
+
+ /* &[data-state="open"] { */
+ /* animation: ${scaleOut} 0.2s ease-in-out; */
+ /* } */
+ /**/
+ /* &[data-state="closed"] { */
+ /* animation: ${scaleOut} 0.2s ease-in-out reverse; */
+ /* } */
+`;
+
+const Viewport = styled.div`
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ justify-content: flex-start;
+ padding: 0;
+ width: 100%;
+`;
+
+const Item = styled.button`
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: space-between;
+ padding: 0.5em 0.75em;
+ gap: 0.5em;
+ width: 100%;
+ cursor: pointer;
+ background: transparent;
+ border: none;
+ transition: background 0.2s ease-in-out;
+
+ &:nth-child(n + 1) {
+ border-top: 1px solid #d0d5dd;
+ }
+
+ &:hover {
+ background: #d0d5dd;
+ boder: none;
+ }
+
+ &:focus {
+ outline: none;
+ }
+`;
+
+return (
+
+ {noLabel ? <>> : }
+
+ onChange(options.find((option) => option.value === value))
+ }
+ >
+
+
+ {placeholder}}
+ />
+
+
+
+
+
+
+
+
+
+
+ {props.options.map(({ text, value }) => (
+
+ -
+ {text}
+
+
+
+
+
+ ))}
+
+
+
+
+
+
+);
\ No newline at end of file
diff --git a/apps/astraplusplus/widget/Common/Components/TokenAmount.jsx b/apps/astraplusplus/widget/Common/Components/TokenAmount.jsx
new file mode 100644
index 0000000..d66dabf
--- /dev/null
+++ b/apps/astraplusplus/widget/Common/Components/TokenAmount.jsx
@@ -0,0 +1,98 @@
+const address = props.address ?? ""; // Empty string for NEAR
+const amountWithDecimals = props.amountWithDecimals ?? 0;
+const amountWithoutDecimals = props.amountWithoutDecimals; // Automatically converted to the correct value
+
+const isNEAR = address === "" || address.toLowerCase() === "near";
+
+let ftMetadata = {
+ symbol: "NEAR",
+ decimals: 24,
+};
+
+if (!isNEAR) {
+ ftMetadata = Near.view(address, "ft_metadata", {});
+ if (ftMetadata === null) return null;
+}
+
+let amount = amountWithDecimals;
+if (amountWithoutDecimals !== undefined) {
+ amount = Big(amountWithoutDecimals)
+ .div(Big(10).pow(ftMetadata.decimals))
+ .toString();
+}
+
+const NEAR = () => {
+ return (
+
+ );
+};
+
+const Wrapper = styled.div`
+ display: inline-grid;
+ grid-template-columns: 32px 1fr;
+ grid-template-rows: 1fr 1fr;
+ grid-column-gap: 8px;
+
+ .icon {
+ grid-row: span 2;
+ }
+ .amount {
+ font-size: 18px;
+ font-weight: 500;
+ line-height: 1.15;
+ }
+ .symbol {
+ font-size: 12px;
+ font-weight: 500;
+ line-height: 1;
+ }
+`;
+return (
+
+
+
+ Token address:
+ {address}
+
+ }
+ show={address === "" ? false : undefined}
+ show={isNEAR ? false : undefined}
+ >
+ {!isNEAR ? (
+
+ ) : (
+
+ )}
+
+
+ {amount}
+ {ftMetadata.symbol}
+
+);
\ No newline at end of file
diff --git a/apps/astraplusplus/widget/Common/Modals/ProposalArguments.jsx b/apps/astraplusplus/widget/Common/Modals/ProposalArguments.jsx
index 76a76ce..f052b52 100644
--- a/apps/astraplusplus/widget/Common/Modals/ProposalArguments.jsx
+++ b/apps/astraplusplus/widget/Common/Modals/ProposalArguments.jsx
@@ -201,7 +201,7 @@ if (proposal_type === "Transfer")
Amount
Amount
Pre Vote Bond Amount
Active Queue Bond Amount
Deposit
Amount
)
diff --git a/apps/astraplusplus/widget/DAO/Proposal/Common/CongressHouseDropdown.jsx b/apps/astraplusplus/widget/DAO/Proposal/Common/CongressHouseDropdown.jsx
index 5b620f2..c8036b2 100644
--- a/apps/astraplusplus/widget/DAO/Proposal/Common/CongressHouseDropdown.jsx
+++ b/apps/astraplusplus/widget/DAO/Proposal/Common/CongressHouseDropdown.jsx
@@ -23,7 +23,7 @@ State.init({
return (
{state.error}
}
{onClose && (
{state.error}
}
{onClose && (
{state.error}
}
{onClose && (
{state.error}
}
{onClose && (
Memo
onChangeMemo(value),
@@ -560,7 +560,7 @@ return (
{state.error && {state.error}
}
{onClose && (
{state.error}
}
{onClose && (
{state.error}
}
{onClose && (
{state.error}
}
{onClose && (
{state.error}
}
{onClose && (
{state.error}
}
{onClose && (
{state.error}
}
{onClose && (
{state.error}
}
{onClose && (