From 5a1a2b7291e131b949b3b2db30ebe6c24b03a713 Mon Sep 17 00:00:00 2001
From: Dylan Jeffers <dylan@audius.co>
Date: Wed, 9 Nov 2022 23:30:48 -0800
Subject: [PATCH 1/8] [C-1452] Implement release-date upload field

---
 packages/mobile/ios/Podfile.lock              |   6 +
 packages/mobile/package-lock.json             |  16 +++
 packages/mobile/package.json                  |   2 +
 .../upload-screen/fields/ReleaseDateField.tsx | 105 ++++++++++++++++++
 .../src/screens/upload-screen/fields/index.ts |   1 +
 .../screens/AdvancedOptionsScreen.tsx         |  13 ++-
 6 files changed, 139 insertions(+), 4 deletions(-)
 create mode 100644 packages/mobile/src/screens/upload-screen/fields/ReleaseDateField.tsx

diff --git a/packages/mobile/ios/Podfile.lock b/packages/mobile/ios/Podfile.lock
index 9068119b7e..44b3585690 100644
--- a/packages/mobile/ios/Podfile.lock
+++ b/packages/mobile/ios/Podfile.lock
@@ -454,6 +454,8 @@ PODS:
     - React-Core
   - RNCPushNotificationIOS (1.10.1):
     - React-Core
+  - RNDateTimePicker (6.5.4):
+    - React-Core
   - RNFBAnalytics (14.5.1):
     - Firebase/Analytics (= 8.12.1)
     - React-Core
@@ -557,6 +559,7 @@ DEPENDENCIES:
   - "RNCClipboard (from `../node_modules/@react-native-clipboard/clipboard`)"
   - "RNCMaskedView (from `../node_modules/@react-native-masked-view/masked-view`)"
   - "RNCPushNotificationIOS (from `../node_modules/@react-native-community/push-notification-ios`)"
+  - "RNDateTimePicker (from `../node_modules/@react-native-community/datetimepicker`)"
   - "RNFBAnalytics (from `../node_modules/@react-native-firebase/analytics`)"
   - "RNFBApp (from `../node_modules/@react-native-firebase/app`)"
   - "RNFBCrashlytics (from `../node_modules/@react-native-firebase/crashlytics`)"
@@ -710,6 +713,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/@react-native-masked-view/masked-view"
   RNCPushNotificationIOS:
     :path: "../node_modules/@react-native-community/push-notification-ios"
+  RNDateTimePicker:
+    :path: "../node_modules/@react-native-community/datetimepicker"
   RNFBAnalytics:
     :path: "../node_modules/@react-native-firebase/analytics"
   RNFBApp:
@@ -818,6 +823,7 @@ SPEC CHECKSUMS:
   RNCClipboard: f49f3de56b40d0f4104680dabadc7a1f063f4fd4
   RNCMaskedView: 1f6cd0cb5e38ec01960e12fd8f95ecad809f8fbb
   RNCPushNotificationIOS: 089da3b657e1e3d464f38195fd2e3069608ef5af
+  RNDateTimePicker: 41bf71ec9c20cfe7762eb93b2c26ad2bdb4fc2e6
   RNFBAnalytics: 74cd9c60531ed33e5347b2dccafa172ae1a851a4
   RNFBApp: 5bae3002117e55f3c9aa0fb38175dd16c8046c90
   RNFBCrashlytics: 33615211c6c6c4039ae71849091f6ac38ab65aba
diff --git a/packages/mobile/package-lock.json b/packages/mobile/package-lock.json
index c50d78758d..affdd7ea3e 100644
--- a/packages/mobile/package-lock.json
+++ b/packages/mobile/package-lock.json
@@ -5144,6 +5144,14 @@
         "ora": "^3.4.0"
       }
     },
+    "@react-native-community/datetimepicker": {
+      "version": "6.5.4",
+      "resolved": "https://registry.npmjs.org/@react-native-community/datetimepicker/-/datetimepicker-6.5.4.tgz",
+      "integrity": "sha512-6YUz6d6bEh409eG6HcL/oHmqElWtQgeHmVoVIfuJusf54ZsHr14NqHvrux0P1vBv5vcYrn9Qi8OwZZiFVyp9vw==",
+      "requires": {
+        "invariant": "^2.2.4"
+      }
+    },
     "@react-native-community/eslint-config": {
       "version": "0.0.5",
       "resolved": "https://registry.npmjs.org/@react-native-community/eslint-config/-/eslint-config-0.0.5.tgz",
@@ -19278,6 +19286,14 @@
         "react-native-animatable": "1.3.3"
       }
     },
+    "react-native-modal-datetime-picker": {
+      "version": "14.0.0",
+      "resolved": "https://registry.npmjs.org/react-native-modal-datetime-picker/-/react-native-modal-datetime-picker-14.0.0.tgz",
+      "integrity": "sha512-orI0BMgX9uooSZWYIILmMaZXqi8Ebr0vqsLUFL03zORpv9NvkBlLMQ8dZVdDxWUc1Lbx/N5DJskC16AOypPy8Q==",
+      "requires": {
+        "prop-types": "^15.7.2"
+      }
+    },
     "react-native-music-control": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/react-native-music-control/-/react-native-music-control-1.4.0.tgz",
diff --git a/packages/mobile/package.json b/packages/mobile/package.json
index bd57fedca6..c40c9fe934 100644
--- a/packages/mobile/package.json
+++ b/packages/mobile/package.json
@@ -47,6 +47,7 @@
     "@react-native-async-storage/async-storage": "1.15.14",
     "@react-native-clipboard/clipboard": "1.9.0",
     "@react-native-community/blur": "3.6.0",
+    "@react-native-community/datetimepicker": "^6.5.4",
     "@react-native-community/hooks": "2.8.1",
     "@react-native-community/netinfo": "9.3.0",
     "@react-native-community/push-notification-ios": "1.10.1",
@@ -102,6 +103,7 @@
     "react-native-linear-gradient": "github:react-native-linear-gradient/react-native-linear-gradient.git#9aece37cdf7d33ed52a1747b36e9e84f3c7a49ef",
     "react-native-markdown-display": "7.0.0-alpha.2",
     "react-native-modal": "11.5.4",
+    "react-native-modal-datetime-picker": "^14.0.0",
     "react-native-music-control": "1.4.0",
     "react-native-pager-view": "5.4.6",
     "react-native-permissions": "3.0.5",
diff --git a/packages/mobile/src/screens/upload-screen/fields/ReleaseDateField.tsx b/packages/mobile/src/screens/upload-screen/fields/ReleaseDateField.tsx
new file mode 100644
index 0000000000..1a7d15cc57
--- /dev/null
+++ b/packages/mobile/src/screens/upload-screen/fields/ReleaseDateField.tsx
@@ -0,0 +1,105 @@
+import { useCallback, useMemo, useState } from 'react'
+
+import type { Nullable } from '@audius/common'
+import { useField } from 'formik'
+import moment from 'moment'
+import { TouchableOpacity } from 'react-native-gesture-handler'
+import DateTimePickerModal from 'react-native-modal-datetime-picker'
+
+import { Divider, Pill, Text } from 'app/components/core'
+import { makeStyles } from 'app/styles'
+
+const isToday = (date: Date) => {
+  const today = new Date()
+  return (
+    date.getDate() === today.getDate() &&
+    date.getMonth() === today.getMonth() &&
+    date.getFullYear() === today.getFullYear()
+  )
+}
+
+const messages = {
+  label: 'Release Date',
+  today: 'Today'
+}
+
+const useStyles = makeStyles(({ spacing }) => ({
+  root: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    paddingHorizontal: spacing(2),
+    paddingTop: spacing(2),
+    paddingBottom: spacing(4)
+  },
+  label: {
+    marginTop: spacing(1)
+  },
+  dateText: {
+    marignTop: spacing(1),
+    textTransform: 'uppercase'
+  },
+  divider: {
+    marginHorizontal: spacing(-4)
+  }
+}))
+
+export const ReleaseDateField = () => {
+  const styles = useStyles()
+  const [{ value, onChange }] = useField<Nullable<string>>('release_date')
+  const [isOpen, setIsOpen] = useState(false)
+
+  const releaseDate = useMemo(
+    () => (value ? new Date(value) : new Date()),
+    [value]
+  )
+
+  const handlePress = useCallback(() => {
+    setIsOpen(true)
+  }, [])
+
+  const handleClose = useCallback(() => {
+    setIsOpen(false)
+  }, [])
+
+  const handleChange = useCallback(
+    (selectedDate: Date) => {
+      const dateString = moment(selectedDate).toString()
+      console.log('hello?', dateString)
+      if (dateString) {
+        onChange('release_date')(dateString)
+      }
+      handleClose()
+    },
+    [onChange, handleClose]
+  )
+
+  return (
+    <>
+      <TouchableOpacity style={styles.root} onPress={handlePress}>
+        <Text fontSize='large' weight='demiBold' style={styles.label}>
+          {messages.label}
+        </Text>
+        <Pill>
+          <Text fontSize='small' weight='demiBold' style={styles.dateText}>
+            {isToday(releaseDate)
+              ? messages.today
+              : moment(releaseDate).format('MM/DD/YY')}
+          </Text>
+        </Pill>
+      </TouchableOpacity>
+      <Divider style={styles.divider} />
+      <DateTimePickerModal
+        isVisible={isOpen}
+        date={releaseDate}
+        mode='date'
+        onConfirm={handleChange}
+        onCancel={handleClose}
+        display='inline'
+        themeVariant='light'
+        accentColor='red'
+        maximumDate={new Date()}
+      />
+    </>
+  )
+}
diff --git a/packages/mobile/src/screens/upload-screen/fields/index.ts b/packages/mobile/src/screens/upload-screen/fields/index.ts
index bb1ad6abfe..c2a0cd6a9d 100644
--- a/packages/mobile/src/screens/upload-screen/fields/index.ts
+++ b/packages/mobile/src/screens/upload-screen/fields/index.ts
@@ -9,3 +9,4 @@ export * from './RemixSettingsField'
 export * from './AdvancedOptionsField'
 export * from './TrackVisibilityField'
 export * from './SwitchField'
+export * from './ReleaseDateField'
diff --git a/packages/mobile/src/screens/upload-screen/screens/AdvancedOptionsScreen.tsx b/packages/mobile/src/screens/upload-screen/screens/AdvancedOptionsScreen.tsx
index a3a145df0a..ebd84df0c2 100644
--- a/packages/mobile/src/screens/upload-screen/screens/AdvancedOptionsScreen.tsx
+++ b/packages/mobile/src/screens/upload-screen/screens/AdvancedOptionsScreen.tsx
@@ -1,8 +1,10 @@
+import { View } from 'react-native'
+
 import IconIndent from 'app/assets/images/iconIndent.svg'
 import { makeStyles } from 'app/styles'
 
 import { UploadStackScreen } from '../UploadStackScreen'
-import { SubmenuList, TrackVisibilityField } from '../fields'
+import { ReleaseDateField, SubmenuList, TrackVisibilityField } from '../fields'
 
 const useStyles = makeStyles(({ spacing }) => ({
   content: {
@@ -24,9 +26,12 @@ export const AdvancedOptionsScreen = () => {
       bottomSection={null}
       variant='white'
     >
-      <SubmenuList style={styles.content}>
-        <TrackVisibilityField />
-      </SubmenuList>
+      <View style={styles.content}>
+        <SubmenuList>
+          <TrackVisibilityField />
+        </SubmenuList>
+        <ReleaseDateField />
+      </View>
     </UploadStackScreen>
   )
 }

From d57641c4b37bc3dab7bca8cfa21f1513f621356c Mon Sep 17 00:00:00 2001
From: Dylan Jeffers <dylan@audius.co>
Date: Thu, 10 Nov 2022 11:21:26 -0800
Subject: [PATCH 2/8] Finalize

---
 packages/mobile/package-lock.json             |  2 +-
 .../mobile/src/components/core/Button.tsx     |  4 +-
 .../upload-screen/fields/ReleaseDateField.tsx | 53 +++++++++++++++++--
 3 files changed, 53 insertions(+), 6 deletions(-)

diff --git a/packages/mobile/package-lock.json b/packages/mobile/package-lock.json
index affdd7ea3e..07952c2613 100644
--- a/packages/mobile/package-lock.json
+++ b/packages/mobile/package-lock.json
@@ -8312,7 +8312,7 @@
     "babel-runtime": {
       "version": "6.26.0",
       "resolved": "https://registry.npmjs.org/babel-runtime/-/babel-runtime-6.26.0.tgz",
-      "integrity": "sha512-ITKNuq2wKlW1fJg9sSW52eepoYgZBggvOAHC0u/CYu/qxQ9EVzThCgR69BnSXLHjy2f7SY5zaQ4yt7H9ZVxY2g==",
+      "integrity": "sha1-llxwWGaOgrVde/4E/yM3vItWR/4=",
       "requires": {
         "core-js": "^2.4.0",
         "regenerator-runtime": "^0.11.0"
diff --git a/packages/mobile/src/components/core/Button.tsx b/packages/mobile/src/components/core/Button.tsx
index 9a3cf56413..82690daf1e 100644
--- a/packages/mobile/src/components/core/Button.tsx
+++ b/packages/mobile/src/components/core/Button.tsx
@@ -219,6 +219,7 @@ export type ButtonProps = Omit<RNButtonProps, 'title'> &
     url?: string
     corners?: 'rounded' | 'pill'
     title: ReactNode
+    pressScale?: number
   }
 
 export const Button = (props: ButtonProps) => {
@@ -241,6 +242,7 @@ export const Button = (props: ButtonProps) => {
     url,
     corners = 'rounded',
     disabled,
+    pressScale = 0.97,
     ...other
   } = props
   const [isPressing, setIsPressing] = useState(false)
@@ -254,7 +256,7 @@ export const Button = (props: ButtonProps) => {
     scale,
     handlePressIn: handlePressInScale,
     handlePressOut: handlePressOutScale
-  } = usePressScaleAnimation(0.97, false)
+  } = usePressScaleAnimation(pressScale, false)
 
   const { primaryDark1, neutralLight10, neutralLight7, accentRedDark1 } =
     useThemeColors()
diff --git a/packages/mobile/src/screens/upload-screen/fields/ReleaseDateField.tsx b/packages/mobile/src/screens/upload-screen/fields/ReleaseDateField.tsx
index 1a7d15cc57..1767d6aa1d 100644
--- a/packages/mobile/src/screens/upload-screen/fields/ReleaseDateField.tsx
+++ b/packages/mobile/src/screens/upload-screen/fields/ReleaseDateField.tsx
@@ -1,13 +1,21 @@
 import { useCallback, useMemo, useState } from 'react'
 
 import type { Nullable } from '@audius/common'
+import { Theme, themeSelectors } from '@audius/common'
 import { useField } from 'formik'
 import moment from 'moment'
 import { TouchableOpacity } from 'react-native-gesture-handler'
+import type {
+  CustomCancelButtonPropTypes,
+  CustomConfirmButtonPropTypes
+} from 'react-native-modal-datetime-picker'
 import DateTimePickerModal from 'react-native-modal-datetime-picker'
+import { useSelector } from 'react-redux'
 
-import { Divider, Pill, Text } from 'app/components/core'
+import { Button, Divider, Pill, Text } from 'app/components/core'
 import { makeStyles } from 'app/styles'
+import { useThemeColors, useThemeVariant } from 'app/utils/theme'
+const { getTheme } = themeSelectors
 
 const isToday = (date: Date) => {
   const today = new Date()
@@ -41,13 +49,47 @@ const useStyles = makeStyles(({ spacing }) => ({
   },
   divider: {
     marginHorizontal: spacing(-4)
+  },
+  datePickerModal: {
+    // Specific padding to hide the underlying "done" button with the "cancel" button
+    paddingBottom: 37
   }
 }))
 
+const ConfirmDateButton = (props: CustomConfirmButtonPropTypes) => {
+  const { label, onPress } = props
+  return (
+    <Button
+      style={{ borderRadius: 0 }}
+      variant='primary'
+      size='large'
+      title={label}
+      fullWidth
+      onPress={onPress}
+      pressScale={1}
+    />
+  )
+}
+
+const CancelDateButton = (props: CustomCancelButtonPropTypes) => {
+  const { label, onPress } = props
+  return (
+    <Button
+      variant='commonAlt'
+      size='large'
+      title={label}
+      fullWidth
+      onPress={onPress}
+    />
+  )
+}
+
 export const ReleaseDateField = () => {
   const styles = useStyles()
   const [{ value, onChange }] = useField<Nullable<string>>('release_date')
   const [isOpen, setIsOpen] = useState(false)
+  const { primary } = useThemeColors()
+  const theme = useThemeVariant()
 
   const releaseDate = useMemo(
     () => (value ? new Date(value) : new Date()),
@@ -65,7 +107,6 @@ export const ReleaseDateField = () => {
   const handleChange = useCallback(
     (selectedDate: Date) => {
       const dateString = moment(selectedDate).toString()
-      console.log('hello?', dateString)
       if (dateString) {
         onChange('release_date')(dateString)
       }
@@ -96,9 +137,13 @@ export const ReleaseDateField = () => {
         onConfirm={handleChange}
         onCancel={handleClose}
         display='inline'
-        themeVariant='light'
-        accentColor='red'
+        themeVariant={theme === Theme.DEFAULT ? 'light' : 'dark'}
+        isDarkModeEnabled={theme !== Theme.DEFAULT}
+        accentColor={primary}
         maximumDate={new Date()}
+        modalStyleIOS={styles.datePickerModal}
+        customConfirmButtonIOS={ConfirmDateButton}
+        customCancelButtonIOS={CancelDateButton}
       />
     </>
   )

From 5a78c8fbe53fa9fcf5d149bea31cd47bee23231f Mon Sep 17 00:00:00 2001
From: Dylan Jeffers <dylan@audius.co>
Date: Thu, 10 Nov 2022 11:30:05 -0800
Subject: [PATCH 3/8] Fix lint

---
 .../src/screens/upload-screen/fields/ReleaseDateField.tsx     | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/packages/mobile/src/screens/upload-screen/fields/ReleaseDateField.tsx b/packages/mobile/src/screens/upload-screen/fields/ReleaseDateField.tsx
index 1767d6aa1d..0301a5e31f 100644
--- a/packages/mobile/src/screens/upload-screen/fields/ReleaseDateField.tsx
+++ b/packages/mobile/src/screens/upload-screen/fields/ReleaseDateField.tsx
@@ -1,7 +1,7 @@
 import { useCallback, useMemo, useState } from 'react'
 
 import type { Nullable } from '@audius/common'
-import { Theme, themeSelectors } from '@audius/common'
+import { Theme } from '@audius/common'
 import { useField } from 'formik'
 import moment from 'moment'
 import { TouchableOpacity } from 'react-native-gesture-handler'
@@ -10,12 +10,10 @@ import type {
   CustomConfirmButtonPropTypes
 } from 'react-native-modal-datetime-picker'
 import DateTimePickerModal from 'react-native-modal-datetime-picker'
-import { useSelector } from 'react-redux'
 
 import { Button, Divider, Pill, Text } from 'app/components/core'
 import { makeStyles } from 'app/styles'
 import { useThemeColors, useThemeVariant } from 'app/utils/theme'
-const { getTheme } = themeSelectors
 
 const isToday = (date: Date) => {
   const today = new Date()

From 6e2b27e234d9da9c0771996c661fe563aeef0bee Mon Sep 17 00:00:00 2001
From: Dylan Jeffers <dylan@audius.co>
Date: Thu, 10 Nov 2022 18:01:15 -0800
Subject: [PATCH 4/8] [C-1461] Implement license-type/icws upload flow

---
 package-lock.json                             |  50 ++---
 .../src/assets/images/creativeCommons/by.svg  |   4 +
 .../src/assets/images/creativeCommons/cc.svg  |   4 +
 .../assets/images/creativeCommons/nc-eu.svg   |   4 +
 .../assets/images/creativeCommons/nc-jp.svg   |   4 +
 .../src/assets/images/creativeCommons/nc.svg  |   4 +
 .../src/assets/images/creativeCommons/nd.svg  |   4 +
 .../src/assets/images/creativeCommons/sa.svg  |   4 +
 .../src/components/core/ContextualSubmenu.tsx |  36 +++-
 .../src/components/core/SegmentedControl.tsx  |  22 ++-
 .../mobile/src/components/core/TextInput.tsx  |   2 +
 .../upload-screen/CompleteTrackScreen.tsx     |  15 +-
 .../upload-screen/CompleteTrackStack.tsx      |   4 +
 .../upload-screen/SelectTrackScreen.tsx       |   2 +-
 .../upload-screen/fields/IsrcIswcField.tsx    |  23 +++
 .../upload-screen/fields/LicenseTypeField.tsx |  77 ++++++++
 .../upload-screen/fields/ReleaseDateField.tsx |   2 +-
 .../fields/TrackVisibilityField.tsx           |  51 +----
 .../src/screens/upload-screen/fields/index.ts |   2 +
 .../screens/AdvancedOptionsScreen.tsx         |  12 +-
 .../upload-screen/screens/IsrcIswcScreen.tsx  |  40 ++++
 .../screens/LicenseTypeScreen.tsx             | 177 ++++++++++++++++++
 .../screens/upload-screen/screens/index.ts    |   2 +
 .../utils/computeLicenseIcons.ts              |  27 +++
 .../{ => utils}/processTrackFile.ts           |   0
 .../web/src/components/data-entry/FormTile.js |   2 +-
 ...ativeCommonsUtil.js => creativeCommons.ts} |  25 +--
 27 files changed, 494 insertions(+), 105 deletions(-)
 create mode 100644 packages/mobile/src/assets/images/creativeCommons/by.svg
 create mode 100644 packages/mobile/src/assets/images/creativeCommons/cc.svg
 create mode 100644 packages/mobile/src/assets/images/creativeCommons/nc-eu.svg
 create mode 100644 packages/mobile/src/assets/images/creativeCommons/nc-jp.svg
 create mode 100644 packages/mobile/src/assets/images/creativeCommons/nc.svg
 create mode 100644 packages/mobile/src/assets/images/creativeCommons/nd.svg
 create mode 100644 packages/mobile/src/assets/images/creativeCommons/sa.svg
 create mode 100644 packages/mobile/src/screens/upload-screen/fields/IsrcIswcField.tsx
 create mode 100644 packages/mobile/src/screens/upload-screen/fields/LicenseTypeField.tsx
 create mode 100644 packages/mobile/src/screens/upload-screen/screens/IsrcIswcScreen.tsx
 create mode 100644 packages/mobile/src/screens/upload-screen/screens/LicenseTypeScreen.tsx
 create mode 100644 packages/mobile/src/screens/upload-screen/utils/computeLicenseIcons.ts
 rename packages/mobile/src/screens/upload-screen/{ => utils}/processTrackFile.ts (100%)
 rename packages/web/src/utils/{creativeCommonsUtil.js => creativeCommons.ts} (90%)

diff --git a/package-lock.json b/package-lock.json
index ab49edc2e0..ff23dffe95 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1996,7 +1996,7 @@
     "asap": {
       "version": "2.0.6",
       "resolved": "https://registry.npmjs.org/asap/-/asap-2.0.6.tgz",
-      "integrity": "sha1-5QNHYR1+aQlDIIu9r+vLwvuGbUY=",
+      "integrity": "sha512-BSHWgDSAiKs50o2Re8ppvp3seVHXSRM44cdSsT9FfNEUUZLOGWVCsiWaRPWM1Znn+mqZ1OfVZ3z3DWEzSp7hRA==",
       "dev": true
     },
     "async": {
@@ -2710,13 +2710,13 @@
     "decamelize": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/decamelize/-/decamelize-1.2.0.tgz",
-      "integrity": "sha1-9lNNFRSCabIDUue+4m9QH5oZEpA=",
+      "integrity": "sha512-z2S+W9X73hAUUki+N+9Za2lBlun89zigOyGrsax+KUQ6wKW4ZoWpEYBkGhQjwAjjDCkWxhY0VKEhk8wzY7F5cA==",
       "dev": true
     },
     "decamelize-keys": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/decamelize-keys/-/decamelize-keys-1.1.0.tgz",
-      "integrity": "sha1-0XGoeTMlKAfrPLYdwcFEXQeN8tk=",
+      "integrity": "sha512-ocLWuYzRPoS9bfiSdDd3cxvrzovVMZnRDVEzAs+hWIVXGDbHxWMECij2OBuyB/An0FFW/nLuq6Kv1i/YC5Qfzg==",
       "dev": true,
       "requires": {
         "decamelize": "^1.1.0",
@@ -2734,7 +2734,7 @@
     "dedent": {
       "version": "0.7.0",
       "resolved": "https://registry.npmjs.org/dedent/-/dedent-0.7.0.tgz",
-      "integrity": "sha1-JJXduvbrh0q7Dhvp3yLS5aVEMmw=",
+      "integrity": "sha512-Q6fKUPqnAHAyhiUgFU7BUzLiv0kd8saH9al7tnu5Q/okj6dnupxyTgFIBjVzJATdfIAm9NAsvXNzjaKa+bxVyA==",
       "dev": true
     },
     "deep-is": {
@@ -2782,7 +2782,7 @@
     "depd": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz",
-      "integrity": "sha1-m81S4UwJd2PnSbJ0xDRu0uVgtak=",
+      "integrity": "sha512-7emPTl6Dpo6JRXOXjLRxck+FlLRX5847cLKEn00PLAgc3g2hTZZgr+e4c2v6QpSmLeFP3n5yUo7ft6avBK/5jQ==",
       "dev": true
     },
     "deprecation": {
@@ -2975,7 +2975,7 @@
     "escape-string-regexp": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
-      "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ="
+      "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg=="
     },
     "eslint": {
       "version": "8.25.0",
@@ -4506,7 +4506,7 @@
     "is-plain-obj": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-1.1.0.tgz",
-      "integrity": "sha1-caUMhCnfync8kqOQpKA7OfzVHT4=",
+      "integrity": "sha512-yvkRyxmFKEOQ4pNXCmJG5AEQNlXJS5LaONXo5/cLdTZdWvsZ1ioJEonLGAosKlMWE8lwUy/bJzMjcw8az73+Fg==",
       "dev": true
     },
     "is-plain-object": {
@@ -4582,7 +4582,7 @@
     "is-typedarray": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/is-typedarray/-/is-typedarray-1.0.0.tgz",
-      "integrity": "sha1-5HnICFjfDBsR3dppQPlgEfzaSpo=",
+      "integrity": "sha512-cyA56iCMHAh5CdzjJIa4aohJyeO1YbwLi3Jc35MmRU6poroFjIGZzUzupGiRPOjgHg9TLu43xbpwXk523fMxKA==",
       "dev": true
     },
     "is-unicode-supported": {
@@ -4623,7 +4623,7 @@
     "isobject": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz",
-      "integrity": "sha1-TkMekrEalzFjaqH5yNHMvP2reN8=",
+      "integrity": "sha512-WhB9zCku7EGTj/HQQRz5aUQEUeoQZH2bWcltRErOpymJ4boYE6wL9Tbr23krRPSZ+C5zqNSrSw+Cc7sZZ4b7vg==",
       "dev": true
     },
     "jake": {
@@ -4711,7 +4711,7 @@
     "json-stringify-safe": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz",
-      "integrity": "sha1-Epai1Y/UXxmg9s4B1lcB4sc1tus=",
+      "integrity": "sha512-ZClg6AaYvamvYEE82d3Iyd3vSSIjQ+odgjaTzRuO3s7toCdFKczob2i0zCh7JE8kWn17yvAWhUVxvqGwUalsRA==",
       "dev": true
     },
     "json5": {
@@ -4742,7 +4742,7 @@
     "jsonparse": {
       "version": "1.3.1",
       "resolved": "https://registry.npmjs.org/jsonparse/-/jsonparse-1.3.1.tgz",
-      "integrity": "sha1-P02uSpH6wxX3EGL4UhzCOfE2YoA=",
+      "integrity": "sha512-POQXvpdL69+CluYsillJ7SUhKvytYjW9vG/GKpnf+xP8UWgYEM/RaMzHHofbALDiKbbP1W8UEYmgGl39WkPZsg==",
       "dev": true
     },
     "jsx-ast-utils": {
@@ -4988,7 +4988,7 @@
     "lodash.ismatch": {
       "version": "4.4.0",
       "resolved": "https://registry.npmjs.org/lodash.ismatch/-/lodash.ismatch-4.4.0.tgz",
-      "integrity": "sha1-dWy1FQyjum8RCFp4hJZF8Yj4Xzc=",
+      "integrity": "sha512-fPMfXjGQEV9Xsq/8MTSgUf255gawYRbjwMyDbcvDhXgV7enSZA0hynz6vMPnpAb5iONEzBHBPsT+0zes5Z301g==",
       "dev": true
     },
     "lodash.merge": {
@@ -5317,7 +5317,7 @@
         "arrify": {
           "version": "1.0.1",
           "resolved": "https://registry.npmjs.org/arrify/-/arrify-1.0.1.tgz",
-          "integrity": "sha1-iYUI2iIm84DfkEcoRWhJwVAaSw0=",
+          "integrity": "sha512-3CYzex9M9FGQjCGMGyi6/31c8GJbgb0qGyrx5HWxPd0aCwh4cB2YjMb2Xf9UuoogrMrlO9cTqnB5rI5GHZTcUA==",
           "dev": true
         }
       }
@@ -6091,12 +6091,12 @@
     "os-tmpdir": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/os-tmpdir/-/os-tmpdir-1.0.2.tgz",
-      "integrity": "sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ="
+      "integrity": "sha512-D2FR03Vir7FIu45XBY20mTb+/ZSWB00sjU9jdQXt83gDrI4Ztz5Fs7/yy74g2N5SVQY4xY1qDr4rNddwYRVX0g=="
     },
     "p-finally": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/p-finally/-/p-finally-1.0.0.tgz",
-      "integrity": "sha1-P7z7FbiZpEEjs0ttzBi3JDNqLK4=",
+      "integrity": "sha512-LICb2p9CB7FS+0eR1oqWnHhp0FljGLZCWBE9aix0Uye9W8LTQPwMTYVGWQWIw9RdQiDg4+epXQODwIYJtSJaow==",
       "dev": true
     },
     "p-limit": {
@@ -6535,7 +6535,7 @@
     "promise-inflight": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/promise-inflight/-/promise-inflight-1.0.1.tgz",
-      "integrity": "sha1-mEcocL8igTL8vdhoEputEsPAKeM=",
+      "integrity": "sha512-6zWPyEOFaQBJYcGMHBKTKJ3u6TBsnMFOIZSa6ce1e/ZrrsOlnHRHbabMjLiBYKp+n44X9eUI6VUPaukCXHuG4g==",
       "dev": true
     },
     "promise-retry": {
@@ -6571,7 +6571,7 @@
     "proto-list": {
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/proto-list/-/proto-list-1.2.4.tgz",
-      "integrity": "sha1-IS1b/hMYMGpCD2QCuOJv85ZHqEk=",
+      "integrity": "sha512-vtK/94akxsTMhe0/cbfpR+syPuszcuwhqVjJq26CuNDgFGj682oRBXOP5MJpv2r7JtE8MsiepGIqvvOTBwn2vA==",
       "dev": true
     },
     "protocols": {
@@ -6595,7 +6595,7 @@
     "q": {
       "version": "1.5.1",
       "resolved": "https://registry.npmjs.org/q/-/q-1.5.1.tgz",
-      "integrity": "sha1-fjL3W0E4EpHQRhHxvxQQmsAGUdc=",
+      "integrity": "sha512-kV/CThkXo6xyFEZUugw/+pIOywXcDbFYgSct5cT3gqlbkBE1SJdwy6UQoZvodiWF/ckQLZyDE/Bu1M6gVu5lVw==",
       "dev": true
     },
     "queue-microtask": {
@@ -6837,7 +6837,7 @@
     "require-directory": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
-      "integrity": "sha1-jGStX9MNqxyXbiNE/+f3kqam30I=",
+      "integrity": "sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==",
       "dev": true
     },
     "resolve": {
@@ -6886,7 +6886,7 @@
     "retry": {
       "version": "0.12.0",
       "resolved": "https://registry.npmjs.org/retry/-/retry-0.12.0.tgz",
-      "integrity": "sha1-G0KmJmoh8HQh0bC1S33BZ7AcATs=",
+      "integrity": "sha512-9LkiTwjUh6rT555DtE9rTX+BKByPfrMzEAtnlEtdEwr3Nkffwiihqe2bWADg+OQRjt9gl6ICdmB/ZFDCGAtSow==",
       "dev": true
     },
     "reusify": {
@@ -6957,7 +6957,7 @@
     "set-blocking": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz",
-      "integrity": "sha1-BF+XgtARrppoA93TgrJDkrPYkPc=",
+      "integrity": "sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw==",
       "dev": true
     },
     "shallow-clone": {
@@ -7299,7 +7299,7 @@
     "temp-dir": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/temp-dir/-/temp-dir-1.0.0.tgz",
-      "integrity": "sha1-CnwOom06Oa+n4OvqnB/AvE2qAR0=",
+      "integrity": "sha512-xZFXEGbG7SNC3itwBzI3RYjq/cEhBkx2hJuKGIUOcEULmkQExXiHat2z/qkISYsuR+IKumhEfKKbV5qXmhICFQ==",
       "dev": true
     },
     "text-extensions": {
@@ -7317,7 +7317,7 @@
     "through": {
       "version": "2.3.8",
       "resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz",
-      "integrity": "sha1-DdTJ/6q8NXlgsbckEV1+Doai4fU="
+      "integrity": "sha512-w89qg7PI8wAdvX60bMDP+bFoD5Dvhm9oLheFp5O4a2QF0cSBGsBX4qZmadPMvVqlLJBBci+WqGGOAPvcDeNSVg=="
     },
     "through2": {
       "version": "4.0.2",
@@ -7414,7 +7414,7 @@
     "typedarray": {
       "version": "0.0.6",
       "resolved": "https://registry.npmjs.org/typedarray/-/typedarray-0.0.6.tgz",
-      "integrity": "sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=",
+      "integrity": "sha512-/aCDEGatGvZ2BIk+HmLf4ifCJFwvKFNb9/JeZPMulfgFracn9QFcAf5GO8B/mweUjSoblS5In0cWhqpfs/5PQA==",
       "dev": true
     },
     "typedarray-to-buffer": {
@@ -7499,7 +7499,7 @@
     "util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
-      "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8="
+      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw=="
     },
     "uuid": {
       "version": "8.3.2",
diff --git a/packages/mobile/src/assets/images/creativeCommons/by.svg b/packages/mobile/src/assets/images/creativeCommons/by.svg
new file mode 100644
index 0000000000..07e05651c5
--- /dev/null
+++ b/packages/mobile/src/assets/images/creativeCommons/by.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none"
+  xmlns="http://www.w3.org/2000/svg">
+  <path d="M11.9822 2C14.7909 2 17.1603 2.96406 19.0891 4.89281C21.0291 6.83344 22 9.2025 22 12C22 14.8097 21.0472 17.1488 19.1422 19.0175C17.1184 21.0059 14.7319 22 11.9822 22C9.27938 22 6.93437 21.0175 4.94656 19.0531C2.9825 17.0887 2 14.7381 2 12C2 9.26219 2.9825 6.89313 4.94656 4.89312C6.87531 2.96406 9.22 2 11.9822 2ZM12.0178 3.80375C9.74406 3.80375 7.82156 4.60156 6.25 6.19656C4.61875 7.86344 3.80344 9.79812 3.80344 12.0003C3.80344 14.2147 4.61281 16.1316 6.23156 17.7497C7.85063 19.3691 9.77906 20.1781 12.0172 20.1781C14.2431 20.1781 16.1841 19.3634 17.8387 17.7319C19.4103 16.22 20.1959 14.3094 20.1959 11.9997C20.1959 9.72594 19.3981 7.79187 17.8034 6.19625C16.2084 4.60125 14.2797 3.80375 12.0178 3.80375ZM14.6966 9.51781V13.6069H13.5541V18.4637H10.4466V13.6072H9.30406V9.51781C9.30406 9.33906 9.36656 9.1875 9.49125 9.0625C9.61656 8.93781 9.76844 8.875 9.94656 8.875H14.0541C14.2206 8.875 14.3697 8.9375 14.5003 9.0625C14.6306 9.1875 14.6966 9.33937 14.6966 9.51781ZM10.6069 6.94656C10.6069 6.00656 11.0709 5.53594 12 5.53594C12.9291 5.53594 13.3928 6.00594 13.3928 6.94656C13.3928 7.875 12.9284 8.33937 12 8.33937C11.0716 8.33937 10.6069 7.875 10.6069 6.94656Z" fill="#000"/>
+</svg>
diff --git a/packages/mobile/src/assets/images/creativeCommons/cc.svg b/packages/mobile/src/assets/images/creativeCommons/cc.svg
new file mode 100644
index 0000000000..3661e226be
--- /dev/null
+++ b/packages/mobile/src/assets/images/creativeCommons/cc.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none"
+  xmlns="http://www.w3.org/2000/svg">
+  <path d="M11.9817 2C14.779 2 17.1606 2.97658 19.1246 4.9288C20.0647 5.86912 20.7794 6.94383 21.2675 8.15197C21.7553 9.36043 22 10.6429 22 12.0002C22 13.3692 21.7584 14.6521 21.2769 15.848C20.7947 17.0443 20.0831 18.1012 19.1431 19.0178C18.1671 19.9818 17.0599 20.7203 15.8215 21.2322C14.5836 21.7441 13.3036 22 11.9823 22C10.6611 22 9.39605 21.7475 8.1876 21.2409C6.97945 20.7353 5.896 20.0031 4.93755 19.045C3.97909 18.0868 3.25002 17.0062 2.75001 15.8037C2.25 14.6011 2 13.3336 2 12.0002C2 10.6786 2.25282 9.40793 2.75876 8.1876C3.26471 6.96727 4.00003 5.87506 4.96411 4.91067C6.86883 2.97064 9.20793 2 11.9817 2ZM12.018 3.80378C9.73231 3.80378 7.80947 4.6016 6.24975 6.19663C5.4638 6.99445 4.85973 7.89009 4.43723 8.88417C4.01409 9.87825 3.80315 10.917 3.80315 12.0005C3.80315 13.072 4.01409 14.1049 4.43723 15.0983C4.86004 16.093 5.4638 16.9799 6.24975 17.7596C7.03539 18.5396 7.92197 19.1343 8.91073 19.5456C9.89856 19.9562 10.9345 20.1615 12.018 20.1615C13.0892 20.1615 14.1274 19.9537 15.1346 19.5368C16.1405 19.1196 17.0474 18.519 17.8574 17.7334C19.4168 16.2096 20.1962 14.2989 20.1962 12.0008C20.1962 10.8936 19.9937 9.84606 19.589 8.85792C19.185 7.86978 18.5953 6.98914 17.8221 6.21475C16.214 4.60754 14.2799 3.80378 12.018 3.80378ZM11.8927 10.3398L10.5529 11.0364C10.4098 10.7392 10.2345 10.5304 10.0264 10.4114C9.81793 10.2926 9.62449 10.2329 9.44574 10.2329C8.55323 10.2329 8.10635 10.822 8.10635 12.0008C8.10635 12.5364 8.21947 12.9645 8.44541 13.2861C8.67167 13.6077 9.00511 13.7686 9.44574 13.7686C10.0292 13.7686 10.4398 13.4827 10.6783 12.9114L11.9102 13.5364C11.6483 14.0249 11.2851 14.4086 10.8208 14.6883C10.357 14.9683 9.84481 15.108 9.28511 15.108C8.39229 15.108 7.67165 14.8346 7.12414 14.2864C6.57663 13.7389 6.30288 12.977 6.30288 12.0011C6.30288 11.0486 6.57976 10.2929 7.13321 9.73325C7.68665 9.17386 8.38604 8.89386 9.23168 8.89386C10.4701 8.89323 11.3567 9.37543 11.8927 10.3398ZM17.6606 10.3398L16.339 11.0364C16.1962 10.7392 16.0202 10.5304 15.8121 10.4114C15.6033 10.2926 15.4036 10.2329 15.214 10.2329C14.3211 10.2329 13.8742 10.822 13.8742 12.0008C13.8742 12.5364 13.9877 12.9645 14.2136 13.2861C14.4396 13.6077 14.7727 13.7686 15.214 13.7686C15.7968 13.7686 16.2077 13.4827 16.4455 12.9114L17.6956 13.5364C17.4221 14.0249 17.0527 14.4086 16.589 14.6883C16.1246 14.9683 15.6187 15.108 15.0711 15.108C14.1661 15.108 13.4433 14.8346 12.902 14.2864C12.3595 13.7389 12.0889 12.977 12.0889 12.0011C12.0889 11.0486 12.3655 10.2929 12.9195 9.73325C13.4727 9.17386 14.1721 8.89386 15.0174 8.89386C16.2555 8.89323 17.1371 9.37543 17.6606 10.3398Z" fill="#000"/>
+</svg>
diff --git a/packages/mobile/src/assets/images/creativeCommons/nc-eu.svg b/packages/mobile/src/assets/images/creativeCommons/nc-eu.svg
new file mode 100644
index 0000000000..2972dc735b
--- /dev/null
+++ b/packages/mobile/src/assets/images/creativeCommons/nc-eu.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none"
+  xmlns="http://www.w3.org/2000/svg">
+  <path d="M19.0953 4.89969C17.16 2.96656 14.79 2 11.9872 2C9.21688 2 6.8725 2.96594 4.95344 4.89969C2.98406 6.9 2 9.26625 2 12C2 14.7328 2.98406 17.0831 4.95344 19.0494C6.9225 21.0169 9.26656 22 11.9872 22C14.74 22 17.1266 21.0078 19.1456 19.0247C21.0484 17.1412 22 14.7997 22 12C21.9997 9.19969 21.0316 6.8325 19.0953 4.89969ZM17.8434 17.725C16.1916 19.3581 14.2472 20.1741 12.0122 20.1741C9.77594 20.1741 7.84812 19.3656 6.22969 17.7487C4.61125 16.1319 3.80156 14.2156 3.80156 11.9997C3.80156 11.0622 3.94969 10.1756 4.24219 9.34031L6.89187 10.5134H6.70094V11.7019H7.63875C7.63875 11.87 7.62187 12.0372 7.62187 12.2044V12.4894H6.70094V13.6778H7.78875C7.93969 14.5653 8.27469 15.2853 8.72625 15.8544C9.66375 17.0934 11.1706 17.7625 12.8109 17.7625C13.8828 17.7625 14.8525 17.4447 15.4225 17.1262L15.0203 15.2687C14.6688 15.4528 13.8825 15.7034 13.1128 15.7034C12.2753 15.7034 11.4891 15.4528 10.9531 14.85C10.7022 14.5656 10.5181 14.18 10.4009 13.6781H14.0403L19.2119 15.9672C18.8541 16.6016 18.3994 17.1881 17.8434 17.725ZM11.3397 12.4891L11.3178 12.4722L11.3553 12.4891H11.3397ZM14.4534 11.7016H14.6031V10.5131H11.7687L10.6172 10.0037C10.7163 9.78094 10.8338 9.58156 10.9706 9.42562C11.4897 8.78844 12.2259 8.52094 13.0297 8.52094C13.7662 8.52094 14.4525 8.73844 14.8875 8.9225L15.3563 7.01375C14.7531 6.74656 13.8663 6.51219 12.8453 6.51219C11.2719 6.51219 9.9325 7.14813 8.97813 8.21938C8.76625 8.46406 8.5825 8.73875 8.41594 9.02906L5.1275 7.57375C5.44625 7.09594 5.82094 6.63719 6.255 6.19938C7.82406 4.59938 9.7425 3.79906 12.0125 3.79906C14.2812 3.79906 16.2091 4.59906 17.7944 6.19938C19.3956 7.7825 20.1966 9.71562 20.1966 12C20.1966 12.7522 20.1116 13.4619 19.9428 14.1313L14.4534 11.7016Z" fill="#000"/>
+</svg>
diff --git a/packages/mobile/src/assets/images/creativeCommons/nc-jp.svg b/packages/mobile/src/assets/images/creativeCommons/nc-jp.svg
new file mode 100644
index 0000000000..a7bc81c9f9
--- /dev/null
+++ b/packages/mobile/src/assets/images/creativeCommons/nc-jp.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none"
+  xmlns="http://www.w3.org/2000/svg">
+  <path d="M19.0963 4.89969C17.16 2.96656 14.7913 2 11.9869 2C9.21719 2 6.8725 2.96656 4.95406 4.89969C2.98438 6.9 2 9.26656 2 12C2 14.7331 2.98438 17.0837 4.95406 19.0503C6.9225 21.0169 9.26719 22 11.9869 22C14.7406 22 17.1272 21.0084 19.1459 19.025C21.0487 17.1419 22 14.7997 22 12C22 9.2 21.0319 6.83313 19.0963 4.89969ZM17.8441 17.725C16.1919 19.3584 14.2478 20.1747 12.0125 20.1747C9.77625 20.1747 7.84875 19.3662 6.23031 17.7494C4.61156 16.1334 3.8025 14.2166 3.8025 12C3.8025 11.1475 3.92469 10.3381 4.16625 9.56969L9.28594 11.8494H8.15937V13.4059H10.5019L10.7309 13.8813V14.6356H8.15937V16.1919H10.7309V18.4525H13.2194V16.1919H15.8072V14.7531L19.0722 16.2072C18.7378 16.7506 18.3288 17.2569 17.8441 17.725ZM15.5428 14.6356H13.22V13.8813L13.3372 13.6537L15.5428 14.6356ZM15.8075 12.5653V11.8494H14.2516L16.7906 7.17156H14.1369L12.3884 11.0428L11.4606 10.6297L9.86281 7.17156H7.20937L8.31063 9.22719L5.00875 7.75688C5.35188 7.21281 5.76625 6.69344 6.255 6.19969C7.82375 4.59969 9.7425 3.79969 12.0125 3.79969C14.2812 3.79969 16.2091 4.59969 17.7944 6.19969C19.3962 7.78312 20.1969 9.71625 20.1969 12C20.1969 12.8459 20.09 13.6378 19.8778 14.3772L15.8075 12.5653Z" fill="#000">
+  </svg>
diff --git a/packages/mobile/src/assets/images/creativeCommons/nc.svg b/packages/mobile/src/assets/images/creativeCommons/nc.svg
new file mode 100644
index 0000000000..8eef1a49e6
--- /dev/null
+++ b/packages/mobile/src/assets/images/creativeCommons/nc.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none"
+  xmlns="http://www.w3.org/2000/svg">
+  <path d="M11.9819 2C14.7913 2 17.1603 2.96406 19.0891 4.8925C21.0291 6.82125 22 9.19031 22 12C22 14.81 21.0475 17.1488 19.1422 19.0181C17.1187 21.0063 14.7316 22 11.9819 22C9.2675 22 6.9225 21.0119 4.94656 19.0359C2.9825 17.0712 2 14.7266 2 12C2 9.26188 2.9825 6.89281 4.94656 4.89281C6.875 2.96438 9.22 2 11.9819 2ZM4.25 9.30375C3.9525 10.125 3.80344 11.0241 3.80344 12.0003C3.80344 14.2147 4.61281 16.1316 6.23156 17.7503C7.8625 19.3578 9.79125 20.1613 12.0172 20.1613C14.2675 20.1613 16.2075 19.3463 17.8391 17.7147C18.4225 17.1553 18.8803 16.5719 19.2134 15.9641L15.4459 14.2856C15.3144 14.9169 14.9963 15.4316 14.4906 15.83C13.9838 16.2288 13.3859 16.4584 12.6956 16.5175V18.0534H11.535V16.5175C10.4278 16.5063 9.41563 16.1075 8.49938 15.3216L9.87437 13.9288C10.5288 14.5356 11.2731 14.8391 12.1066 14.8391C12.4516 14.8391 12.7466 14.7622 12.9909 14.6069C13.2347 14.4525 13.3572 14.1969 13.3572 13.8391C13.3572 13.5887 13.2675 13.3866 13.0891 13.2319L12.125 12.8209L10.9466 12.285L9.35719 11.5884L4.25 9.30375ZM12.0178 3.78562C9.74406 3.78562 7.82156 4.58906 6.25 6.19625C5.85688 6.58938 5.48781 7.03562 5.14281 7.53594L8.96437 9.25C9.13094 8.72625 9.44625 8.30656 9.91094 7.99125C10.3747 7.67594 10.9166 7.50031 11.5359 7.46438V5.92844H12.6969V7.46438C13.6137 7.51219 14.4469 7.82156 15.1969 8.39281L13.8931 9.73219C13.3328 9.33938 12.7622 9.14313 12.1787 9.14313C11.8691 9.14313 11.5925 9.20281 11.3488 9.32156C11.1047 9.44063 10.9825 9.64313 10.9825 9.92875C10.9825 10.0122 11.0122 10.0953 11.0716 10.1788L12.3394 10.7506L13.2144 11.1434L14.8219 11.8575L19.9459 14.1431C20.1131 13.4406 20.1963 12.7266 20.1963 12.0003C20.1963 9.7025 19.3988 7.76813 17.8037 6.19625C16.2203 4.58906 14.2909 3.78562 12.0178 3.78562Z" fill="#000"/>
+</svg>
diff --git a/packages/mobile/src/assets/images/creativeCommons/nd.svg b/packages/mobile/src/assets/images/creativeCommons/nd.svg
new file mode 100644
index 0000000000..da575b0cc4
--- /dev/null
+++ b/packages/mobile/src/assets/images/creativeCommons/nd.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none"
+  xmlns="http://www.w3.org/2000/svg">
+  <path d="M11.9822 2C14.7794 2 17.1481 2.97031 19.0891 4.91094C21.0291 6.83969 22 9.2025 22 12C22 14.7981 21.0472 17.1428 19.1422 19.0356C17.1306 21.0119 14.7434 22 11.9822 22C9.27938 22 6.93437 21.0178 4.94656 19.0531C2.9825 17.0894 2 14.7387 2 12.0003C2 9.27437 2.9825 6.91125 4.94656 4.91125C6.88688 2.97031 9.23219 2 11.9822 2ZM12.0178 3.80375C9.74406 3.80375 7.82156 4.6075 6.25 6.21469C4.61875 7.86969 3.80344 9.79812 3.80344 12C3.80344 14.2266 4.61281 16.1428 6.23156 17.75C7.85063 19.3694 9.77906 20.1784 12.0172 20.1784C14.2431 20.1784 16.1841 19.3634 17.8387 17.7322C19.4103 16.2084 20.1959 14.2981 20.1959 12C20.1959 9.71469 19.3981 7.78594 17.8034 6.21469C16.22 4.60688 14.2913 3.80375 12.0178 3.80375ZM15.7859 9.6425V11.3569H8.51813V9.6425H15.7859ZM15.7859 12.8572V14.5706H8.51813V12.8572H15.7859Z" fill="#000"/>
+</svg>
diff --git a/packages/mobile/src/assets/images/creativeCommons/sa.svg b/packages/mobile/src/assets/images/creativeCommons/sa.svg
new file mode 100644
index 0000000000..6a19b598d2
--- /dev/null
+++ b/packages/mobile/src/assets/images/creativeCommons/sa.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none"
+  xmlns="http://www.w3.org/2000/svg">
+  <path d="M11.9822 2C14.7794 2 17.1481 2.97031 19.0891 4.91094C21.0291 6.83969 22 9.2025 22 12C22 14.7981 21.0472 17.1428 19.1422 19.0356C17.1306 21.0119 14.7434 22 11.9822 22C9.27938 22 6.93437 21.0178 4.94656 19.0534C2.9825 17.0894 2 14.7387 2 12.0003C2 9.27437 2.9825 6.91125 4.94656 4.91125C6.88688 2.97031 9.23219 2 11.9822 2ZM12.0178 3.80375C9.74406 3.80375 7.82156 4.6075 6.25 6.21469C4.61875 7.86969 3.80344 9.79812 3.80344 12C3.80344 14.2266 4.61281 16.1428 6.23156 17.75C7.85063 19.3694 9.77906 20.1784 12.0172 20.1784C14.2431 20.1784 16.1841 19.3631 17.8387 17.7322C19.4103 16.2084 20.1959 14.2978 20.1959 12C20.1959 9.71469 19.3981 7.78594 17.8034 6.21469C16.22 4.60688 14.2913 3.80375 12.0178 3.80375ZM7.55344 10.5891C7.74375 9.36281 8.2375 8.41344 9.03531 7.74094C9.83281 7.06844 10.8028 6.73219 11.9459 6.73219C13.5169 6.73219 14.7675 7.23844 15.6959 8.24969C16.6244 9.26156 17.0887 10.5594 17.0887 12.1425C17.0887 13.6784 16.6066 14.955 15.6428 15.9725C14.6778 16.99 13.4284 17.4994 11.8922 17.4994C10.7612 17.4994 9.785 17.1603 8.96375 16.4816C8.14219 15.8028 7.64844 14.8387 7.48156 13.5887H10C10.0594 14.8031 10.7916 15.4103 12.1966 15.4103C12.8984 15.4103 13.4644 15.1066 13.8928 14.4997C14.3219 13.8928 14.5363 13.0828 14.5363 12.0712C14.5363 11.0116 14.3397 10.2053 13.9472 9.65156C13.5541 9.09812 12.9891 8.82125 12.2503 8.82125C10.9166 8.82125 10.1669 9.41031 10.0003 10.5887H10.7325L8.75062 12.5709L6.76844 10.5887L7.55344 10.5891Z" fill="#000"/>
+</svg>
diff --git a/packages/mobile/src/components/core/ContextualSubmenu.tsx b/packages/mobile/src/components/core/ContextualSubmenu.tsx
index d5d7370f37..f3ff0c7431 100644
--- a/packages/mobile/src/components/core/ContextualSubmenu.tsx
+++ b/packages/mobile/src/components/core/ContextualSubmenu.tsx
@@ -41,7 +41,11 @@ const useStyles = makeStyles(({ spacing }) => ({
   optionPills: {
     flexDirection: 'row',
     flexWrap: 'wrap',
-    marginTop: spacing(4)
+    marginTop: spacing(2)
+  },
+  pill: {
+    marginTop: spacing(2),
+    marginRight: spacing(2)
   },
   optionPillText: {
     textTransform: 'uppercase'
@@ -68,16 +72,28 @@ export const ContextualSubmenu = (props: ContextualSubmenuProps) => {
     navigation.push(submenuScreenName)
   }, [navigation, submenuScreenName])
 
-  const defaultRenderValue = (value: any) => (
-    <View style={styles.optionPills}>
-      <Pill>
-        <Text fontSize='small' weight='demiBold' style={styles.optionPillText}>
-          {value}
-        </Text>
-      </Pill>
-    </View>
-  )
+  const defaultRenderValue = (value: string | string[]) => {
+    const values = typeof value === 'string' ? [value] : value
+
+    return (
+      <View style={styles.optionPills}>
+        {values.map((value) => (
+          <Pill key={value} style={styles.pill}>
+            <Text
+              fontSize='small'
+              weight='demiBold'
+              style={styles.optionPillText}
+            >
+              {value}
+            </Text>
+          </Pill>
+        ))}
+      </View>
+    )
+  }
+
   const renderValue = renderValueProp ?? defaultRenderValue
+  console.log('renderValue?', renderValue)
 
   return (
     <TouchableOpacity onPress={handlePress} style={stylesProp?.root}>
diff --git a/packages/mobile/src/components/core/SegmentedControl.tsx b/packages/mobile/src/components/core/SegmentedControl.tsx
index b6f347ff21..240321bdfc 100644
--- a/packages/mobile/src/components/core/SegmentedControl.tsx
+++ b/packages/mobile/src/components/core/SegmentedControl.tsx
@@ -10,23 +10,23 @@ import { makeStyles } from 'app/styles'
 // Note, offset is the inner padding of the container div
 const offset = 3
 
-export type Option = {
-  key: string
+export type Option<Value> = {
+  key: Value
   text: string
 }
 
-export type SegmentedControlProps = {
+export type SegmentedControlProps<Value> = {
   // The options to display for the tab slider
-  options: Array<Option>
+  options: Array<Option<Value>>
 
   // Key of selected option
-  selected?: string
+  selected?: Value
 
   // Key of initially selected option
-  defaultSelected?: string
+  defaultSelected?: Value
 
   // Callback fired when new option is selected
-  onSelectOption: (key: string) => void
+  onSelectOption: (key: Value) => void
 
   fullWidth?: boolean
 } & StylesProps<{
@@ -99,7 +99,9 @@ const useStyles = makeStyles(({ palette, typography, spacing }) => ({
   }
 }))
 
-export const SegmentedControl = (props: SegmentedControlProps) => {
+export const SegmentedControl = <Value,>(
+  props: SegmentedControlProps<Value>
+) => {
   const {
     options,
     selected: selectedProp,
@@ -117,7 +119,7 @@ export const SegmentedControl = (props: SegmentedControlProps) => {
   const [selected, setSelected] = useState(defaultSelected)
   const selectedOption = selectedProp ?? selected
 
-  const handleSelectOption = (option: string) => {
+  const handleSelectOption = (option: Value) => {
     light()
     onSelectOption?.(option)
     setSelected(option)
@@ -195,7 +197,7 @@ export const SegmentedControl = (props: SegmentedControlProps) => {
           selectedOption === options[index + 1].key
 
         return (
-          <Fragment key={option.key}>
+          <Fragment key={option.text}>
             <Pressable
               onLayout={setOptionWidth(index)}
               style={[
diff --git a/packages/mobile/src/components/core/TextInput.tsx b/packages/mobile/src/components/core/TextInput.tsx
index 70eaa64615..7fe2f669b4 100644
--- a/packages/mobile/src/components/core/TextInput.tsx
+++ b/packages/mobile/src/components/core/TextInput.tsx
@@ -117,6 +117,7 @@ export const TextInput = forwardRef<RNTextInput, TextInputProps>(
       value,
       onFocus,
       onBlur,
+      placeholder,
       ...other
     } = props
     const { autoFocus } = other
@@ -242,6 +243,7 @@ export const TextInput = forwardRef<RNTextInput, TextInputProps>(
             value={value}
             onFocus={handleFocus}
             onBlur={handleBlur}
+            placeholder={label && !isFocused ? undefined : placeholder}
             {...other}
           />
           {clearable ? (
diff --git a/packages/mobile/src/screens/upload-screen/CompleteTrackScreen.tsx b/packages/mobile/src/screens/upload-screen/CompleteTrackScreen.tsx
index 34480a69b7..025e177830 100644
--- a/packages/mobile/src/screens/upload-screen/CompleteTrackScreen.tsx
+++ b/packages/mobile/src/screens/upload-screen/CompleteTrackScreen.tsx
@@ -127,12 +127,23 @@ export const CompleteTrackScreen = () => {
   const { metadata, file } = params
   const navigation = useNavigation<UploadParamList>()
 
-  const initialValues = metadata
+  const initialValues = {
+    ...metadata,
+    licenseType: {
+      allowAttribution: false,
+      commercialUse: false,
+      derivativeWorks: false
+    }
+  }
 
   const handleSubmit = useCallback(
     (values) => {
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      const { licenseType, ...trackValues } = values
       navigation.push('UploadingTracks', {
-        tracks: [{ file, preview: null, metadata: { ...metadata, ...values } }]
+        tracks: [
+          { file, preview: null, metadata: { ...metadata, ...trackValues } }
+        ]
       })
     },
     [navigation, file, metadata]
diff --git a/packages/mobile/src/screens/upload-screen/CompleteTrackStack.tsx b/packages/mobile/src/screens/upload-screen/CompleteTrackStack.tsx
index 0146291ed5..880f554f4a 100644
--- a/packages/mobile/src/screens/upload-screen/CompleteTrackStack.tsx
+++ b/packages/mobile/src/screens/upload-screen/CompleteTrackStack.tsx
@@ -7,6 +7,8 @@ import { useAppScreenOptions } from '../app-screen/useAppScreenOptions'
 import { CompleteTrackForm } from './CompleteTrackScreen'
 import {
   AdvancedOptionsScreen,
+  IsrcIswcScreen,
+  LicenseTypeScreen,
   RemixSettingsScreen,
   SelectGenreScreen,
   SelectMoodScreen,
@@ -30,6 +32,8 @@ export const CompleteTrackStack = (props: FormikProps<TrackMetadata>) => {
       <Stack.Screen name='RemixSettings' component={RemixSettingsScreen} />
       <Stack.Screen name='AdvancedOptions' component={AdvancedOptionsScreen} />
       <Stack.Screen name='TrackVisibility' component={TrackVisibilityScreen} />
+      <Stack.Screen name='IsrcIswc' component={IsrcIswcScreen} />
+      <Stack.Screen name='LicenseType' component={LicenseTypeScreen} />
     </Stack.Navigator>
   )
 }
diff --git a/packages/mobile/src/screens/upload-screen/SelectTrackScreen.tsx b/packages/mobile/src/screens/upload-screen/SelectTrackScreen.tsx
index feb0a8ed83..1fb12ea2bd 100644
--- a/packages/mobile/src/screens/upload-screen/SelectTrackScreen.tsx
+++ b/packages/mobile/src/screens/upload-screen/SelectTrackScreen.tsx
@@ -16,7 +16,7 @@ import { useThemeColors } from 'app/utils/theme'
 import { TopBarIconButton } from '../app-screen'
 
 import type { UploadParamList } from './ParamList'
-import { processTrackFile } from './processTrackFile'
+import { processTrackFile } from './utils/processTrackFile'
 
 const messages = {
   screenTitle: 'Upload',
diff --git a/packages/mobile/src/screens/upload-screen/fields/IsrcIswcField.tsx b/packages/mobile/src/screens/upload-screen/fields/IsrcIswcField.tsx
new file mode 100644
index 0000000000..19de947dd3
--- /dev/null
+++ b/packages/mobile/src/screens/upload-screen/fields/IsrcIswcField.tsx
@@ -0,0 +1,23 @@
+import { removeNullable } from '@audius/common'
+import { useField } from 'formik'
+
+import { ContextualSubmenu } from 'app/components/core'
+
+const messages = {
+  label: 'ISRC/ISWC'
+}
+
+export const IsrcField = () => {
+  const [{ value: isrc }] = useField<string>('isrc')
+  const [{ value: iswc }] = useField<string>('iswc')
+
+  const values = [isrc, iswc].filter(removeNullable)
+
+  return (
+    <ContextualSubmenu
+      value={values}
+      label={messages.label}
+      submenuScreenName='IsrcIswc'
+    />
+  )
+}
diff --git a/packages/mobile/src/screens/upload-screen/fields/LicenseTypeField.tsx b/packages/mobile/src/screens/upload-screen/fields/LicenseTypeField.tsx
new file mode 100644
index 0000000000..ff671f1560
--- /dev/null
+++ b/packages/mobile/src/screens/upload-screen/fields/LicenseTypeField.tsx
@@ -0,0 +1,77 @@
+import { useCallback } from 'react'
+
+import type { Nullable } from '@audius/common'
+import { useField } from 'formik'
+import { View } from 'react-native'
+
+import { ContextualSubmenu, Pill } from 'app/components/core'
+import { makeStyles } from 'app/styles'
+import { useThemeColors } from 'app/utils/theme'
+
+import { computeLicenseIcons } from '../utils/computeLicenseIcons'
+
+const messages = {
+  licenseType: 'License Type',
+  noLicense: 'All rights reserved'
+}
+
+const useStyles = makeStyles(({ spacing }) => ({
+  licenseIcons: {
+    marginTop: spacing(4),
+    alignItems: 'flex-start'
+  },
+  licenseIcon: {
+    marginRight: spacing(1)
+  }
+}))
+
+export const LicenseTypeField = () => {
+  const [{ value: license }] = useField<Nullable<string>>('license')
+  const [{ value: allowAttribution }] = useField<boolean>(
+    'licenseType.allowAttribution'
+  )
+  const [{ value: commercialUse }] = useField<boolean>(
+    'licenseType.commercialUse'
+  )
+  const [{ value: derivativeWorks }] = useField<Nullable<boolean>>(
+    'licenseType.derivativeWorks'
+  )
+
+  const styles = useStyles()
+  const { neutral } = useThemeColors()
+
+  const renderValue = useCallback(() => {
+    const licenseIcons = computeLicenseIcons(
+      allowAttribution,
+      commercialUse,
+      derivativeWorks
+    )
+
+    return licenseIcons ? (
+      <View style={styles.licenseIcons}>
+        <Pill>
+          {licenseIcons.map(([Icon, key]) => (
+            <Icon
+              key={key}
+              fill={neutral}
+              style={styles.licenseIcon}
+              height={20}
+              width={20}
+            />
+          ))}
+        </Pill>
+      </View>
+    ) : null
+  }, [allowAttribution, commercialUse, derivativeWorks, styles, neutral])
+
+  console.log('license', license)
+
+  return (
+    <ContextualSubmenu
+      value={license ?? messages.noLicense}
+      label={messages.licenseType}
+      submenuScreenName='LicenseType'
+      renderValue={license !== messages.noLicense ? renderValue : undefined}
+    />
+  )
+}
diff --git a/packages/mobile/src/screens/upload-screen/fields/ReleaseDateField.tsx b/packages/mobile/src/screens/upload-screen/fields/ReleaseDateField.tsx
index 0301a5e31f..db89c8a3a3 100644
--- a/packages/mobile/src/screens/upload-screen/fields/ReleaseDateField.tsx
+++ b/packages/mobile/src/screens/upload-screen/fields/ReleaseDateField.tsx
@@ -42,7 +42,7 @@ const useStyles = makeStyles(({ spacing }) => ({
     marginTop: spacing(1)
   },
   dateText: {
-    marignTop: spacing(1),
+    marginTop: spacing(1),
     textTransform: 'uppercase'
   },
   divider: {
diff --git a/packages/mobile/src/screens/upload-screen/fields/TrackVisibilityField.tsx b/packages/mobile/src/screens/upload-screen/fields/TrackVisibilityField.tsx
index 590ab6a5bf..8166313fda 100644
--- a/packages/mobile/src/screens/upload-screen/fields/TrackVisibilityField.tsx
+++ b/packages/mobile/src/screens/upload-screen/fields/TrackVisibilityField.tsx
@@ -1,11 +1,7 @@
 import { useField } from 'formik'
-import { View } from 'react-native'
 
 import type { ContextualSubmenuProps } from 'app/components/core'
-import { Pill, Text } from 'app/components/core'
-import { makeStyles } from 'app/styles'
-
-import { ContextualSubmenuField } from './ContextualSubmenuField'
+import { ContextualSubmenu } from 'app/components/core'
 
 const messages = {
   label: 'Track Visibility',
@@ -28,55 +24,24 @@ const fieldVisibilityLabelMap = {
 
 const fieldVisibilityKeys = Object.keys(fieldVisibilityLabelMap)
 
-const useStyles = makeStyles(({ spacing }) => ({
-  pills: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-    marginTop: spacing(2)
-  },
-  pill: {
-    marginTop: spacing(2),
-    marginRight: spacing(2)
-  },
-  pillText: {
-    marginTop: spacing(1),
-    textTransform: 'uppercase'
-  }
-}))
-
 type TrackVisibilityFieldProps = Partial<ContextualSubmenuProps>
 
 export const TrackVisibilityField = (props: TrackVisibilityFieldProps) => {
   const [{ value: isUnlisted }] = useField('is_unlisted')
   const [{ value: fieldVisibility }] = useField('field_visibility')
-  const styles = useStyles()
 
-  const renderValue = () => {
-    const trackVisibilityLabel = isUnlisted ? messages.hidden : messages.public
-    const fieldVisibilityLabels = fieldVisibilityKeys
-      .filter((visibilityKey) => fieldVisibility[visibilityKey])
-      .map((visibilityKey) => fieldVisibilityLabelMap[visibilityKey])
+  const trackVisibilityLabel = isUnlisted ? messages.hidden : messages.public
+  const fieldVisibilityLabels = fieldVisibilityKeys
+    .filter((visibilityKey) => fieldVisibility[visibilityKey])
+    .map((visibilityKey) => fieldVisibilityLabelMap[visibilityKey])
 
-    const labels = [trackVisibilityLabel, ...fieldVisibilityLabels]
-    return (
-      <View style={styles.pills}>
-        {labels.map((label) => (
-          <Pill key={label} style={styles.pill}>
-            <Text fontSize='small' weight='demiBold' style={styles.pillText}>
-              {label}
-            </Text>
-          </Pill>
-        ))}
-      </View>
-    )
-  }
+  const values = [trackVisibilityLabel, ...fieldVisibilityLabels]
 
   return (
-    <ContextualSubmenuField
+    <ContextualSubmenu
       label={messages.label}
-      name='field_visibility'
       submenuScreenName='TrackVisibility'
-      renderValue={renderValue}
+      value={values}
       {...props}
     />
   )
diff --git a/packages/mobile/src/screens/upload-screen/fields/index.ts b/packages/mobile/src/screens/upload-screen/fields/index.ts
index c2a0cd6a9d..d1c68ced5e 100644
--- a/packages/mobile/src/screens/upload-screen/fields/index.ts
+++ b/packages/mobile/src/screens/upload-screen/fields/index.ts
@@ -10,3 +10,5 @@ export * from './AdvancedOptionsField'
 export * from './TrackVisibilityField'
 export * from './SwitchField'
 export * from './ReleaseDateField'
+export * from './IsrcIswcField'
+export * from './LicenseTypeField'
diff --git a/packages/mobile/src/screens/upload-screen/screens/AdvancedOptionsScreen.tsx b/packages/mobile/src/screens/upload-screen/screens/AdvancedOptionsScreen.tsx
index ebd84df0c2..e64362f4c9 100644
--- a/packages/mobile/src/screens/upload-screen/screens/AdvancedOptionsScreen.tsx
+++ b/packages/mobile/src/screens/upload-screen/screens/AdvancedOptionsScreen.tsx
@@ -4,7 +4,13 @@ import IconIndent from 'app/assets/images/iconIndent.svg'
 import { makeStyles } from 'app/styles'
 
 import { UploadStackScreen } from '../UploadStackScreen'
-import { ReleaseDateField, SubmenuList, TrackVisibilityField } from '../fields'
+import {
+  IsrcField,
+  LicenseTypeField,
+  ReleaseDateField,
+  SubmenuList,
+  TrackVisibilityField
+} from '../fields'
 
 const useStyles = makeStyles(({ spacing }) => ({
   content: {
@@ -31,6 +37,10 @@ export const AdvancedOptionsScreen = () => {
           <TrackVisibilityField />
         </SubmenuList>
         <ReleaseDateField />
+        <SubmenuList>
+          <IsrcField />
+          <LicenseTypeField />
+        </SubmenuList>
       </View>
     </UploadStackScreen>
   )
diff --git a/packages/mobile/src/screens/upload-screen/screens/IsrcIswcScreen.tsx b/packages/mobile/src/screens/upload-screen/screens/IsrcIswcScreen.tsx
new file mode 100644
index 0000000000..5cc38ad5fc
--- /dev/null
+++ b/packages/mobile/src/screens/upload-screen/screens/IsrcIswcScreen.tsx
@@ -0,0 +1,40 @@
+import { View } from 'react-native'
+
+import IconInfo from 'app/assets/images/iconInfo.svg'
+import { makeStyles } from 'app/styles'
+
+import { UploadStackScreen } from '../UploadStackScreen'
+import { TextField } from '../fields'
+
+const messages = {
+  title: 'ISRC/ISWC',
+  isrc: 'ISRC',
+  iswc: 'ISWC'
+}
+
+const useStyles = makeStyles(({ spacing }) => ({
+  content: {
+    paddingTop: spacing(8),
+    paddingHorizontal: spacing(4)
+  }
+}))
+
+export const IsrcIswcScreen = () => {
+  const styles = useStyles()
+  return (
+    <UploadStackScreen title={messages.title} icon={IconInfo} variant='white'>
+      <View style={styles.content}>
+        <TextField
+          name='isrc'
+          label={messages.isrc}
+          placeholder='CC-XXX-YY-NNNNN'
+        />
+        <TextField
+          name='iswc'
+          label={messages.iswc}
+          placeholder='T-34524688-1'
+        />
+      </View>
+    </UploadStackScreen>
+  )
+}
diff --git a/packages/mobile/src/screens/upload-screen/screens/LicenseTypeScreen.tsx b/packages/mobile/src/screens/upload-screen/screens/LicenseTypeScreen.tsx
new file mode 100644
index 0000000000..861907d864
--- /dev/null
+++ b/packages/mobile/src/screens/upload-screen/screens/LicenseTypeScreen.tsx
@@ -0,0 +1,177 @@
+import { useEffect } from 'react'
+
+import type { Nullable } from '@audius/common'
+import { useField } from 'formik'
+import { View } from 'react-native'
+import { computeLicense } from 'utils/creativeCommons'
+
+import IconCreativeCommons from 'app/assets/images/creativeCommons/cc.svg'
+import type { TextProps } from 'app/components/core'
+import { Divider, SegmentedControl, Text } from 'app/components/core'
+import { makeStyles } from 'app/styles'
+import { spacing } from 'app/styles/spacing'
+import { useThemeColors } from 'app/utils/theme'
+
+import { UploadStackScreen } from '../UploadStackScreen'
+import { computeLicenseIcons } from '../utils/computeLicenseIcons'
+
+const messages = {
+  title: 'License Type',
+  allowAttribution: 'Allow Attribution',
+  noAttribution: 'No Attribution',
+  commercialUse: 'Commercial Use',
+  nonCommercialUse: 'Non-Commercial Use',
+  derivativeWorks: 'Derivative Works',
+  allowed: 'Allowed',
+  shareAlike: 'Share-Alike',
+  notAllowed: 'Not Allowed'
+}
+
+const allowAttributionValues = [
+  { key: true, text: messages.allowAttribution },
+  { key: false, text: messages.noAttribution }
+]
+
+const commercialUseValues = [
+  { key: true, text: messages.commercialUse },
+  { key: false, text: messages.nonCommercialUse }
+]
+
+const derivativeWorksValues = [
+  { key: null, text: messages.allowed },
+  { key: true, text: messages.shareAlike },
+  { key: false, text: messages.notAllowed }
+]
+
+const useStyles = makeStyles(({ spacing, palette, typography }) => ({
+  content: {
+    paddingHorizontal: spacing(6),
+    paddingVertical: spacing(8)
+  },
+  licenseSection: {
+    marginBottom: spacing(6)
+  },
+  licenseSectionLabel: {
+    marginBottom: spacing(2)
+  },
+  divider: {
+    marginBottom: spacing(6)
+  },
+  licenseDescription: {
+    padding: spacing(4),
+    backgroundColor: palette.neutralLight10,
+    borderWidth: 1,
+    borderColor: palette.neutralLight8,
+    borderRadius: spacing(2)
+  },
+  licenseIcons: {
+    flexDirection: 'row',
+    marginBottom: spacing(2)
+  },
+  licenseIcon: {
+    marginRight: spacing(1)
+  },
+  descriptionText: {
+    lineHeight: typography.fontSize.small * 1.5
+  }
+}))
+
+export const LicenseTypeScreen = () => {
+  const [{ onChange }] = useField('license')
+  const [{ value: allowAttribution }, , { setValue: setAllowAttribution }] =
+    useField<boolean>('licenseType.allowAttribution')
+  const [{ value: commercialUse }, , { setValue: setCommercialUse }] =
+    useField<boolean>('licenseType.commercialUse')
+  const [{ value: derivativeWorks }, , { setValue: setDerivateWorks }] =
+    useField<Nullable<boolean>>('licenseType.derivativeWorks')
+
+  const styles = useStyles()
+  const { neutral } = useThemeColors()
+
+  const { licenseType, licenseDescription } = computeLicense(
+    allowAttribution,
+    commercialUse,
+    derivativeWorks
+  )
+
+  const licenseIcons = computeLicenseIcons(
+    allowAttribution,
+    commercialUse,
+    derivativeWorks
+  )
+
+  useEffect(() => {
+    onChange('license')(licenseType)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [licenseType])
+
+  const labelProps: TextProps = {
+    fontSize: 'large',
+    weight: 'demiBold',
+    style: styles.licenseSectionLabel
+  }
+
+  return (
+    <UploadStackScreen
+      title={messages.title}
+      icon={IconCreativeCommons}
+      variant='white'
+    >
+      <View style={styles.content}>
+        <View style={styles.licenseSection}>
+          <Text {...labelProps}>{messages.allowAttribution}?</Text>
+          <SegmentedControl
+            fullWidth
+            selected={allowAttribution}
+            options={allowAttributionValues}
+            onSelectOption={setAllowAttribution}
+          />
+        </View>
+        <Divider style={styles.divider} />
+        <View style={styles.licenseSection}>
+          <Text {...labelProps}>{messages.commercialUse}?</Text>
+          <SegmentedControl
+            fullWidth
+            selected={commercialUse}
+            options={commercialUseValues}
+            onSelectOption={setCommercialUse}
+          />
+        </View>
+        <Divider style={styles.divider} />
+        <View style={styles.licenseSection}>
+          <Text {...labelProps}>{messages.derivativeWorks}?</Text>
+          <SegmentedControl
+            fullWidth
+            selected={derivativeWorks}
+            options={derivativeWorksValues}
+            onSelectOption={setDerivateWorks}
+          />
+        </View>
+        <Divider style={styles.divider} />
+        <View>
+          {licenseIcons ? (
+            <View style={styles.licenseIcons}>
+              {licenseIcons.map(([Icon, label]) => (
+                <Icon
+                  key={label}
+                  fill={neutral}
+                  style={styles.licenseIcon}
+                  height={spacing(7)}
+                  width={spacing(7)}
+                />
+              ))}
+            </View>
+          ) : null}
+          <Text {...labelProps}>{licenseType}</Text>
+          {licenseDescription ? (
+            <View style={styles.licenseDescription}>
+              <Text variant='body' style={styles.descriptionText}>
+                {licenseDescription}
+              </Text>
+            </View>
+          ) : null}
+        </View>
+      </View>
+    </UploadStackScreen>
+  )
+}
diff --git a/packages/mobile/src/screens/upload-screen/screens/index.ts b/packages/mobile/src/screens/upload-screen/screens/index.ts
index a9c0e8fc9b..9260d55362 100644
--- a/packages/mobile/src/screens/upload-screen/screens/index.ts
+++ b/packages/mobile/src/screens/upload-screen/screens/index.ts
@@ -3,3 +3,5 @@ export * from './SelectMoodScreen'
 export * from './RemixSettingsScreen'
 export * from './AdvancedOptionsScreen'
 export * from './TrackVisibilityScreen'
+export * from './IsrcIswcScreen'
+export * from './LicenseTypeScreen'
diff --git a/packages/mobile/src/screens/upload-screen/utils/computeLicenseIcons.ts b/packages/mobile/src/screens/upload-screen/utils/computeLicenseIcons.ts
new file mode 100644
index 0000000000..3caa887df7
--- /dev/null
+++ b/packages/mobile/src/screens/upload-screen/utils/computeLicenseIcons.ts
@@ -0,0 +1,27 @@
+import type { ComponentType } from 'react'
+
+import type { Nullable } from '@audius/common'
+import type { SvgProps } from 'react-native-svg'
+
+import IconAllowAttribution from 'app/assets/images/creativeCommons/by.svg'
+import IconCreativeCommons from 'app/assets/images/creativeCommons/cc.svg'
+import IconNonCommercialUse from 'app/assets/images/creativeCommons/nc.svg'
+import IconNoDerivatives from 'app/assets/images/creativeCommons/nd.svg'
+import IconShareAlike from 'app/assets/images/creativeCommons/sa.svg'
+
+export const computeLicenseIcons = (
+  allowAttribution: boolean,
+  commercialUse: boolean,
+  derivativeWorks: Nullable<boolean>
+) => {
+  if (!allowAttribution) return null
+  const icons: [ComponentType<SvgProps>, string][] = [
+    [IconCreativeCommons, 'cc'],
+    [IconAllowAttribution, 'by']
+  ]
+  if (!commercialUse) icons.push([IconNonCommercialUse, 'nc'])
+  if (derivativeWorks === true) icons.push([IconShareAlike, 'sa'])
+  else if (derivativeWorks === false) icons.push([IconNoDerivatives, 'nd'])
+
+  return icons
+}
diff --git a/packages/mobile/src/screens/upload-screen/processTrackFile.ts b/packages/mobile/src/screens/upload-screen/utils/processTrackFile.ts
similarity index 100%
rename from packages/mobile/src/screens/upload-screen/processTrackFile.ts
rename to packages/mobile/src/screens/upload-screen/utils/processTrackFile.ts
diff --git a/packages/web/src/components/data-entry/FormTile.js b/packages/web/src/components/data-entry/FormTile.js
index 38f81f4914..b536624b07 100644
--- a/packages/web/src/components/data-entry/FormTile.js
+++ b/packages/web/src/components/data-entry/FormTile.js
@@ -30,7 +30,7 @@ import {
   computeLicense,
   computeLicenseVariables,
   getDescriptionForType
-} from 'utils/creativeCommonsUtil'
+} from 'utils/creativeCommons'
 import { resizeImage } from 'utils/imageProcessingUtil'
 import { moodMap } from 'utils/moods'
 
diff --git a/packages/web/src/utils/creativeCommonsUtil.js b/packages/web/src/utils/creativeCommons.ts
similarity index 90%
rename from packages/web/src/utils/creativeCommonsUtil.js
rename to packages/web/src/utils/creativeCommons.ts
index 18bf4df055..1aba646d76 100644
--- a/packages/web/src/utils/creativeCommonsUtil.js
+++ b/packages/web/src/utils/creativeCommons.ts
@@ -1,3 +1,5 @@
+import { Nullable } from '@audius/common'
+
 export const ALL_RIGHTS_RESERVED_TYPE = 'All rights reserved'
 const ALL_RIGHTS_RESERVED_DESC = ''
 const ALL_RIGHTS_RESERVED = {
@@ -51,16 +53,15 @@ const ALL_LICENSES = {
   [BY_SA_TYPE]: BY_SA_DESC
 }
 
+type License = keyof typeof ALL_LICENSES
+
 /**
  * Computes the Create Commons License for provided attribution, commercial use, and derivative works flags.
- * @param {bool} allowAttribution
- * @param {bool} commercialUse
- * @param {?bool} derivativeWorks can be unset.
  */
 export const computeLicense = (
-  allowAttribution,
-  commercialUse,
-  derivativeWorks = null
+  allowAttribution: boolean,
+  commercialUse: boolean,
+  derivativeWorks: Nullable<boolean> = null
 ) => {
   if (allowAttribution && !commercialUse && derivativeWorks === null)
     return BY_NC
@@ -74,7 +75,11 @@ export const computeLicense = (
   return ALL_RIGHTS_RESERVED
 }
 
-const variables = (allowAttribution, commercialUse, derivativeWorks) => ({
+const variables = (
+  allowAttribution: Nullable<boolean>,
+  commercialUse: Nullable<boolean>,
+  derivativeWorks: Nullable<boolean>
+) => ({
   allowAttribution,
   commercialUse,
   derivativeWorks
@@ -82,10 +87,8 @@ const variables = (allowAttribution, commercialUse, derivativeWorks) => ({
 
 /**
  * Computes the Creative Commons license variables from a license type.
- * @param {string} licenseType
- * @return {object} {allowAttribution: bool, commercialUse: bool, derivativeWorks: bool}
  */
-export const computeLicenseVariables = (licenseType) => {
+export const computeLicenseVariables = (licenseType: License) => {
   switch (licenseType) {
     case BY_NC_TYPE:
       return variables(true, false, null)
@@ -106,7 +109,7 @@ export const computeLicenseVariables = (licenseType) => {
   }
 }
 
-export const getDescriptionForType = (licenseType) => {
+export const getDescriptionForType = (licenseType: License) => {
   return licenseType in ALL_LICENSES
     ? ALL_LICENSES[licenseType]
     : ALL_RIGHTS_RESERVED_DESC

From c727a9aa9c615022f8772b6fb21f476da23ffb98 Mon Sep 17 00:00:00 2001
From: Dylan Jeffers <dylan@audius.co>
Date: Thu, 10 Nov 2022 21:59:47 -0800
Subject: [PATCH 5/8] Address comments

---
 .../mobile/src/components/core/ContextualSubmenu.tsx |  1 -
 .../screens/upload-screen/fields/IsrcIswcField.tsx   |  6 +++++-
 .../upload-screen/fields/LicenseTypeField.tsx        | 12 +++++++++---
 .../upload-screen/fields/ReleaseDateField.tsx        |  2 +-
 4 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/packages/mobile/src/components/core/ContextualSubmenu.tsx b/packages/mobile/src/components/core/ContextualSubmenu.tsx
index f3ff0c7431..8edb3f0e4e 100644
--- a/packages/mobile/src/components/core/ContextualSubmenu.tsx
+++ b/packages/mobile/src/components/core/ContextualSubmenu.tsx
@@ -93,7 +93,6 @@ export const ContextualSubmenu = (props: ContextualSubmenuProps) => {
   }
 
   const renderValue = renderValueProp ?? defaultRenderValue
-  console.log('renderValue?', renderValue)
 
   return (
     <TouchableOpacity onPress={handlePress} style={stylesProp?.root}>
diff --git a/packages/mobile/src/screens/upload-screen/fields/IsrcIswcField.tsx b/packages/mobile/src/screens/upload-screen/fields/IsrcIswcField.tsx
index 19de947dd3..0781edf552 100644
--- a/packages/mobile/src/screens/upload-screen/fields/IsrcIswcField.tsx
+++ b/packages/mobile/src/screens/upload-screen/fields/IsrcIswcField.tsx
@@ -1,13 +1,16 @@
 import { removeNullable } from '@audius/common'
 import { useField } from 'formik'
 
+import type { ContextualSubmenuProps } from 'app/components/core'
 import { ContextualSubmenu } from 'app/components/core'
 
 const messages = {
   label: 'ISRC/ISWC'
 }
 
-export const IsrcField = () => {
+type IsrcFieldProps = Partial<ContextualSubmenuProps>
+
+export const IsrcField = (props: IsrcFieldProps) => {
   const [{ value: isrc }] = useField<string>('isrc')
   const [{ value: iswc }] = useField<string>('iswc')
 
@@ -18,6 +21,7 @@ export const IsrcField = () => {
       value={values}
       label={messages.label}
       submenuScreenName='IsrcIswc'
+      {...props}
     />
   )
 }
diff --git a/packages/mobile/src/screens/upload-screen/fields/LicenseTypeField.tsx b/packages/mobile/src/screens/upload-screen/fields/LicenseTypeField.tsx
index ff671f1560..1b165a1026 100644
--- a/packages/mobile/src/screens/upload-screen/fields/LicenseTypeField.tsx
+++ b/packages/mobile/src/screens/upload-screen/fields/LicenseTypeField.tsx
@@ -4,6 +4,7 @@ import type { Nullable } from '@audius/common'
 import { useField } from 'formik'
 import { View } from 'react-native'
 
+import type { ContextualSubmenuProps } from 'app/components/core'
 import { ContextualSubmenu, Pill } from 'app/components/core'
 import { makeStyles } from 'app/styles'
 import { useThemeColors } from 'app/utils/theme'
@@ -25,7 +26,9 @@ const useStyles = makeStyles(({ spacing }) => ({
   }
 }))
 
-export const LicenseTypeField = () => {
+type LicenseTypeFieldProps = Partial<ContextualSubmenuProps>
+
+export const LicenseTypeField = (props: LicenseTypeFieldProps) => {
   const [{ value: license }] = useField<Nullable<string>>('license')
   const [{ value: allowAttribution }] = useField<boolean>(
     'licenseType.allowAttribution'
@@ -68,10 +71,13 @@ export const LicenseTypeField = () => {
 
   return (
     <ContextualSubmenu
-      value={license ?? messages.noLicense}
+      value={license || messages.noLicense}
       label={messages.licenseType}
       submenuScreenName='LicenseType'
-      renderValue={license !== messages.noLicense ? renderValue : undefined}
+      renderValue={
+        license && license !== messages.noLicense ? renderValue : undefined
+      }
+      {...props}
     />
   )
 }
diff --git a/packages/mobile/src/screens/upload-screen/fields/ReleaseDateField.tsx b/packages/mobile/src/screens/upload-screen/fields/ReleaseDateField.tsx
index 76c205d768..6eb8d3574f 100644
--- a/packages/mobile/src/screens/upload-screen/fields/ReleaseDateField.tsx
+++ b/packages/mobile/src/screens/upload-screen/fields/ReleaseDateField.tsx
@@ -35,7 +35,7 @@ const useStyles = makeStyles(({ spacing }) => ({
     marginTop: spacing(1)
   },
   dateText: {
-    marignTop: spacing(1),
+    marginTop: spacing(1),
     textTransform: 'uppercase'
   },
   datePickerModal: {

From 7035acd5ae0d1b6b796ed36149c6a3dc791376c6 Mon Sep 17 00:00:00 2001
From: Dylan Jeffers <dylan@audius.co>
Date: Thu, 10 Nov 2022 22:06:16 -0800
Subject: [PATCH 6/8] Address comments

---
 .../upload-screen/fields/LicenseTypeField.tsx      |  2 --
 .../upload-screen/screens/LicenseTypeScreen.tsx    | 14 ++++++++------
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/packages/mobile/src/screens/upload-screen/fields/LicenseTypeField.tsx b/packages/mobile/src/screens/upload-screen/fields/LicenseTypeField.tsx
index 1b165a1026..a9dd8c621c 100644
--- a/packages/mobile/src/screens/upload-screen/fields/LicenseTypeField.tsx
+++ b/packages/mobile/src/screens/upload-screen/fields/LicenseTypeField.tsx
@@ -67,8 +67,6 @@ export const LicenseTypeField = (props: LicenseTypeFieldProps) => {
     ) : null
   }, [allowAttribution, commercialUse, derivativeWorks, styles, neutral])
 
-  console.log('license', license)
-
   return (
     <ContextualSubmenu
       value={license || messages.noLicense}
diff --git a/packages/mobile/src/screens/upload-screen/screens/LicenseTypeScreen.tsx b/packages/mobile/src/screens/upload-screen/screens/LicenseTypeScreen.tsx
index 861907d864..b647a953f3 100644
--- a/packages/mobile/src/screens/upload-screen/screens/LicenseTypeScreen.tsx
+++ b/packages/mobile/src/screens/upload-screen/screens/LicenseTypeScreen.tsx
@@ -17,11 +17,13 @@ import { computeLicenseIcons } from '../utils/computeLicenseIcons'
 
 const messages = {
   title: 'License Type',
+  allowAttributionLabel: 'Allow Attribution?',
   allowAttribution: 'Allow Attribution',
   noAttribution: 'No Attribution',
+  commercialUseLabel: 'Commercial Use?',
   commercialUse: 'Commercial Use',
   nonCommercialUse: 'Non-Commercial Use',
-  derivativeWorks: 'Derivative Works',
+  derivativeWorksLabel: 'Derivative Works?',
   allowed: 'Allowed',
   shareAlike: 'Share-Alike',
   notAllowed: 'Not Allowed'
@@ -119,7 +121,7 @@ export const LicenseTypeScreen = () => {
     >
       <View style={styles.content}>
         <View style={styles.licenseSection}>
-          <Text {...labelProps}>{messages.allowAttribution}?</Text>
+          <Text {...labelProps}>{messages.allowAttributionLabel}</Text>
           <SegmentedControl
             fullWidth
             selected={allowAttribution}
@@ -129,7 +131,7 @@ export const LicenseTypeScreen = () => {
         </View>
         <Divider style={styles.divider} />
         <View style={styles.licenseSection}>
-          <Text {...labelProps}>{messages.commercialUse}?</Text>
+          <Text {...labelProps}>{messages.commercialUseLabel}</Text>
           <SegmentedControl
             fullWidth
             selected={commercialUse}
@@ -139,7 +141,7 @@ export const LicenseTypeScreen = () => {
         </View>
         <Divider style={styles.divider} />
         <View style={styles.licenseSection}>
-          <Text {...labelProps}>{messages.derivativeWorks}?</Text>
+          <Text {...labelProps}>{messages.derivativeWorksLabel}</Text>
           <SegmentedControl
             fullWidth
             selected={derivativeWorks}
@@ -151,9 +153,9 @@ export const LicenseTypeScreen = () => {
         <View>
           {licenseIcons ? (
             <View style={styles.licenseIcons}>
-              {licenseIcons.map(([Icon, label]) => (
+              {licenseIcons.map(([Icon, key]) => (
                 <Icon
-                  key={label}
+                  key={key}
                   fill={neutral}
                   style={styles.licenseIcon}
                   height={spacing(7)}

From 327aa86207b698b482817d42180ba3eb3adeaf74 Mon Sep 17 00:00:00 2001
From: Dylan Jeffers <dylan@audius.co>
Date: Thu, 10 Nov 2022 22:09:28 -0800
Subject: [PATCH 7/8] improve control perf

---
 .../src/screens/upload-screen/screens/LicenseTypeScreen.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/mobile/src/screens/upload-screen/screens/LicenseTypeScreen.tsx b/packages/mobile/src/screens/upload-screen/screens/LicenseTypeScreen.tsx
index b647a953f3..23d865274a 100644
--- a/packages/mobile/src/screens/upload-screen/screens/LicenseTypeScreen.tsx
+++ b/packages/mobile/src/screens/upload-screen/screens/LicenseTypeScreen.tsx
@@ -124,7 +124,7 @@ export const LicenseTypeScreen = () => {
           <Text {...labelProps}>{messages.allowAttributionLabel}</Text>
           <SegmentedControl
             fullWidth
-            selected={allowAttribution}
+            defaultSelected={allowAttribution}
             options={allowAttributionValues}
             onSelectOption={setAllowAttribution}
           />
@@ -134,7 +134,7 @@ export const LicenseTypeScreen = () => {
           <Text {...labelProps}>{messages.commercialUseLabel}</Text>
           <SegmentedControl
             fullWidth
-            selected={commercialUse}
+            defaultSelected={commercialUse}
             options={commercialUseValues}
             onSelectOption={setCommercialUse}
           />
@@ -144,7 +144,7 @@ export const LicenseTypeScreen = () => {
           <Text {...labelProps}>{messages.derivativeWorksLabel}</Text>
           <SegmentedControl
             fullWidth
-            selected={derivativeWorks}
+            defaultSelected={derivativeWorks}
             options={derivativeWorksValues}
             onSelectOption={setDerivateWorks}
           />

From e20933f8d2307be5795554715871ebb1918ee77a Mon Sep 17 00:00:00 2001
From: Dylan Jeffers <dylan@audius.co>
Date: Thu, 10 Nov 2022 22:13:34 -0800
Subject: [PATCH 8/8] Remove unneded icons, revert lock

---
 package-lock.json                             | 50 +++++++++----------
 .../assets/images/creativeCommons/nc-eu.svg   |  4 --
 .../assets/images/creativeCommons/nc-jp.svg   |  4 --
 .../utils/computeLicenseIcons.ts              |  2 +-
 4 files changed, 26 insertions(+), 34 deletions(-)
 delete mode 100644 packages/mobile/src/assets/images/creativeCommons/nc-eu.svg
 delete mode 100644 packages/mobile/src/assets/images/creativeCommons/nc-jp.svg

diff --git a/package-lock.json b/package-lock.json
index ff23dffe95..ab49edc2e0 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1996,7 +1996,7 @@
     "asap": {
       "version": "2.0.6",
       "resolved": "https://registry.npmjs.org/asap/-/asap-2.0.6.tgz",
-      "integrity": "sha512-BSHWgDSAiKs50o2Re8ppvp3seVHXSRM44cdSsT9FfNEUUZLOGWVCsiWaRPWM1Znn+mqZ1OfVZ3z3DWEzSp7hRA==",
+      "integrity": "sha1-5QNHYR1+aQlDIIu9r+vLwvuGbUY=",
       "dev": true
     },
     "async": {
@@ -2710,13 +2710,13 @@
     "decamelize": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/decamelize/-/decamelize-1.2.0.tgz",
-      "integrity": "sha512-z2S+W9X73hAUUki+N+9Za2lBlun89zigOyGrsax+KUQ6wKW4ZoWpEYBkGhQjwAjjDCkWxhY0VKEhk8wzY7F5cA==",
+      "integrity": "sha1-9lNNFRSCabIDUue+4m9QH5oZEpA=",
       "dev": true
     },
     "decamelize-keys": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/decamelize-keys/-/decamelize-keys-1.1.0.tgz",
-      "integrity": "sha512-ocLWuYzRPoS9bfiSdDd3cxvrzovVMZnRDVEzAs+hWIVXGDbHxWMECij2OBuyB/An0FFW/nLuq6Kv1i/YC5Qfzg==",
+      "integrity": "sha1-0XGoeTMlKAfrPLYdwcFEXQeN8tk=",
       "dev": true,
       "requires": {
         "decamelize": "^1.1.0",
@@ -2734,7 +2734,7 @@
     "dedent": {
       "version": "0.7.0",
       "resolved": "https://registry.npmjs.org/dedent/-/dedent-0.7.0.tgz",
-      "integrity": "sha512-Q6fKUPqnAHAyhiUgFU7BUzLiv0kd8saH9al7tnu5Q/okj6dnupxyTgFIBjVzJATdfIAm9NAsvXNzjaKa+bxVyA==",
+      "integrity": "sha1-JJXduvbrh0q7Dhvp3yLS5aVEMmw=",
       "dev": true
     },
     "deep-is": {
@@ -2782,7 +2782,7 @@
     "depd": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz",
-      "integrity": "sha512-7emPTl6Dpo6JRXOXjLRxck+FlLRX5847cLKEn00PLAgc3g2hTZZgr+e4c2v6QpSmLeFP3n5yUo7ft6avBK/5jQ==",
+      "integrity": "sha1-m81S4UwJd2PnSbJ0xDRu0uVgtak=",
       "dev": true
     },
     "deprecation": {
@@ -2975,7 +2975,7 @@
     "escape-string-regexp": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
-      "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg=="
+      "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ="
     },
     "eslint": {
       "version": "8.25.0",
@@ -4506,7 +4506,7 @@
     "is-plain-obj": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-1.1.0.tgz",
-      "integrity": "sha512-yvkRyxmFKEOQ4pNXCmJG5AEQNlXJS5LaONXo5/cLdTZdWvsZ1ioJEonLGAosKlMWE8lwUy/bJzMjcw8az73+Fg==",
+      "integrity": "sha1-caUMhCnfync8kqOQpKA7OfzVHT4=",
       "dev": true
     },
     "is-plain-object": {
@@ -4582,7 +4582,7 @@
     "is-typedarray": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/is-typedarray/-/is-typedarray-1.0.0.tgz",
-      "integrity": "sha512-cyA56iCMHAh5CdzjJIa4aohJyeO1YbwLi3Jc35MmRU6poroFjIGZzUzupGiRPOjgHg9TLu43xbpwXk523fMxKA==",
+      "integrity": "sha1-5HnICFjfDBsR3dppQPlgEfzaSpo=",
       "dev": true
     },
     "is-unicode-supported": {
@@ -4623,7 +4623,7 @@
     "isobject": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz",
-      "integrity": "sha512-WhB9zCku7EGTj/HQQRz5aUQEUeoQZH2bWcltRErOpymJ4boYE6wL9Tbr23krRPSZ+C5zqNSrSw+Cc7sZZ4b7vg==",
+      "integrity": "sha1-TkMekrEalzFjaqH5yNHMvP2reN8=",
       "dev": true
     },
     "jake": {
@@ -4711,7 +4711,7 @@
     "json-stringify-safe": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz",
-      "integrity": "sha512-ZClg6AaYvamvYEE82d3Iyd3vSSIjQ+odgjaTzRuO3s7toCdFKczob2i0zCh7JE8kWn17yvAWhUVxvqGwUalsRA==",
+      "integrity": "sha1-Epai1Y/UXxmg9s4B1lcB4sc1tus=",
       "dev": true
     },
     "json5": {
@@ -4742,7 +4742,7 @@
     "jsonparse": {
       "version": "1.3.1",
       "resolved": "https://registry.npmjs.org/jsonparse/-/jsonparse-1.3.1.tgz",
-      "integrity": "sha512-POQXvpdL69+CluYsillJ7SUhKvytYjW9vG/GKpnf+xP8UWgYEM/RaMzHHofbALDiKbbP1W8UEYmgGl39WkPZsg==",
+      "integrity": "sha1-P02uSpH6wxX3EGL4UhzCOfE2YoA=",
       "dev": true
     },
     "jsx-ast-utils": {
@@ -4988,7 +4988,7 @@
     "lodash.ismatch": {
       "version": "4.4.0",
       "resolved": "https://registry.npmjs.org/lodash.ismatch/-/lodash.ismatch-4.4.0.tgz",
-      "integrity": "sha512-fPMfXjGQEV9Xsq/8MTSgUf255gawYRbjwMyDbcvDhXgV7enSZA0hynz6vMPnpAb5iONEzBHBPsT+0zes5Z301g==",
+      "integrity": "sha1-dWy1FQyjum8RCFp4hJZF8Yj4Xzc=",
       "dev": true
     },
     "lodash.merge": {
@@ -5317,7 +5317,7 @@
         "arrify": {
           "version": "1.0.1",
           "resolved": "https://registry.npmjs.org/arrify/-/arrify-1.0.1.tgz",
-          "integrity": "sha512-3CYzex9M9FGQjCGMGyi6/31c8GJbgb0qGyrx5HWxPd0aCwh4cB2YjMb2Xf9UuoogrMrlO9cTqnB5rI5GHZTcUA==",
+          "integrity": "sha1-iYUI2iIm84DfkEcoRWhJwVAaSw0=",
           "dev": true
         }
       }
@@ -6091,12 +6091,12 @@
     "os-tmpdir": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/os-tmpdir/-/os-tmpdir-1.0.2.tgz",
-      "integrity": "sha512-D2FR03Vir7FIu45XBY20mTb+/ZSWB00sjU9jdQXt83gDrI4Ztz5Fs7/yy74g2N5SVQY4xY1qDr4rNddwYRVX0g=="
+      "integrity": "sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ="
     },
     "p-finally": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/p-finally/-/p-finally-1.0.0.tgz",
-      "integrity": "sha512-LICb2p9CB7FS+0eR1oqWnHhp0FljGLZCWBE9aix0Uye9W8LTQPwMTYVGWQWIw9RdQiDg4+epXQODwIYJtSJaow==",
+      "integrity": "sha1-P7z7FbiZpEEjs0ttzBi3JDNqLK4=",
       "dev": true
     },
     "p-limit": {
@@ -6535,7 +6535,7 @@
     "promise-inflight": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/promise-inflight/-/promise-inflight-1.0.1.tgz",
-      "integrity": "sha512-6zWPyEOFaQBJYcGMHBKTKJ3u6TBsnMFOIZSa6ce1e/ZrrsOlnHRHbabMjLiBYKp+n44X9eUI6VUPaukCXHuG4g==",
+      "integrity": "sha1-mEcocL8igTL8vdhoEputEsPAKeM=",
       "dev": true
     },
     "promise-retry": {
@@ -6571,7 +6571,7 @@
     "proto-list": {
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/proto-list/-/proto-list-1.2.4.tgz",
-      "integrity": "sha512-vtK/94akxsTMhe0/cbfpR+syPuszcuwhqVjJq26CuNDgFGj682oRBXOP5MJpv2r7JtE8MsiepGIqvvOTBwn2vA==",
+      "integrity": "sha1-IS1b/hMYMGpCD2QCuOJv85ZHqEk=",
       "dev": true
     },
     "protocols": {
@@ -6595,7 +6595,7 @@
     "q": {
       "version": "1.5.1",
       "resolved": "https://registry.npmjs.org/q/-/q-1.5.1.tgz",
-      "integrity": "sha512-kV/CThkXo6xyFEZUugw/+pIOywXcDbFYgSct5cT3gqlbkBE1SJdwy6UQoZvodiWF/ckQLZyDE/Bu1M6gVu5lVw==",
+      "integrity": "sha1-fjL3W0E4EpHQRhHxvxQQmsAGUdc=",
       "dev": true
     },
     "queue-microtask": {
@@ -6837,7 +6837,7 @@
     "require-directory": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
-      "integrity": "sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==",
+      "integrity": "sha1-jGStX9MNqxyXbiNE/+f3kqam30I=",
       "dev": true
     },
     "resolve": {
@@ -6886,7 +6886,7 @@
     "retry": {
       "version": "0.12.0",
       "resolved": "https://registry.npmjs.org/retry/-/retry-0.12.0.tgz",
-      "integrity": "sha512-9LkiTwjUh6rT555DtE9rTX+BKByPfrMzEAtnlEtdEwr3Nkffwiihqe2bWADg+OQRjt9gl6ICdmB/ZFDCGAtSow==",
+      "integrity": "sha1-G0KmJmoh8HQh0bC1S33BZ7AcATs=",
       "dev": true
     },
     "reusify": {
@@ -6957,7 +6957,7 @@
     "set-blocking": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz",
-      "integrity": "sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw==",
+      "integrity": "sha1-BF+XgtARrppoA93TgrJDkrPYkPc=",
       "dev": true
     },
     "shallow-clone": {
@@ -7299,7 +7299,7 @@
     "temp-dir": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/temp-dir/-/temp-dir-1.0.0.tgz",
-      "integrity": "sha512-xZFXEGbG7SNC3itwBzI3RYjq/cEhBkx2hJuKGIUOcEULmkQExXiHat2z/qkISYsuR+IKumhEfKKbV5qXmhICFQ==",
+      "integrity": "sha1-CnwOom06Oa+n4OvqnB/AvE2qAR0=",
       "dev": true
     },
     "text-extensions": {
@@ -7317,7 +7317,7 @@
     "through": {
       "version": "2.3.8",
       "resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz",
-      "integrity": "sha512-w89qg7PI8wAdvX60bMDP+bFoD5Dvhm9oLheFp5O4a2QF0cSBGsBX4qZmadPMvVqlLJBBci+WqGGOAPvcDeNSVg=="
+      "integrity": "sha1-DdTJ/6q8NXlgsbckEV1+Doai4fU="
     },
     "through2": {
       "version": "4.0.2",
@@ -7414,7 +7414,7 @@
     "typedarray": {
       "version": "0.0.6",
       "resolved": "https://registry.npmjs.org/typedarray/-/typedarray-0.0.6.tgz",
-      "integrity": "sha512-/aCDEGatGvZ2BIk+HmLf4ifCJFwvKFNb9/JeZPMulfgFracn9QFcAf5GO8B/mweUjSoblS5In0cWhqpfs/5PQA==",
+      "integrity": "sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=",
       "dev": true
     },
     "typedarray-to-buffer": {
@@ -7499,7 +7499,7 @@
     "util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
-      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw=="
+      "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8="
     },
     "uuid": {
       "version": "8.3.2",
diff --git a/packages/mobile/src/assets/images/creativeCommons/nc-eu.svg b/packages/mobile/src/assets/images/creativeCommons/nc-eu.svg
deleted file mode 100644
index 2972dc735b..0000000000
--- a/packages/mobile/src/assets/images/creativeCommons/nc-eu.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none"
-  xmlns="http://www.w3.org/2000/svg">
-  <path d="M19.0953 4.89969C17.16 2.96656 14.79 2 11.9872 2C9.21688 2 6.8725 2.96594 4.95344 4.89969C2.98406 6.9 2 9.26625 2 12C2 14.7328 2.98406 17.0831 4.95344 19.0494C6.9225 21.0169 9.26656 22 11.9872 22C14.74 22 17.1266 21.0078 19.1456 19.0247C21.0484 17.1412 22 14.7997 22 12C21.9997 9.19969 21.0316 6.8325 19.0953 4.89969ZM17.8434 17.725C16.1916 19.3581 14.2472 20.1741 12.0122 20.1741C9.77594 20.1741 7.84812 19.3656 6.22969 17.7487C4.61125 16.1319 3.80156 14.2156 3.80156 11.9997C3.80156 11.0622 3.94969 10.1756 4.24219 9.34031L6.89187 10.5134H6.70094V11.7019H7.63875C7.63875 11.87 7.62187 12.0372 7.62187 12.2044V12.4894H6.70094V13.6778H7.78875C7.93969 14.5653 8.27469 15.2853 8.72625 15.8544C9.66375 17.0934 11.1706 17.7625 12.8109 17.7625C13.8828 17.7625 14.8525 17.4447 15.4225 17.1262L15.0203 15.2687C14.6688 15.4528 13.8825 15.7034 13.1128 15.7034C12.2753 15.7034 11.4891 15.4528 10.9531 14.85C10.7022 14.5656 10.5181 14.18 10.4009 13.6781H14.0403L19.2119 15.9672C18.8541 16.6016 18.3994 17.1881 17.8434 17.725ZM11.3397 12.4891L11.3178 12.4722L11.3553 12.4891H11.3397ZM14.4534 11.7016H14.6031V10.5131H11.7687L10.6172 10.0037C10.7163 9.78094 10.8338 9.58156 10.9706 9.42562C11.4897 8.78844 12.2259 8.52094 13.0297 8.52094C13.7662 8.52094 14.4525 8.73844 14.8875 8.9225L15.3563 7.01375C14.7531 6.74656 13.8663 6.51219 12.8453 6.51219C11.2719 6.51219 9.9325 7.14813 8.97813 8.21938C8.76625 8.46406 8.5825 8.73875 8.41594 9.02906L5.1275 7.57375C5.44625 7.09594 5.82094 6.63719 6.255 6.19938C7.82406 4.59938 9.7425 3.79906 12.0125 3.79906C14.2812 3.79906 16.2091 4.59906 17.7944 6.19938C19.3956 7.7825 20.1966 9.71562 20.1966 12C20.1966 12.7522 20.1116 13.4619 19.9428 14.1313L14.4534 11.7016Z" fill="#000"/>
-</svg>
diff --git a/packages/mobile/src/assets/images/creativeCommons/nc-jp.svg b/packages/mobile/src/assets/images/creativeCommons/nc-jp.svg
deleted file mode 100644
index a7bc81c9f9..0000000000
--- a/packages/mobile/src/assets/images/creativeCommons/nc-jp.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none"
-  xmlns="http://www.w3.org/2000/svg">
-  <path d="M19.0963 4.89969C17.16 2.96656 14.7913 2 11.9869 2C9.21719 2 6.8725 2.96656 4.95406 4.89969C2.98438 6.9 2 9.26656 2 12C2 14.7331 2.98438 17.0837 4.95406 19.0503C6.9225 21.0169 9.26719 22 11.9869 22C14.7406 22 17.1272 21.0084 19.1459 19.025C21.0487 17.1419 22 14.7997 22 12C22 9.2 21.0319 6.83313 19.0963 4.89969ZM17.8441 17.725C16.1919 19.3584 14.2478 20.1747 12.0125 20.1747C9.77625 20.1747 7.84875 19.3662 6.23031 17.7494C4.61156 16.1334 3.8025 14.2166 3.8025 12C3.8025 11.1475 3.92469 10.3381 4.16625 9.56969L9.28594 11.8494H8.15937V13.4059H10.5019L10.7309 13.8813V14.6356H8.15937V16.1919H10.7309V18.4525H13.2194V16.1919H15.8072V14.7531L19.0722 16.2072C18.7378 16.7506 18.3288 17.2569 17.8441 17.725ZM15.5428 14.6356H13.22V13.8813L13.3372 13.6537L15.5428 14.6356ZM15.8075 12.5653V11.8494H14.2516L16.7906 7.17156H14.1369L12.3884 11.0428L11.4606 10.6297L9.86281 7.17156H7.20937L8.31063 9.22719L5.00875 7.75688C5.35188 7.21281 5.76625 6.69344 6.255 6.19969C7.82375 4.59969 9.7425 3.79969 12.0125 3.79969C14.2812 3.79969 16.2091 4.59969 17.7944 6.19969C19.3962 7.78312 20.1969 9.71625 20.1969 12C20.1969 12.8459 20.09 13.6378 19.8778 14.3772L15.8075 12.5653Z" fill="#000">
-  </svg>
diff --git a/packages/mobile/src/screens/upload-screen/utils/computeLicenseIcons.ts b/packages/mobile/src/screens/upload-screen/utils/computeLicenseIcons.ts
index 3caa887df7..36b374cf0b 100644
--- a/packages/mobile/src/screens/upload-screen/utils/computeLicenseIcons.ts
+++ b/packages/mobile/src/screens/upload-screen/utils/computeLicenseIcons.ts
@@ -15,7 +15,7 @@ export const computeLicenseIcons = (
   derivativeWorks: Nullable<boolean>
 ) => {
   if (!allowAttribution) return null
-  const icons: [ComponentType<SvgProps>, string][] = [
+  const icons: [Icon: ComponentType<SvgProps>, key: string][] = [
     [IconCreativeCommons, 'cc'],
     [IconAllowAttribution, 'by']
   ]