Skip to content

Commit

Permalink
Add support for wallet type in sats-connect
Browse files Browse the repository at this point in the history
  • Loading branch information
aryzing authored Jul 16, 2024
1 parent 1373c60 commit 97e58dd
Show file tree
Hide file tree
Showing 6 changed files with 160 additions and 5 deletions.
25 changes: 25 additions & 0 deletions example/package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

3 changes: 2 additions & 1 deletion example/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -16,11 +16,12 @@
"prepare": "cd .. && npm i && npm run build && cd example"
},
"dependencies": {
"@tanstack/react-query": "^5.50.1",
"bip322-js": "^2.0.0",
"bitcoinjs-message": "^2.2.0",
"eslint-plugin-react": "^7.34.3",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react": "^18.3.1",
"sats-connect": "file:..",
"styled-components": "6.1.11"
},
Expand Down
20 changes: 18 additions & 2 deletions example/src/App.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -13,9 +13,13 @@ import GetBtcBalance from './components/GetBtcBalance';
import GetRunesBalance from './components/GetRunesBalance';
import { Container, ConnectButtonsContainer, Header, Logo, Body, Button } from './App.styles';
import GetInscriptions from './components/GetInscriptions';
import { QueryClient, QueryClientProvider, useQueryClient } from '@tanstack/react-query';
import { WalletType } from './components/wallet/WalletType';
import { GetAccounts } from './components/bitcoin/GetAccounts';
import { SignMessage } from './components/SignMessage';

function App() {
function AppWithProviders() {
const queryClient = useQueryClient();
const [network, setNetwork] = useLocalStorage<BitcoinNetworkType>(
'network',
BitcoinNetworkType.Mainnet
Expand Down Expand Up @@ -81,8 +85,9 @@ function App() {
setBtcAddressInfo([]);
setStxAddressInfo([]);
setLegacyAddressInfo([]);
queryClient.clear();
})().catch(console.error);
}, [setBtcAddressInfo, setLegacyAddressInfo, setStxAddressInfo]);
}, [queryClient, setBtcAddressInfo, setLegacyAddressInfo, setStxAddressInfo]);

if (!isConnected) {
return (
Expand Down Expand Up @@ -111,6 +116,8 @@ function App() {
addresses={[...legacyAddressInfo, ...btcAddressInfo, ...stxAddressInfo]}
onDisconnect={onDisconnect}
/>
<GetAccounts />
<WalletType />
<SignMessage addresses={[...btcAddressInfo, ...legacyAddressInfo]} />
<SendStx network={network} />
<SendBtc network={network} />
Expand All @@ -124,4 +131,13 @@ function App() {
);
}

const queryClient = new QueryClient();

function App() {
return (
<QueryClientProvider client={queryClient}>
<AppWithProviders />
</QueryClientProvider>
);
}
export default App;
58 changes: 58 additions & 0 deletions example/src/components/bitcoin/GetAccounts.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@
import Wallet, { AddressPurpose } from 'sats-connect';
import { Button, Card } from '../../App.styles';
import { useQuery } from '@tanstack/react-query';
import styled from 'styled-components';

const ErrorMessage = styled.div({
color: 'red',
});

export function GetAccounts() {
const { refetch, error, data, isFetching, isError, isSuccess } = useQuery({
queryKey: ['getAccounts'],
queryFn: async () => {
const res = await Wallet.request('getAccounts', {
purposes: [AddressPurpose.Payment, AddressPurpose.Ordinals, AddressPurpose.Stacks],
});
if (res.status === 'error') {
throw new Error('Error getting wallet type', { cause: res.error });
}
return res.result;
},
enabled: false,
});

return (
<Card>
<h3>Get accounts</h3>

<Button
onClick={() => {
refetch().catch(console.error);
}}
>
Get accounts
</Button>

{(() => {
if (isFetching) {
return <p>Loading...</p>;
}

if (isError) {
console.error(error);
return <ErrorMessage>Error. Check console for details.</ErrorMessage>;
}

if (isSuccess) {
console.log(data);
return (
<div>
<p>Check console for data.</p>
</div>
);
}
})()}
</Card>
);
}
55 changes: 55 additions & 0 deletions example/src/components/wallet/WalletType.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
import Wallet from 'sats-connect';
import { Button, Card } from '../../App.styles';
import { useQuery } from '@tanstack/react-query';
import styled from 'styled-components';

const ErrorMessage = styled.div({
color: 'red',
});

export function WalletType() {
const { refetch, error, data, isFetching, isError, isSuccess } = useQuery({
queryKey: ['wallet_getWalletType'],
queryFn: async () => {
const res = await Wallet.request('wallet_getWalletType', undefined);
if (res.status === 'error') {
throw new Error('Error getting wallet type', { cause: res.error });
}
return res.result;
},
enabled: false,
});

return (
<Card>
<h3>Wallet type</h3>

<Button
onClick={() => {
refetch().catch(console.error);
}}
>
Get wallet type
</Button>

{(() => {
if (isFetching) {
return <p>Loading...</p>;
}

if (isError) {
console.error(error);
return <ErrorMessage>Error. Check console for details.</ErrorMessage>;
}

if (isSuccess) {
return (
<div>
<p>Wallet type: {data}</p>
</div>
);
}
})()}
</Card>
);
}
4 changes: 2 additions & 2 deletions example/tsconfig.app.json
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,9 @@
"compilerOptions": {
"composite": true,
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
"target": "ES2020",
"target": "ESNext",
"useDefineForClassFields": true,
"lib": ["ES2020", "DOM", "DOM.Iterable"],
"lib": ["ESNext", "DOM", "DOM.Iterable"],
"module": "ESNext",
"skipLibCheck": true,

Expand Down

0 comments on commit 97e58dd

Please sign in to comment.