Skip to content

Commit

Permalink
feat: migrate authentication system from Lock to in-house to support …
Browse files Browse the repository at this point in the history
…EIP-6963
  • Loading branch information
wa0x6e committed Jan 26, 2025
1 parent e63b2b4 commit 452daa7
Show file tree
Hide file tree
Showing 38 changed files with 1,038 additions and 1,790 deletions.
6 changes: 5 additions & 1 deletion apps/ui/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@
"dependencies": {
"@apollo/client": "^3.9.5",
"@braintree/sanitize-url": "^6.0.4",
"@coinbase/wallet-sdk": "4.0.4",
"@ensdomains/eth-ens-namehash": "^2.0.15",
"@ethersproject/abi": "^5.7.0",
"@ethersproject/abstract-signer": "^5.7.0",
Expand All @@ -45,15 +46,18 @@
"@headlessui-float/vue": "^0.15.0",
"@headlessui/vue": "^1.7.23",
"@openzeppelin/merkle-tree": "^1.0.5",
"@safe-global/safe-apps-provider": "^0.18.5",
"@safe-global/safe-apps-sdk": "^9.1.0",
"@snapshot-labs/eslint-config-vue": "^0.1.0-beta.18",
"@snapshot-labs/highlight": "^0.1.0-beta.2",
"@snapshot-labs/lock": "^0.2.10",
"@snapshot-labs/pineapple": "^1.1.0",
"@snapshot-labs/prettier-config": "^0.1.0-beta.18",
"@snapshot-labs/snapshot.js": "^0.12.43",
"@snapshot-labs/sx": "^0.1.0",
"@vueuse/core": "^10.4.1",
"@walletconnect/core": "^2.11.0",
"@walletconnect/ethereum-provider": "^2.17.5",
"@walletconnect/modal": "^2.7.0",
"@walletconnect/types": "^2.11.0",
"@walletconnect/utils": "^2.11.0",
"@walletconnect/web3wallet": "^1.10.0",
Expand Down
Binary file removed apps/ui/src/assets/connectors/coinbase.png
Binary file not shown.
Binary file removed apps/ui/src/assets/connectors/gnosis.png
Binary file not shown.
Binary file removed apps/ui/src/assets/connectors/metamask.png
Binary file not shown.
Binary file removed apps/ui/src/assets/connectors/portis.png
Binary file not shown.
Binary file removed apps/ui/src/assets/connectors/starknet.png
Binary file not shown.
Binary file removed apps/ui/src/assets/connectors/walletconnect.png
Binary file not shown.
10 changes: 3 additions & 7 deletions apps/ui/src/components/App/Topnav.vue
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<script setup lang="ts">
import { getInstance } from '@snapshot-labs/lock/plugins/vue3';
import { getCacheHash, shorten } from '@/helpers/utils';
import { Connector } from '@/networks/types';
defineProps<{
hasAppNav: boolean;
Expand All @@ -9,7 +9,6 @@ defineProps<{
const route = useRoute();
const router = useRouter();
const usersStore = useUsersStore();
const auth = getInstance();
const uiStore = useUiStore();
const { modalAccountOpen, modalAccountWithoutDismissOpen, resetAccountModal } =
useModal();
Expand Down Expand Up @@ -56,7 +55,7 @@ const searchConfig = computed(() => {
return null;
});
async function handleLogin(connector) {
async function handleLogin(connector: Connector) {
resetAccountModal();
loading.value = true;
await login(connector);
Expand Down Expand Up @@ -133,10 +132,7 @@ onUnmounted(() => {
class="float-left !px-0 w-[46px] sm:w-auto sm:!px-3 text-center"
@click="modalAccountOpen = true"
>
<span
v-if="auth.isAuthenticated.value"
class="sm:flex items-center space-x-2"
>
<span v-if="web3.account" class="sm:flex items-center space-x-2">
<UiStamp :id="user.id" :size="18" :cb="cb" />
<span
class="hidden sm:block truncate max-w-[120px]"
Expand Down
39 changes: 39 additions & 0 deletions apps/ui/src/components/Connectors.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
<script lang="ts" setup>
import { Connector, ConnectorType } from '@/networks/types';
const props = defineProps<{
supportedConnectors?: ConnectorType[];
}>();
const emit = defineEmits<{
(e: 'click', connector: Connector): void;
}>();
const { connectors } = useConnectors();
const availableConnectors = computed(() => {
if (!props.supportedConnectors?.length) return connectors.value;
return connectors.value.filter(connector =>
props.supportedConnectors!.includes(connector.type)
);
});
</script>

<template>
<UiButton
v-for="connector in availableConnectors"
:key="connector.id"
class="w-full flex justify-center items-center gap-2"
@click="emit('click', connector)"
>
<img
:src="connector.info.icon"
height="28"
width="28"
class="rounded-sm"
:alt="connector.info.name"
/>
{{ connector.info.name }}
</UiButton>
</template>
22 changes: 11 additions & 11 deletions apps/ui/src/components/CreateDeploymentProgress.vue
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<script setup lang="ts">
import { shorten } from '@/helpers/utils';
import { getNetwork } from '@/networks';
import { Connector, StrategyConfig } from '@/networks/types';
import { Connector, ConnectorType, StrategyConfig } from '@/networks/types';
import { NetworkID, SpaceMetadata, SpaceSettings } from '@/types';
type DeployingDependencyStep = {
Expand Down Expand Up @@ -49,14 +49,14 @@ const emit = defineEmits<{
}>();
const { deployDependency, createSpace } = useActions();
const { web3, login } = useWeb3();
const { login, connector } = useWeb3();
const currentStep = ref(0);
const completed = ref(false);
const failed = ref(false);
const connectorModalOpen = ref(false);
const connectorModalConnectors = ref([] as string[]);
const connectorCallbackFn: Ref<((value: string | false) => void) | null> =
const connectorModalConnectors = ref([] as ConnectorType[]);
const connectorCallbackFn: Ref<((value: Connector | false) => void) | null> =
ref(null);
const txIds = ref({});
const deployedExecutionStrategies = ref([] as StrategyConfig[]);
Expand Down Expand Up @@ -101,16 +101,16 @@ const uiSteps = computed(() => {
>[];
});
function getConnector(supportedConnectors: string[]) {
function getConnector(supportedConnectors: ConnectorType[]) {
connectorModalOpen.value = true;
connectorModalConnectors.value = supportedConnectors;
return new Promise<string | false>(resolve => {
return new Promise<Connector | false>(resolve => {
connectorCallbackFn.value = resolve;
});
}
function handleConnectorPick(connector: string) {
function handleConnectorPick(connector: Connector) {
connectorCallbackFn.value?.(connector);
connectorModalOpen.value = false;
}
Expand All @@ -134,11 +134,11 @@ async function deployStep(
? step.strategy.deployConnectors
: network.value.managerConnectors;
if (!supportedConnectors.includes(web3.value.type as Connector)) {
const connector = await getConnector(supportedConnectors);
if (!connector) throw new Error('No connector selected');
if (!connector.value || !supportedConnectors.includes(connector.value.type)) {
const selectedConnector = await getConnector(supportedConnectors);
if (!selectedConnector) throw new Error('No connector selected');
await login(connector);
await login(selectedConnector);
}
let result;
Expand Down
5 changes: 3 additions & 2 deletions apps/ui/src/components/IndicatorVotingPower.vue
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ defineEmits<{
(e: 'fetchVotingPower');
}>();
const { web3 } = useWeb3();
const { web3, connector } = useWeb3();
const modalOpen = ref(false);
Expand Down Expand Up @@ -41,7 +41,8 @@ function handleModalOpen() {
<UiButton
v-if="
web3.account &&
!(evmNetworks.includes(networkId) && web3.type === 'argentx')
connector &&
!(evmNetworks.includes(networkId) && connector.type === 'argentx')
"
:loading="loading"
class="flex flex-row items-center justify-center gap-1 truncate"
Expand Down
59 changes: 9 additions & 50 deletions apps/ui/src/components/Modal/Account.vue
Original file line number Diff line number Diff line change
@@ -1,47 +1,21 @@
<script setup lang="ts">
import { getInjected } from '@snapshot-labs/lock/src/utils';
import connectors, {
getConnectorIconUrl,
mapConnectorId
} from '@/helpers/connectors';
import { getCacheHash } from '@/helpers/utils';
const win = window;
const injected = getInjected();
if (injected)
connectors['injected'] = {
...connectors['injected'],
...injected,
id: 'injected',
icon: connectors[mapConnectorId(injected.id)]?.icon ?? injected.icon
};
import { Connector } from '@/networks/types';
const props = defineProps<{
open: boolean;
}>();
const emit = defineEmits<{
(e: 'login', connector: string): void;
(e: 'login', connector: Connector): void;
(e: 'close'): void;
}>();
const { open } = toRefs(props);
const { web3, logout } = useWeb3();
const usersStore = useUsersStore();
const step: Ref<'connect' | null> = ref(null);
const availableConnectors = computed(() => {
return Object.values(connectors).filter(connector => {
const hasNoType = !('type' in connector) || !connector.type;
const isActive =
'type' in connector &&
'root' in connector &&
connector.type === 'injected' &&
win[connector.root];
return hasNoType || isActive;
});
});
const step: Ref<'connect' | null> = ref(null);
const user = computed(
() =>
Expand All @@ -66,30 +40,15 @@ watch(open, () => (step.value = null));
</script>

<template>
<UiModal :open="open" @close="$emit('close')">
<UiModal :open="open" @close="emit('close')">
<template #header>
<h3 v-text="isLoggedOut ? 'Log in' : 'Account'" />
</template>
<div class="m-4 flex flex-col gap-2">
<template v-if="isLoggedOut">
<button
v-for="connector in availableConnectors"
:key="connector.id"
type="button"
@click="$emit('login', connector.id)"
>
<UiButton class="w-full flex justify-center items-center gap-2">
<img
:src="getConnectorIconUrl(connector.icon)"
height="28"
width="28"
class="rounded-lg"
:alt="connector.name"
/>
{{ connector.name }}
</UiButton>
</button>
</template>
<Connectors
v-if="isLoggedOut"
@click="(connector: Connector) => emit('login', connector)"
/>
<template v-else>
<UiButton
:to="{ name: 'user', params: { user: web3.account } }"
Expand Down
61 changes: 8 additions & 53 deletions apps/ui/src/components/Modal/Connector.vue
Original file line number Diff line number Diff line change
@@ -1,73 +1,28 @@
<script setup lang="ts">
import { getInjected } from '@snapshot-labs/lock/src/utils';
import connectors, {
getConnectorIconUrl,
mapConnectorId
} from '@/helpers/connectors';
const win = window;
const injected = getInjected();
if (injected)
connectors['injected'] = {
...connectors['injected'],
...injected,
id: 'injected',
icon: connectors[mapConnectorId(injected.id)]?.icon ?? injected.icon
};
import { Connector, ConnectorType } from '@/networks/types';
const props = defineProps<{
open: boolean;
supportedConnectors: string[];
supportedConnectors: ConnectorType[];
}>();
const emit = defineEmits<{
(e: 'pick', connector: string): void;
(e: 'pick', connector: Connector): void;
(e: 'close'): void;
}>();
const { open } = toRefs(props);
const availableConnectors = computed(() => {
return Object.values(connectors).filter(connector => {
if (!props.supportedConnectors.includes(connector.id)) return false;
const hasNoType = !('type' in connector) || !connector.type;
const isActive =
'type' in connector &&
'root' in connector &&
connector.type === 'injected' &&
win[connector.root];
return hasNoType || isActive;
});
});
</script>

<template>
<UiModal :open="open" @close="emit('close')">
<template #header>
<h3 v-text="'Log in'" />
</template>
<div>
<div class="m-4 space-y-2 flex flex-col">
<button
v-for="connector in availableConnectors"
:key="connector.id"
type="button"
@click="emit('pick', connector.id)"
>
<UiButton class="w-full flex justify-center items-center">
<img
:src="getConnectorIconUrl(connector.icon)"
height="28"
width="28"
class="mr-2 -mt-1"
:alt="connector.name"
/>
{{ connector.name }}
</UiButton>
</button>
</div>
<div class="m-4 space-y-2 flex flex-col">
<Connectors
:connectors-type="supportedConnectors"
@click="(connector: Connector) => emit('pick', connector)"
/>
</div>
</UiModal>
</template>
8 changes: 4 additions & 4 deletions apps/ui/src/composables/useAccount.ts
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
import { getNetwork, offchainNetworks } from '@/networks';
import { STARKNET_CONNECTORS } from '@/networks/common/constants';
import { Connector } from '@/networks/types';
import { NetworkID, Proposal, Vote } from '@/types';

const VOTES_LIMIT = 1000;

const { web3 } = useWeb3();
const { web3, connector } = useWeb3();

const votes = ref<Record<Proposal['id'], Vote>>({});
const pendingVotes = ref<Record<string, boolean>>({});

Expand All @@ -22,11 +22,11 @@ watch(
export function useAccount() {
async function loadVotes(networkId: NetworkID, spaceIds: string[]) {
const account = web3.value.account;
if (!account) return;
if (!account || !connector.value) return;

// On starknet account, we don't load votes for offchain networks (unsupported)
if (
STARKNET_CONNECTORS.includes(web3.value.type as Connector) &&
STARKNET_CONNECTORS.includes(connector.value.type) &&
offchainNetworks.includes(networkId)
)
return;
Expand Down
Loading

0 comments on commit 452daa7

Please sign in to comment.