diff --git a/package.json b/package.json
index c1682d3..025e204 100644
--- a/package.json
+++ b/package.json
@@ -40,7 +40,7 @@
"@cosmjs/tendermint-rpc": "^0.31.0",
"@dydxprotocol/v4-abacus": "^0.7.2",
"@dydxprotocol/v4-client-js": "^0.40.3",
- "@dydxprotocol/v4-localization": "^0.1.30",
+ "@dydxprotocol/v4-localization": "^0.1.31",
"@ethersproject/providers": "^5.7.2",
"@js-joda/core": "^5.5.3",
"@radix-ui/react-collapsible": "^1.0.3",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 7a386c0..a33ab5f 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -33,8 +33,8 @@ dependencies:
specifier: ^0.40.3
version: 0.40.3
'@dydxprotocol/v4-localization':
- specifier: ^0.1.30
- version: 0.1.30
+ specifier: ^0.1.31
+ version: 0.1.31
'@ethersproject/providers':
specifier: ^5.7.2
version: 5.7.2
@@ -1011,8 +1011,8 @@ packages:
- utf-8-validate
dev: false
- /@dydxprotocol/v4-localization@0.1.30:
- resolution: {integrity: sha512-xTlQuQmPz7wfGkjd07giYMAxRrolDbJE3DryJSIMB6R1MBq1wLzAcwp/iR/nELRwilRX9c44Tap0gGt+oAajiQ==}
+ /@dydxprotocol/v4-localization@0.1.31:
+ resolution: {integrity: sha512-hjWul8SazSneK37v9qM1gMkO37MncaObtvLzVQuaJDKjb0ojdHVWiIPETwQy/lV5ufR1isxYKMefVPVYQg0fAA==}
dev: false
/@dydxprotocol/v4-proto@0.4.1:
diff --git a/src/views/dialogs/OnboardingDialog.tsx b/src/views/dialogs/OnboardingDialog.tsx
index 11593f3..d7132ad 100644
--- a/src/views/dialogs/OnboardingDialog.tsx
+++ b/src/views/dialogs/OnboardingDialog.tsx
@@ -87,10 +87,10 @@ export const OnboardingDialog = ({ setIsOpen }: ElementProps) => {
title: stringGetter({ key: STRING_KEYS.ACKNOWLEDGE_TERMS }),
children: (
-
+ setIsOpen?.(false)} />
),
- width: '20rem',
+ width: '30rem',
},
[OnboardingSteps.DepositFunds]: {
title: stringGetter({ key: STRING_KEYS.DEPOSIT }),
diff --git a/src/views/dialogs/OnboardingDialog/AcknowledgeTerms.tsx b/src/views/dialogs/OnboardingDialog/AcknowledgeTerms.tsx
index e578798..41783e4 100644
--- a/src/views/dialogs/OnboardingDialog/AcknowledgeTerms.tsx
+++ b/src/views/dialogs/OnboardingDialog/AcknowledgeTerms.tsx
@@ -6,45 +6,67 @@ import { AppRoute } from '@/constants/routes';
import { STRING_KEYS } from '@/constants/localization';
import { ButtonAction } from '@/constants/buttons';
+import { layoutMixins } from '@/styles/layoutMixins';
+
import { Button } from '@/components/Button';
import { Link } from '@/components/Link';
type ElementProps = {
+ onClose?: () => void;
onContinue?: () => void;
};
-export const AcknowledgeTerms = ({ onContinue }: ElementProps) => {
+export const AcknowledgeTerms = ({ onClose, onContinue }: ElementProps) => {
const stringGetter = useStringGetter();
- const { saveHasAcknowledgedTerms } = useAccounts();
+ const { disconnect, saveHasAcknowledgedTerms } = useAccounts();
const onAcknowledgement = () => {
saveHasAcknowledgedTerms(true);
onContinue?.();
};
+ const onDecline = () => {
+ disconnect();
+ onClose?.();
+ }
+
return (
<>
-
+
{stringGetter({
- key: STRING_KEYS.LEGAL_UPDATES_DESCRIPTION,
+ key: STRING_KEYS.TOS_TITLE,
params: {
- TOU: (
+ TERMS_LINK: (
{stringGetter({ key: STRING_KEYS.TERMS_OF_USE })}
),
- PRIVACY_POLICY: (
+ PRIVACY_POLICY_LINK: (
{stringGetter({ key: STRING_KEYS.PRIVACY_POLICY })}
),
},
})}
-
-
+
+
+
+ - {stringGetter({ key: STRING_KEYS.TOS_LINE1 })}
+ - {stringGetter({ key: STRING_KEYS.TOS_LINE2 })}
+ - {stringGetter({ key: STRING_KEYS.TOS_LINE3 })}
+ - {stringGetter({ key: STRING_KEYS.TOS_LINE4 })}
+ - {stringGetter({ key: STRING_KEYS.TOS_LINE5 })}
+
+
+
+
+ {stringGetter({ key: STRING_KEYS.CLOSE })}
+
+
+ {stringGetter({ key: STRING_KEYS.I_AGREE })}
+
+
>
);
};
@@ -59,3 +81,23 @@ Styled.Link = styled(Link)`
color: var(--color-accent);
}
`;
+
+Styled.TOS = styled.section`
+ background-color: var(--color-layer-4);
+ padding: 1rem 1rem 1rem 2rem;
+ border-radius: 0.875rem;
+ > ul {
+ ${layoutMixins.column};
+ gap: 1rem;
+ }
+`;
+
+Styled.Row = styled.div`
+ ${layoutMixins.row};
+
+ gap: 1rem;
+`;
+
+Styled.Button = styled(Button)`
+ flex-grow: 1;
+`;