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

Jump to bottom

update: changes for wallet connect/discon #70

Merged
merged 4 commits into from
Oct 18, 2022
Merged

update: changes for wallet connect/discon #70

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
01b7ab0
update: breaking changes for wallet connect/discon
tom-hippo Oct 18, 2022
7b9bbc4
Merge branch 'main' into develop
tom-hippo Oct 18, 2022
cd17818
update: support select/connect methods
tom-hippo Oct 18, 2022
1ec9c12
remove console log
tom-hippo Oct 18, 2022
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: 1 addition & 1 deletion package-lock.json
View file
Open in desktop

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

14 changes: 4 additions & 10 deletions packages/aptos-wallet-adapter/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -114,28 +114,22 @@ const { connected, account, network, ...rest } = useWallet();
*/
```

# Connect & Disconnect
# Connect & Disconnect (updated @ 18/10/2022)

```typescript
import { AptosWalletName, useWallet } from "@manahippo/aptos-wallet-adapter"

...

const { connect, disconnect, connected, select } = useWallet();
const { connect, disconnect, connected } = useWallet();

/** If auto-connect is not enabled, you will require to do the connect() manually **/
useEffect(() => {
if (!autoConnect && currentWallet?.adapter) {
connect();
}
}, [autoConnect, currentWallet, connect]);
/** this is only required if you do not want auto connect wallet **/
/* No more manual connection required if you disable auto-connect mode while the previous select + connect will still work */

if (!connected) {
return (
<button
onClick={() => {
select(); // E.g. connecting to the Aptos official wallet (Breaking Change)
connect(walletName); // E.g. connecting to the Aptos official wallet
}}
>
Connect
Expand Down
138 changes: 71 additions & 67 deletions packages/aptos-wallet-adapter/src/WalletProviders/WalletProvider.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,22 +65,6 @@ export const WalletProvider: FC<WalletProviderProps> = ({

// When the wallets change, start to listen for changes to their `readyState`
useEffect(() => {
// When the adapters change, wrap them to conform to the `Wallet` interface
setWallets((currentWallets) =>
adapters.map((wAdapter, index) => {
const currentWallet = currentWallets[index];
// If the wallet hasn't changed, return the same instance
return currentWallet &&
currentWallet.adapter === wAdapter &&
currentWallet.readyState === wAdapter.readyState
? currentWallet
: {
adapter: wAdapter,
readyState: wAdapter.readyState
};
})
);

function handleReadyStateChange(this: any, wReadyState: WalletReadyState) {
setWallets((prevWallets) => {
const index = prevWallets.findIndex(({ adapter: wAdapter }) => wAdapter === this);
Expand All @@ -106,9 +90,10 @@ export const WalletProvider: FC<WalletProviderProps> = ({

// When the selected wallet changes, initialize the state
useEffect(() => {
if (!autoConnect) return;
const selectedWallet = wallets.find((wAdapter) => wAdapter.adapter.name === name);
if (selectedWallet) {
console.log('selectedWallets', selectedWallet);
// console.log('selectedWallets in autoConnect', selectedWallet);
setState({
wallet: selectedWallet,
adapter: selectedWallet.adapter,
Expand All @@ -119,7 +104,7 @@ export const WalletProvider: FC<WalletProviderProps> = ({
} else {
setState(initialState);
}
}, [name, wallets]);
}, [name, wallets, autoConnect]);

// If the window is closing or reloading, ignore disconnect and error events from the adapter
useEffect(() => {
Expand Down Expand Up @@ -150,7 +135,7 @@ export const WalletProvider: FC<WalletProviderProps> = ({
// Handle the adapter's network event
const handleNetworkChange = useCallback(() => {
if (!adapter) return;
console.log('adapter: handleNetworkChange', adapter.network);
// console.log('adapter: handleNetworkChange', adapter.network);
setState((state) => {
return {
...state,
Expand All @@ -162,7 +147,7 @@ export const WalletProvider: FC<WalletProviderProps> = ({
// Handle the adapter's account event
const handleAccountChange = useCallback(() => {
if (!adapter) return;
console.log('adapter: handleAccountChange', adapter.publicAccount);
// console.log('adapter: handleAccountChange', adapter.publicAccount);
setState((state) => {
return {
...state,
Expand All @@ -174,7 +159,10 @@ export const WalletProvider: FC<WalletProviderProps> = ({
// Handle the adapter's disconnect event
const handleDisconnect = useCallback(() => {
// Clear the selected wallet unless the window is unloading
if (!isUnloading.current) setName(null);
if (!isUnloading.current) {
setName(null);
setState(initialState);
}
}, [isUnloading, setName]);

// Handle the adapter's error event, and local errors
Expand Down Expand Up @@ -227,63 +215,79 @@ export const WalletProvider: FC<WalletProviderProps> = ({
};
}, [adapter]);

// If autoConnect is enabled, try to connect when the adapter changes and is ready
useEffect(() => {
if (
isConnecting.current ||
connected ||
!autoConnect ||
!adapter ||
!(readyState === WalletReadyState.Installed || readyState === WalletReadyState.Loadable)
)
return;
// Connect the adapter to the wallet
const connect = useCallback(
async (walletName?) => {
if (isConnecting.current || isDisconnecting.current || connected || !walletName) return;
let walletToConnect = initialState;
if (!adapter || walletName !== adapter?.name) {
const selectedWallet = wallets.find((wAdapter) => wAdapter.adapter.name === walletName);
if (selectedWallet) {
walletToConnect = {
wallet: selectedWallet,
adapter: selectedWallet.adapter,
connected: selectedWallet.adapter.connected,
account: selectedWallet.adapter.publicAccount,
network: selectedWallet.adapter.network
};
}
setState(walletToConnect);
setName(walletName);
} else {
walletToConnect = {
wallet,
adapter,
connected,
account,
network
};
}
if (!walletToConnect.adapter) throw handleError(new WalletNotSelectedError());
if (
!(
walletToConnect.adapter.readyState === WalletReadyState.Installed ||
walletToConnect.adapter.readyState === WalletReadyState.Loadable
)
) {
// Clear the selected wallet
setName(null);

(async function () {
if (typeof window !== 'undefined') {
window.open(walletToConnect.adapter.url, '_blank');
}

throw handleError(new WalletNotReadyError('Wallet Not Ready'));
}
isConnecting.current = true;
setConnecting(true);
try {
await adapter.connect();
await walletToConnect.adapter.connect();
} catch (error: any) {
// Clear the selected wallet
setName(null);
// Don't throw error, but handleError will still be called
// Rethrow the error, and handleError will also be called
throw error;
} finally {
setConnecting(false);
isConnecting.current = false;
}
})();
}, [isConnecting, connected, autoConnect, adapter, readyState, setName]);

// Connect the adapter to the wallet
const connect = useCallback(async () => {
if (isConnecting.current || isDisconnecting.current || connected) return;

if (!adapter) throw handleError(new WalletNotSelectedError());

if (!(readyState === WalletReadyState.Installed || readyState === WalletReadyState.Loadable)) {
// Clear the selected wallet
setName(null);

if (typeof window !== 'undefined') {
window.open(adapter.url, '_blank');
}
},
[connected, adapter, handleError, wallets, setName, wallet, account, network]
);

throw handleError(new WalletNotReadyError('Wallet Not Ready'));
}
isConnecting.current = true;
setConnecting(true);
try {
await adapter.connect();
} catch (error: any) {
// Clear the selected wallet
setName(null);
// Rethrow the error, and handleError will also be called
throw error;
} finally {
setConnecting(false);
isConnecting.current = false;
}
}, [isConnecting, isDisconnecting, connected, adapter, readyState, handleError, setName]);
// If autoConnect is enabled, try to connect when the adapter changes and is ready
useEffect(() => {
if (
isConnecting.current ||
connected ||
!autoConnect ||
!name ||
!adapter ||
!(readyState === WalletReadyState.Installed || readyState === WalletReadyState.Loadable)
)
return;
connect(name);
}, [isConnecting, connected, autoConnect, name, connect, adapter, readyState]);

// Disconnect the adapter from the wallet
const disconnect = useCallback(async () => {
Expand Down Expand Up @@ -344,7 +348,7 @@ export const WalletProvider: FC<WalletProviderProps> = ({
connecting,
disconnecting,
autoConnect,
select: setName,
select: connect,
connect,
disconnect,
signAndSubmitTransaction,
Expand Down
4 changes: 2 additions & 2 deletions packages/aptos-wallet-adapter/src/WalletProviders/useWallet.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,8 +24,8 @@ export interface WalletContextState {
connected: boolean;
disconnecting: boolean;
network: NetworkInfo;
select(walletName: WalletName): void;
connect(): Promise<void>;
select(walletName?: WalletName): Promise<void>;
connect(walletName?: WalletName): Promise<void>;
disconnect(): Promise<void>;
signAndSubmitTransaction(
transaction: Types.TransactionPayload,
Expand Down
9 changes: 1 addition & 8 deletions packages/wallet-nextjs/pages/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,24 +27,17 @@ const MainPage = () => {
connected,
disconnecting,
wallet: currentWallet,
select,
signMessage,
signTransaction
} = useWallet();

useEffect(() => {
if (!autoConnect && currentWallet?.adapter) {
connect();
}
}, [autoConnect, currentWallet, connect]);

const renderWalletConnectorGroup = () => {
return wallets.map((wallet) => {
const option = wallet.adapter;
return (
<Button
onClick={() => {
select(option.name);
connect(option.name);
}}
id={option.name.split(' ').join('_')}
key={option.name}
Expand Down
9 changes: 1 addition & 8 deletions packages/wallet-tester/src/pages/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,23 +36,16 @@ const MainPage = () => {
wallet: currentWallet,
signMessage,
signTransaction,
select,
network
} = useWallet();

useEffect(() => {
if (!autoConnect && currentWallet?.adapter) {
connect();
}
}, [autoConnect, currentWallet, connect]);

const renderWalletConnectorGroup = () => {
return wallets.map((wallet) => {
const option = wallet.adapter;
return (
<Button
onClick={() => {
select(option.name);
connect(option.name);
}}
id={option.name.split(' ').join('_')}
key={option.name}
Expand Down