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.

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

Multi-Sig MultiSend Helper UI #7

Open
wants to merge 28 commits into
base: feature/hosted-version
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
28 commits
Select commit Hold shift + click to select a range
b107953
Added test all component for wallet providers to use
codebycarson Oct 23, 2023
5a04f88
Added wallet name and version number
codebycarson Oct 24, 2023
933f0cd
improved UI of full wallet test
codebycarson Oct 24, 2023
7c3d9f3
WIP Started multisig
codebycarson Dec 10, 2023
45986d1
WIP mutli sign aligned with fuzio
codebycarson Dec 16, 2023
9e81d49
Add signer data
besated Dec 18, 2023
15304b5
(WIP) Cleaned up UI and added CSV upload
codebycarson Dec 22, 2023
32ccb22
Finished multisig, ready for testing
codebycarson Dec 23, 2023
d2c8c5d
Added ability to manually enter address/recpients
codebycarson Dec 24, 2023
0670ccb
Added loading to broadcast button
codebycarson Dec 26, 2023
5705f8c
Improved UI/UX
codebycarson Jan 10, 2024
868fa3c
Added ability to upload "sei" spreadsheets and multiple denom sheets
codebycarson Jan 11, 2024
fb21e31
Bump multisend gas price
besated Jan 16, 2024
18596f2
Set gas limit to 400k
besated Jan 16, 2024
b6f3547
Merge pull request #8 from sei-protocol/feat/multisig-bryan
besated Jan 16, 2024
0182021
recipient form working
mj850 Jan 31, 2024
60fd987
Create multisig
mj850 Feb 1, 2024
ecbe905
move recipients page to separate component
mj850 Feb 1, 2024
0143c69
Create Account flow working
mj850 Feb 2, 2024
36a3877
add back button on lookup
mj850 Feb 2, 2024
a48b9e3
add ability to add memo
mj850 Feb 2, 2024
ee01812
comments
mj850 Feb 3, 2024
5f6a9f7
comments pt2
mj850 Feb 3, 2024
a886d01
Merge pull request #9 from sei-protocol/mj/multisig1
mj850 Feb 5, 2024
3d5327c
Ran prettier on entire app
codebycarson Feb 23, 2024
a8f34e4
(WIP) Cleaned up UI slightly, changed variables to use recoil, create…
codebycarson Feb 24, 2024
7586136
Added chain id to link, fixed console errors
codebycarson Feb 25, 2024
e5b3d45
fix fee issue
mj850 Apr 8, 2024
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: 2 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -22,3 +22,5 @@ dist-ssr
*.njsproj
*.sln
*.sw?


1 change: 1 addition & 0 deletions admin1_signedTx.json
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
{"signatures":[{"public_key":{"@type":"/cosmos.crypto.secp256k1.PubKey","key":"Al8/oZlzNJaFewLagIFGalV4wgXCfP5lKBoTnl1ncsBc"},"data":{"single":{"mode":"SIGN_MODE_LEGACY_AMINO_JSON","signature":"fnUyDI8qRoQZT2CoOMYvB/CzKHXMPBqti7/Wx3LgwY4mSmMHacSJ5pxFDjwHaJyEk8VP16o3K2gWums+SHJ5WQ=="}},"sequence":"0"}]}
1 change: 1 addition & 0 deletions admin2_signedTx.json
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
{"signatures":[{"public_key":{"@type":"/cosmos.crypto.secp256k1.PubKey","key":"A6rntd4h/aCLDqfiIK85cnxF4kTihe/Muzg64JFQgj+q"},"data":{"single":{"mode":"SIGN_MODE_LEGACY_AMINO_JSON","signature":"3yl8YThZ7Q3O0+1h7lKXrTbV/EjNS59U64lpMVud5Uht86GpV5wWIUn5wPybTwXnfAKHz3Lt/8Fm1OXyjqxMBg=="}},"sequence":"0"}]}
5 changes: 5 additions & 0 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,11 @@
</head>
<body>
<div id="root"></div>
<script>
if (global === undefined) {
var global = window;
}
</script>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>
15 changes: 12 additions & 3 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -9,27 +9,36 @@
"preview": "vite preview"
},
"dependencies": {
"@sei-js/core": "^3.1.0",
"@esbuild-plugins/node-globals-polyfill": "^0.2.3",
"@react-icons/all-files": "^4.1.0",
"@sei-js/core": "^3.2.1",
"@sei-js/proto": "^3.1.0",
"@sei-js/react": "^3.1.0",
"@sei-js/react": "^3.2.0",
"classnames": "^2.3.2",
"crypto-browserify": "^3.12.0",
"papaparse": "^5.4.1",
"react": "^18.2.0",
"react-code-blocks": "^0.1.4",
"react-code-blocks": "0.1.4",
"react-dom": "^18.2.0",
"react-dropdown": "^1.11.0",
"react-icons": "^4.6.0",
"react-json-view": "^1.21.3",
"react-modern-drawer": "^1.2.2",
"react-router-dom": "^6.22.1",
"react-toastify": "^9.1.1",
"recoil": "^0.7.6",
"sass": "^1.63.6"
},
"devDependencies": {
"@types/papaparse": "^5.3.14",
"@types/react": "^18.0.22",
"@types/react-dom": "^18.0.7",
"@vitejs/plugin-react": "^2.2.0",
"autoprefixer": "^10.4.17",
"dotenv": "^16.3.1",
"postcss": "^8.4.35",
"prettier": "^3.0.3",
"tailwindcss": "^3.4.1",
"typescript": "^4.6.4",
"vite": "^4.4.11"
}
Expand Down
6 changes: 6 additions & 0 deletions postcss.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
export default {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}
1 change: 1 addition & 0 deletions signedTx.json
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
{"body":{"messages":[{"@type":"/cosmos.bank.v1beta1.MsgSend","from_address":"sei18ec4x56fc74rnxgv34mj8uua6dtsxy5dlvfemt","to_address":"sei1vpdckf2ws78glqu38pfdggvd0j65ynfn2z3yte","amount":[{"denom":"usei","amount":"10"}]}],"memo":"","timeout_height":"0","extension_options":[],"non_critical_extension_options":[]},"auth_info":{"signer_infos":[{"public_key":{"@type":"/cosmos.crypto.multisig.LegacyAminoPubKey","threshold":2,"public_keys":[{"@type":"/cosmos.crypto.secp256k1.PubKey","key":"A6rntd4h/aCLDqfiIK85cnxF4kTihe/Muzg64JFQgj+q"},{"@type":"/cosmos.crypto.secp256k1.PubKey","key":"Al8/oZlzNJaFewLagIFGalV4wgXCfP5lKBoTnl1ncsBc"}]},"mode_info":{"multi":{"bitarray":{"extra_bits_stored":2,"elems":"wA=="},"mode_infos":[{"single":{"mode":"SIGN_MODE_LEGACY_AMINO_JSON"}},{"single":{"mode":"SIGN_MODE_LEGACY_AMINO_JSON"}}]}},"sequence":"0"}],"fee":{"amount":[{"denom":"usei","amount":"100000"}],"gas_limit":"200000","payer":"","granter":""}},"signatures":["CkDfKXxhOFntDc7T7WHuUpetNtX8SM1Ln1TriWkxW53lSG3zoalXnBYhSfnA/JtPBed8AofPcu3/wWbU5fKOrEwGCkB+dTIMjypGhBlPYKg4xi8H8LModcw8Gq2Lv9bHcuDBjiZKYwdpxInmnEUOPAdonISTxU/XqjcraBa6az5IcnlZ"]}
116 changes: 68 additions & 48 deletions src/App.css
Original file line number Diff line number Diff line change
@@ -1,30 +1,31 @@
@tailwind base;
@tailwind components;
@tailwind utilities;

html {
width: 100%;
height: 100%;
background-color: var(--background-color);
width: 100%;
height: 100%;
background-color: var(--background-color);
}

#root {
background-color: var(--white-6);
background-color: var(--white-6);
}

#root,
body {
padding: 0;
margin: 0;
width: 100%;
height: 100%;
max-width: 100%;
max-height: 100%;
flex-direction: column;
padding: 0;
margin: 0;
width: 100%;
height: 100%;
max-width: 100%;
max-height: 100%;
}

div {
display: flex;
flex-direction: column;
}

p {
display: flex;
flex-direction: column;
display: flex;
}

p,
Expand All @@ -36,52 +37,71 @@ h5,
h6,
a,
div {
color: var(--text-color);
font-family: sans-serif;
color: var(--text-color);
font-family: sans-serif;
}

input {
color: white;
color: white;
}

* {
box-sizing: border-box;
padding: 0;
margin: 0;
box-sizing: border-box;
padding: 0;
margin: 0;
}

:root {
--background-color: #101010;
--text-color: rgba(255, 255, 255, 0.88);
--input-placeholder: #a4a4a4;
--light-grey: #949494;
--dark-grey: #343434;
--red: #ff6666;
--green: #9de187;
--white-1: rgba(239, 239, 239, 0.01);
--white-3: rgba(239, 239, 239, 0.03);
--white-6: rgba(239, 239, 239, 0.06);
--white-12: rgba(239, 239, 239, 0.12);
--white-24: rgba(239, 239, 239, 0.24);
--white-48: rgba(239, 239, 239, 0.48);
--white-80: rgba(239, 239, 239, 0.8);
--white-90: rgba(239, 239, 239, 0.9);
--black-20: rgba(0, 0, 0, 0.2);
--black-60: rgba(0, 0, 0, 0.6);
--background-color: #101010;
--text-color: rgba(255, 255, 255, 0.88);
--input-placeholder: #a4a4a4;
--light-grey: #949494;
--dark-grey: #343434;
--red: #ff6666;
--green: #9de187;
--white-1: rgba(239, 239, 239, 0.01);
--white-3: rgba(239, 239, 239, 0.03);
--white-6: rgba(239, 239, 239, 0.06);
--white-12: rgba(239, 239, 239, 0.12);
--white-24: rgba(239, 239, 239, 0.24);
--white-48: rgba(239, 239, 239, 0.48);
--white-80: rgba(239, 239, 239, 0.8);
--white-90: rgba(239, 239, 239, 0.9);
--black-20: rgba(0, 0, 0, 0.2);
--black-60: rgba(0, 0, 0, 0.6);
}

.app {
align-items: center;
height: 100%;
flex-direction: column;
align-items: center;
height: 100%;
}

.appHeader {
flex-direction: row;
justify-content: space-between;
align-items: center;
height: 64px;
background-color: var(--white-12);
width: 100%;
padding: 1rem;
flex-direction: row;
justify-content: space-between;
align-items: center;
height: 64px;
background-color: var(--white-12);
width: 100%;
padding: 1rem;
}

.Toastify__toast-container .Toastify__toast--success {
background-color: green !important;
color: white !important;
}

.Toastify__toast-container .Toastify__toast--error {
background-color: red !important;
color: white !important;
}

.Toastify__toast-container .Toastify__toast--info {
background-color: white !important;
color: black !important;

& > div > div {
color: black !important;
}
}
5 changes: 2 additions & 3 deletions src/App.tsx
Original file line number Diff line number Diff line change
@@ -1,15 +1,14 @@
import './App.css';
import { RecoilRoot } from 'recoil';
import { ToastContainer } from 'react-toastify';
import { toast, ToastContainer } from 'react-toastify';
import 'react-dropdown/style.css';
import 'react-toastify/dist/ReactToastify.css';

import SeiExample from './SeiExample';

function App() {
return (
<RecoilRoot>
<ToastContainer theme='dark' />
<ToastContainer position={toast.POSITION.BOTTOM_RIGHT} />
<SeiExample />
</RecoilRoot>
);
Expand Down
4 changes: 3 additions & 1 deletion src/SeiExample.module.sass
Original file line number Diff line number Diff line change
Expand Up @@ -8,13 +8,15 @@
width: 140px

.appContent
flex-direction: column
flex: 1
width: 100%
align-items: center
gap: 2rem
overflow-y: auto
overflow: auto
max-height: 100%


.sidebar
flex-direction: column
align-items: flex-start
Expand Down
59 changes: 24 additions & 35 deletions src/SeiExample.tsx
Original file line number Diff line number Diff line change
@@ -1,22 +1,15 @@
import React, { useState } from 'react';
import { SeiWalletProvider, WalletConnectButton } from '@sei-js/react';
import { useRecoilValue } from 'recoil';

import { AccountInfo, ChainInfo, DexModule, SendTokens, WasmModule } from './components';
import { AccountInfo, ChainInfo, DexModule, MultiSig, SendTokens, WasmModule } from './components';
import { selectedChainConfigSelector } from './recoil';
import './common.css';
import styles from './SeiExample.module.sass';
import WalletVerification from './components/WalletVerification/WalletVerification';
import {
ACCOUNT_ROUTE,
APP_ROUTES,
AppRoute,
CHAIN_INFO_ROUTE,
DEX_MODULE_ROUTE,
WALLET_VERIFICATION_ROUTE,
WASM_MODULE_ROUTE
} from './config';
import { ACCOUNT_ROUTE, APP_ROUTES, AppRoute, CHAIN_INFO_ROUTE, DEX_MODULE_ROUTE, MULTI_SIG_ROUTE, WALLET_VERIFICATION_ROUTE, WASM_MODULE_ROUTE } from './config';
import cn from 'classnames';
import { SeiWalletProvider, WalletConnectButton } from '@sei-js/react';
import { Link, Route, Routes } from 'react-router-dom';

const SeiExample = () => {
const selectedChainConfigUrls = useRecoilValue(selectedChainConfigSelector);
Expand All @@ -26,40 +19,36 @@ const SeiExample = () => {
const renderItem = (link: AppRoute) => {
const isSelectedItem = link === selectedPage;
return (
<p className={cn(styles.sidebarItem, { [styles.sidebarItemSelected] : isSelectedItem })} onClick={() => setSelectedPage(link)}>{link.title}</p>
)
}
<Link key={link.route} className={cn(styles.sidebarItem, { [styles.sidebarItemSelected]: isSelectedItem })} to={link.route}>
{link.title}
</Link>
);
};

const renderRoute = () => {
switch(selectedPage) {
case CHAIN_INFO_ROUTE:
return <ChainInfo />
case WALLET_VERIFICATION_ROUTE:
return <WalletVerification />
case ACCOUNT_ROUTE:
return <AccountInfo />
case WASM_MODULE_ROUTE:
return <WasmModule />
case DEX_MODULE_ROUTE:
return <DexModule />
}
}
return (
<Routes>
<Route path={CHAIN_INFO_ROUTE.route} element={<ChainInfo />} />
<Route path={MULTI_SIG_ROUTE.route} element={<MultiSig />} />
<Route path={WALLET_VERIFICATION_ROUTE.route} element={<WalletVerification />} />
<Route path={DEX_MODULE_ROUTE.route} element={<DexModule />} />
<Route path={WASM_MODULE_ROUTE.route} element={<WasmModule />} />
<Route path={ACCOUNT_ROUTE.route} element={<AccountInfo />} />
</Routes>
);
};

return (
<SeiWalletProvider chainConfiguration={selectedChainConfigUrls} wallets={['compass', 'fin', 'keplr' ] }>
<SeiWalletProvider chainConfiguration={selectedChainConfigUrls} wallets={['compass', 'fin', 'keplr', 'leap']}>
<div className='app'>
<div className='appHeader'>
<div className={styles.headerItem}/>
<div className={styles.headerItem} />
<h2>@sei-js playground</h2>
<WalletConnectButton buttonClassName='walletButton' />
</div>
<div className={styles.content}>
<div className={styles.sidebar}>
{APP_ROUTES.map(renderItem)}
</div>
<div className={styles.appContent}>
{renderRoute()}
</div>
<div className={styles.sidebar}>{APP_ROUTES.map(renderItem)}</div>
<div className={styles.appContent}>{renderRoute()}</div>
</div>
<SendTokens />
</div>
Expand Down
5 changes: 5 additions & 0 deletions src/common.css
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@
}

.cardContent {
flex-direction: column;
width: 100%;
gap: 2rem;
margin-top: 1rem;
Expand All @@ -24,6 +25,10 @@
width: 360px;
}

.Dropdown-menu {
flex-direction: column;
}

.Dropdown-control {
border-radius: 6px;
cursor: pointer;
Expand Down
Loading