Skip to content
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

Group add msg buttons #166

Merged
merged 2 commits into from
Aug 21, 2023
Merged

Group add msg buttons #166

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
05a60dc
Add h-padding. Add hover-focus style
abefernan Jul 28, 2023
7626f5d
New layout for buttons
abefernan Jul 28, 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
145 changes: 113 additions & 32 deletions components/forms/CreateTxForm/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -152,38 +152,90 @@ const CreateTxForm = ({ router, senderAddress, accountOnChain }: CreateTxFormPro
onChange={({ target }) => setMemo(target.value)}
/>
</div>
<StackableContainer>
<Button label="Add MsgSend" onClick={() => addMsgType(MsgTypeUrls.Send)} />
<Button label="Add MsgDelegate" onClick={() => addMsgType(MsgTypeUrls.Delegate)} />
<Button label="Add MsgUndelegate" onClick={() => addMsgType(MsgTypeUrls.Undelegate)} />
<Button
label="Add MsgBeginRedelegate"
onClick={() => addMsgType(MsgTypeUrls.BeginRedelegate)}
/>
<Button
label="Add MsgWithdrawDelegatorReward"
onClick={() => addMsgType(MsgTypeUrls.WithdrawDelegatorReward)}
/>
<Button
label="Add MsgSetWithdrawAddress"
onClick={() => addMsgType(MsgTypeUrls.SetWithdrawAddress)}
/>
<Button
label="Add MsgCreateVestingAccount"
onClick={() => addMsgType(MsgTypeUrls.CreateVestingAccount)}
/>
<Button label="Add MsgTransfer" onClick={() => addMsgType(MsgTypeUrls.Transfer)} />
<Button label="Add MsgExecuteContract" onClick={() => addMsgType(MsgTypeUrls.Execute)} />
<Button
label="Add MsgInstantiateContract"
onClick={() => addMsgType(MsgTypeUrls.Instantiate)}
/>
<Button
label="Add MsgInstantiateContract2"
onClick={() => addMsgType(MsgTypeUrls.Instantiate2)}
/>
<Button label="Add MsgMigrateContract" onClick={() => addMsgType(MsgTypeUrls.Migrate)} />
</StackableContainer>
<h4>Add New Msg</h4>
<div className="btn-cluster-grid">
<div className="btn-cluster">
<label>Bank</label>
<ul>
<li>
<Button label="Send" onClick={() => addMsgType(MsgTypeUrls.Send)} />
</li>
</ul>
</div>
<div className="btn-cluster">
<label>IBC</label>
<ul>
<li>
<Button label="Transfer" onClick={() => addMsgType(MsgTypeUrls.Transfer)} />
</li>
</ul>
</div>
<div className="btn-cluster">
<label>Vesting</label>
<ul>
<li>
<Button
label="CreateVestingAccount"
onClick={() => addMsgType(MsgTypeUrls.CreateVestingAccount)}
/>
</li>
</ul>
</div>
<div className="btn-cluster">
<label>Staking</label>
<ul>
<li>
<Button label="Delegate" onClick={() => addMsgType(MsgTypeUrls.Delegate)} />
</li>
<li>
<Button label="Undelegate" onClick={() => addMsgType(MsgTypeUrls.Undelegate)} />
</li>
<li>
<Button
label="BeginRedelegate"
onClick={() => addMsgType(MsgTypeUrls.BeginRedelegate)}
/>
</li>
</ul>
<ul>
<li>
<Button
label="WithdrawDelegatorReward"
onClick={() => addMsgType(MsgTypeUrls.WithdrawDelegatorReward)}
/>
</li>
<li>
<Button
label="SetWithdrawAddress"
onClick={() => addMsgType(MsgTypeUrls.SetWithdrawAddress)}
/>
</li>
</ul>
</div>
<div className="btn-cluster">
<label>CosmWasm</label>
<ul>
<li>
<Button
label="InstantiateContract"
onClick={() => addMsgType(MsgTypeUrls.Instantiate)}
/>
</li>
<li>
<Button
label="InstantiateContract2"
onClick={() => addMsgType(MsgTypeUrls.Instantiate2)}
/>
</li>
<li>
<Button label="ExecuteContract" onClick={() => addMsgType(MsgTypeUrls.Execute)} />
</li>
<li>
<Button label="MigrateContract" onClick={() => addMsgType(MsgTypeUrls.Migrate)} />
</li>
</ul>
</div>
</div>
{showCreateTxError ? (
<StackableContainer lessMargin lessPadding>
<p className="multisig-error">
Expand Down Expand Up @@ -215,6 +267,35 @@ const CreateTxForm = ({ router, senderAddress, accountOnChain }: CreateTxFormPro
font-size: 16px;
text-align: center;
}
.btn-cluster-grid {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
justify-content: flex-start;
align-items: center;
}
.btn-cluster {
padding: 0.5rem;
background: rgba(255, 255, 255, 0.05);
border-radius: 10px;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.btn-cluster label {
text-decoration: underline;
}
.btn-cluster ul {
list-style: none;
margin: 0;
padding: 0;

display: flex;
flex-wrap: wrap;
gap: 0.5rem;
justify-content: flex-start;
align-items: center;
}
`}</style>
</StackableContainer>
);
Expand Down
7 changes: 5 additions & 2 deletions components/inputs/Button.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ const Button = (props: Props) => (
border-radius: 10px;
background: rgba(255, 255, 255, 0.15);
border: none;
padding: 12px 0;
padding: 12px;
font-size: 1rem;
color: white;
font-style: italic;
Expand All @@ -49,7 +49,10 @@ const Button = (props: Props) => (
.primary {
border: 2px solid white;
}

button:hover,
button:focus {
outline: 1px solid white;
}
button:first-child {
margin-top: 0;
}
Expand Down