Skip to content
This repository has been archived by the owner on Jul 22, 2024. It is now read-only.

Commit

Permalink
feat: wallet connect and initial multisig creation ui (#16)
Browse files Browse the repository at this point in the history
  • Loading branch information
karl-kallavus authored Feb 17, 2023
1 parent 75cd351 commit a40a05e
Show file tree
Hide file tree
Showing 29 changed files with 645 additions and 129 deletions.
31 changes: 15 additions & 16 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -99,24 +99,30 @@ Some functionality of the Multisig tool requires off-chain data storage. Details
## Support

### Media

- Desktop

### Browser

- Google Chrome (latest released version, v109+)

### Wallets

- [Talisman - Polkadot Wallet](https://chrome.google.com/webstore/detail/talisman-polkadot-wallet/fijngjgcjhjmmpcmkeiomlglpeiijkld)
- [Polkadot{.js} extension](https://chrome.google.com/webstore/detail/polkadot%7Bjs%7D-extension/mopnmbcafieddcagagdcbnhejhlodfdd)

### Testing chains

- [Local (polkadot v0.9.37)](https://github.com/paritytech/polkadot)
- Testnet Westend
- Testnet Rococo

## Validation rules (tbd)

- What are the validation rules of the each input/form and the UX behavior?

## User support (tbd)

- When money is involved, it's important to ensure that the user understands what they are doing and how they interpret the actions taken.
- info / docs / tooltips / icons / articles / videos / readmes / examples

Expand All @@ -125,8 +131,8 @@ Some functionality of the Multisig tool requires off-chain data storage. Details
## Transaction state

# Other considerations / NFRs
- Compliance or legal requirements. Real money can be involved (mainnet). Terms of Service? (tbd)

- Compliance or legal requirements. Real money can be involved (mainnet). Terms of Service? (tbd)

# Project scope

Expand Down Expand Up @@ -181,64 +187,57 @@ The below list includes all other features of the multisig tool not currently pl

<a href="url"><img src="https://user-images.githubusercontent.com/7630720/216567452-95922450-5921-4cdd-b7b0-5df8dfcd9648.png" width="50%" ></a>


## Create a multisig with signatory proxies and stash

1. As Alice, I want to create a new multisig and enforce signatory proxies, so that each individual signatory can be replaced in the future (should the need arise) without extra costs for re-creating the whole multisig. In the event of a bad actor among the signatories, I will not be able to replace them unilaterally, requiring the creation of a new multisig.
2. As Alice, I want to create Pure Proxy that will become the "stash" in the multisig set-up, so that I can attach the multisig set-up to the stash and remove myself as its controller, so the multisig will only have control over the Stash.
3. As Alice, I want to create a Pure Proxy for myself, Bob and Charlie and remove myself as the controller of Bob and Charlie's Pure Proxies, granting them exclusive control over their proxies.
4. As Alice, I want to configure the future multisig by adding Bob and Charlie Pure Proxies as signatories and setting a signatory threshold, so that the multisig has valid governance rules.
4. As Alice, I want to configure the future multisig by adding Bob and Charlie Pure Proxies as signatories and setting a signatory threshold, so that the multisig has valid governance rules.
5. As Alice, I want to see a summary of my multisig configuration, so that I can confirm all the details before committing the configuration and paying the associated fees.
6. As Alice, Bob or Charlie, I want to view the newly created multisig and related proxies, so that I can transact from it.

[*Ongoing Capi related discussion](https://github.com/paritytech/capi/issues/525)
[\*Ongoing Capi related discussion](https://github.com/paritytech/capi/issues/525)

<a href="url"><img src="https://user-images.githubusercontent.com/7630720/216567471-04ba7847-34fe-42c5-a5ff-46c08930ec20.png" width="60%" ></a>


## Edit Multisig

1. As Alice, I want to select a multisig which I intend to edit so that I can propose changes.
1. As Alice, I want to select a multisig which I intend to edit so that I can propose changes.
2. As Alice, I want to capture my proposed changes to the multisig configuration so that I can submit the proposal to the multisig for signature/approval. (This may include adding/ removing/ changing signatories and/or updating the threshold value).
3. As Alice, I want to sign and submit my proposal to the multisig so that it can be approved and the new governance model can take effect.
4. As Bob and Charlie, I want to view the proposed changes so that I can decide whether to approve or reject them.
5. Approve/Reject
a. As Bob and Charlie, I want to sign and approve the proposed changes so that the new configuration can be implemented.
b. As Bob and Charlie, I want to reject the proposed changes so that the new configuration is discarded and not implemented.
a. As Bob and Charlie, I want to sign and approve the proposed changes so that the new configuration can be implemented.
b. As Bob and Charlie, I want to reject the proposed changes so that the new configuration is discarded and not implemented.
6. As Alice, I want to be notified that my proposed changes have either been approved or rejected.


## Submit Transaction

1. As Alice, I want to select a multisig from which I intend to transact so that I can submit a new transaction.
2. As Alice, I want to capture the details of my proposed transaction so that I can submit it for signature. (This would include the amount/value and target address of the transfer).
3. As Alice, I want to sign and submit my proposed transaction so that it can be signed by other required signatories and processed.


## Sign/Reject a proposed transaction:

1. As Bob or Charlie, I want to see a list of pending transactions so that I can review and approve or reject them.
2. Approve/Reject
a. As Bob or Charlie, I want to sign and approve a transaction so that it can be processed.
b. As Bob or Charlie, I want to reject a transaction so that it is discarded and not processed.

a. As Bob or Charlie, I want to sign and approve a transaction so that it can be processed.
b. As Bob or Charlie, I want to reject a transaction so that it is discarded and not processed.

## View transaction history:

1. As Alice, Bob, or Charlie, I want to see a list of past transactions from a selected multisig so that I can review them.


## User fees

- Create Pure Proxies (reserved fee)
- Initial funding for Pure Proxies and Multisig ([Existential Deposit](https://support.polkadot.network/support/solutions/articles/65000168651-what-is-the-existential-deposit-))
- [Transaction Fees](https://wiki.polkadot.network/docs/learn-transaction-fees)


# References and Links

- [UI3 Components Figma](https://www.figma.com/file/w7tmesabD9ylgQ0RgmB6tK/UI3-components?node-id=722%3A6917&t=H52yPh9xTNJcnb0C-0)
- [Multisig/Proxies Figma](https://www.figma.com/file/A1Tm8cDoNapzj4dqG83LjP/0.1-%2F-Multisig-%2B-Proxies?node-id=0%3A1&t=XZvryFSud5b1I4tV-0)
- [Capi Multisig Issues](https://github.com/paritytech/capi-multisig-app/issues)
- [UI3 Github Repo](https://github.com/paritytech/ui3)
- [Wiki Proxies](https://wiki.polkadot.network/docs/learn-proxies)

32 changes: 26 additions & 6 deletions components/Button.tsx
Original file line number Diff line number Diff line change
@@ -1,12 +1,32 @@
import { IS_BROWSER } from "$fresh/runtime.ts"
import classNames from "classnames"
import { JSX } from "preact"
import type { ComponentChildren } from "preact"

export function Button(props: JSX.HTMLAttributes<HTMLButtonElement>) {
export const Button = (
{ variant, size, disabled, className, iconLeft, iconRight, children, ...rest }:
& JSX.IntrinsicAttributes
& JSX.HTMLAttributes<HTMLButtonElement>
& { variant: "fill" | "ghost"; iconLeft?: ComponentChildren; iconRight?: ComponentChildren },
) => {
return (
<button
{...props}
disabled={!IS_BROWSER || props.disabled}
class="px-2 py-1 border(gray-100 2) hover:bg-gray-200"
/>
className={classNames(
"flex flex-row gap-3 items-center justify-center rounded-full w-full",
"font-semibold py-3 px-10",
"outline-none focus:outline-none",
{ "bg-transparent text-tuna hover:text-pink-800": variant === "ghost" },
{
// TODO add hover state
"bg-tuna text-white": variant === "fill",
},
className,
)}
disabled={disabled}
{...rest}
>
{iconLeft}
{children}
{iconRight}
</button>
)
}
17 changes: 17 additions & 0 deletions components/Card.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
import classNames from "classnames"
import type { ComponentChildren } from "preact"

export const Card = (
{ children, className }: { children: ComponentChildren; className?: string },
) => {
return (
<div
className={classNames(
"rounded-lg shadow w-full bg-white border border-nebula py-10 px-4",
className,
)}
>
{children}
</div>
)
}
18 changes: 18 additions & 0 deletions components/icons/IconPlus.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
import { JSX } from "preact/jsx-runtime"

export const IconPlus = (props: JSX.IntrinsicAttributes & JSX.SVGAttributes<SVGSVGElement>) => (
<svg
width="15"
height="14"
viewBox="0 0 15 14"
fill="currentColor"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<path
d="M14.5 8H8.5V14H6.5V8H0.5V6H6.5V0H8.5V6H14.5V8Z"
fill="currentColor"
fill-opacity="0.89"
/>
</svg>
)
1 change: 1 addition & 0 deletions components/icons/mod.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export * from "./IconPlus.tsx"
22 changes: 11 additions & 11 deletions components/layout/Header.tsx
Original file line number Diff line number Diff line change
@@ -1,17 +1,17 @@
import type { ComponentChildren } from "preact"
import { TestBlock } from "../TestBlock.tsx"
import WalletConnect from "../../islands/WalletConnect.tsx"
import { PolkadotLogo } from "../PolkadotLogo.tsx"

export function Header({ title }: { title: ComponentChildren }) {
export function Header() {
return (
<header>
<TestBlock className="flex flex-row flex-nowrap justify-between">
{title && <div className="flex">{title}</div>}
<div className="flex">
<TestBlock>Wallet connect</TestBlock>
<TestBlock>Dark / Light mode</TestBlock>
<TestBlock>Settings</TestBlock>
<header className="bg-white py-2 px-6 rounded-t border border-nebula">
<div className="flex flex-row flex-nowrap items-center justify-between gap-4">
<div className="w-40">
<PolkadotLogo />
</div>
</TestBlock>
<div className="flex items-center gap-4">
<WalletConnect />
</div>
</div>
</header>
)
}
8 changes: 3 additions & 5 deletions components/layout/Layout.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,9 @@ import { Head } from "./Head.tsx"

export const Layout = ({ children }: { children: ComponentChildren }) => {
return (
<>
<div className="min-h-screen bg-platinum">
<Head />
<div className="mx-auto max-w-7xl px-4 sm:px-6 md:px-8 py-4">
<main>{children}</main>
</div>
</>
<main className="flex flex-1 flex-col w-full">{children}</main>
</div>
)
}
37 changes: 18 additions & 19 deletions components/layout/Navbar.tsx
Original file line number Diff line number Diff line change
@@ -1,21 +1,20 @@
import type { ComponentChildren } from "preact"
import { TestBlock } from "../TestBlock.tsx"

export function Navbar() {
return (
<nav>
<TestBlock>
<div className="flex justify-end">
<TestBlock>
<a href="/create-multisig" className="hover:text-indigo-500">New multisig</a>
</TestBlock>
<TestBlock>
<a href="/create-transaction" className="hover:text-indigo-500">New transaction</a>
</TestBlock>
<TestBlock>
<a href="/transactions" className="hover:text-indigo-500">Transaction History</a>
</TestBlock>
</div>
</TestBlock>
</nav>
)
}
export const Navbar = ({ title }: { title: ComponentChildren }) => (
<nav>
<div className="flex items-center justify-between bg-white py-2 px-6 rounded-b border border-nebula -mt-px">
<div>
{title && <div className="flex">{title}</div>}
</div>
<div className="flex justify-end">
<TestBlock>
<a href="/create-multisig" className="hover:text-indigo-500">New multisig</a>
</TestBlock>
<TestBlock>
<a href="/create-transaction" className="hover:text-indigo-500">New transaction</a>
</TestBlock>
</div>
</div>
</nav>
)
2 changes: 2 additions & 0 deletions components/mod.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
export * from "./Button.tsx"
export * from "./Card.tsx"
export * from "./icons/mod.ts"
export * from "./layout/mod.tsx"
export * from "./PolkadotLogo.tsx"
export * from "./TestBlock.tsx"
30 changes: 20 additions & 10 deletions fresh.gen.ts
Original file line number Diff line number Diff line change
Expand Up @@ -4,22 +4,32 @@

import config from "./deno.json" assert { type: "json" }
import * as $$0 from "./islands/CapiComponent.tsx"
import * as $0 from "./routes/api/db_write.ts"
import * as $1 from "./routes/create-multisig.tsx"
import * as $2 from "./routes/create-transaction.tsx"
import * as $3 from "./routes/index.tsx"
import * as $4 from "./routes/transactions.tsx"
import * as $$1 from "./islands/CreateMultisig.tsx"
import * as $$2 from "./islands/WalletConnect.tsx"
import * as $0 from "./routes/api/db_get.ts"
import * as $1 from "./routes/api/put_multisig.ts"
import * as $2 from "./routes/api/put_proxy.ts"
import * as $3 from "./routes/api/put_real.ts"
import * as $4 from "./routes/api/update_real.ts"
import * as $5 from "./routes/create-multisig.tsx"
import * as $6 from "./routes/create-transaction.tsx"
import * as $7 from "./routes/index.tsx"

const manifest = {
routes: {
"./routes/api/db_write.ts": $0,
"./routes/create-multisig.tsx": $1,
"./routes/create-transaction.tsx": $2,
"./routes/index.tsx": $3,
"./routes/transactions.tsx": $4,
"./routes/api/db_get.ts": $0,
"./routes/api/put_multisig.ts": $1,
"./routes/api/put_proxy.ts": $2,
"./routes/api/put_real.ts": $3,
"./routes/api/update_real.ts": $4,
"./routes/create-multisig.tsx": $5,
"./routes/create-transaction.tsx": $6,
"./routes/index.tsx": $7,
},
islands: {
"./islands/CapiComponent.tsx": $$0,
"./islands/CreateMultisig.tsx": $$1,
"./islands/WalletConnect.tsx": $$2,
},
baseUrl: import.meta.url,
config,
Expand Down
8 changes: 7 additions & 1 deletion import_map.json
Original file line number Diff line number Diff line change
Expand Up @@ -14,9 +14,15 @@
"ddb_doc/": "https://esm.sh/v106/@aws-sdk/[email protected]/",
"ts_ddb_types/": "https://esm.sh/v106/[email protected]/lib/",
"ts_ddb_runtime/": "https://esm.sh/v106/[email protected]/es2022/lib/",
"@headlessui/react": "https://esm.sh/@headlessui/[email protected]?external=react,react-dom,@types/react,@types/react-dom",
"react": "https://esm.sh/[email protected]/compat",
"react-dom": "https://esm.sh/[email protected]/compat",
"@talisman-connect/wallets": "https://esm.sh/@talisman-connect/[email protected]",
"@twind/forms": "https://esm.sh/v99/@twind/[email protected][email protected]",
"capi": "http://localhost:4646/mod.ts",
"components": "./components/mod.ts",
"islands/": "./islands/",
"server/": "./server/"
"server/": "./server/",
"misc": "./misc/mod.ts"
}
}
Loading

0 comments on commit a40a05e

Please sign in to comment.