Skip to content
This repository was archived by the owner on Mar 21, 2026. It is now read-only.

Commit 1aa5d58

Browse files
geraBarbonigeraBarboni
committed
add instaled wallets
1 parent d3be819 commit 1aa5d58

4 files changed

Lines changed: 162 additions & 13 deletions

File tree

‎src/components/nav/index.tsx‎

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import Button from '../generals/button';
44
import { useRouter } from 'next/router';
55
import { usePathname } from 'next/navigation';
66
import Link from 'next/link.js';
7-
import { useWallet, useAllWallets } from 'useink';
7+
import { useWallet, useInstalledWallets } from 'useink';
88
import WalletManager from '@/components/walletManager';
99
import { BsFillArrowLeftCircleFill, BsFillArrowRightCircleFill } from 'react-icons/bs';
1010

@@ -18,22 +18,26 @@ const Index = () => {
1818
setshowMenu(!showMenu);
1919
};
2020

21+
const wallets = useInstalledWallets();
22+
useEffect(() => console.log(wallets), [wallets]);
23+
2124
return (
2225
//NO CONNECTED
2326
account === undefined ? (
2427
<nav className="bg-opwhite flex justify-between items-center w-full h-fit py-[10px] px-[20px] drop-shadow-md top-0 left-0 sticky">
25-
<Link href={'/'}>
26-
<div className="flex md:hidden">
28+
<Link href={'/'} className="flex md:hidden">
29+
<div>
2730
<OPLogo width={40} height={36.6} />
2831
</div>
2932
</Link>
30-
<Link href={'/'}>
31-
<div className="hidden md:flex">
33+
<Link href={'/'} className="hidden md:flex">
34+
<div>
3235
<OPLogo width={50} height={46.6} />
3336
</div>
3437
</Link>
35-
<div>
36-
<Button text="connect" action={connect('polkadot-js')} />
38+
39+
<div className="hidden md:flex h-[100px] justify-end">
40+
<WalletManager />
3741
</div>
3842
</nav>
3943
) : (

‎src/components/walletManager/index.tsx‎

Lines changed: 112 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,127 @@
11
import React, { useState } from 'react';
2-
import { useWallet } from 'useink';
2+
import { useWallet, useInstalledWallets } from 'useink';
33
import { FaAngleDown, FaAngleUp } from 'react-icons/fa';
44
import { Archivo } from 'next/font/google';
55
const archivo = Archivo({ subsets: ['latin'] });
6+
import Text from '../../components/generals/text';
67

78
const Index = () => {
9+
const { account, accounts, isConnected, setAccount, connect, disconnect } = useWallet();
10+
const wallets = useInstalledWallets();
11+
const [showWallets, setShowWallets] = useState(false);
12+
const [show, setShow] = useState<boolean>(false);
13+
14+
const handleAccount = (account: any) => {
15+
setAccount(account);
16+
setShow(!show);
17+
};
18+
19+
if (isConnected)
20+
return (
21+
<div className="flex absolute w-full md:w-fit">
22+
<div
23+
className={
24+
show
25+
? 'pl-4 pr-2 py-3 border-oppurple border-2 rounded-[5px] flex ml-auto mt-6 w-full md:w-fit h-fit bg-[#FFFFFF] justify-between md:justify-normal z-50'
26+
: 'pl-4 items-center pr-2 py-3 border-oppurple border-2 rounded-[5px] flex ml-auto mt-6 w-full md:w-fit h-fit bg-[#FFFFFF] justify-between md:justify-normal z-50'
27+
}
28+
>
29+
<div className="flex flex-col w-full">
30+
<p
31+
className={
32+
show
33+
? `text-[14px] uppercase p-4 w-full cursor-pointer text-oppurple font-normal tracking-[1.25px] rounded ${archivo.className} hover:bg-oppurple hover:text-opwhite transition duration-200`
34+
: `text-[14px] uppercase w-full cursor-pointer text-oppurple font-normal tracking-[1.25px] rounded ${archivo.className} hover:bg-oppurple hover:text-opwhite transition duration-200`
35+
}
36+
>
37+
{account?.name} ({account?.address.slice(0, 5)}...
38+
{account?.address.slice(account?.address.length - 5, account?.address.length)})
39+
</p>
40+
{show && (
41+
<div className="flex flex-col gap-[10px] mt-[10px]">
42+
<div className="border-oppurple border w-full"></div>
43+
{accounts?.map((a) => (
44+
<div
45+
key={a}
46+
className={`text-[14px] uppercase w-full p-4 cursor-pointer text-oppurple font-normal tracking-[1.25px] rounded ${archivo.className} hover:bg-oppurple hover:text-opwhite transition duration-200`}
47+
onClick={() => handleAccount(a)}
48+
>
49+
{a?.name} ({account?.address.slice(0, 5)}...
50+
{a?.address.slice(a?.address.length - 5, a?.address.length)})
51+
</div>
52+
))}
53+
<button
54+
className={`items-center text-center bg-oppurple p-1.5 flex gap-[10px] rounded-[5px] py-[10px] px-[10px] text-[14px] uppercase w-full justify-center text-opwhite font-normal tracking-[1.25px] ${archivo.className}`}
55+
onClick={disconnect}
56+
>
57+
disconnect
58+
</button>
59+
</div>
60+
)}
61+
</div>
62+
<div className="cursor-pointer px-4 mt-1.5" onClick={() => setShow(!show)}>
63+
{show ? <FaAngleUp /> : <FaAngleDown />}
64+
</div>
65+
</div>
66+
</div>
67+
);
68+
69+
return (
70+
<div>
71+
<div
72+
className={
73+
showWallets
74+
? 'pl-4 pr-2 py-3 border-oppurple border-2 rounded-[5px] flex ml-auto mt-6 w-full md:w-fit h-fit bg-[#FFFFFF] justify-between md:justify-normal z-50'
75+
: 'cursor-pointer pl-4 pr-2 py-3 border-oppurple border-2 rounded-[5px] flex ml-auto mt-6 w-full md:w-fit h-fit bg-oppurple text-opwhite justify-between md:justify-normal z-50'
76+
}
77+
>
78+
<div className="flex w-full">
79+
{showWallets ? (
80+
<div className="flex w-full">
81+
<ul className="flex flex-col">
82+
{wallets.map((w: any) => (
83+
<li key={w.title}>
84+
<p
85+
onClick={() => connect(w.extensionName)}
86+
className={`text-[14px] uppercase w-full p-4 cursor-pointer text-oppurple font-normal tracking-[1.25px] rounded ${archivo.className} hover:bg-oppurple hover:text-opwhite transition duration-200`}
87+
>
88+
Connect to {w.title}
89+
</p>
90+
</li>
91+
))}
92+
</ul>
93+
<div className="p-2 cursor-pointer">
94+
<FaAngleUp onClick={() => setShowWallets(false)} />
95+
</div>
96+
</div>
97+
) : (
98+
<div className="flex gap-3 items-center">
99+
<p
100+
className={`items-center text-center bg-oppurple text-[14px] uppercase w-full justify-center text-opwhite font-normal tracking-[1.25px] ${archivo.className}`}
101+
>
102+
connect
103+
</p>
104+
<div className="p-2 cursor-pointer">
105+
<FaAngleDown onClick={() => setShowWallets(true)} />
106+
</div>
107+
</div>
108+
)}
109+
</div>
110+
</div>
111+
</div>
112+
);
113+
114+
/*
8115
const { account, accounts, setAccount, connect, disconnect } = useWallet();
9116
const [show, setShow] = useState<boolean>(false);
117+
10118
const handleAccount = (account: any) => {
11119
setAccount(account);
12120
setShow(!show);
13121
};
14122
123+
const wallets = useInstalledWallets();
124+
15125
return (
16126
<div className="flex absolute w-full md:w-fit">
17127
<div className="pl-4 pr-2 py-3 border-oppurple border-2 rounded-[5px] flex ml-auto mt-6 w-full md:w-fit h-fit bg-[#FFFFFF] justify-between md:justify-normal z-50">
@@ -43,6 +153,7 @@ const Index = () => {
43153
</div>
44154
</div>
45155
);
156+
*/
46157
};
47158

48159
export default Index;

‎src/pages/contracts/[contract].tsx‎

Lines changed: 28 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import Button from '../../components/generals/button';
77
import { Archivo } from 'next/font/google';
88
const archivo = Archivo({ subsets: ['latin'] });
99

10-
import { useContract, useWallet } from 'useink';
10+
import { useContract, useWallet, useTransfer } from 'useink';
1111
import metadata from '../../contract/open_payroll.json';
1212
import { useRouter } from 'next/router';
1313
import BeneficiaryRow from '@/components/contracts/beneficiaryRow';
@@ -23,6 +23,7 @@ import { useGetOwner } from '@/hooks/useGetOwner';
2323
import toast, { Toaster } from 'react-hot-toast';
2424
import Loader from '@/components/generals/Loader';
2525
import NotOwner from '@/components/contracts/NotOwner';
26+
import { AiFillCheckCircle } from 'react-icons/ai';
2627

2728
export default function Contract() {
2829
//---------------------------------Get contract address---------------------------------
@@ -55,11 +56,24 @@ export default function Contract() {
5556
} = usePayrollContract(_contract);
5657

5758
//---------------------------------Copy to Clipboard---------------------------------
59+
const [copied, setCopied] = useState<boolean>(false);
5860
const copyToClipboard = () => {
5961
const textToCopy = contractAddress;
6062
textToCopy !== undefined && navigator.clipboard.writeText(textToCopy.toString());
63+
setCopied(true);
64+
setTimeout(function () {
65+
setCopied(false);
66+
}, 5000);
6167
};
6268

69+
const [toAdd, settoAdd] = useState<any | undefined>(undefined);
70+
const transfer = useTransfer();
71+
72+
useEffect(() => {
73+
console.log('toAdd', toAdd);
74+
console.log('contractAddress', contractAddress);
75+
}, [toAdd]);
76+
6377
return (
6478
<main className={`flex flex-col md:flex-row ${archivo.className}`}>
6579
<Nav />
@@ -86,9 +100,13 @@ export default function Contract() {
86100
<div className="flex flex-col-reverse gap-[40px] md:flex-row md:justify-between">
87101
<div className="flex flex-col">
88102
{contractAddress && <Text type="h2" text={`${findContractInLocalStorage(contractAddress).name}`} />}
89-
<div className="flex items-center">
103+
<div className="flex items-center gap-2">
90104
<Text type="overline" text={`${contractAddress}`} />
91-
<IoIosCopy className="text-oppurple mx-2" onClick={() => copyToClipboard()} />
105+
{copied ? (
106+
<AiFillCheckCircle className="text-opgreen cursor-pointer" onClick={() => copyToClipboard()} />
107+
) : (
108+
<IoIosCopy className="text-oppurple cursor-pointer" onClick={() => copyToClipboard()} />
109+
)}
92110
</div>
93111
{contractAddress && (
94112
<Text
@@ -104,7 +122,13 @@ export default function Contract() {
104122
<div className="flex gap-[20px] ml-auto md:ml-0">
105123
<div>
106124
{/* TODO: Add funds */}
107-
<Button type="active" text="add funds" />
125+
<Button
126+
type="active"
127+
text="add funds"
128+
action={() => transfer?.signAndSend(contractAddress!, toAdd)}
129+
/>
130+
<input type="number" onChange={(e) => settoAdd(e.target.value)} />
131+
<p>Hash {transfer?.hash || '--'}</p>
108132
</div>
109133
<Link href={`/edit/${contractAddress}`}>
110134
<Button type="active" text="edit" />

‎src/pages/contracts/index.tsx‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,12 @@ import { DappContext } from '@/context';
1515
import WalletManager from '@/components/walletManager';
1616

1717
import { Toaster } from 'react-hot-toast';
18+
import { useWallet } from 'useink';
19+
import { useRouter } from 'next/router';
1820

1921
export default function Contracts() {
22+
const { account } = useWallet();
23+
const router = useRouter();
2024
//---------------------------------Get contracts from context---------------------------------
2125
const context = useContext(DappContext);
2226

@@ -26,12 +30,18 @@ export default function Contracts() {
2630

2731
const { ownerContracts, getStoredContracts } = context;
2832

33+
useEffect(() => {
34+
console.log(account);
35+
account === undefined && router.push('/');
36+
// router.push('/dashboard')
37+
}, [account]);
38+
2939
useEffect(() => {
3040
getStoredContracts();
3141
}, []);
3242

3343
return (
34-
<main className={`flex flex-col md:flex-row ${archivo.className}`}>
44+
<main className={account ? `flex flex-col md:flex-row ${archivo.className}` : `flex flex-col ${archivo.className}`}>
3545
<Nav />
3646
<Toaster
3747
position="top-right"

0 commit comments

Comments
 (0)